foundation update

README.md

@@ -30,6 +30,10 @@ Thanks!
 
 #### Changelog
 
+##### 1.2.1 (14.12.2014)
+
+- Foundation update (5.5.0)
+
 ##### 1.2.0 (20.11.2014)
 
 - remove NiceScroll

assets/scss/_foundation-settings.scss

@@ -318,14 +318,14 @@ $include-html-global-classes: $include-html-classes;
 // $include-html-accordion-classes: $include-html-classes;
 
 // $accordion-navigation-padding: rem-calc(16);
-// $accordion-navigation-bg-color: $silver  ;
+// $accordion-navigation-bg-color: $silver;
 // $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
 // $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
 // $accordion-navigation-font-color: $jet;
 // $accordion-navigation-font-size: rem-calc(16);
 // $accordion-navigation-font-family: $body-font-family;
 
-// $accordion-content-padding: $column-gutter/2;
+// $accordion-content-padding: ($column-gutter/2);
 // $accordion-content-active-bg-color: $white;
 
 // 02. Alert Boxes
@@ -545,7 +545,7 @@ $include-html-global-classes: $include-html-classes;
 // $f-dropdown-font-size: rem-calc(14);
 // $f-dropdown-list-padding: rem-calc(5, 10);
 // $f-dropdown-line-height: rem-calc(18);
-// $f-dropdown-list-hover-bg: $smoke  ;
+// $f-dropdown-list-hover-bg: $smoke;
 // $dropdown-mobile-default-float: 0;
 
 // We use this to control the styles for when the dropdown has custom content.
@@ -573,25 +573,25 @@ $include-html-global-classes: $include-html-classes;
 // $dropdown-button-padding-tny: $button-pip-tny * 7;
 // $dropdown-button-pip-size-tny: $button-pip-tny;
 // $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
-// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
+// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
 
 // We use these to style small dropdown buttons
 // $dropdown-button-padding-sml: $button-pip-sml * 7;
 // $dropdown-button-pip-size-sml: $button-pip-sml;
 // $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
-// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
+// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
 
 // We use these to style medium dropdown buttons
 // $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
 // $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
 // $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
-// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
+// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
 
 // We use these to style large dropdown buttons
 // $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
 // $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
 // $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
-// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
+// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
 
 // 10. Flex Video
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -667,6 +667,7 @@ $include-html-global-classes: $include-html-classes;
 // $input-error-message-font-weight: $font-weight-normal;
 // $input-error-message-font-style: italic;
 // $input-error-message-font-color: $white;
+// $input-error-message-bg-color: $alert-color;
 // $input-error-message-font-color-alt: $oil;
 
 // We use this to style the glowing effect of inputs when focused
@@ -685,9 +686,11 @@ $include-html-global-classes: $include-html-classes;
 // $include-html-icon-bar-classes: $include-html-classes;
 // $icon-bar-bg: $oil;
 // $icon-bar-font-color: $white;
+// $icon-bar-font-color-hover: $icon-bar-font-color;
 // $icon-bar-font-size: 1rem;
 // $icon-bar-hover-color: $primary-color;
 // $icon-bar-icon-color: $white;
+// $icon-bar-icon-color-hover: $icon-bar-icon-color;
 // $icon-bar-icon-size: 1.875rem;
 // $icon-bar-image-width: 1.875rem;
 // $icon-bar-image-height: 1.875rem;
@@ -991,7 +994,7 @@ $include-html-global-classes: $include-html-classes;
 // $price-title-font-family: $body-font-family;
 
 // We use these to control the price styles
-// $price-money-bg: $vapor  ;
+// $price-money-bg: $vapor;
 // $price-money-padding: rem-calc(15 20);
 // $price-money-align: center;
 // $price-money-color: $oil;
@@ -1268,7 +1271,7 @@ $include-html-global-classes: $include-html-classes;
 
 // These control the background color for the table and even rows
 // $table-bg: $white;
-// $table-even-row-bg: $snow  ;
+// $table-even-row-bg: $snow;
 
 // These control the table cell border style
 // $table-border-style: solid;
@@ -1308,7 +1311,7 @@ $include-html-global-classes: $include-html-classes;
 // $tabs-navigation-font-family: $body-font-family;
 
 // $tabs-content-margin-bottom: rem-calc(24);
