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

4 files changed, 69 insertions, 63 deletions

diff --git a/scss/_button-group.scss b/scss/_button-group.scss
index ae758cf195..12d4982aab 100644
--- 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
index 7cd27830b5..16a478e104 100644
--- 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
index e655850e38..5fabc83f46 100644
--- 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
index 6e83cf676f..97977f46d5 100644
--- 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