make spacer utils responsive by grid tier

twbs · Oct 18, 2016 · fa0227f · fa0227f
1 parent 6d6538f
commit fa0227f
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss
@@ -10,25 +10,29 @@
   margin-left:  auto !important;
 }
 
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $lengths in $spacers {
-    $length-x:   map-get($lengths, x);
-    $length-y:   map-get($lengths, y);
-
-    .#{$abbrev}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
-    .#{$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; }
-
-    // Axes
-    .#{$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;
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @each $prop, $abbrev in (margin: m, padding: p) {
+    @each $size, $lengths in $spacers {
+      $length-x:   map-get($lengths, x);
+      $length-y:   map-get($lengths, y);
+
+      @include media-breakpoint-up($breakpoint) {
+        .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+        .#{$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; }
+
+        // Axes
+        .#{$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;
+        }
+      }
     }
   }
 }