add spacing, text color utility classes

robyth · May 11, 2016 · fcf9893 · fcf9893
1 parent fc1a8c0
commit fcf9893
Showing 1 changed file with 90 additions and 13 deletions.
diff --git a/src/scss/components/_utilities.scss b/src/scss/components/_utilities.scss
@@ -23,7 +23,7 @@
   }
 }
 
-// Margin & Paddings
+// Margin & Padding
 // -----------------------------------------------------------------------------
 $am-spaces: (
   0: 0,
@@ -33,25 +33,93 @@ $am-spaces: (
   lg: rem-calc(20),
   xl: rem-calc(32),
 ) !default;
+$am-dimensions: (null, h, v, top, right, bottom, left) !default;
 
-@each $space-key, $space-value in $am-spaces {
-  $padding-selector: 'padding';
-  $margin-selector: 'margin';
-  @if $space-key != 'default' {
-    $padding-selector: $padding-selector + '-' + $space-key;
-  };
+@mixin makeSpacings($dimension: null) {
+  @each $space-key, $space-value in $am-spaces {
+    $padding-selector: 'padding';
+    $margin-selector: 'margin';
+    $dash: '';
 
-  @if $space-key == 'default' {
-    .#{$namespace}#{$padding-selector} {
-      padding: $space-value !important;
+    @if $dimension {
+      $dash: '-' + $dimension;
     }
 
-    .#{$namespace}#{$margin-selector} {
-      margin: $space-value !important;
+    @if $space-key != 'default' {
+      $dash: $dash + '-' + $space-key;
+    }
+
+    $padding-selector: $padding-selector + $dash;
+    $margin-selector: $margin-selector + $dash;
+
+    // horizontal spacing
+    @if $dimension == h {
+      .#{$namespace}#{$padding-selector} {
+        padding-left: $space-value !important;
+        padding-right: $space-value !important;
+      }
+
+      .#{$namespace}#{$margin-selector} {
+        margin-left: $space-value !important;
+        margin-right: $space-value !important;
+      }
+      // vertical spacing
+    } @else if $dimension == v {
+      .#{$namespace}#{$padding-selector} {
+        padding-top: $space-value !important;
+        padding-bottom: $space-value !important;
+      }
+
+      .#{$namespace}#{$margin-selector} {
+        margin-top: $space-value !important;
+        margin-bottom: $space-value !important;
+      }
+    } @else {
+      $paddingProperty: 'padding';
+      $marginProperty: 'margin';
+
+      @if $dimension {
+        $paddingProperty: $paddingProperty + '-' + $dimension;
+        $marginProperty: $marginProperty + '-' + $dimension;
+      }
+
+      .#{$namespace}#{$padding-selector} {
+        #{$paddingProperty}: $space-value !important;
+      }
+
+      .#{$namespace}#{$margin-selector} {
+        #{$marginProperty}: $space-value !important;
+      }
+    }
+  }
+}
+
+@each $dimension in $am-dimensions {
+  @include makeSpacings($dimension);
+}
+
+// Alignment
+// -----------------------------------------------------------------------------
+// Vertical alignment
+.#{$namespace}align-v {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  $align-values: (
+    'top': flex-start,
+    'center': center,
+    'bottom': flex-end,
+  );
+
+  @each $orient in (top, center, bottom) {
+    .#{$namespace}align-#{$orient} {
+      align-self: map-get($align-values, $orient);
     }
   }
 }
 
+
 // Text helpers
 // -----------------------------------------------------------------------------
 %text-truncate {
@@ -69,8 +137,17 @@ $am-spaces: (
   }
 }
 
+// Text colors
+@each $key, $color in $am-colors {
+  @if $key != dark {
+    .#{$namespace}text-#{$key} {
+      color: $color !important;
+    }
+  }
+}
+
 // CSS transition helpers
-// Useb by CollapseMixin
+// Used by CollapseMixin
 // -----------------------------------------------------------------------------
 .#{$namespace}fade {
   opacity: 0;