Restructure Create Connection view for easier maintainability, fix weird padding issue
@import '../../../scss/colors';
.connections-view {
- //padding: 0;
-
.card-pf {
.card-pf-body {
.fa {
}
}
- &.create, &.edit {
- //background: $pf-black-200;
- //padding-top: 0;
+ ////////////////////////////////////////////////////////////////////////////////
+ // CREATE & EDIT OVERRIDES
+ // The Create and Edit Connection pages reuse and pull in the viewComponent as a
+ // selector/directive. The .create and .edit classes are applied to them under these conditions.
+ ////////////////////////////////////////////////////////////////////////////////
- .cards-pf .row-cards-pf:first-child {
- padding-top: 0;
- }
- .card-pf {
- //margin: 0;
- //padding: 0;
+ //----- Create & Edit Connection State Common Overrides the Connection List ----------------->>
- .card-pf-title {
- //padding: 0 10px;
- }
+ &.create, &.edit {
- .card-pf-body {
- //margin: 0;
- //padding: 0 0 100px 0;
- }
+ .cards-pf .row-cards-pf:first-child {
+ padding-top: 0;
}
.form {
- //background: #FFFFFF;
border-bottom: solid 1px $pf-black-200;
- //padding-bottom: 10px;
.form-horizontal {
float: left;
}
}
- // Create & Edit Specific Changes to the Connection List Toolbar
+ // Create & Edit Specific Deeper Overrides to the Connection List Toolbar
+ // As these are already nested as components/directives within the Connection List Component.
/deep/ .toolbar-pf {
- //padding: 15px 5px;
-
.toolbar-pf-actions {
- //margin-bottom: 0;
- //padding: 0 10px;
-
.search {
input {
font-style: italic;
// Create & Edit Specific Changes to the Connection List
/deep/ .connections-list {
- //background: $pf-black-200;
- //margin: 0 -20px;
- //padding: 20px;
-
.cards {
.card-pf.card-pf-view.card-pf-view-xs.card-pf-view-select.card-pf-view-single-select {
cursor: pointer !important;
}
- // Create Connection Only
+ //----- Create a Connection - Specific Overrides to the Connection List ----------------->>
&.create {
+ padding: 0;
+
.card-pf {
margin-bottom: 0;
}
+
+ .card-pf-body {
+ padding-bottom: 0;
+ }
+
+ /deep/ .connections-list {
+ &.container-cards-pf {
+ margin-top: 20px;
+ margin-bottom: 40px;
+ }
+ }
+
+ /deep/ .col-md-12 {
+ padding: 0;
+ }
+
+ /deep/ .row.toolbar-pf {
+ margin: 0 -10px;
+ padding: 0;
+
+ .toolbar-pf-actions {
+ margin-bottom: 0;
+ padding: 15px 0;
+ }
+ }
}
- // Configure Connection & Edit Only
+ //----- Edit & Configure a Connection - Specific Overrides to the Connection List ----------------->>
&.edit {
//padding-top: 20px;
}
- // View Connection Only
+ //----- View a Connection - Specific Overrides to the Connection List ----------------->>
&.view {
//background: $pf-black-200;
