Refactor a few selectors. (#24404)

1. move a couple of them before the more specific ones. 2. change nesting to be under the same parent selector 3. use the ampersand more
twbs · Oct 22, 2017 · 52d99a8 · 52d99a8
1 parent 29d58fb
commit 52d99a8
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 129 deletions.
diff --git a/assets/scss/_component-examples.scss b/assets/scss/_component-examples.scss
@@ -5,10 +5,6 @@
 //
 
 .bd-example-row {
-  .row + .row {
-    margin-top: 1rem;
-  }
-
   .row {
     > .col,
     > [class^="col-"] {
@@ -19,6 +15,10 @@
     }
   }
 
+  .row + .row {
+    margin-top: 1rem;
+  }
+
   .flex-items-top,
   .flex-items-middle,
   .flex-items-bottom {
@@ -170,31 +170,37 @@
   > .form-group:last-child {
     margin-bottom: 0;
   }
-}
 
-.bd-example > .close {
-  float: none;
+  > .close {
+    float: none;
+  }
 }
 
 // Typography
-.bd-example-type .table .type-info {
-  color: #999;
-  vertical-align: middle;
-}
-.bd-example-type .table td {
-  padding: 1rem 0;
-  border-color: #eee;
-}
-.bd-example-type .table tr:first-child td {
-  border-top: 0;
-}
-.bd-example-type h1,
-.bd-example-type h2,
-.bd-example-type h3,
-.bd-example-type h4,
-.bd-example-type h5,
-.bd-example-type h6 {
-  margin: 0;
+.bd-example-type {
+  .table {
+    .type-info {
+      color: #999;
+      vertical-align: middle;
+    }
+    td {
+      padding: 1rem 0;
+      border-color: #eee;
+    }
+    tr:first-child td {
+      border-top: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }
 
 // Contextual background colors
@@ -210,12 +216,14 @@
 }
 
 // Buttons
-.bd-example > .btn-group {
-  margin-top: .25rem;
-  margin-bottom: .25rem;
-}
-.bd-example > .btn-toolbar + .btn-toolbar {
-  margin-top: .5rem;
+.bd-example {
+  > .btn-group {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
 }
 
 // Forms
@@ -265,6 +273,19 @@
 }
 
 // Example modals
+.modal {
+  z-index: 1072;
+
+  .tooltip,
+  .popover {
+    z-index: 1073;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
 .bd-example-modal {
   background-color: #fafafa;
 
@@ -285,20 +306,6 @@
   }
 }
 
-.modal {
-  z-index: 1072;
-
-  .tooltip,
-  .popover {
-    z-index: 1073;
-  }
-}
-
-.modal-backdrop {
-  z-index: 1071;
-}
-
-
 // Example tabbable tabs
 .bd-example-tabs .nav-tabs {
   margin-bottom: 1rem;
@@ -307,10 +314,11 @@
 // Tooltips
 .bd-example-tooltips {
   text-align: center;
-}
-.bd-example-tooltips > .btn {
-  margin-top: .25rem;
-  margin-bottom: .25rem;
+
+  > .btn {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
 }
 .bs-tooltip-top-docs,
 .bs-tooltip-bottom-docs {
@@ -329,13 +337,14 @@
 .bd-example-popover-static {
   padding-bottom: 1.5rem;
   background-color: #f9f9f9;
-}
-.bd-example-popover-static .popover {
-  position: relative;
-  display: block;
-  float: left;
-  width: 260px;
-  margin: 1.25rem;
+
+  .popover {
+    position: relative;
+    display: block;
+    float: left;
+    width: 260px;
+    margin: 1.25rem;
+  }
 }
 .bs-popover-top-docs,
 .bs-popover-bottom-docs {
@@ -413,14 +422,16 @@
   }
 }
 
-.highlight pre {
-  padding: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-color: transparent;
-  border: 0;
-}
-.highlight pre code {
-  font-size: inherit;
-  color: $gray-900; // Effectively the base text color
+.highlight {
+  pre {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+    border: 0;
+  }
+  pre code {
+    font-size: inherit;
+    color: $gray-900; // Effectively the base text color
+  }
 }
diff --git a/scss/_button-group.scss b/scss/_button-group.scss
@@ -43,47 +43,50 @@
   }
 }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-  border-radius: 0;
-}
+.btn-group {
+  > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+    border-radius: 0;
+  }
 
-// Set corners individual because sometimes a single button can be in a .btn-group
-// and we need :first-child and :last-child to both match
-.btn-group > .btn:first-child {
-  margin-left: 0;
+  // Set corners individual because sometimes a single button can be in a .btn-group
+  // and we need :first-child and :last-child to both match
+  > .btn:first-child {
+    margin-left: 0;
 
-  &:not(:last-child):not(.dropdown-toggle) {
-    @include border-right-radius(0);
+    &:not(:last-child):not(.dropdown-toggle) {
+      @include border-right-radius(0);
+    }
   }
-}
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
-// immediately after it
-.btn-group > .btn:last-child:not(:first-child),
-.btn-group > .dropdown-toggle:not(:first-child) {
-  @include border-left-radius(0);
-}
 
-// Custom edits for including btn-groups within btn-groups (useful for including
-// dropdown buttons within a btn-group)
-.btn-group > .btn-group {
-  float: left;
-}
 
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
+  // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
+  // immediately after it
+  > .btn:last-child:not(:first-child),
+  > .dropdown-toggle:not(:first-child) {
+    @include border-left-radius(0);
+  }
 
-.btn-group > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
-    @include border-right-radius(0);
+  // Custom edits for including btn-groups within btn-groups (useful for including
+  // dropdown buttons within a btn-group)
+  > .btn-group {
+    float: left;
   }
-}
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-left-radius(0);
-}
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
+    border-radius: 0;
+  }
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-right-radius(0);
+    }
+  }
 
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
+    @include border-left-radius(0);
+  }
+}
 
 // Sizing
 //

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
@@ -119,11 +119,11 @@ fieldset[disabled] a.btn {
 .btn-block {
   display: block;
   width: 100%;
-}
 
-// Vertically space out multiple block buttons
-.btn-block + .btn-block {
-  margin-top: $btn-block-spacing-y;
+  // Vertically space out multiple block buttons
+  + .btn-block {
+    margin-top: $btn-block-spacing-y;
+  }
 }
 
 // Specificity overrides

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -26,16 +26,10 @@
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
 
-  // When fading in the modal, animate it to slide down
-  &.fade .modal-dialog {
-    @include transition($modal-transition);
-    transform: translate(0, -25%);
+  .modal-open & {
+    overflow-x: hidden;
+    overflow-y: auto;
   }
-  &.show .modal-dialog { transform: translate(0, 0); }
-}
-.modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 // Shell div to position the modal with bottom padding
@@ -45,6 +39,15 @@
   margin: $modal-dialog-margin;
   // allow clicks to pass through for custom click handling to close modal
   pointer-events: none;
+
+  // When fading in the modal, animate it to slide down
+  .modal.fade & {
+    @include transition($modal-transition);
+    transform: translate(0, -25%);
+  }
+  .modal.show & {
+    transform: translate(0, 0);
+  }
 }
 
 // Actual modal

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
@@ -4,6 +4,24 @@
   @include border-radius();
 }
 
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  @include hover-focus {
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+}
+
 .page-item {
   &:first-child {
     .page-link {
@@ -32,24 +50,6 @@
   }
 }
 
-.page-link {
-  position: relative;
-  display: block;
-  padding: $pagination-padding-y $pagination-padding-x;
-  margin-left: -$pagination-border-width;
-  line-height: $pagination-line-height;
-  color: $pagination-color;
-  background-color: $pagination-bg;
-  border: $pagination-border-width solid $pagination-border-color;
-
-  @include hover-focus {
-    color: $pagination-hover-color;
-    text-decoration: none;
-    background-color: $pagination-hover-bg;
-    border-color: $pagination-hover-border-color;
-  }
-}
-
 
 //
 // Sizing