-// $tabs-content-padding: $column-gutter/2;
+// $tabs-content-padding: ($column-gutter/2);
 
 // $tabs-vertical-navigation-margin-bottom: 1.25rem;
 
@@ -1365,7 +1368,7 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-bg: $topbar-bg-color;
 
 // Height and margin
-// $topbar-height: 45px;
+// $topbar-height: rem-calc(45);
 // $topbar-margin-bottom: 0;
 
 // Controlling the styles for the title in the top bar
@@ -1376,6 +1379,7 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-dropdown-bg: $oil;
 // $topbar-dropdown-link-color: $white;
 // $topbar-dropdown-link-bg: $oil;
+// $topbar-dropdown-link-bg-hover: $oil;
 // $topbar-dropdown-link-weight: $font-weight-normal;
 // $topbar-dropdown-toggle-size: 5px;
 // $topbar-dropdown-toggle-color: $white;
@@ -1391,12 +1395,12 @@ $include-html-global-classes: $include-html-classes;
 // $topbar-link-hover-lightness: -10%; // Darken by 10%
 // $topbar-link-bg: $topbar-bg;
 // $topbar-link-bg-color-hover: $charcoal;
-// $topbar-link-bg-hover: #272727;
+// $topbar-link-bg-hover: $oil;
 // $topbar-link-bg-active: $primary-color;
 // $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
 // $topbar-link-font-family: $body-font-family;
 // $topbar-link-text-transform: none;
-// $topbar-link-padding: $topbar-height / 3;
+// $topbar-link-padding: ($topbar-height / 3);
 // $topbar-back-link-size: $h5-font-size;
 // $topbar-link-dropdown-padding: 20px;
 

assets/scss/foundation/_functions.scss

@@ -9,9 +9,12 @@ $rem-base: 16px !default;
 // We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
 $modules: () !default;
 @mixin exports($name) {
+  // Import from global scope
+  $modules: $modules !global;
+  // Check if a module is already on the list
   $module_index: index($modules, $name);
   @if (($module_index == null) or ($module_index == false)) {
-    $modules: append($modules, $name);
+    $modules: append($modules, $name) !global;
     @content;
   }
 }
@@ -43,6 +46,47 @@ $modules: () !default;
   @return $num / ($num * 0 + 1);
 }
 
+// TEXT INPUT TYPES
+
+@function text-inputs( $types: all, $selector: input ) {
+
+    $return: ();
+
+    $all-text-input-types:
+      text
+      password
+      date
+      datetime
+      datetime-local
+      month
+      week
+      email
+      number
+      search
+      tel
+      time
+      url
+      color
+      textarea;
+
+    @if $types == all { $types: $all-text-input-types; }
+
+    @each $type in $types {
+        @if $type == textarea {
+            @if $selector == input {
+              $return: append($return, unquote('#{$type}'), comma)
+            } @else {
+              $return: append($return, unquote('#{$type}#{$selector}'), comma)
+            }
+        } @else {
+            $return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
+        }
+    }
+
+    @return $return;
+
+}
+
 // CONVERT TO REM
 @function convert-to-rem($value, $base-value: $rem-base)  {
   $value: strip-unit($value) / strip-unit($base-value) * 1rem;

assets/scss/foundation/components/_accordion.scss

@@ -18,7 +18,7 @@ $accordion-navigation-font-color: $jet !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
 
-$accordion-content-padding: $column-gutter/2 !default;
+$accordion-content-padding: ($column-gutter/2) !default;
 $accordion-content-active-bg-color: $white !default;
 
 

assets/scss/foundation/components/_button-groups.scss

@@ -66,7 +66,7 @@ $button-group-border-width: 1px !default;
     > button, .button {
       border-top: $button-group-border-width solid;
       border-color: rgba(255, 255, 255, 0.5);
-      border-left-width: 0px;
+      border-left-width: 0;
       margin:0;
       display: block;
     }

assets/scss/foundation/components/_buttons.scss

@@ -34,7 +34,7 @@ $button-font-align: center !default;
 $button-function-factor: -20% !default;
 
 // We use these to control button border styles.
-$button-border-width: 0px !default;
+$button-border-width: 0 !default;
 $button-border-style: solid !default;
 $button-bg-color: $primary-color !default;
 $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
@@ -80,7 +80,7 @@ $button-disabled-cursor: $cursor-default-value !default;
     text-decoration: none;
     text-align: $button-font-align;
     -webkit-appearance: none;
-    -webkit-border-radius:0;
+    border-radius:0;
   }
   @if $display { display: $display; }
 }
