foundation-rails 5.3.3.0 → 5.4.0.0

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

@@ -13,6 +13,8 @@ $include-xl-html-grid-classes: false !default;
 $row-width: rem-calc(1000) !default;
 $total-columns: 12 !default;
 
+$last-child-float: $opposite-direction !default;
+
 //
 // Grid Functions
 //
@@ -231,7 +233,7 @@ $total-columns: 12 !default;
     .column,
     .columns { @include grid-column($columns:$total-columns); }
 
-    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+    [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
     [class*="column"] + [class*="column"].end { float: $default-float; }
 
     @media #{$small-up} {

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

@@ -13,11 +13,11 @@ $include-html-icon-bar-classes: $include-html-classes !default;
 // @variables
 
 // We use these to style the icon-bar and items
-$icon-bar-bg: #333 !default;
-$icon-bar-font-color: #fff !default;
+$icon-bar-bg: $oil !default;
+$icon-bar-font-color: $white !default;
 $icon-bar-font-size: 1rem !default;
 $icon-bar-hover-color: $primary-color !default;
-$icon-bar-icon-color: #fff !default;
+$icon-bar-icon-color: $white !default;
 $icon-bar-icon-size: 1.875rem !default;
 $icon-bar-image-width: 1.875rem !default;
 $icon-bar-image-height: 1.875rem !default;
@@ -28,10 +28,8 @@ $icon-bar-item-padding: 1.25rem !default;
 // @mixins
 //
 
-// We use this mixin to create the base styles for our switch element.
+// We use this mixin to create the base styles for our Icon bar element.
 //
-// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
-// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
 @mixin icon-bar-base() {
  
  	width: 100%;
@@ -85,7 +83,7 @@ $icon-bar-item-padding: 1.25rem !default;
 		text-align: left;
 	}
 
-	&.vertical {
+	&.vertical, &.small-vertical{
 		height: 100%;
 		width: auto;
 
@@ -95,12 +93,34 @@ $icon-bar-item-padding: 1.25rem !default;
 			float: none;
 		}
 	}
+
+	&.medium-vertical {
+		@media #{$medium-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+	&.large-vertical {
+		@media #{$large-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
 }
 
 // We use this mixin to create the size styles for icon bars.
-//
-// $height - Height (in px) of the switch. Default: $switch-height-med.
-// $font-size - Font size of text in switch. Default: $switch-font-size-med.
 @mixin icon-bar-size(
 	$padding: $icon-bar-item-padding,
 	$font-size: $icon-bar-font-size,
@@ -109,8 +129,8 @@ $icon-bar-item-padding: 1.25rem !default;
 	$image-height: $icon-bar-image-height) {
 
 	& > * {
-		font-size: $icon-bar-font-size;
-		padding: $icon-bar-item-padding;
+		font-size: $font-size;
+		padding: $padding;
 
 		i, img { 
 
@@ -120,24 +140,17 @@ $icon-bar-item-padding: 1.25rem !default;
 		}
 
 		i {
-			font-size: $icon-bar-icon-size;
+			font-size: $icon-size;
 		}
 
 		img {
-			width: $icon-bar-image-width;
-			height: $icon-bar-image-height;
+			width: $image-width;
+			height: $image-height;
 		}
 	}
 
 }
 
-// We use this mixin to add color and other fanciness to the switches.
-//
-// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
-// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
-// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
-// $radius - Radius to apply to switch. Default: false.
-// $base-style - Apply base styles? Default: true.
 @mixin icon-bar-style(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
@@ -165,12 +178,12 @@ $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
-// $bar-hover-color – okay these are pretty obvious variables
-// $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
+// $height - The overall calculated height of the icon bar (horizontal)
+// $bar-bg - the background color of the bar
+// $bar-font-color - the font color
+// $bar-hover-color - okay these are pretty obvious variables
+// $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.
 
 @mixin icon-bar(
@@ -208,23 +221,73 @@ $icon-bar-item-padding: 1.25rem !default;
 
 		&.two-up {
 			.item { width: 50%; }
-			&.vertical .item { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 		&.three-up {
 			.item { width: 33.3333%; }
-			&.vertical .item { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 		&.four-up {
 			.item { width: 25%; }
-			&.vertical .item { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 		&.five-up {
 			.item { width: 20%; }
-			&.vertical .item { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 		&.six-up {
 			.item { width: 16.66667%; }
-			&.vertical .item { width: auto; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
 		}
 	}
 }

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

@@ -10,15 +10,15 @@
 $include-html-joyride-classes: $include-html-classes !default;
 
 // Controlling default Joyride styles
-$joyride-tip-bg: #333 !default;
+$joyride-tip-bg: $oil !default;
 $joyride-tip-default-width: 300px !default;
 $joyride-tip-padding: rem-calc(18 20 24) !default;
-$joyride-tip-border: solid 1px #555 !default;
+$joyride-tip-border: solid 1px $charcoal !default;
 $joyride-tip-radius: 4px !default;
 $joyride-tip-position-offset: 22px !default;
 
 // Here, we're setting the tip font styles
-$joyride-tip-font-color: #fff !default;
+$joyride-tip-font-color: $white !default;
 $joyride-tip-font-size: rem-calc(14) !default;
 $joyride-tip-header-weight: $font-weight-bold !default;
 
@@ -28,10 +28,10 @@ $joyride-tip-nub-size: 10px !default;
 // This adjusts the styles for the timer when its enabled
 $joyride-tip-timer-width: 50px !default;
 $joyride-tip-timer-height: 3px !default;
-$joyride-tip-timer-color: #666 !default;
+$joyride-tip-timer-color: $steel !default;
 
 // This changes up the styles for the close button
-$joyride-tip-close-color: #777 !default;
+$joyride-tip-close-color: $monsoon !default;
 $joyride-tip-close-size: 24px !default;
 $joyride-tip-close-weight: $font-weight-normal !default;
 
@@ -153,7 +153,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       line-height: .5 !important;
 
       &:hover,
-      &:focus { color: #eee !important; }
+      &:focus { color: $smoke !important; }
     }
 
     .joyride-modal-bg {
@@ -170,11 +170,11 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     }
 
     .joyride-expose-wrapper {
-      background-color: #ffffff;
+      background-color: $white;
       position: absolute;
       border-radius: 3px;
       z-index: 102;
-      box-shadow: 0 0 15px #ffffff;
+      box-shadow: 0 0 15px $white;
     }
 
     .joyride-expose-cover {

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

@@ -12,15 +12,15 @@ $include-html-keystroke-classes: $include-html-classes !default;
 // We use these to control text styles.
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
 $keystroke-font-size: inherit !default;
-$keystroke-font-color: #222 !default;
-$keystroke-font-color-alt: #fff !default;
+$keystroke-font-color: $jet !default;
+$keystroke-font-color-alt: $white !default;
 $keystroke-function-factor: -7% !default;
 
 // We use this to control keystroke padding.
 $keystroke-padding: rem-calc(2 4 0) !default;
 
 // We use these to control background and border styles.
-$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+$keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default;
 $keystroke-border-style: solid !default;
 $keystroke-border-width: 1px !default;
 $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
@@ -30,7 +30,7 @@ $keystroke-radius: $global-radius !default;
 // @mixins
 //
 // We use this mixin to create keystroke styles.
-// $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+// $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default;
 @mixin keystroke($bg:$keystroke-bg) {
   // This find the lightness percentage of the background color.
   $bg-lightness: lightness($bg);

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

@@ -16,8 +16,8 @@ $label-radius: $global-radius !default;
 // We use these to style the label text
 $label-font-sizing: rem-calc(11) !default;
 $label-font-weight: $font-weight-normal !default;
-$label-font-color: #333 !default;
-$label-font-color-alt: #fff !default;
+$label-font-color: $oil !default;
+$label-font-color-alt: $white !default;
 $label-font-family: $body-font-family !default;
 
 //

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

@@ -9,7 +9,7 @@
 //
 $include-html-magellan-classes: $include-html-classes !default;
 
-$magellan-bg: #fff !default;
+$magellan-bg: $white !default;
 $magellan-padding: 10px !default;
 
 @include exports("magellan") {

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

@@ -8,11 +8,11 @@
 // Off Canvas Tab Bar Variables
 $include-html-off-canvas-classes: $include-html-classes !default;
 
-$tabbar-bg: #333 !default;
+$tabbar-bg: $oil !default;
 $tabbar-height: rem-calc(45) !default;
 $tabbar-icon-width: $tabbar-height !default;
 $tabbar-line-height: $tabbar-height !default;
-$tabbar-color: #fff !default;
+$tabbar-color: $white !default;
 $tabbar-middle-padding: 0 rem-calc(10) !default;
 
 // Off Canvas Divider Styles
@@ -21,31 +21,37 @@ $tabbar-right-section-border: $tabbar-left-section-border;
 
 
 // Off Canvas Tab Bar Headers
-$tabbar-header-color: #fff !default;
+$tabbar-header-color: $white !default;
 $tabbar-header-weight: $font-weight-bold !default;
 $tabbar-header-line-height: $tabbar-height !default;
 $tabbar-header-margin: 0 !default;
 
 // Off Canvas Menu Variables
 $off-canvas-width: rem-calc(250) !default;
-$off-canvas-bg: #333 !default;
+$off-canvas-bg: $oil !default;
 
 // Off Canvas Menu List Variables
 $off-canvas-label-padding: 0.3rem rem-calc(15) !default;
-$off-canvas-label-color: #999 !default;
+$off-canvas-label-color: $aluminum !default;
 $off-canvas-label-text-transform: uppercase !default;
 $off-canvas-label-font-size: rem-calc(12) !default;
 $off-canvas-label-font-weight: $font-weight-bold !default;
-$off-canvas-label-bg: #444 !default;
+$off-canvas-label-bg: $tuatara !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;
-$off-canvas-link-color: rgba(#FFF, 0.7) !default;
+$off-canvas-link-color: rgba($white, 0.7) !default;
 $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
+$off-canvas-back-bg: #444 !default;
+$off-canvas-back-border-top: $off-canvas-label-border-top !default;
+$off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default;
+$off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default;
+$off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
+$off-canvas-back-hover-border-bottom: none !default;
 
 // Off Canvas Menu Icon Variables
-$tabbar-menu-icon-color: #FFF !default;
+$tabbar-menu-icon-color: $white !default;
 $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;
 
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
@@ -62,9 +68,9 @@ $tabbar-hamburger-icon-gap: 6px !default;
 // Off Canvas Back-Link Overlay
 $off-canvas-overlay-transition: background 300ms ease !default;
 $off-canvas-overlay-cursor: pointer !default;
-$off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5) !default;
-$off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
-$off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;
+$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default;
+$off-canvas-overlay-background: rgba($white, 0.2) !default;
+$off-canvas-overlay-background-hover: rgba($white, 0.05) !default;
 
 // Transition Variables
 $menu-slide: "transform 500ms ease" !default;
@@ -189,7 +195,9 @@ $menu-slide: "transform 500ms ease" !default;
   text-align: center;
   height: $tabbar-height;
   top: 0;
-  @media #{$medium-up} { text-align: left; }
+  @media #{$medium-up} { 
+    &.left, &.right { text-align: left; }
+  }
 
   // still need to make these non-presentational
   &.left {
@@ -340,6 +348,28 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap-left {
+      .right-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
+    .offcanvas-overlap-right {
+      .left-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
 
     // Older browsers
     .no-csstransforms {
@@ -352,3 +382,125 @@ $menu-slide: "transform 500ms ease" !default;
 
   }
 }
+
+//
+// Off-Canvas Submenu Classes
+//
+@mixin off-canvas-submenu($position) {
+  @include kill-flicker;
+  * { @include kill-flicker; }
+  width: $off-canvas-width;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  margin: 0;
+  overflow-y: auto;
+  background: $off-canvas-bg;
+  z-index: 1002;
+  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;
+  }
+  -webkit-transition: -webkit-#{$menu-slide};
+  -moz-transition: -moz-#{$menu-slide};
+  -ms-transition: -ms-#{$menu-slide};
+  -o-transition: -o-#{$menu-slide};
+  transition: #{$menu-slide};
+    
+  //back button style like label
+  .back > a {
+    padding: $off-canvas-label-padding;
+    color: $off-canvas-label-color;
+    text-transform: $off-canvas-label-text-transform;
+    font-weight: $off-canvas-label-font-weight;
+    background: $off-canvas-back-bg;
+    border-top: $off-canvas-back-border-top;
+    border-bottom: $off-canvas-back-border-bottom;
+    &:hover {
+    	background: $off-canvas-back-hover-bg;
+    	border-top: $off-canvas-back-hover-border-top;
+    	border-bottom: $off-canvas-back-hover-border-bottom;
+    }
+    margin: $off-canvas-label-margin;
+    @if $position == right {
+      @if $text-direction == rtl {
+        &:before {
+          @include icon-double-arrows($position: left);        
+        }
+      } @else {
+        &:after {
+          @include icon-double-arrows($position: right);        
+        }
+      }      
+    }
+    @if $position == left {
+      @if $text-direction == rtl {
+        &:after {
+          @include icon-double-arrows($position: right);        
+        }
+      } @else {
+        &:before {
+          @include icon-double-arrows($position: left);
+        }
+      }
+    }
+  }
+}
+//Left double angle quote or Right double angle quote chars
+@mixin icon-double-arrows ($position){
+  @if $position == left {
+    content: "\AB";
+    @if $text-direction == rtl {
+      margin-left: 0.5rem;
+    } @else {
+      margin-right: 0.5rem;
+    }
+  } 
+  @if $position == right {
+    content: "\BB";
+    @if $text-direction == rtl {
+      margin-right: 0.5rem;
+    } @else {
+      margin-left: 0.5rem;
+    }
+  }
+  display: inline;
+}
+
+@if $include-html-off-canvas-classes {
+  .left-submenu {
+    @include off-canvas-submenu($position: left);   
+    &.move-right {
+      @include translate3d(0%,0,0);
+    }
+  }
+  
+  .right-submenu { 
+    @include off-canvas-submenu($position: right);    
+    &.move-left {
+      @include translate3d(0%,0,0);
+    }
+  }
+  
+  @if $text-direction == rtl {
+    .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { 
+      @include icon-double-arrows($position: left);
+    }
+    .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { 
+      @include icon-double-arrows($position: right);
+    }
+  } @else {
+    .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after { 
+       @include icon-double-arrows($position: right);
+    }
+    .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before { 
+       @include icon-double-arrows($position: left);
+    }
+  }
+}