foundation-rails 5.1.1.0 → 5.2.0.0

data/vendor/assets/stylesheets/foundation/components/_flex-video.scss

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 @import "buttons";
 
@@ -53,7 +57,7 @@ $input-prefix-font-color-alt: #fff !default;
 
 // We use these to style the error states for inputs and labels
 $input-error-message-padding: rem-calc(6 9 9) !default;
-$input-error-message-top: -1px;
+$input-error-message-top: -1px !default;
 $input-error-message-font-size: rem-calc(12) !default;
 $input-error-message-font-weight: normal !default;
 $input-error-message-font-style: italic !default;
@@ -66,7 +70,7 @@ $glowing-effect-color: $input-focus-border-color !default;
 
 // Select variables
 $select-bg-color: #fafafa !default;
-
+$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
 //
 // @MIXINS
@@ -129,7 +133,7 @@ $select-bg-color: #fafafa !default;
   }
 
   // Disabled background input background color
-  &[disabled] { background-color: $input-disabled-bg; }
+  &[disabled], fieldset[disabled] & { background-color: $input-disabled-bg; }
 }
 
 // @MIXIN
@@ -248,7 +252,7 @@ $select-bg-color: #fafafa !default;
 
 // We use this mixin to style fieldsets
 @mixin fieldset {
-  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
+  border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
   padding: $fieldset-padding;
   margin: $fieldset-margin;
 
@@ -324,22 +328,17 @@ $select-bg-color: #fafafa !default;
 
     select {
       -webkit-appearance: none !important;
-      background:
-        $select-bg-color
-        url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
-      background-position-x: 97%;
-      background-position-y: center;
+      background-color: $select-bg-color;
+      background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+      background-repeat: no-repeat;
+      background-position: center $opposite-direction 3%;
       border: $input-border-width $input-border-style $input-border-color;
       padding: $form-spacing / 2;
       font-size: $input-font-size;
       @include radius(0);
       &.radius { @include radius($global-radius); }
       &:hover {
-        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;
+        background-color: $select-hover-bg-color;
         border-color: $input-focus-border-color;
       }
     }
@@ -350,7 +349,7 @@ $select-bg-color: #fafafa !default;
 
     @-moz-document url-prefix() {
       select { background: $select-bg-color; }
-      select:hover { background: scale-color($select-bg-color, $lightness: -3%); }
+      select:hover { background: $select-hover-bg-color }
     }
     /* Attach elements to the beginning or end of an input */
     .prefix,
@@ -360,17 +359,17 @@ $select-bg-color: #fafafa !default;
     .postfix.button { @include button-size(false,false,false); @include postfix(false, false, true); }
     .prefix.button { @include button-size(false,false,false); @include prefix(false, false, true); }
 
-    .prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
-    .postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
-    .prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
-    .postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
+    .prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
+    .postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+    .prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
+    .postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
 
     /* Separate prefix and postfix styles when on span or label so buttons keep their own */
     span.prefix,label.prefix { @include prefix();
-      &.radius { @include radius(0); @include side-radius(left, $global-radius); }
+      &.radius { @include radius(0); @include side-radius($default-float, $global-radius); }
     }
     span.postfix,label.postfix { @include postfix();
-      &.radius { @include radius(0); @include side-radius(right, $global-radius); }
+      &.radius { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
     }
 
     /* We use this to get basic styling on all basic form elements */
@@ -397,6 +396,11 @@ $select-bg-color: #fafafa !default;
         @include radius($input-border-radius);
       }
     }
+    
+    /* Respect enforced amount of rows for textarea */
+    textarea[rows] {
+      height: auto;
+    }
 
     /* Add height value for select elements to match text input height */
     select {

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "../functions";
 //
 // Foundation Variables
@@ -42,14 +46,25 @@ $base-line-height: 150% !default;
 // We use this to create equal side border radius on elements.
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
-	@if $experimental {
-		-moz-border-radius-bottom#{$side}: $radius;
-		-moz-border-radius-top#{$side}: $radius;
-		-webkit-border-bottom-#{$side}-radius: $radius;
-		-webkit-border-top-#{$side}-radius: $radius;
-	}
-	border-bottom-#{$side}-radius: $radius;
-	border-top-#{$side}-radius: $radius;
+  @if ($side == left or $side == right) {
+    @if $experimental {
+      -moz-border-radius-bottom#{$side}: $radius;
+      -moz-border-radius-top#{$side}: $radius;
+      -webkit-border-bottom-#{$side}-radius: $radius;
+      -webkit-border-top-#{$side}-radius: $radius;
+    }
+    border-bottom-#{$side}-radius: $radius;
+    border-top-#{$side}-radius: $radius;
+  } @else {
+    @if $experimental {
+      -moz-border-radius-#{$side}left: $radius;
+      -moz-border-radius-#{$side}right: $radius;
+      -webkit-border-#{$side}-left-radius: $radius;
+      -webkit-border-#{$side}-right-radius: $radius;
+    }
+    border-#{$side}-left-radius: $radius;
+    border-#{$side}-right-radius: $radius;
+  }
 }
 
 // @mixins
