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

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 {
+  > .close {
     float: none;
   }
+}
 
 // Typography
-.bd-example-type .table .type-info {
+.bd-example-type {
+  .table {
+    .type-info {
       color: #999;
       vertical-align: middle;
     }
-.bd-example-type .table td {
+    td {
       padding: 1rem 0;
       border-color: #eee;
     }
-.bd-example-type .table tr:first-child td {
+    tr:first-child td {
       border-top: 0;
     }
-.bd-example-type h1,
+  }
-.bd-example-type h2,
+
-.bd-example-type h3,
+  h1,
-.bd-example-type h4,
+  h2,
-.bd-example-type h5,
+  h3,
-.bd-example-type h6 {
+  h4,
-  margin: 0;
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 }
 
 // Contextual background colors
@@ -210,13 +216,15 @@
 }
 
 // Buttons
-.bd-example > .btn-group {
+.bd-example {
+  > .btn-group {
     margin-top: .25rem;
     margin-bottom: .25rem;
   }
-.bd-example > .btn-toolbar + .btn-toolbar {
+  > .btn-toolbar + .btn-toolbar {
     margin-top: .5rem;
   }
+}
 
 // Forms
 .bd-example-control-sizing select,
@@ -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,11 +314,12 @@
 // Tooltips
 .bd-example-tooltips {
   text-align: center;
-}
+
-.bd-example-tooltips > .btn {
+  > .btn {
     margin-top: .25rem;
     margin-bottom: .25rem;
   }
+}
 .bs-tooltip-top-docs,
 .bs-tooltip-bottom-docs {
   .arrow {
@@ -329,14 +337,15 @@
 .bd-example-popover-static {
   padding-bottom: 1.5rem;
   background-color: #f9f9f9;
-}
+
-.bd-example-popover-static .popover {
+  .popover {
     position: relative;
     display: block;
     float: left;
     width: 260px;
     margin: 1.25rem;
   }
+}
 .bs-popover-top-docs,
 .bs-popover-bottom-docs {
   .arrow {
@@ -413,14 +422,16 @@
   }
 }
 
-.highlight pre {
+.highlight {
+  pre {
     padding: 0;
     margin-top: 0;
     margin-bottom: 0;
     background-color: transparent;
     border: 0;
   }
-.highlight pre code {
+  pre code {
     font-size: inherit;
     color: $gray-900; // Effectively the base text color
   }
+}

scss/_button-group.scss

@@ -43,47 +43,50 @@
   }
 }
 
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+.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 {
+  > .btn:first-child {
     margin-left: 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:last-child:not(:first-child),
-.btn-group > .dropdown-toggle:not(:first-child) {
+  > .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 {
+  > .btn-group {
     float: left;
   }
 
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
     border-radius: 0;
   }
 
-.btn-group > .btn-group:first-child:not(:last-child) {
+  > .btn-group:first-child:not(:last-child) {
     > .btn:last-child,
     > .dropdown-toggle {
       @include border-right-radius(0);
     }
   }
 
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
     @include border-left-radius(0);
   }
-
+}
 
 // Sizing
 //

scss/_buttons.scss

@@ -119,12 +119,12 @@ fieldset[disabled] a.btn {
 .btn-block {
   display: block;
   width: 100%;
-}
 
   // Vertically space out multiple block buttons
-.btn-block + .btn-block {
+  + .btn-block {
     margin-top: $btn-block-spacing-y;
   }
+}
 
 // Specificity overrides
 input[type="submit"],

scss/_modal.scss

@@ -26,17 +26,11 @@
   // 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
+  .modal-open & {
-  &.fade .modal-dialog {
-    @include transition($modal-transition);
-    transform: translate(0, -25%);
-  }
-  &.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
 .modal-dialog {
@@ -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

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