@@ -133,7 +133,7 @@ $button-disabled-cursor: $cursor-default-value !default;
 //
 // We use this mixin to add button color styles
 //
-// $bg - Primary color set in settings file. Default: $button-bg.
+// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
 // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
 // $bg-hover - Button Hover Background Color. Default: $button-bg-hover

assets/scss/foundation/components/_dropdown-buttons.scss

@@ -22,25 +22,25 @@ $button-pip-lrg: rem-calc(11) !default;
 $dropdown-button-padding-tny: $button-pip-tny * 7 !default;
 $dropdown-button-pip-size-tny: $button-pip-tny !default;
 $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
-$dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
 
 // We use these to style small dropdown buttons
 $dropdown-button-padding-sml: $button-pip-sml * 7 !default;
 $dropdown-button-pip-size-sml: $button-pip-sml !default;
 $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
-$dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
 
 // We use these to style medium dropdown buttons
 $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
 $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
 $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
-$dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default;
+$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
 
 // We use these to style large dropdown buttons
 $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
 $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
 $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
-$dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
+$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
 
 // @mixins
 //

assets/scss/foundation/components/_forms.scss

@@ -67,6 +67,7 @@ $input-error-message-font-size: rem-calc(12) !default;
 $input-error-message-font-weight: $font-weight-normal !default;
 $input-error-message-font-style: italic !default;
 $input-error-message-font-color: $white !default;
+$input-error-message-bg-color: $alert-color !default;
 $input-error-message-font-color-alt: $oil !default;
 
 // We use this to style the glowing effect of inputs when focused
@@ -86,7 +87,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   .row { margin: 0 ((-$form-spacing) / 2);
 
     .column,
-    .columns { padding: 0 $form-spacing / 2; }
+    .columns { padding: 0 ($form-spacing / 2); }
 
     // Use this to collapse the margins of a form row
     &.collapse { margin: 0;
@@ -102,7 +103,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   input.column,
   input.columns,
   textarea.column,
-  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
+  textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
 }
 
 // @MIXIN
@@ -224,7 +225,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: rem-calc(34);
     border: none;
   }
 
@@ -257,7 +257,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    line-height: rem-calc(34);
     border: none;
   }
 
@@ -304,7 +303,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 //
 // We use this mixin to create error message styles
 // $bg - Default: $alert-color (Found in settings file)
