foundation-rails 5.3.1.0 → 5.3.3.0

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

@@ -36,17 +36,23 @@ $button-function-factor: -20% !default;
 // We use these to control button border styles.
 $button-border-width: 0px !default;
 $button-border-style: solid !default;
-$button-bg: $primary-color !default;
-$button-border-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
-$button-hover-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
-
+$button-bg-color: $primary-color !default;
+$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
+$button-border-color: $button-bg-hover !default;
+$secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
+$secondary-button-border-color: $secondary-button-bg-hover !default;
+$success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
+$success-button-border-color: $success-button-bg-hover !default;
+$alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
+$alert-button-border-color: $alert-button-bg-hover !default;
 
 // We use this to set the default radius used throughout the core.
 $button-radius: $global-radius !default;
 $button-round: $global-rounded !default;
 
-// We use this to set default opacity for disabled buttons.
+// We use this to set default opacity and cursor for disabled buttons.
 $button-disabled-opacity: 0.7 !default;
+$button-disabled-cursor: $cursor-default-value !default;
 
 
 //
@@ -115,44 +121,54 @@ $button-disabled-opacity: 0.7 !default;
   }
 }
 
+// @MIXIN
+//
+// we use this mixin to create the button hover and border colors
+
 // @MIXIN
 //
 // We use this mixin to add button color styles
 //
 // $bg - Primary color set in settings file. Default: $button-bg.
-// $bc - Button Border Color. Default: $button-border-color
-// $bh - Button Hover Color. Default: $button-hover-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
-@mixin button-style($bg:$button-bg, $radius:false, $disabled:false, $bc:$button-border-color, $bh:$button-hover-color) {
+// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
+// $border-color - Button Border Color. Default: $button-border-color
+@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
 
   // We control which background styles are used,
   // these can be removed by setting $bg:false
   @if $bg {
+
+    @if $bg-hover == null {
+      $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
+    }
+
+    @if $border-color == null {
+      $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
+    }
+
     // This find the lightness percentage of the background color.
     $bg-lightness: lightness($bg);
+    $bg-hover-lightness: lightness($bg-hover);
 
     background-color: $bg;
-    border-color: $bc;
+    border-color: $border-color;
     &:hover,
-    &:focus { background-color: $bh; }
+    &:focus { background-color: $bg-hover; }
 
     // We control the text color for you based on the background color.
-    @if $bg-lightness > 70% {
-      color: $button-font-color-alt;
-      &:hover,
-      &:focus { color: $button-font-color-alt; }
-    }
-    @else {
-      color: $button-font-color;
-      &:hover,
-      &:focus { color: $button-font-color; }
+    color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
+
+    &:hover,
+    &:focus {
+      color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
     }
   }
 
   // We can set $disabled:true to create a disabled transparent button.
   @if $disabled {
-    cursor: $cursor-default-value;
+    cursor: $button-disabled-cursor;
     opacity: $button-disabled-opacity;
     box-shadow: none;
     &:hover,
@@ -176,10 +192,17 @@ $button-disabled-opacity: 0.7 !default;
 // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
 // $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false.
 // $is-prefix - Not used? Default:false.
-@mixin button($padding:$button-med, $bg:$button-bg, $radius:false, $full-width:false, $disabled:false, $is-prefix:false) {
+// $bg-hover - Button Hover Color - Default null - see button-style mixin
+// $border-color - Button Border Color - Default null - see button-style mixin
+// $transition - We can control whether or not to include the background-color transition property - Default:true.
+@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
   @include button-base;
   @include button-size($padding, $full-width);
-  @include button-style($bg, $radius, $disabled);
+  @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
+
+  @if $transition {
+    @include single-transition(background-color);
+  }
 }
 
 
@@ -194,9 +217,9 @@ $button-disabled-opacity: 0.7 !default;
 
       @include single-transition(background-color);
 
-      &.secondary { @include button-style($bg:$secondary-color); }
-      &.success   { @include button-style($bg:$success-color); }
-      &.alert     { @include button-style($bg:$alert-color); }
+      &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+      &.success   { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+      &.alert     { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
 
       &.large  { @include button-size($padding:$button-lrg); }
       &.small  { @include button-size($padding:$button-sml); }
@@ -209,10 +232,10 @@ $button-disabled-opacity: 0.7 !default;
       &.radius { @include button-style($bg:false, $radius:true); }
       &.round  { @include button-style($bg:false, $radius:$button-round); }
 
-      &.disabled, &[disabled] { @include button-style($bg:$button-bg, $disabled:true);
-        &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
-        &.success { @include button-style($bg:$success-color, $disabled:true); }
-        &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+      &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
+        &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+        &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+        &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
       }
     }
 

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

@@ -108,28 +108,28 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     }
 
     &.right:before {
-      left: auto;
-      right: $f-dropdown-triangle-side-offset;
+      #{$default-float}: auto;
+      #{$opposite-direction}: $f-dropdown-triangle-side-offset;
     }
     &.right:after {
-      left: auto;
-      right: $f-dropdown-triangle-side-offset - 1;
+      #{$default-float}: auto;
+      #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
     }
   }
 
-  @if $triangle == left {
+  @if $triangle == #{$default-float} {
     margin-top: 0;
-    margin-left: $f-dropdown-margin-right;
+    margin-#{$default-float}: $f-dropdown-margin-right;
 
     &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, right);
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
       position: absolute;
       top: $f-dropdown-triangle-side-offset;
       #{$default-float}: -($f-dropdown-triangle-size * 2);
       z-index: 99;
     }
     &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, right);
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
       position: absolute;
       top: $f-dropdown-triangle-side-offset - 1;
       #{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
