foundation-rails 5.4.5.0 → 5.5.0.0

data/vendor/assets/stylesheets/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
 //
@@ -31,7 +37,7 @@ $icon-bar-item-padding: 1.25rem !default;
 // We use this mixin to create the base styles for our Icon bar element.
 //
 @mixin icon-bar-base() {
- 
+
  	width: 100%;
 	font-size: 0;
 	display: inline-block;
@@ -45,9 +51,9 @@ $icon-bar-item-padding: 1.25rem !default;
 		padding: $icon-bar-item-padding;
 		float: left;
 
-		i, img { 
+		i, img {
 			display: block;
-			margin: 0 auto; 
+			margin: 0 auto;
 
 			& + label {
 				margin-top: .0625rem;
@@ -67,8 +73,8 @@ $icon-bar-item-padding: 1.25rem !default;
 
 	&.label-right > * {
 
-		i, img { 
-			margin: 0 .0625rem 0 0; 
+		i, img {
+			margin: 0 .0625rem 0 0;
 			display: inline-block;
 
 			& + label {
@@ -132,7 +138,7 @@ $icon-bar-item-padding: 1.25rem !default;
 		font-size: $font-size;
 		padding: $padding;
 
-		i, img { 
+		i, img {
 
 			& + label {
 				margin-top: .0625rem;
@@ -154,26 +160,52 @@ $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 {
-				color: $bar-icon-color;
-			}
+			background: $bar-hover-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") {

data/vendor/assets/stylesheets/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; }

data/vendor/assets/stylesheets/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);
     }
   }

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

@@ -116,7 +116,7 @@ $orbit-timer-hide-for-small: true !default;
       }
     }
 
- 
+
     .orbit-container {
       overflow: hidden;
       width: 100%;
@@ -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;
@@ -213,26 +213,26 @@ $orbit-timer-hide-for-small: true !default;
           border-top: none;
           border-bottom: none;
         }
-      
+
         // Pause button
         &.paused {
           & > span {
             #{$opposite-direction}: -4px;
-            top: 0px;
+            top: 0;
             width: 11px;
             height: 14px;
             border: inset 8px;
             border-left-style: solid;
             border-color: transparent;
             border-left-color: $white;
-            &.dark { 
+            &.dark {
               border-left-color: $oil;
             }
           }
         }
       }
-      
-      
+
+
 
       &:hover .orbit-timer > span { display: block; }
 
@@ -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;
         }
 

data/vendor/assets/stylesheets/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;
+          }
         }
       }
 

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

@@ -3,6 +3,7 @@
 // Licensed under MIT Open Source
 
 @import "global";
+@import "grid";
 
 //
 // @name _reveal.scss
@@ -25,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-side: rem-calc(11) !default;
+$reveal-close-top: rem-calc(10) !default;
+$reveal-close-side: rem-calc(22) !default;
 $reveal-close-color: $base !default;
 $reveal-close-weight: $font-weight-bold !default;
 
@@ -48,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;
@@ -190,6 +192,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         height:100%;
         height: 100vh;
         min-height:100vh;
+        max-width: none !important;
         margin-left: 0 !important;
       }
 

data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss

@@ -63,8 +63,6 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   overflow: hidden;
   margin: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
-  margin-#{$opposite-direction}: 0;
-  margin-#{$default-float}: rem-calc(-12);
 
   dt {
     text-transform: uppercase;
@@ -76,7 +74,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
     float: $default-float;
     display: inline;
     margin-#{$default-float}: rem-calc(16);
-    margin-bottom: rem-calc(10);
+    margin-bottom: 0;
     font-family: $sub-nav-font-family;
     font-weight: $sub-nav-font-weight;
     font-size: $font-size;

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

@@ -43,12 +43,19 @@ $switch-active-color: $primary-color !default;
 @mixin switch-base(
   $transition-speed:$switch-paddle-transition-speed,
   $transition-ease:$switch-paddle-transition-ease) {
- 
+
+  padding: 0;
+  border: none;
+  position: relative;
+  outline: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
 
   // 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;
@@ -80,15 +87,20 @@ $switch-active-color: $primary-color !default;
     content: "";
     display: block;
     background: $switch-paddle-bg;
-    position: absolute; top: .25rem; left: .25rem;
-    width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+    position: absolute;
+    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);
   }
 
@@ -109,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 {
@@ -131,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) {
 
@@ -146,7 +161,7 @@ $switch-active-color: $primary-color !default;
     }
 
     input:checked + label {
-      background: $switch-active-color;
+      background: $active-color;
     }
   }
 
@@ -186,13 +201,10 @@ $switch-active-color: $primary-color !default;
   $paddle-bg: $switch-paddle-bg,
   $active-color: $switch-active-color,
   $radius:false,
-    $base-style:true) {
-    padding: 0;
-    border: none;
-    position: relative;
+  $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") {
@@ -210,7 +222,7 @@ $switch-active-color: $primary-color !default;
         &.tiny { @include switch-size($switch-height-tny); }
 
         // Add a radius to the switch
-        &.radius { 
+        &.radius {
           label { @include radius(4px); }
           label:after { @include radius(3px); }
         }