-@mixin form-error-message($bg:$alert-color) {
+@mixin form-error-message($bg:$input-error-message-bg-color) {
   display: block;
   padding: $input-error-message-padding;
   margin-top: $input-error-message-top;
@@ -323,7 +322,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 // We use this mixin to style select elements
 @mixin form-select  {
   -webkit-appearance: none !important;
-  -webkit-border-radius: 0px;
+  border-radius: 0;
   background-color: $select-bg-color;
 
   // Hide the dropdown arrow shown in newer IE versions
@@ -331,7 +330,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     display: none;
   }
 
-  // The custom arrow have some fake horizontal padding so we can align it
+  // The custom arrow has some fake horizontal padding so we can align it
   // from the right side of the element without relying on CSS3
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
 
@@ -344,7 +343,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     width: $input-border-width;
     color: $input-border-color;
   }
-  padding: $form-spacing / 2;
+  padding: ($form-spacing / 2);
   font-size: $input-font-size;
   font-family: $body-font-family;
   color: $input-font-color;
@@ -411,23 +410,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     span.postfix,label.postfix { @include postfix(); }
 
     /* We use this to get basic styling on all basic form elements */
-    input[type="text"],
+    #{text-inputs(all, 'input')} {
-    input[type="password"],
-    input[type="date"],
-    input[type="datetime"],
-    input[type="datetime-local"],
-    input[type="month"],
-    input[type="week"],
-    input[type="email"],
-    input[type="number"],
-    input[type="search"],
-    input[type="tel"],
-    input[type="time"],
-    input[type="url"],
-    input[type="color"],
-    textarea {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      border-radius: 0;
       @include form-element;
       @if $input-include-glowing-effect == false {
           @include single-transition(all, 0.15s, linear);
@@ -468,7 +453,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     input[type="submit"] {
       -webkit-appearance: none;
-      -webkit-border-radius: 0px;
+      border-radius: 0;
     }
 
     /* Respect enforced amount of rows for textarea */

assets/scss/foundation/components/_global.scss

@@ -138,7 +138,7 @@ $base-line-height: 1.5 !default;
       }
       @else {
         top: 50%;
-        margin-top: -$width/2;
+        margin-top: (-$width/2);
       }
       @if $left {
         left: $left;
@@ -154,14 +154,14 @@ $base-line-height: 1.5 !default;
     }
 
     box-shadow:
-      0 0px 0 $thickness $color,
+      0 0 0 $thickness $color,
       0 $gap + $thickness 0 $thickness $color,
       0 (2 * $gap + 2*$thickness) 0 $thickness $color;
     width: $width;
   }
   span:hover:after {
     box-shadow:
-      0 0px 0 $thickness $hover-color,
+      0 0 0 $thickness $hover-color,
       0 $gap + $thickness 0 $thickness $hover-color,
       0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
   }
@@ -296,7 +296,7 @@ $include-html-global-classes: $include-html-classes !default;
 $column-gutter: rem-calc(30) !default;
 
 // Media Query Ranges
-$small-range: (0em, 40em) !default;
+$small-range: (0, 40em) !default;
 $medium-range: (40.063em, 64em) !default;
 $large-range: (64.063em, 90em) !default;
 $xlarge-range: (90.063em, 120em) !default;
@@ -345,7 +345,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.4.7/";
+    font-family: "/5.5.0/";
   }
 
   meta.foundation-mq-small {
@@ -353,21 +353,41 @@ $cursor-text-value: text !default;
     width: lower-bound($small-range);
   }
 
+  meta.foundation-mq-small-only {
+    font-family: "/" + unquote($small-only) + "/";
+    width: lower-bound($small-range);
+  }
+
   meta.foundation-mq-medium {
     font-family: "/" + unquote($medium-up) + "/";
     width: lower-bound($medium-range);
   }
 
+  meta.foundation-mq-medium-only {
+    font-family: "/" + unquote($medium-only) + "/";
+    width: lower-bound($medium-range);
+  }
+
   meta.foundation-mq-large {
     font-family: "/" + unquote($large-up) + "/";
     width: lower-bound($large-range);
   }
 
+  meta.foundation-mq-large-only {
+    font-family: "/" + unquote($large-only) + "/";
+    width: lower-bound($large-range);
+  }
+
   meta.foundation-mq-xlarge {
     font-family: "/" + unquote($xlarge-up) + "/";
     width: lower-bound($xlarge-range);
   }
 
+  meta.foundation-mq-xlarge-only {
+    font-family: "/" + unquote($xlarge-only) + "/";
+    width: lower-bound($xlarge-range);
+  }
+
   meta.foundation-mq-xxlarge {
     font-family: "/" + unquote($xxlarge-up) + "/";
     width: lower-bound($xxlarge-range);

assets/scss/foundation/components/_grid.scss

@@ -116,8 +116,8 @@ $last-child-float: $opposite-direction !default;
   // Gutter padding whenever a column isn't set to collapse
   // (use $collapse:null to do nothing)
   @else if $collapse == false {
-    padding-left: $column-gutter / 2;
+    padding-left: ($column-gutter / 2);
-    padding-right: $column-gutter / 2;
+    padding-right: ($column-gutter / 2);
   }
 
   // If a column number is given, calculate width
@@ -172,11 +172,10 @@ $last-child-float: $opposite-direction !default;
     .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
-
-
   @for $i from 0 through $total-columns - 1 {
     .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
   }
+
   .#{$size}-reset-order {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
@@ -211,6 +210,21 @@ $last-child-float: $opposite-direction !default;
   .columns.#{$size}-uncentered.opposite {
     float: $opposite-direction;
   }