@@ -138,24 +138,24 @@ $f-dropdown-content-padding: rem-calc(20) !default;
 
   }
 
-  @if $triangle == right {
+  @if $triangle == #{$opposite-direction} {
     margin-top: 0;
-    margin-left: -$f-dropdown-margin-right;
+    margin-#{$default-float}: -$f-dropdown-margin-right;
 
     &:before {
-      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, left);
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
       position: absolute;
       top: $f-dropdown-triangle-side-offset;
       #{$opposite-direction}: -($f-dropdown-triangle-size * 2);
-      left: auto;
+      #{$default-float}: auto;
       z-index: 99;
     }
     &:after {
-      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, left);
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
       position: absolute;
       top: $f-dropdown-triangle-side-offset - 1;
       #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
-      left: auto;
+      #{$default-float}: auto;
       z-index: 98;
     }
 
@@ -171,7 +171,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       top: auto;
       bottom: -($f-dropdown-triangle-size * 2);
       #{$default-float}: $f-dropdown-triangle-side-offset;
-      right: auto;
+      #{$opposite-direction}: auto;
       z-index: 99;
     }
     &:after {
@@ -180,7 +180,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
       top: auto;
       bottom: -($f-dropdown-triangle-size * 2) - 2;
       #{$default-float}: $f-dropdown-triangle-side-offset - 1;
-      right: auto;
+      #{$opposite-direction}: auto;
       z-index: 98;
     }
 
@@ -219,12 +219,12 @@ $f-dropdown-content-padding: rem-calc(20) !default;
     .f-dropdown {
       @include dropdown-container(list, bottom);
 
-      &.drop-right {
-        @include dropdown-container(list, left);
+      &.drop-#{$opposite-direction} {
+        @include dropdown-container(list, #{$default-float});
       }
 
-      &.drop-left {
-        @include dropdown-container(list, right);
+      &.drop-#{$default-float} {
+        @include dropdown-container(list, #{$opposite-direction});
       }
 
       &.drop-top {

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

@@ -32,6 +32,7 @@ $input-border-style: solid !default;
 $input-border-width: 1px !default;
 $input-border-radius: $global-radius !default;
 $input-disabled-bg: #ddd !default;
+$input-disabled-cursor: $cursor-default-value !default;
 $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
 $input-include-glowing-effect: true !default;
 
@@ -56,6 +57,9 @@ $input-prefix-overflow: hidden !default;
 $input-prefix-font-color: #333 !default;
 $input-prefix-font-color-alt: #fff !default;
 
+// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
+$input-number-spinners: true !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 !default;
@@ -126,9 +130,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     border-color: $input-focus-border-color;
     outline: none;
   }
+  // Disbaled Styles
+  &:disabled {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
 
   // Disabled background input background color
-  &[disabled], &[readonly], fieldset[disabled] & { background-color: $input-disabled-bg; }
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
 }
 
 // @MIXIN
@@ -327,6 +341,23 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     background-color: $select-hover-bg-color;
     border-color: $input-focus-border-color;
   }
+  // Disbaled Styles
+  &:disabled {
+    background-color: $input-disabled-bg;
+    cursor: $input-disabled-cursor;
+  }
+}
+
+// We use this mixin to turn on/off HTML5 number spinners
+@mixin html5number($browser, $on:true) {
+  @if $on==false {
+      @if $browser==webkit {
+        -webkit-appearance: none;
+        margin: 0;
+      } @else if $browser==moz {
+        -moz-appearance: textfield;
+      }
+  }
 }
 
 @include exports("form") {
@@ -437,6 +468,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       width:100%;
     }
 
+    /* HTML5 Number spinners settings */
+    input[type=number] {
+      @include html5number(moz, $input-number-spinners)
+    }
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      @include html5number(webkit, $input-number-spinners);
+    }
+
     /* We add basic fieldset styling */
     fieldset {
       @include fieldset;
@@ -495,7 +535,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     }
 
     input.error,