@@ -169,6 +184,29 @@ $base-line-height: 150% !default;
   transform: translate($horizontal,$vertical)
 }
 
+// @mixins
+//
+// Makes an element visually hidden, but accessible.
+// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// @mixins
+//
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  height: auto;
+  width: auto;
+  overflow: visible;
+  clip: auto;
+}
+
 // We use these to control various global styles
 $body-bg: #fff !default;
 $body-font-color: #222 !default;
@@ -256,44 +294,45 @@ $cursor-text-value: text !default;
 
 
 @include exports("global") {
-  meta.foundation-version {
-    font-family: "/5.1.0/";
-  }
-  // 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 {
-    font-family: "/" + unquote($small-only) + "/";
-    width: lower-bound($small-range);
-  }
 
-  meta.foundation-mq-medium {
-    font-family: "/" + unquote($medium-up) + "/";
-    width: lower-bound($medium-range);
-  }
+  @if $include-html-global-classes {
 
-  meta.foundation-mq-large {
-    font-family: "/" + unquote($large-up) + "/";
-    width: lower-bound($large-range);
-  }
+    meta.foundation-version {
+      font-family: "/5.2.0/";
+    }
+    // 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 {
+      font-family: "/" + unquote($small-only) + "/";
+      width: lower-bound($small-range);
+    }
 
-  meta.foundation-mq-xlarge {
-    font-family: "/" + unquote($xlarge-up) + "/";
-    width: lower-bound($xlarge-range);
-  }
+    meta.foundation-mq-medium {
+      font-family: "/" + unquote($medium-up) + "/";
+      width: lower-bound($medium-range);
+    }
 
-  meta.foundation-mq-xxlarge {
-    font-family: "/" + unquote($xxlarge-up) + "/";
-    width: lower-bound($xxlarge-range);
-  }
+    meta.foundation-mq-large {
+      font-family: "/" + unquote($large-up) + "/";
+      width: lower-bound($large-range);
+    }
 
-  meta.foundation-data-attribute-namespace {
-    font-family: #{$namespace};
-  }
+    meta.foundation-mq-xlarge {
+      font-family: "/" + unquote($xlarge-up) + "/";
+      width: lower-bound($xlarge-range);
+    }
 
-  // Must be 100% for off canvas to work
-  html, body { height: 100%; }
+    meta.foundation-mq-xxlarge {
+      font-family: "/" + unquote($xxlarge-up) + "/";
+      width: lower-bound($xxlarge-range);
+    }
 
-  @if $include-html-global-classes {
+    meta.foundation-data-attribute-namespace {
+      font-family: #{$namespace};
+    }
+
+    // Must be 100% for off canvas to work
+    html, body { height: 100%; }
 
     // Set box-sizing globally to handle padding and border widths
     *,
@@ -322,12 +361,8 @@ $cursor-text-value: text !default;
   a:hover { cursor: $cursor-pointer-value; }
 
     // Grid Defaults to get images and embeds to work properly
-    img,
-    object,
-    embed { max-width: 100%; height: auto; }
+    img { max-width: 100%; height: auto; }
 
-    object,
-    embed { height: 100%; }
     img { -ms-interpolation-mode: bicubic; }
 
     #map_canvas,

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -136,7 +140,7 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none;
+    float: none !important;
   }
 
   // If offset, calculate appropriate margins
@@ -205,7 +209,7 @@ $total-columns: 12 !default;
 
       &.collapse {
          > .column,
-         > .columns { @include grid-column($collapse:true); }
+         > .columns { @include grid-column($collapse:true, $float:false); }
 
         .row {margin-left:0; margin-right:0;}
       }

