Grid: add small and large gutter modifiers

getchopstick · Jan 27, 2016 · 790945c · 790945c
1 parent 60c11ee
commit 790945c
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/_objects.grid.scss b/_objects.grid.scss
@@ -34,6 +34,14 @@ $grid-gutter    : $columns-gutter !default;
     @include margin-lr(-($grid-gutter),-($grid-gutter));
 }
 
+.o-grid--gutter-sm {
+    @include margin-lr(-($grid-gutter/2),-($grid-gutter/2));
+}
+
+.o-grid--gutter-lg {
+    @include margin-lr(-($grid-gutter*2),-($grid-gutter*2));
+}
+
     // Grid item, takes the full width by default
 
     .o-grid__item {
@@ -43,4 +51,12 @@ $grid-gutter    : $columns-gutter !default;
         .o-grid--gutter > & {
             @include padding-lr($grid-gutter,$grid-gutter);
         }
+
+        .o-grid--gutter-sm > & {
+            @include padding-lr($grid-gutter/2,$grid-gutter/2);
+        }
+
+        .o-grid--gutter-lg > & {
+            @include padding-lr($grid-gutter*2,$grid-gutter*2);
+        }
     }