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

5 files changed, 54 insertions, 121 deletions

diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss
index 6325f7222..395e41c39 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 6e3c39b8f..c3efb9d71 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 5f8c2d587..01655e9a5 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 a845cf9ad..a8d8e0afb 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 75f694a85..4ac90533a 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; }
   }
 }