data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -7,7 +11,7 @@ $include-html-type-classes: $include-html-classes !default;
 
 // We use these to control text styles.
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
-$keystroke-font-size: rem-calc(14) !default;
+$keystroke-font-size: inherit !default;
 $keystroke-font-color: #222 !default;
 $keystroke-font-color-alt: #fff !default;
 $keystroke-function-factor: -7% !default;

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 @import "type";
 @import "top-bar";
@@ -8,21 +12,22 @@ $include-html-off-canvas-classes: $include-html-classes !default;
 $tabbar-bg: #333 !default;
 $tabbar-height: rem-calc(45) !default;
 $tabbar-line-height: $tabbar-height !default;
-$tabbar-color: #FFF !default;
+$tabbar-color: #fff !default;
 $tabbar-middle-padding: 0 rem-calc(10) !default;
 
 // Off Canvas Divider Styles
-$tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
 $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;
+$tabbar-right-section-border: $tabbar-left-section-border;
+
 
 // Off Canvas Tab Bar Headers
-$tabbar-header-color: #FFF !default;
+$tabbar-header-color: #fff !default;
 $tabbar-header-weight: bold !default;
 $tabbar-header-line-height: $tabbar-height !default;
 $tabbar-header-margin: 0 !default;
 
 // Off Canvas Menu Variables
-$off-canvas-width: 250px !default;
+$off-canvas-width: rem-calc(250) !default;
 $off-canvas-bg: #333 !default;
 
 // Off Canvas Menu List Variables
@@ -31,7 +36,7 @@ $off-canvas-label-color: #999 !default;
 $off-canvas-label-text-transform: uppercase !default;
 $off-canvas-label-font-weight: bold !default;
 $off-canvas-label-bg: #444 !default;
-$off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%) !default;
+$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
 $off-canvas-label-border-bottom: none !default;
 $off-canvas-label-margin:0 !default;
 $off-canvas-link-padding: rem-calc(10, 15) !default;
@@ -77,15 +82,26 @@ $menu-slide: "transform 500ms ease" !default;
 }
 
 // basic styles for off-canvas menu container
-@mixin off-canvas-menu {
+@mixin off-canvas-menu($position) {
+  @include kill-flicker;
+  * { @include kill-flicker; }
   width: $off-canvas-width;
-  top:0;
-  bottom:0;
+  top: 0;
+  bottom: 0;
   position: absolute;
   overflow-y: auto;
   background: $off-canvas-bg;
   z-index: 1001;
   box-sizing: content-box;
+  -webkit-overflow-scrolling: touch;
+  @if $position == left {
+    @include translate3d(-100%,0,0);
+    left: 0;
+  }
+  @if $position == right {
+    @include translate3d(100%,0,0);
+    right: 0;
+  }
 }
 
 // TRANSLATE 3D
@@ -100,7 +116,6 @@ $menu-slide: "transform 500ms ease" !default;
 // OFF CANVAS WRAP
 // Wrap visible content and prevent scroll bars
 @mixin off-canvas-wrap {
-
   @include kill-flicker;
   @include wrap-base;
   overflow-x: hidden;
@@ -114,7 +129,6 @@ $menu-slide: "transform 500ms ease" !default;
   @include kill-flicker;
   @include wrap-base;
   @include clearfix;
-
   -webkit-transition: -webkit-#{$menu-slide};
   -moz-transition: -moz-#{$menu-slide};
   -ms-transition: -ms-#{$menu-slide};
@@ -149,25 +163,21 @@ $menu-slide: "transform 500ms ease" !default;
 
 // SMALL SECTIONS
 // These are small sections on the left and right that contain the off-canvas toggle buttons;
-@mixin tabbar-small-section {
+@mixin tabbar-small-section($position) {
   width: $tabbar-height;
   height: $tabbar-height;
   position: absolute;
-  top:0;
-}
-
-@mixin left-small-section {
-  @include tabbar-small-section;
-  border-right: $tabbar-left-section-border;
-  box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
-  left:0;
-}
-
-@mixin right-small-section {
-  @include tabbar-small-section;
-  border-left: $tabbar-right-section-border;
-  box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
-  right:0;
+  top: 0;
+  @if $position == left {
+    border-right: $tabbar-left-section-border;
+    // box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
+    left: 0;
+  }
+  @if $position == right {
+    border-left: $tabbar-right-section-border;
+    // box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
+    right:0;
+  }
 }
 
 @mixin tab-bar-section {
@@ -175,10 +185,8 @@ $menu-slide: "transform 500ms ease" !default;
   position: absolute;
   text-align: center;
   height: $tabbar-height;
-  top:0;
-  @media #{$medium-up} {
-    text-align: left;
-  }
+  top: 0;
+  @media #{$medium-up} { text-align: left; }
 
   // still need to make these non-presentational
   &.left {
@@ -218,6 +226,8 @@ $menu-slide: "transform 500ms ease" !default;
       padding: $off-canvas-link-padding;
       color: $off-canvas-link-color;
       border-bottom: $off-canvas-link-border-bottom;
+      &:hover { background: scale-color($tabbar-bg, $lightness: -30%); }
+      transition: background 300ms ease;
     }
   }
 
@@ -250,23 +260,6 @@ $menu-slide: "transform 500ms ease" !default;
     }
 }
 
