responsive auto margin classes

4f855136 · Mark Otto · Mark Otto · f99d1796 · 4f855136
Commit 4f855136 authored 8 years ago by Mark Otto Committed by Mark Otto 8 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 13 additions and 8 deletions
+13 -8
--- a/scss/utilities/_spacing.scss
+++ b/scss/utilities/_spacing.scss
@@ -15,14 +15,6 @@

 // Margin and Padding

-.mx-auto {
-  margin-right: auto !important;
-  margin-left:  auto !important;
-}
-
-.mr-auto { margin-right: auto !important; }
-.ml-auto { margin-left: auto !important; }
-
 @each $breakpoint in map-keys($grid-breakpoints) {
  @each $prop, $abbrev in (margin: m, padding: p) {
    @each $size, $lengths in $spacers {
@@ -48,6 +40,19 @@
      }
    }
  }
+
+  // Some special margin utils
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+      margin-left:  auto !important;
+    }
+    .mt#{$infix}-auto { margin-top: auto !important; }
+    .mr#{$infix}-auto { margin-right: auto !important; }
+    .mb#{$infix}-auto { margin-bottom: auto !important; }
+    .ml#{$infix}-auto { margin-left: auto !important; }
+  }
 }

 // Positioning