+
+	.row {
+		&.#{$size}-collapse {
+			> .column,
+			> .columns { @include grid-column($collapse:true, $float:false); }
+
+			.row {margin-left:0; margin-right:0;}
+		}
+		&.#{$size}-uncollapse {
+			> .column,
+			> .columns {
+				@include grid-column;
+			}
+		}
+	}
 }
 
 @include exports("grid") {

assets/scss/foundation/components/_icon-bar.scss

@@ -15,15 +15,21 @@ $include-html-icon-bar-classes: $include-html-classes !default;
 // We use these to style the icon-bar and items
 $icon-bar-bg: $oil !default;
 $icon-bar-font-color: $white !default;
+$icon-bar-font-color-hover: $icon-bar-font-color !default;
 $icon-bar-font-size: 1rem !default;
 $icon-bar-hover-color: $primary-color !default;
 $icon-bar-icon-color: $white !default;
+$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
 $icon-bar-icon-size: 1.875rem !default;
 $icon-bar-image-width: 1.875rem !default;
 $icon-bar-image-height: 1.875rem !default;
 $icon-bar-active-color: $primary-color !default;
 $icon-bar-item-padding: 1.25rem !default;
 
+// We use this to set default opacity and cursor for disabled icons.
+$icon-bar-disabled-opacity: 0.7 !default;
+$icon-bar-disabled-cursor: $cursor-default-value !default;
+
 //
 // @mixins
 //
@@ -154,23 +160,49 @@ $icon-bar-item-padding: 1.25rem !default;
 @mixin icon-bar-style(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
-  $base-style:true) {
+  $base-style:true,
+  $disabled:false) {
 
 	@if $base-style {
 
 		background: $bar-bg;
 
 		& > * {
+			label { color: $bar-font-color; }
 
-			&:hover { background: $bar-hover-color; }
+			i { color: $bar-icon-color; }
+		}
 
-			label { color: $bar-font-color; }
+		& > a:hover {
 
-			i {
+			background: $bar-hover-color;
-				color: $bar-icon-color;
+
+			label { color: $bar-font-color-hover; }
+
+			i { color: $bar-icon-color-hover; }
+		}
+
+        & > a.active {
+
+			background: $bar-active-color;
+
+			label { color: $bar-font-color-hover; }
+
+			i { color: $bar-icon-color-hover; }
+		}
+	}
+  @if $disabled {
+    .item.disabled {
+      opacity: $icon-bar-disabled-opacity;
+      cursor: $icon-bar-disabled-cursor;
+      >* {
+        opacity: $icon-bar-disabled-opacity;
+        cursor: $icon-bar-disabled-cursor;
       }
     }
   }
@@ -185,22 +217,26 @@ $icon-bar-item-padding: 1.25rem !default;
 // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
 // $bar-active-color - the color of an active / hover state
 // $base-style - Apply base styles? Default: true.
+// $disabled - Allow disabled icons? Default: false.
 
 @mixin icon-bar(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
   $padding: $icon-bar-item-padding,
 	$font-size: $icon-bar-font-size,
 	$icon-size: $icon-bar-icon-size,
 	$image-width: $icon-bar-image-width,
 	$image-height: $icon-bar-image-height,
-  $base-style:true) {
+  $base-style:true,
+  $disabled:false) {
     @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-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+    @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);
 }
 
 @include exports("icon-bar") {

assets/scss/foundation/components/_labels.scss

@@ -33,13 +33,13 @@ $label-font-family: $body-font-family !default;
   white-space: nowrap;
   display: inline-block;
   position: relative;
-  margin-bottom: inherit;
+  margin-bottom: auto;
 }
 
 // @mixins
 //
 // We use this mixin to add label size styles.
-// $padding - Used to determine label padding. Default: $label-padding || rem-calc(3 10 4) !default
+// $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default
 // $text-size - Used to determine label text-size. Default: $text-size found in settings
 @mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
   @if $padding { padding: $padding; }

assets/scss/foundation/components/_offcanvas.scss

@@ -117,11 +117,11 @@ $menu-slide: "transform 500ms ease" !default;
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @if $position == left {
-    @include translate3d(-100.5%,0,0);
+    @include translate3d(-100%,0,0);
     left: 0;
   }
   @if $position == right {
-    @include translate3d(100.5%,0,0);
+    @include translate3d(100%,0,0);
     right: 0;
   }
 }
@@ -139,7 +139,8 @@ $menu-slide: "transform 500ms ease" !default;
 // INNER WRAP
 // Main content area that moves to reveal the off-canvas nav
 @mixin inner-wrap {
-  @include kill-flicker;
+  // @include kill-flicker;
+  // removed for now till chrome fixes backface issue
   @include wrap-base;
   @include clearfix;
   -webkit-transition: -webkit-#{$menu-slide};
@@ -200,7 +201,8 @@ $menu-slide: "transform 500ms ease" !default;
   height: $tabbar-height;
   top: 0;
   @media #{$medium-up} {
-    &.left, &.right { text-align: left; }
+    &.left { text-align: left; }
+    &.right { text-align: right; }
   }
 
   // still need to make these non-presentational
@@ -483,14 +485,14 @@ $menu-slide: "transform 500ms ease" !default;
 @if $include-html-off-canvas-classes {
   .left-submenu {
     @include off-canvas-submenu($position: left);
-    &.move-right {
+    &.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap {
       @include translate3d(0%,0,0);
     }
   }
 
   .right-submenu {
     @include off-canvas-submenu($position: right);
-    &.move-left {
+    &.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap {
       @include translate3d(0%,0,0);
     }
   }

assets/scss/foundation/components/_orbit.scss

@@ -147,10 +147,10 @@ $orbit-timer-hide-for-small: true !default;
 
           &:first-child {
             @if $text-direction == rtl {
-            margin-right: 0%;
+            margin-right: 0;
             }
             @else {
-            margin-left: 0%;
+            margin-left: 0;
             }
           }
 
@@ -194,7 +194,7 @@ $orbit-timer-hide-for-small: true !default;
             height: 3px;
             background-color: $orbit-timer-bg;
             display: block;
-            width: 0%;
+            width: 0;
             position: relative;
             right: 20px;
             top: 5px;
@@ -205,7 +205,7 @@ $orbit-timer-hide-for-small: true !default;
         & > span {
           display: none;
           position: absolute;
-          top: 0px;
+          top: 0;
           #{$opposite-direction}: 0;
           width: 11px;
           height: 14px;
@@ -218,7 +218,7 @@ $orbit-timer-hide-for-small: true !default;
         &.paused {
           & > span {
             #{$opposite-direction}: -4px;
-            top: 0px;
+            top: 0;
             width: 11px;
             height: 14px;
             border: inset 8px;
@@ -345,7 +345,7 @@ $orbit-timer-hide-for-small: true !default;
         .orbit-slides-container {height: auto !important;}
         .orbit-slides-container > * {
           position: relative;
-          margin:0% !important;
+          margin:0 !important;
           opacity:1 !important;
         }
 

assets/scss/foundation/components/_panels.scss

@@ -28,6 +28,7 @@ $panel-font-color-alt: $white !default;
 
 $panel-header-adjust: true !default;
 $callout-panel-link-color: $primary-color !default;
+$callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
 //
 // @mixins
 //
@@ -82,6 +83,11 @@ $callout-panel-link-color: $primary-color !default;
         @include panel(scale-color($primary-color, $lightness: 94%));
         a:not(.button) {
           color: $callout-panel-link-color;
+
+          &:hover,
+          &:focus {
+            color: $callout-panel-link-color-hover;
+          }
         }
       }
 

assets/scss/foundation/components/_reveal.scss

@@ -26,8 +26,8 @@ $reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
 
 // We use these to style the reveal close button
 $reveal-close-font-size: rem-calc(40) !default;
-$reveal-close-top: rem-calc(8) !default;
+$reveal-close-top: rem-calc(10) !default;
-$reveal-close-side: rem-calc(11) !default;
+$reveal-close-side: rem-calc(22) !default;
 $reveal-close-color: $base !default;
 $reveal-close-weight: $font-weight-bold !default;
 
@@ -49,7 +49,8 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
 // We use this to create the reveal background overlay styles
 @mixin reveal-bg( $include-z-index-value: true ) {
-  position: fixed;
+  //position: fixed;
+  position: absolute; // allows modal background to extend beyond window position
   top: 0;
   bottom: 0;
   left: 0;

assets/scss/foundation/components/_sub-nav.scss

@@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   display: block;
   width: auto;
   overflow: hidden;
-  margin-bottom: $sub-nav-list-margin;
+  margin: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
 
   dt {

assets/scss/foundation/components/_switches.scss

@@ -55,7 +55,7 @@ $switch-active-color: $primary-color !default;
   // Default label styles for type and transition
   label {
     display: block;
-    margin-bottom: $switch-height-med / 2;
+    margin-bottom: ($switch-height-med / 2);
     position: relative;
     color: transparent;
     background: $switch-bg;
@@ -87,15 +87,20 @@ $switch-active-color: $primary-color !default;
     content: "";
     display: block;
     background: $switch-paddle-bg;
-    position: absolute; top: .25rem; left: .25rem;
+    position: absolute;
-    width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+    top: .25rem;
+    left: .25rem;
+    width: $switch-height-med - 0.5rem;
+    height: $switch-height-med - 0.5rem;
 
     -webkit-transition: left $transition-speed $transition-ease;
     -moz-transition: left $transition-speed $transition-ease;
+    -o-transition: translate3d(0,0,0);
     transition: left $transition-speed $transition-ease;
 
     -webkit-transform: translate3d(0,0,0);
     -moz-transform: translate3d(0,0,0);
+    -o-transform: translate3d(0,0,0);
     transform: translate3d(0,0,0);
   }
 
@@ -116,11 +121,13 @@ $switch-active-color: $primary-color !default;
 @mixin switch-size($height: $switch-height-med) {
 
   label {
-    width: $height * 2; height: $height;
+    width: $height * 2;
+    height: $height;
   }
 
   label:after {
-    width: $height - 0.5rem; height: $height - 0.5rem;
+    width: $height - 0.5rem;
+    height: $height - 0.5rem;
   }
 
   input:checked + label:after {
@@ -138,6 +145,7 @@ $switch-active-color: $primary-color !default;
 // $base-style - Apply base styles? Default: true.
 @mixin switch-style(
   $paddle-bg:$switch-paddle-bg,
+  $active-color:$switch-active-color,
   $radius:false,
   $base-style:true) {
 
@@ -153,7 +161,7 @@ $switch-active-color: $primary-color !default;
     }
 
     input:checked + label {
-      background: $switch-active-color;
+      background: $active-color;
     }
   }
 
@@ -196,7 +204,7 @@ $switch-active-color: $primary-color !default;
   $base-style:true) {
     @include switch-base($transition-speed, $transition-ease);
     @include switch-size($height);
-    @include switch-style($paddle-bg, $radius, $base-style);
+    @include switch-style($paddle-bg, $active-color, $radius, $base-style);
 }
 
 @include exports("switch") {

assets/scss/foundation/components/_tabs.scss

@@ -21,7 +21,7 @@ $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
 
 $tabs-content-margin-bottom: rem-calc(24) !default;
-$tabs-content-padding: $column-gutter/2 !default;
+$tabs-content-padding: ($column-gutter/2) !default;
 
 $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
 

assets/scss/foundation/components/_top-bar.scss

@@ -17,7 +17,7 @@ $topbar-bg-color: $oil !default;
 $topbar-bg: $topbar-bg-color !default;
 
 // Height and margin
-$topbar-height: 45px !default;
+$topbar-height: rem-calc(45) !default;
 $topbar-margin-bottom: 0 !default;
 
 // Controlling the styles for the title in the top bar
@@ -33,15 +33,15 @@ $topbar-link-weight: $font-weight-normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg: $topbar-bg !default;
-$topbar-link-bg-hover: #272727 !default;
+$topbar-link-bg-hover: $oil !default;
 $topbar-link-bg-color-hover: $charcoal !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
 $topbar-link-text-transform: none !default;
-$topbar-link-padding: $topbar-height / 3 !default;
+$topbar-link-padding: ($topbar-height / 3) !default;
 $topbar-back-link-size: rem-calc(18) !default;
-$topbar-link-dropdown-padding: 20px !default;
+$topbar-link-dropdown-padding: rem-calc(20) !default;
 $topbar-button-font-size: 0.75rem !default;
 $topbar-button-top: 7px !default;
 
@@ -50,6 +50,7 @@ $topbar-dropdown-bg: $oil !default;
 $topbar-dropdown-link-color: $white !default;
 $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
 $topbar-dropdown-link-bg: $oil !default;
+$topbar-dropdown-link-bg-hover: $oil !default;
 $topbar-dropdown-link-weight: $font-weight-normal !default;
 $topbar-dropdown-toggle-size: 5px !default;
 $topbar-dropdown-toggle-color: $white !default;
@@ -76,6 +77,9 @@ $topbar-transition-speed: 300ms !default;
 $topbar-breakpoint: #{lower-bound($medium-range)} !default; // Change to 9999px for always mobile layout
 $topbar-media-query: $medium-up !default;
 
+// Top-bar input styles
+$topbar-input-height: rem-calc(28) !default;
+
 // Divider Styles
 $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%) !default;
 $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
@@ -164,7 +168,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       form,
       input { margin-bottom: 0; }
 
-      input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
+      input { 
+        height: $topbar-input-height; 
+        padding-top: .35rem; 
+        padding-bottom: .35rem; 
+        font-size: $topbar-button-font-size; 
+      }
 
       .button, button {
         padding-top: .35rem + rem-calc(1);
@@ -192,7 +201,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         margin: 0;
         font-size: $rem-base;
 
-        h1 {
+        h1, h2, h3, h4, p, span {
           line-height: $topbar-height;
           font-size: $topbar-title-font-size;
           margin: 0;
@@ -235,7 +244,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             }
             height: 34px;
             line-height: 33px;
-            padding: 0 $topbar-link-padding+25 0 $topbar-link-padding;
+            padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding;
             color: $topbar-menu-link-color;
             position: relative;
 
@@ -269,7 +278,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
       span::after {
               // Shh, don't tell, but box-shadows create the menu icon :)
               // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
-              box-shadow: 0 0px 0 1px $topbar-menu-icon-color-toggled,
+              box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled,
                           0 7px 0 1px $topbar-menu-icon-color-toggled,
                           0 14px 0 1px $topbar-menu-icon-color-toggled;
             }
@@ -315,7 +324,6 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
           font-weight: $topbar-link-weight;
           text-transform: $topbar-link-text-transform;
 
-
           &.button {
             font-size: $topbar-link-font-size;
             padding-#{$opposite-direction}: $topbar-link-padding;
@@ -347,7 +355,6 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             background: $topbar-link-bg-hover;
           }
           color: $topbar-link-color-hover;
-
         }
 
         // Apply the active link color when it has that class
@@ -420,7 +427,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
             font-size: $topbar-back-link-size;
             a {
               color: $topbar-link-color;
-              // line-height: $topbar-height / 2;
+              // line-height: ($topbar-height / 2);
               display: block;
               &:hover { background:none; }
             }
@@ -460,7 +467,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         button {
           font-size: rem-calc(14);
           position: relative;
-          top: $topbar-button-top;
+          height: $topbar-input-height;
+          top: (($topbar-height - $topbar-input-height) / 2);
         }
 
         &.expanded { background: $topbar-bg; }
@@ -525,18 +533,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
         }
 
         .has-dropdown {
-
           @if($topbar-arrows){
-
             & > a {
               padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
               &:after {
                 @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                 margin-top: -($topbar-dropdown-toggle-size / 2);
-                top: $topbar-height / 2;
+                top: ($topbar-height / 2);
               }
             }
-
           }
 
           &.moved { position: relative;
@@ -568,7 +573,6 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               }
             }
           }
-
         }
 
         .dropdown {
@@ -595,8 +599,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
               &:hover > a:not(.button) {
                 color: $topbar-dropdown-link-color-hover;
                 background-color: $topbar-link-bg-color-hover;
-                @if ($topbar-link-bg-hover) {
+                @if ($topbar-dropdown-link-bg-hover) {
-                  background: $topbar-link-bg-hover;
+                  background: $topbar-dropdown-link-bg-hover;
                 }
               }
             }
@@ -626,7 +630,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
 
         .has-form {
           background: $topbar-link-bg;
-          padding: 0 $topbar-height / 3;
+          padding: 0 ($topbar-height / 3);
           height: $topbar-height;
         }
 

package.json

@@ -1,4 +1,4 @@
 {
   "name": "Abc",
-  "version": "1.2.0"
+  "version": "1.2.1"
 }