forms - added border left option | icon-bar added icon counts to mixins

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index dee3f4501ac88b0c3883cd978b57f1922d55e53b..03951db9722e25c53c9fd64d46104c26c1d90bcc 100644 (file)
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -239,12 +239,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to create postfix label styles
 // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default: false
-@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
+@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-#{$default-float}: none;
+    @if $border-left-hidden {
+      border-#{$default-float}: none;
+    }
 
     // Control the font color based on background brightness
     @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }

diff --git a/scss/foundation/components/_icon-bar.scss b/scss/foundation/components/_icon-bar.scss
index 199b3eefda9d6aece006f424cca957e8049c9988..6ca01dabaf4ca5ade0d7319cbfcc338fe765afc4 100644 (file)
--- a/scss/foundation/components/_icon-bar.scss
+++ b/scss/foundation/components/_icon-bar.scss
@@ -142,6 +142,7 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
 
       & + label {
         margin-top: .0625rem;
+        font-size: $font-size;
       }
     }
 
@@ -238,6 +239,107 @@ $icon-bar-disabled-cursor: $cursor-disabled-value !default;
     @include icon-bar-base();
     @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
     @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
+
+  // Counts
+
+  &.two-up {
+    .item { width: 50%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.three-up {
+    .item { width: 33.3333%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.four-up {
+    .item { width: 25%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.five-up {
+    .item { width: 20%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.six-up {
+    .item { width: 16.66667%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.seven-up {
+    .item { width: 14.28571%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
+  &.eight-up {
+    .item { width: 12.5%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
 }
 
 @include exports("icon-bar") {