foundation-rails 5.0.2.0 → 5.0.3.0

data/vendor/assets/stylesheets/foundation/components/_accordion.scss

@@ -9,8 +9,8 @@ $include-html-accordion-classes: $include-html-classes !default;
 
 $accordion-navigation-padding: rem-calc(16) !default;
 $accordion-navigation-bg-color: #efefef !default;
-$accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%) !default;
-$accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%) !default;
+$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
+$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
 $accordion-navigation-font-color: #222 !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
@@ -20,24 +20,24 @@ $accordion-content-active-bg-color: #fff !default;
 
 @include exports("accordion") {
   @if $include-html-accordion-classes {
-    .accordion { 
+    .accordion {
       @include clearfix; margin-bottom: 0;
-      dd { 
-        display: block; 
-        margin-bottom: 0 !important; 
+      dd {
+        display: block;
+        margin-bottom: 0 !important;
         &.active a { background: $accordion-navigation-active-bg-color; }
-        > a { 
-          background: $accordion-navigation-bg-color; 
-          color: $accordion-navigation-font-color; 
-          padding: $accordion-navigation-padding; 
-          display: block; 
-          font-family: $body-font-family; 
+        > a {
+          background: $accordion-navigation-bg-color;
+          color: $accordion-navigation-font-color;
+          padding: $accordion-navigation-padding;
+          display: block;
+          font-family: $accordion-navigation-font-family;
           font-size: $accordion-navigation-font-size;
           &:hover { background: $accordion-navigation-hover-bg-color; }
         }
       }
-      .content { 
-        display: none; 
+      .content {
+        display: none;
         padding: $accordion-content-padding;
         &.active {
           display: block;
@@ -46,4 +46,4 @@ $accordion-content-active-bg-color: #fff !default;
       }
     }
   }
-}
+}

data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -15,15 +15,15 @@ $alert-padding-bottom: $alert-padding-top !default;
 $alert-font-weight: normal !default;
 $alert-font-size: rem-calc(13) !default;
 $alert-font-color: #fff !default;
-$alert-font-color-alt: darken($secondary-color, 60%) !default;
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
 
 // We use this for close hover effect.
-$alert-function-factor: 5% !default;
+$alert-function-factor: -14% !default;
 
 // We use these to control border styles.
 $alert-border-style: solid !default;
 $alert-border-width: 1px !default;
-$alert-border-color: darken($primary-color, $alert-function-factor) !default;
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
 $alert-bottom-margin: rem-calc(20) !default;
 
 // We use these to style the close buttons
@@ -64,7 +64,7 @@ $alert-radius: $global-radius !default;
 
   // We control which background color and border come through.
   background-color: $bg;
-  border-color: darken($bg, $alert-function-factor);
+  border-color: scale-color($bg, $lightness: $alert-function-factor);
 
   // We control the text color for you based on the background color.
   @if $bg-lightness > 70% { color: $alert-font-color-alt; }

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -29,7 +29,7 @@ $block-grid-media-queries: true !default;
   @if $base-style {
     display: block;
     padding: 0;
-    margin: 0 (-$spacing/2);
+    margin: 0 0 0 (-$spacing/2);
     @include clearfix;
 
     &>li {
@@ -44,6 +44,7 @@ $block-grid-media-queries: true !default;
     &>li {
       width: 100%/$per-row;
       padding: 0 ($spacing/2) $spacing;
+      list-style: none;
 
       &:nth-of-type(n) { clear: none; }
       &:nth-of-type(#{$per-row}n+1) { clear: both; }
@@ -80,4 +81,4 @@ $block-grid-media-queries: true !default;
       @include block-grid-html-classes($size:large);
     }
   }
-}
+}

data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss

@@ -6,17 +6,17 @@
 $include-html-nav-classes: $include-html-classes !default;
 
 // We use this to set the background color for the breadcrumb container.
-$crumb-bg: lighten($secondary-color, 5%) !default;
+$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
 
 // We use these to set the padding around the breadcrumbs.
 $crumb-padding: rem-calc(9 14 9) !default;
 $crumb-side-padding: rem-calc(12) !default;
 
 // We use these to control border styles.
-$crumb-function-factor: 10% !default;
+$crumb-function-factor: -10% !default;
 $crumb-border-size: 1px !default;
 $crumb-border-style: solid !default;
-$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
+$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
 $crumb-radius: $global-radius !default;
 
 // We use these to set various text styles for breadcrumbs.

data/vendor/assets/stylesheets/foundation/components/_button-groups.scss

@@ -32,10 +32,16 @@ $button-group-border-width: 1px !default;
 // We use this to control styles for button groups
 @mixin button-group-style($radius:false, $even:false, $float:$default-float) {
 
-	> button, .button { 
-	border-#{$opposite-direction}: $button-group-border-width solid;
-	border-color: rgba(255, 255, 255, 0.5);	
-	}
+  > button, .button { 
+    border-#{$opposite-direction}: $button-group-border-width solid;
+    border-color: rgba(255, 255, 255, 0.5);  
+  }
+
+  &:last-child { 
+    button, .button {
+      border-#{$opposite-direction}: 0; 
+    }
+  }
 
   // We use this to control the flow, or remove those styles completely.
   @if $float {

data/vendor/assets/stylesheets/foundation/components/_buttons.scss

@@ -27,10 +27,10 @@ $button-font-weight: normal !default;
 $button-font-align: center !default;
 
 // We use these to control various hover effects.
-$button-function-factor: 5% !default;
+$button-function-factor: -20% !default;
 
 // We use these to control button border styles.
-$button-border-width: 1px !default;
+$button-border-width: 0px !default;
 $button-border-style: solid !default;
 
 // We use this to set the default radius used throughout the core.
@@ -51,6 +51,8 @@ $button-disabled-opacity: 0.7 !default;
 
 @mixin button-base($style:true, $display:$button-display) {
   @if $style {
+    border-style: $button-border-style;
+    border-width: $button-border-width;
     cursor: $cursor-pointer-value;
     font-family: $button-font-family;
     font-weight: $button-font-weight;
@@ -109,14 +111,14 @@ $button-disabled-opacity: 0.7 !default;
     padding-top: $is-input + rem-calc(.5);
     padding-bottom: $is-input + rem-calc(.5);
     -webkit-appearance: none;
-    border: none; 
+    border: none;
     font-weight: $button-font-weight !important;
   }
   @else if $is-input {
     padding-top: $is-input + rem-calc(1);
     padding-bottom: $is-input;
     -webkit-appearance: none;
-    border: none; 
+    border: none;
     font-weight: $button-font-weight !important;
   }
 }
@@ -137,9 +139,9 @@ $button-disabled-opacity: 0.7 !default;
     $bg-lightness: lightness($bg);
 
     background-color: $bg;
-    border-color: darken($bg, $button-function-factor);
+    border-color: scale-color($bg, $lightness: $button-function-factor);
     &:hover,
-    &:focus { background-color: darken($bg, $button-function-factor); }
+    &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
 
     // We control the text color for you based on the background color.
     @if $bg-lightness > 70% {

data/vendor/assets/stylesheets/foundation/components/_clearing.scss

@@ -155,7 +155,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
           border-#{$default-float}-color: $clearing-arrow-color;
         }
       }
-  	
+    
       .clearing-main-prev.disabled,
       .clearing-main-next.disabled { opacity: 0.3; }
 

data/vendor/assets/stylesheets/foundation/components/_dropdown.scss

@@ -3,7 +3,7 @@
 //
 // @variables
 //
-$include-html-button-classes: $include-html-classes !default;
+$include-html-dropdown-classes: $include-html-classes !default;
 
 // We use these to controls height and width styles.
 $f-dropdown-max-width: 200px !default;
@@ -17,7 +17,7 @@ $f-dropdown-bg: #fff !default;
 // We use this to set the border styles for dropdowns.
 $f-dropdown-border-style: solid !default;
 $f-dropdown-border-width: 1px !default;
-$f-dropdown-border-color: darken(#fff, 20%) !default;
+$f-dropdown-border-color: scale-color(#fff, $lightness: -20%) !default;
 
 // We use these to style the triangle pip.
 $f-dropdown-triangle-size: 6px !default;
@@ -47,7 +47,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
 // $max-width - Default: $f-dropdown-max-width || 200px.
 @mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
   position: absolute;
-  top: -9999px;
+  left: -9999px;
   list-style: $f-dropdown-list-style;
   margin-#{$default-float}: 0;
 
@@ -129,7 +129,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
 }
 
 @include exports("dropdown") {
-  @if $include-html-button-classes {
+  @if $include-html-dropdown-classes {
 
     @media #{$small-only} {
       .f-dropdown {
@@ -156,4 +156,4 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     }
 
   }
-}
+}

data/vendor/assets/stylesheets/foundation/components/_forms.scss

@@ -13,17 +13,18 @@ $form-spacing: rem-calc(16) !default;
 $form-label-pointer: pointer !default;
 $form-label-font-size: rem-calc(14) !default;
 $form-label-font-weight: normal !default;
-$form-label-font-color: lighten(#000, 30%) !default;
+$form-label-font-color: scale-color(#000, $lightness: 30%) !default;
 $form-label-bottom-margin: rem-calc(8) !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
 $input-font-size: rem-calc(14) !default;
 $input-bg-color: #fff !default;
-$input-focus-bg-color: darken(#fff, 2%) !default;
-$input-border-color: darken(#fff, 20%) !default;
-$input-focus-border-color: darken(#fff, 40%) !default;
+$input-focus-bg-color: scale-color(#fff, $lightness: -2%) !default;
+$input-border-color: scale-color(#fff, $lightness: -20%) !default;
+$input-focus-border-color: scale-color(#fff, $lightness: -40%) !default;
 $input-border-style: solid !default;
 $input-border-width: 1px !default;
+$input-border-radius: 0 !default;
 $input-disabled-bg: #ddd !default;
 $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
 $input-include-glowing-effect: true !default;
@@ -41,8 +42,8 @@ $legend-font-weight: bold !default;
 $legend-padding: rem-calc(0 3) !default;
 
 // We use these to style the prefix and postfix input elements
-$input-prefix-bg: darken(#fff, 5%) !default;
-$input-prefix-border-color: darken(#fff, 20%) !default;
+$input-prefix-bg: scale-color(#fff, $lightness: -5%) !default;
+$input-prefix-border-color: scale-color(#fff, $lightness: -20%) !default;
 $input-prefix-border-size: 1px !default;
 $input-prefix-border-type: solid !default;
 $input-prefix-overflow: hidden !default;
@@ -63,7 +64,7 @@ $glowing-effect-fade-time: 0.45s !default;
 $glowing-effect-color: $input-focus-border-color !default;
 
 // Select variables
-$select-bg-color: #fafafa;
+$select-bg-color: #fafafa !default;
 
 
 //
@@ -179,7 +180,7 @@ $select-bg-color: #fafafa;
 // @MIXIN
 //
 // We use this mixin to create prefix label styles
-// $bg - Default:$input-prefix-bg || darken(#fff, 5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default:false
 //
 @mixin prefix($bg:$input-prefix-bg,$is-button:false) {
@@ -187,7 +188,7 @@ $select-bg-color: #fafafa;
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: darken($bg, 10%);
+    border-color: scale-color($bg, $lightness: -11%);
     border-#{$opposite-direction}: none;
 
     // Control the font color based on background brightness
@@ -210,14 +211,14 @@ $select-bg-color: #fafafa;
 // @MIXIN
 //
 // We use this mixin to create postfix label styles
-// $bg - Default:$input-prefix-bg || darken(#fff, 5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default: false
 @mixin postfix($bg:$input-prefix-bg, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: darken($bg, 15%);
+    border-color: scale-color($bg, $lightness: -16%);
     border-#{$default-float}: none;
 
     // Control the font color based on background brightness
@@ -309,14 +310,14 @@ $select-bg-color: #fafafa;
       /* Styles for required inputs */
       small {
         text-transform: capitalize;
-        color: lighten($form-label-font-color, 10%);
+        color: scale-color($form-label-font-color, $lightness: 15%);
       }
     }
 
     select {
       -webkit-appearance: none !important;
-      background: 
-        $select-bg-color 
+      background:
+        $select-bg-color
         url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
       background-position-x: 97%;
       background-position-y: center;
@@ -326,17 +327,22 @@ $select-bg-color: #fafafa;
       @include radius(0);
       &.radius { @include radius($global-radius); }
       &:hover {
-        background: 
-          darken($select-bg-color, 3%) 
+        background:
+          scale-color($select-bg-color, $lightness: -3%)
           url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
         background-position-x: 97%;
         background-position-y: center;
         border-color: $input-focus-border-color;
       }
     }
+
+    select::-ms-expand {
+      display:none;
+    }
+    
     @-moz-document url-prefix() {
       select { background: $select-bg-color; }
-      select:hover { background: darken($select-bg-color, 3%); }
+      select:hover { background: scale-color($select-bg-color, $lightness: -3%); }
     }
     /* Attach elements to the beginning or end of an input */
     .prefix,
@@ -395,13 +401,18 @@ $select-bg-color: #fafafa;
     input[type="url"],
     textarea {
       -webkit-appearance: none;
-      -webkit-border-radius: 0;
-      border-radius: 0;
+      -webkit-border-radius: $input-border-radius;
+      border-radius: $input-border-radius;
       @include form-element;
       @if not $input-include-glowing-effect {
           @include single-transition(all, 0.15s, linear);
       }
     }
+    
+    /* Add height value for select elements to match text input height */
+    select {
+      height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
+    }
 
     /* Adjust margin for form elements below */
     input[type="file"],
@@ -458,6 +469,19 @@ $select-bg-color: #fafafa;
         @include form-error-message;
       }
 
+      > label {
+        > small {
+          color: scale-color($form-label-font-color, $lightness: 15%);
+          background: transparent;
+          padding: 0;
+          text-transform: capitalize;
+          font-style: normal;
+          font-size: 60%;
+          margin: 0;
+          display: inline;
+        }
+      }
+
       span.error-message {
         display: block;
       }

data/vendor/assets/stylesheets/foundation/components/_global.scss

@@ -17,12 +17,6 @@ $base-font-size: 100% !default;
 // $base-line-height is 24px while $base-font-size is 16px
 $base-line-height: 150% !default;
 
-// This is the default html and body font-size for the base rem value.
-$rem-base: 16px !default;
-
-// Use Open Sans font
-$include-open-sans: true !default;
-
 //
 // Global Foundation Mixins
 //
@@ -189,6 +183,21 @@ $include-open-sans: true !default;
   }
 }
 
+// @mixins
+//
+// We use this to translate elements in 2D
+// $horizontal: Default: 0
+// $vertical: Default: 0
+@mixin translate2d($horizontal:0, $vertical:0) {
+  @if $experimental {
+    -webkit-transform: translate($horizontal,$vertical);
+    -moz-transform: translate($horizontal,$vertical);
+    -ms-transform: translate($horizontal,$vertical);
+    -o-transform: translate($horizontal,$vertical);
+  }
+  transform: translate($horizontal,$vertical)
+}
+
 // We use these to control various global styles
 $body-bg: #fff !default;
 $body-font-color: #222 !default;
@@ -237,11 +246,11 @@ $include-html-global-classes: $include-html-classes !default;
 
 
 // Media Query Ranges
-$small-range: (0em, 40em);
-$medium-range: (40.063em, 64em);
-$large-range: (64.063em, 90em);
-$xlarge-range: (90.063em, 120em);
-$xxlarge-range: (120.063em);
+$small-range: (0em, 40em) !default;
+$medium-range: (40.063em, 64em) !default;
+$large-range: (64.063em, 90em) !default;
+$xlarge-range: (90.063em, 120em) !default;
+$xxlarge-range: (120.063em) !default;
 
 
 $screen: "only screen" !default;
@@ -279,9 +288,6 @@ $cursor-text-value: text !default;
 
 
 @include exports("global") {
-  @if $include-open-sans {
-    @import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
-  }
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
   meta.foundation-mq-small {
@@ -290,7 +296,7 @@ $cursor-text-value: text !default;
   }
 
   meta.foundation-mq-medium {
-    font-family: "/" + unquote($medium-only) + "/";
+    font-family: "/" + unquote($medium-up) + "/";
     width: lower-bound($medium-range);
   }
 
@@ -363,12 +369,17 @@ $cursor-text-value: text !default;
     .text-center  { text-align: center !important; }
     .text-justify { text-align: justify !important; }
     .hide         { display: none; }
+    // Bidi counterparts to .left, .right, .text-left, .text-right
+    .start { float: $default-float !important; }
+    .end   { float: $opposite-direction !important; }
+    .text-start { text-align: $default-float !important; }
+    .text-end   { text-align: $opposite-direction !important; }
 
     // Font smoothing
     // Antialiased font smoothing works best for light text on a dark background.
     // Apply to single elements instead of globally to body.
-    // Note this only applies to webkit-based desktop browsers on the Mac.
-    .antialiased { -webkit-font-smoothing: antialiased; }
+    // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
+    .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
 
     // Get rid of gap under images by making them display: inline-block; by default
     img {
@@ -386,4 +397,4 @@ $cursor-text-value: text !default;
     // Make select elements 100% width by default
     select { width: 100%; }
   }
-}
+}