-    textarea.error {
+    textarea.error,
+    select.error {
       margin-bottom: 0;
     }
     label.error { @include form-label-error-color; }

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

@@ -314,7 +314,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.3.1/";
+    font-family: "/5.3.3/";
   }
 
   meta.foundation-mq-small {
@@ -370,7 +370,7 @@ $cursor-text-value: text !default;
       font-family: $body-font-family;
       font-weight: $body-font-weight;
       font-style: $body-font-style;
-      line-height: 1; // Set to $base-line-height to take on browser default of 150%
+      line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
       position: relative;
       cursor: $cursor-default-value;
     }

data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss

@@ -165,7 +165,6 @@ $icon-bar-item-padding: 1.25rem !default;
 }
 
 // We use this to quickly create icon bars with a single mixin
-//
 // $height – The overall calculated height of the icon bar (horizontal)
 // $bar-bg – the background color of the bar
 // $bar-font-color – the font color

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

@@ -39,7 +39,7 @@ $joyride-tip-close-weight: $font-weight-normal !default;
 $joyride-screenfill: rgba(0,0,0,0.5) !default;
 
 
-// We decided not to make a mixin for this because it relies on 
+// We decided not to make a mixin for this because it relies on
 // predefined classes to work properly.
 @include exports("joyride") {
   @if $include-html-joyride-classes {
@@ -73,6 +73,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       padding: $joyride-tip-padding;
 
       .button { margin-bottom: 0 !important; }
+
+      .joyride-prev-tip { margin-right: 10px; }
     }
 
     /* Add a little css triangle pip, older browser just miss out on the fanciness of it */

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

@@ -107,11 +107,11 @@ $menu-slide: "transform 500ms ease" !default;
   transition: transform 500ms ease 0s;
   -webkit-overflow-scrolling: touch;
   @if $position == left {
-    @include translate3d(-100%,0,0);
+    @include translate3d(-100.5%,0,0);
     left: 0;
   }
   @if $position == right {
-    @include translate3d(100%,0,0);
+    @include translate3d(100.5%,0,0);
     right: 0;
   }
 }
@@ -150,7 +150,7 @@ $menu-slide: "transform 500ms ease" !default;
   height: $tabbar-height;
   line-height: $tabbar-line-height;
 
-  // make sure it's below the .exit-offcanvas link
+  // make sure it's below the .exit-off-canvas link
   position: relative;
   // z-index: 999;
 
@@ -338,10 +338,7 @@ $menu-slide: "transform 500ms ease" !default;
         transform: none;
         z-index: 1003;
       }
-      .exit-offcanvas-menu {
-        @include back-link;
-        z-index: 1002;
-      }
+      .exit-off-canvas { @include back-link; }
     }
 
     // Older browsers

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

@@ -52,7 +52,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
   width: 100%;
   background: $reveal-overlay-bg-old;
   background: $reveal-overlay-bg;
-  z-index: 99;
+  z-index: 1004;
   display: none;
   top: 0;
   #{$default-float}: 0;
@@ -70,7 +70,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     visibility: hidden;
     display: none;
     position: absolute;
-    z-index: 100;
+    z-index: 1005;
     width: 100vw;
     top:0;
     #{$default-float}: 0;
@@ -179,32 +179,30 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
       visibility: visible;
     }
 
-    @media #{$medium-up} {
-
-      dialog, .#{$reveal-modal-class} {
-        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
-
-        &.radius { @include reveal-modal-style($radius:true); }
-        &.round  { @include reveal-modal-style($radius:$reveal-round); }
-        
-        &.collapse { @include reveal-modal-style($padding:0); }
-
-        &.tiny  { @include reveal-modal-base(false, 30%); }
-        &.small { @include reveal-modal-base(false, 40%); }
-        &.medium  { @include reveal-modal-base(false, 60%); }
-        &.large { @include reveal-modal-base(false, 70%); }
-        &.xlarge { @include reveal-modal-base(false, 95%); }
-      }
+    dialog, .#{$reveal-modal-class} {
+      @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
+
+      &.radius { @include reveal-modal-style($radius:true); }
+      &.round  { @include reveal-modal-style($radius:$reveal-round); }
+      
+      &.collapse { @include reveal-modal-style($padding:0); }
+
+      &.tiny  { @include reveal-modal-base(false, 30%); }
+      &.small { @include reveal-modal-base(false, 40%); }
+      &.medium  { @include reveal-modal-base(false, 60%); }
+      &.large { @include reveal-modal-base(false, 70%); }
+      &.xlarge { @include reveal-modal-base(false, 95%); }
+    }
 
-      dialog, .#{$reveal-modal-class} {
-        &.full {
-          @include reveal-modal-base(false, 100vw);
-          top:0;
-          left:0;
-          height: 100vh;
-          min-height:100vh;
-          margin-left: 0 !important;
-        }
+    dialog, .#{$reveal-modal-class} {
+      &.full {
+        @include reveal-modal-base(false, 100vw);
+        top:0;
+        left:0;
+        height:100%;
+        height: 100vh;
+        min-height:100vh;
+        margin-left: 0 !important;
       }
     }