-// OFF CANVAS MENUS
-// These are the containers that contain the off canvas content
-@mixin left-off-canvas-menu {
-  @include kill-flicker;
-  @include off-canvas-menu;
-  @include translate3d(-100%,0,0);
-  left: 0;
-  * { @include kill-flicker; }
-}
-@mixin right-off-canvas-menu {
-  @include kill-flicker;
-  @include off-canvas-menu;
-  @include translate3d(100%,0,0);
-  right: 0;
-}
-
-
 //
 // DEFAULT CLASSES
 //
@@ -276,16 +269,16 @@ $menu-slide: "transform 500ms ease" !default;
     .off-canvas-wrap { @include off-canvas-wrap; }
     .inner-wrap { @include inner-wrap; }
 
-    nav.tab-bar { @include tab-bar-base; }
+    .tab-bar { @include tab-bar-base; }
 
-    section.left-small { @include left-small-section; }
-    section.right-small { @include right-small-section; }
+    .left-small { @include tabbar-small-section($position: left); }
+    .right-small { @include tabbar-small-section($position: right); }
 
-    section.tab-bar-section { @include tab-bar-section; }
+    .tab-bar-section { @include tab-bar-section; }
 
     // MENU BUTTON
     // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
-    a.menu-icon {
+    .tab-bar .menu-icon {
       text-indent: $tabbar-menu-icon-text-indent;
       width: $tabbar-height;
       height: $tabbar-height;
@@ -297,7 +290,6 @@ $menu-slide: "transform 500ms ease" !default;
 
       // this is the actual hamburger icon
       span {
-
         position: absolute;
         display: block;
         width: $tabbar-hamburger-icon-width;
@@ -311,7 +303,7 @@ $menu-slide: "transform 500ms ease" !default;
                               1px 16px 1px 1px $tabbar-menu-icon-color,
                               1px 22px 1px 1px $tabbar-menu-icon-color;
         }
-          box-shadow:        0 10px 0 1px $tabbar-menu-icon-color,
+          box-shadow:         0 10px 0 1px $tabbar-menu-icon-color,
                               0 16px 0 1px $tabbar-menu-icon-color,
                               0 22px 0 1px $tabbar-menu-icon-color;
       }
@@ -322,14 +314,14 @@ $menu-slide: "transform 500ms ease" !default;
                               1px 16px 1px 1px $tabbar-menu-icon-hover,
                               1px 22px 1px 1px $tabbar-menu-icon-hover;
         }
-          box-shadow:        0 10px 0 1px $tabbar-menu-icon-hover,
+          box-shadow:         0 10px 0 1px $tabbar-menu-icon-hover,
                               0 16px 0 1px $tabbar-menu-icon-hover,
                               0 22px 0 1px $tabbar-menu-icon-hover;
       }
     }
 
-    .left-off-canvas-menu { @include left-off-canvas-menu; }
-    .right-off-canvas-menu { @include right-off-canvas-menu; }
+    .left-off-canvas-menu { @include off-canvas-menu($position: left); }
+    .right-off-canvas-menu { @include off-canvas-menu($position: right); }
 
     ul.off-canvas-list { @include off-canvas-list; }
 
@@ -340,7 +332,7 @@ $menu-slide: "transform 500ms ease" !default;
       > .inner-wrap {
         @include translate3d($off-canvas-width,0,0);
       }
-      a.exit-off-canvas { @include back-link;}
+      .exit-off-canvas { @include back-link;}
     }
 
     .move-left {
@@ -348,7 +340,7 @@ $menu-slide: "transform 500ms ease" !default;
         @include translate3d(-($off-canvas-width),0,0);
 
       }
-      a.exit-off-canvas { @include back-link; }
+      .exit-off-canvas { @include back-link; }
     }
 
     // Opera 12.16 and IE9 - don't have 3d transforms