Remove lots of duplication + minor cleanup (#21238)

* Remove comment that duplicated some code
* Use transition mixin whenever possible
* Create a new function to reduce duplication
* Use the new `breakpoint-infix` method

13 files changed, 94 insertions, 201 deletions

diff --git a/scss/_animation.scss b/scss/_animation.scss
index 4112468d04..2586bf2d16 100644
--- a/scss/_animation.scss
+++ b/scss/_animation.scss
@@ -1,9 +1,7 @@
 .fade {
   opacity: 0;
 
-  @if $enable-transitions {
-    transition: opacity .15s linear;
-  }
+  @include transition(opacity .15s linear);
 
   &.active {
     opacity: 1;
@@ -34,9 +32,5 @@ tbody {
   height: 0;
   overflow: hidden;
 
-  @if $enable-transitions {
-    transition-timing-function: ease;
-    transition-duration: .35s;
-    transition-property: height;
-  }
+  @include transition(height .35s ease);
 }
diff --git a/scss/_card.scss b/scss/_card.scss
index 23a5e07c72..c3b9315182 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -7,9 +7,8 @@
   display: block;
   margin-bottom: $card-spacer-y;
   background-color: $card-bg;
-  // border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
   border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
 }
 
 .card-block {
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 625ab1c8de..09f6ea73e0 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -11,7 +11,7 @@
   > .carousel-item {
     position: relative;
     display: none;
-    transition: .6s ease-in-out left;
+    @include transition(left .6s ease-in-out);
 
     // Account for jankitude on images
     > img,
@@ -22,7 +22,7 @@
 
     // CSS3 transforms when supported by the browser
     @include if-supports-3d-transforms() {
-      transition: transform .6s ease-in-out;
+      @include transition(transform .6s ease-in-out);
       backface-visibility: hidden;
       perspective: 1000px;
 
diff --git a/scss/_images.scss b/scss/_images.scss
index 2189f719f0..c7b95dec9d 100644
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -16,7 +16,7 @@
   background-color: $thumbnail-bg;
   border: $thumbnail-border-width solid $thumbnail-border-color;
   @include border-radius($thumbnail-border-radius);
-  transition: all .2s ease-in-out;
+  @include transition(all .2s ease-in-out);
   @include box-shadow($thumbnail-box-shadow);
 
   // Keep them at most 100% wide
diff --git a/scss/_modal.scss b/scss/_modal.scss
index c6f56637dd..85aef719b6 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -28,7 +28,7 @@
 
   // When fading in the modal, animate it to slide down
   &.fade .modal-dialog {
-    transition: transform .3s ease-out;
+    @include transition(transform .3s ease-out);
     transform: translate(0, -25%);
   }
   &.active .modal-dialog { transform: translate(0, 0); }
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index c6cc4e2fec..2715f1d09f 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -257,9 +257,8 @@
 .navbar-toggleable {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
-
-    // Get rid of the 'xs' prefix while reducing duplication
-    #{if(breakpoint-min($breakpoint, $grid-breakpoints), "&-#{$breakpoint}", "&")} {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    &#{$infix} {
       @include clearfix;
 
       @include media-breakpoint-down($breakpoint) {
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 5abe252666..178cfd5033 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -38,6 +38,17 @@
   @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
 }
 
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 544px, md: 768px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 544px, md: 768px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 6ea2e7882d..2df7b988ef 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -18,96 +18,53 @@
   }
 
   @each $breakpoint in map-keys($breakpoints) {
-    // Logic is a little reversed here: `breakpoint-min` returns false when it's the smallest breakpoint.
-    $min: not breakpoint-min($breakpoint, $breakpoints);
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     // Allow columns to stretch full width below their breakpoints
     @for $i from 1 through $columns {
-      @if $min {
-        .col-#{$i} {
-          @extend %grid-column;
-        }
-      } @else {
-        .col-#{$breakpoint}-#{$i} {
-          @extend %grid-column;
-        }
+      .col#{$infix}-#{$i} {
+        @extend %grid-column;
       }
     }
     @if $enable-flex {
-      @if $min {
-        .col {
-          @extend %grid-column;
-        }
-      } @else {
-        .col-#{$breakpoint} {
-          @extend %grid-column;
-        }
+      .col#{$infix} {
+        @extend %grid-column;
       }
     }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       @if $enable-flex {
-        @if $min {
-          .col {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-          }
-          .col-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-        } @else {
-          .col-#{$breakpoint} {
-            flex-basis: 0;
-            flex-grow: 1;
-            max-width: 100%;
-          }
-          .col-#{$breakpoint}-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
+        .col#{$infix} {
+          flex-basis: 0;
+          flex-grow: 1;
+          max-width: 100%;
+        }
+        .col#{$infix}-auto {
+          flex: 0 0 auto;
+          width: auto;
         }
       }
 
       @for $i from 1 through $columns {
-        @if $min {
-          .col-#{$i} {
-            @include make-col($i, $columns);
-          }
-        } @else {
-          .col-#{$breakpoint}-#{$i} {
-            @include make-col($i, $columns);
-          }
+        .col#{$infix}-#{$i} {
+          @include make-col($i, $columns);
         }
       }
 
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          @if $min {
-            .#{$modifier}-#{$i} {
-              @include make-col-modifier($modifier, $i, $columns)
-            }
-          } @else {
-            .#{$modifier}-#{$breakpoint}-#{$i} {
-              @include make-col-modifier($modifier, $i, $columns)
-            }
+          .#{$modifier}#{$infix}-#{$i} {
+            @include make-col-modifier($modifier, $i, $columns)
           }
         }
       }
 
       // `$columns - 1` because offsetting by the width of an entire row isn't possible
       @for $i from 0 through ($columns - 1) {
-        @if not $min or $i != 0 { // Avoid emitting useless .offset-xs-0
-          @if $min {
-            .offset-#{$i} {
-              @include make-col-modifier(offset, $i, $columns)
-            }
-          } @else {
-            .offset-#{$breakpoint}-#{$i} {
-              @include make-col-modifier(offset, $i, $columns)
-            }
+        @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
+          .offset#{$infix}-#{$i} {
+            @include make-col-modifier(offset, $i, $columns)
           }
         }
       }
diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 6325f72227..395e41c397 100644
--- a/scss/utilities/_display.scss
+++ b/scss/utilities/_display.scss
@@ -5,24 +5,14 @@
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @if $min {
-      .d-#{$breakpoint}-none         { display: none !important; }
-      .d-#{$breakpoint}-inline       { display: inline !important; }
-      .d-#{$breakpoint}-inline-block { display: inline-block !important; }
-      .d-#{$breakpoint}-block        { display: block !important; }
-      .d-#{$breakpoint}-table        { display: table !important; }
-      .d-#{$breakpoint}-table-cell   { display: table-cell !important; }
-      .d-#{$breakpoint}-flex         { display: flex !important; }
-    } @else {
-      .d-none         { display: none !important; }
-      .d-inline       { display: inline !important; }
-      .d-inline-block { display: inline-block !important; }
-      .d-block        { display: block !important; }
-      .d-table        { display: table !important; }
-      .d-table-cell   { display: table-cell !important; }
-      .d-flex         { display: flex !important; }
-    }
+    .d#{$infix}-none         { display: none !important; }
+    .d#{$infix}-inline       { display: inline !important; }
+    .d#{$infix}-inline-block { display: inline-block !important; }
+    .d#{$infix}-block        { display: block !important; }
+    .d#{$infix}-table        { display: table !important; }
+    .d#{$infix}-table-cell   { display: table-cell !important; }
+    .d#{$infix}-flex         { display: flex !important; }
   }
 }
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 6e3c39b8f7..c3efb9d71d 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -5,53 +5,29 @@
 @if $enable-flex {
   @each $breakpoint in map-keys($grid-breakpoints) {
     @include media-breakpoint-up($breakpoint) {
-      $min: breakpoint-min($breakpoint, $grid-breakpoints);
-
-      @if $min {
-        // Flex column reordering
-        .flex-#{$breakpoint}-first     { order: -1; }
-        .flex-#{$breakpoint}-last      { order: 1; }
-        .flex-#{$breakpoint}-unordered { order: 0; }
-
-        // Alignment for every item
-        .flex-items-#{$breakpoint}-top    { align-items: flex-start; }
-        .flex-items-#{$breakpoint}-middle { align-items: center; }
-        .flex-items-#{$breakpoint}-bottom { align-items: flex-end; }
-
-        // Alignment per item
-        .flex-#{$breakpoint}-top    { align-self: flex-start; }
-        .flex-#{$breakpoint}-middle { align-self: center; }
-        .flex-#{$breakpoint}-bottom { align-self: flex-end; }
-
-        // Horizontal alignment of item
-        .flex-items-#{$breakpoint}-left    { justify-content: flex-start; }
-        .flex-items-#{$breakpoint}-center  { justify-content: center; }
-        .flex-items-#{$breakpoint}-right   { justify-content: flex-end; }
-        .flex-items-#{$breakpoint}-around  { justify-content: space-around; }
-        .flex-items-#{$breakpoint}-between { justify-content: space-between; }
-      } @else {
-        // Flex column reordering
-        .flex-first     { order: -1; }
-        .flex-last      { order: 1; }
-        .flex-unordered { order: 0; }
-
-        // Alignment for every item
-        .flex-items-top    { align-items: flex-start; }
-        .flex-items-middle { align-items: center; }
-        .flex-items-bottom { align-items: flex-end; }
-
-        // Alignment per item
-        .flex-top    { align-self: flex-start; }
-        .flex-middle { align-self: center; }
-        .flex-bottom { align-self: flex-end; }
-
-        // Horizontal alignment of item
-        .flex-items-left    { justify-content: flex-start; }
-        .flex-items-center  { justify-content: center; }
-        .flex-items-right   { justify-content: flex-end; }
-        .flex-items-around  { justify-content: space-around; }
-        .flex-items-between { justify-content: space-between; }
-      }
+      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+      // Flex column reordering
+      .flex#{$infix}-first     { order: -1; }
+      .flex#{$infix}-last      { order: 1; }
+      .flex#{$infix}-unordered { order: 0; }
+
+      // Alignment for every item
+      .flex-items#{$infix}-top    { align-items: flex-start; }
+      .flex-items#{$infix}-middle { align-items: center; }
+      .flex-items#{$infix}-bottom { align-items: flex-end; }
+
+      // Alignment per item
+      .flex#{$infix}-top    { align-self: flex-start; }
+      .flex#{$infix}-middle { align-self: center; }
+      .flex#{$infix}-bottom { align-self: flex-end; }
+
+      // Horizontal alignment of item
+      .flex-items#{$infix}-left    { justify-content: flex-start; }
+      .flex-items#{$infix}-center  { justify-content: center; }
+      .flex-items#{$infix}-right   { justify-content: flex-end; }
+      .flex-items#{$infix}-around  { justify-content: space-around; }
+      .flex-items#{$infix}-between { justify-content: space-between; }
     }
   }
 }
diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss
index 5f8c2d5879..01655e9a52 100644
--- a/scss/utilities/_float.scss
+++ b/scss/utilities/_float.scss
@@ -1,17 +1,9 @@
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $min: breakpoint-min($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-    @if $min {
-      // everything else
-      .float-#{$breakpoint}-left  { @include float-left; }
-      .float-#{$breakpoint}-right { @include float-right; }
-      .float-#{$breakpoint}-none  { @include float-none; }
-    } @else {
-      // xs
-      .float-left  { @include float-left; }
-      .float-right { @include float-right; }
-      .float-none  { @include float-none; }
-    }
+    .float#{$infix}-left  { @include float-left; }
+    .float#{$infix}-right { @include float-right; }
+    .float#{$infix}-none  { @include float-none; }
   }
 }
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
index a845cf9ad8..a8d8e0afb5 100644
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -20,40 +20,21 @@
       $length-y:   map-get($lengths, y);
 
       @include media-breakpoint-up($breakpoint) {
-        $min: breakpoint-min($breakpoint, $grid-breakpoints);
-
-        @if $min {
-          // everything else
-          .#{$abbrev}-#{$breakpoint}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
-          .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top:    $length-y !important; }
-          .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right:  $length-x !important; }
-          .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; }
-          .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left:   $length-x !important; }
-          .#{$abbrev}x-#{$breakpoint}-#{$size} {
-            #{$prop}-right:  $length-x !important;
-            #{$prop}-left:   $length-x !important;
-          }
-          .#{$abbrev}y-#{$breakpoint}-#{$size} {
-            #{$prop}-top:    $length-y !important;
-            #{$prop}-bottom: $length-y !important;
-          }
-        } @else {
-          // xs
-          .#{$abbrev}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
-          .#{$abbrev}t-#{$size} { #{$prop}-top:    $length-y !important; }
-          .#{$abbrev}r-#{$size} { #{$prop}-right:  $length-x !important; }
-          .#{$abbrev}b-#{$size} { #{$prop}-bottom: $length-y !important; }
-          .#{$abbrev}l-#{$size} { #{$prop}-left:   $length-x !important; }
-          .#{$abbrev}x-#{$size} {
-            #{$prop}-right:  $length-x !important;
-            #{$prop}-left:   $length-x !important;
-          }
-          .#{$abbrev}y-#{$size} {
-            #{$prop}-top:    $length-y !important;
-            #{$prop}-bottom: $length-y !important;
-          }
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
+        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
+        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
+        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
+        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right:  $length-x !important;
+          #{$prop}-left:   $length-x !important;
+        }
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top:    $length-y !important;
+          #{$prop}-bottom: $length-y !important;
         }
-
       }
     }
   }
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index 75f694a853..4ac90533ac 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -12,17 +12,11 @@
 
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
-    $min: breakpoint-min($breakpoint, $grid-breakpoints);
-
-    @if $min {
-      .text-#{$breakpoint}-left   { text-align: left !important; }
-      .text-#{$breakpoint}-right  { text-align: right !important; }
-      .text-#{$breakpoint}-center { text-align: center !important; }
-    } @else {
-      .text-left   { text-align: left !important; }
-      .text-right  { text-align: right !important; }
-      .text-center { text-align: center !important; }
-    }
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
   }
 }