foundation-rails 5.2.2.0 → 5.2.3.0

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

@@ -59,7 +59,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
     position: relative;
 
     // This creates the base styles for the triangle pip
-    &:before {
+    &:after {
       position: absolute;
       content: "";
       width: 0;
@@ -84,7 +84,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
     padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-sml;
       #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
@@ -94,7 +94,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
     padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-med;
       #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
@@ -104,7 +104,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
     padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-lrg;
       #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
@@ -113,7 +113,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 
   // We can control the pip color. We didn't use logic in this case, just set it and forget it.
   @if $pip-color {
-    &:before { border-color: $pip-color transparent transparent transparent; }
+    &:after { border-color: $pip-color transparent transparent transparent; }
   }
 }
 
@@ -123,7 +123,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
       &.tiny { @include dropdown-button(tiny,$base-style:false); }
       &.small { @include dropdown-button(small,$base-style:false); }
       &.large { @include dropdown-button(large,$base-style:false); }
-      &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+      &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
     }
   }
 }

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

@@ -16,7 +16,7 @@ $form-spacing: rem-calc(16) !default;
 // We use these to style the labels in different ways
 $form-label-pointer: pointer !default;
 $form-label-font-size: rem-calc(14) !default;
-$form-label-font-weight: normal !default;
+$form-label-font-weight: $font-weight-normal !default;
 $form-label-line-height: 1.5 !default;
 $form-label-font-color: scale-color(#000, $lightness: 30%) !default;
 $form-label-small-transform: capitalize !default;
@@ -44,7 +44,7 @@ $fieldset-margin: rem-calc(18 0) !default;
 
 // We use these to style the legends when you use them
 $legend-bg: #fff !default;
-$legend-font-weight: bold !default;
+$legend-font-weight: $font-weight-bold !default;
 $legend-padding: rem-calc(0 3) !default;
 
 // We use these to style the prefix and postfix input elements
@@ -60,7 +60,7 @@ $input-prefix-font-color-alt: #fff !default;
 $input-error-message-padding: rem-calc(6 9 9) !default;
 $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-weight: $font-weight-normal !default;
 $input-error-message-font-style: italic !default;
 $input-error-message-font-color: #fff !default;
 $input-error-message-font-color-alt: #333 !default;
@@ -152,7 +152,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
   // Alignment options
   @if $alignment == right {
-    float: none;
+    float: none !important;
     text-align: right;
   }
   @else if $alignment == inline {
@@ -306,12 +306,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 @mixin form-select  {
   -webkit-appearance: none !important;
   background-color: $select-bg-color;
-  background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
   background-repeat: no-repeat;
   background-position: if($text-direction == 'rtl', 3%, 97%) center;
   border: $input-border-width $input-border-style $input-border-color;
   padding: $form-spacing / 2;
   font-size: $input-font-size;
+  color: $input-font-color;
+  line-height: normal;
   @include radius(0);
   &.radius { @include radius($global-radius); }
   &:hover {

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

@@ -11,6 +11,9 @@
 // styles get applied to [data-mysite-plugin], etc
 $namespace: false !default;
 
+// Control the inclusion of experimental properties
+$experimental: true !default;
+
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with browser-based text zoom or user-set defaults.
 
@@ -26,6 +29,16 @@ $base-line-height: 150% !default;
 // Global Foundation Mixins
 //
 
+// @mixins
+//
+// We use this to optionally include experimental or 
+// explicitly vendor prefixed properties
+@mixin experimental() {
+  @if $experimental {
+    @content;
+  }
+}
+
 // @mixins
 //
 // We use this to control border radius.
@@ -110,9 +123,56 @@ $base-line-height: 150% !default;
   }
 }
 
+// @mixins
+//
+// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
+// $width - Width of hamburger icon in rem
+// $left - If false, icon will be centered horizontally || explicitly set value in rem
+// $top - If false, icon will be centered vertically || explicitly set value in rem
+// $thickness - thickness of lines in hamburger icon, set value in px
+// $gap - spacing between the lines in hamburger icon, set value in px
+// $color - icon color
+// $hover-color - icon color during hover
+// $offcanvas - Set to true of @include in offcanvas
+@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
+  span:after {
+    content: '';
+    position: absolute;
+    display: block;
+    height: 0;
+    
+    @if $offcanvas {
+      @if $top {
+        top: $top;
+      }
+      @else {
+        top: 50%;
+        margin-top: -$width/2;
+      }
+    	@if $left {
+    	  left: $left;
+    	}
+    	@else {
+    	  left: ($tabbar-menu-icon-width - $width)/2;
+    	}
+    }
+    	
+    box-shadow:
+      0 0px 0 $thickness $color,
+      0 $gap + $thickness 0 $thickness $color,
+      0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+    width: $width;
+  }
+  span:hover:after {
+    box-shadow:
+      0 0px 0 $thickness $hover-color,
+      0 $gap + $thickness 0 $thickness $hover-color,
+      0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
+  }
+}
+
 // We use this to do clear floats
 @mixin clearfix {
-  *zoom:1;
   &:before, &:after { content: " "; display: table; }
   &:after { clear: both; }
 }
@@ -164,11 +224,15 @@ $base-line-height: 150% !default;
   clip: auto;
 }
 
+// We use these to define default font weights
+$font-weight-normal: normal !default;
+$font-weight-bold: bold !default;
+
 // We use these to control various global styles
 $body-bg: #fff !default;
 $body-font-color: #222 !default;
 $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
-$body-font-weight: normal !default;
+$body-font-weight: $font-weight-normal !default;
 $body-font-style: normal !default;
 
 // We use this to control font-smoothing
@@ -258,7 +322,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
   
   meta.foundation-version {
-    font-family: "/5.2.2/";
+    font-family: "/5.2.3/";
   }
   
   meta.foundation-mq-small {

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

@@ -140,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
@@ -177,7 +177,6 @@ $total-columns: 12 !default;
   @for $i from 0 through $total-columns - 1 {
     .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
   }
-  .#{$size}-reset-order,
   .#{$size}-reset-order {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;

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

@@ -14,6 +14,7 @@ $inline-list-top-margin: 0 !default;
 $inline-list-opposite-margin: 0 !default;
 $inline-list-bottom-margin: rem-calc(17) !default;
 $inline-list-default-float-margin: rem-calc(-22) !default;
+$inline-list-default-float-list-margin: rem-calc(22) !default;
 
 $inline-list-padding: 0 !default;
 
@@ -41,7 +42,7 @@ $inline-list-children-display: block !default;
   & > li {
     list-style: none;
     float: $default-float;
-    margin-#{$default-float}: rem-calc(22);
+    margin-#{$default-float}: $inline-list-default-float-list-margin;
     display: $inline-list-display;
     &>* { display: $inline-list-children-display; }
   }

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

@@ -20,7 +20,7 @@ $joyride-tip-position-offset: 22px !default;
 // Here, we're setting the tip font styles
 $joyride-tip-font-color: #fff !default;
 $joyride-tip-font-size: rem-calc(14) !default;
-$joyride-tip-header-weight: bold !default;
+$joyride-tip-header-weight: $font-weight-bold !default;
 
 // This changes the nub size
 $joyride-tip-nub-size: 10px !default;
@@ -33,7 +33,7 @@ $joyride-tip-timer-color: #666 !default;
 // This changes up the styles for the close button
 $joyride-tip-close-color: #777 !default;
 $joyride-tip-close-size: 24px !default;
-$joyride-tip-close-weight: normal !default;
+$joyride-tip-close-weight: $font-weight-normal !default;
 
 // When Joyride is filling the screen, we use this style for the bg
 $joyride-screenfill: rgba(0,0,0,0.5) !default;
@@ -57,7 +57,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       top: 0;
       #{$default-float}: 2.5%;
       font-family: inherit;
-      font-weight: normal;
+      font-weight: $font-weight-normal;
       width: 95%;
     }
 

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

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

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

@@ -4,7 +4,6 @@
 
 @import "global";
 @import "type";
-@import "top-bar";
 
 // Off Canvas Tab Bar Variables
 $include-html-off-canvas-classes: $include-html-classes !default;
@@ -22,7 +21,7 @@ $tabbar-right-section-border: $tabbar-left-section-border;
 
 // Off Canvas Tab Bar Headers
 $tabbar-header-color: #fff !default;
-$tabbar-header-weight: bold !default;
+$tabbar-header-weight: $font-weight-bold !default;
 $tabbar-header-line-height: $tabbar-height !default;
 $tabbar-header-margin: 0 !default;
 
@@ -34,7 +33,7 @@ $off-canvas-bg: #333 !default;
 $off-canvas-label-padding: 0.3rem rem-calc(15) !default;
 $off-canvas-label-color: #999 !default;
 $off-canvas-label-text-transform: uppercase !default;
-$off-canvas-label-font-weight: bold !default;
+$off-canvas-label-font-weight: $font-weight-bold !default;
 $off-canvas-label-bg: #444 !default;
 $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
 $off-canvas-label-border-bottom: none !default;
@@ -104,6 +103,7 @@ $menu-slide: "transform 500ms ease" !default;
   background: $off-canvas-bg;
   z-index: 1001;
   box-sizing: content-box;
+  transition: transform 500ms ease 0s;
   -webkit-overflow-scrolling: touch;
   @if $position == left {
     @include translate3d(-100%,0,0);
@@ -262,56 +262,6 @@ $menu-slide: "transform 500ms ease" !default;
     }
 }
 
-// @MIXIN
-//
-// We use this mixin to generate hamburger icon
-//
-// $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
-// $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
-// $top - If false, icon will be centered vertically || explicitly set value in rem Default: $tabbar-hamburger-icon-top= False
-// $thickness - thickness of lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-thickness = 1px
-// $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
-// $color - icon color Default: $tabbar-menu-icon-color
-// $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
-@mixin hamburger($width:$tabbar-hamburger-icon-width,
-                 $left: $tabbar-hamburger-icon-left,
-                 $top: $tabbar-hamburger-icon-top,
-                 $thickness:$tapbar-hamburger-icon-thickness,
-                 $gap:$tapbar-hamburger-icon-gap,
-                 $color:$tabbar-menu-icon-color,
-                 $hover-color:$tabbar-menu-icon-hover) {
-  span {
-    position: absolute;
-    display: block;
-    height: 0;
-    width: $width;
-    line-height: 1;
-
-    // disable height centering if $top is not false
-    @if $top {
-      top: $tabbar-hamburger-icon-top;
-    }
-    @else {
-      top: ($tabbar-menu-icon-height - rem-calc(3 * $thickness) - rem-calc(2 * $gap))/2;
-    }
-    // disable width centering if $top is not false
-    @if $left {
-      left: $tabbar-hamburger-icon-left;
-    }
-    @else {
-      left: ($tabbar-menu-icon-width - $width)/2;
-    }
-    box-shadow: 0   0px                       0   $thickness $color,
-                0   $gap + $thickness         0   $thickness $color,
-                0   (2 * $gap + 2*$thickness) 0   $thickness $color;
-  }
-  &:hover span {
-    box-shadow: 0   0px                       0   $thickness $hover-color,
-                0   $gap + $thickness         0   $thickness $hover-color,
-                0   (2 * $gap + 2*$thickness) 0   $thickness $hover-color;
-  }
-}
-
 //
 // DEFAULT CLASSES
 //
@@ -337,12 +287,22 @@ $menu-slide: "transform 500ms ease" !default;
       display: block;
       line-height: $tabbar-menu-icon-line-height;
       padding: $tabbar-menu-icon-padding;
-      color: $topbar-menu-link-color;
+      color: $tabbar-menu-icon-color;
       position: relative;
-      @include translate3d(0,0,0);
-
-      // this is the actual hamburger icon
-      @include hamburger();
+      transform: translate3d(0,0,0);
+
+      // @include for the hamburger menu-icon
+      //
+      // Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color)
+      // $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
+      // $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
+      // $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False
+      // $thickness - thickness of lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-thickness = 1px
+      // $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
+      // $color - icon color Default: $tabbar-menu-icon-color
+      // $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
+      // $offcanvas - Set to true
+      @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tapbar-hamburger-icon-thickness, $tapbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
     }
 
     .left-off-canvas-menu { @include off-canvas-menu($position: left); }
@@ -367,6 +327,20 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap {
+      .left-off-canvas-menu, .right-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-offcanvas-menu {
+        @include back-link;
+        z-index: 1002;
+      }
+    }
 
     // Older browsers
     .no-csstransforms {

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

@@ -50,25 +50,25 @@ $orbit-nav-hide-for-small: true !default;
 $orbit-bullet-hide-for-small: true !default;
 $orbit-timer-hide-for-small: true !default;
 
-// CSS Transform 
-// This function is needed in order to put in all of the browser prefixes. 
-// The normal tranform attribute still does not work properly across all browsers. 
+// CSS Transform
+// This function is needed in order to put in all of the browser prefixes.
+// The normal tranform attribute still does not work properly across all browsers.
 // In order to receive the transitionEnd events then you will still need to use the vendor prefixes
 @mixin translate3d($x,$y,$z) {
   -ms-transform:translate($x,$y);
-  -webkit-transform:translate3d($x,$y,$z);
-  -moz-transform:translate3d($x,$y,$z);
-  // -ms-transform:translate3d($x,$y,$z);
-  -o-transform:translate3d($x,$y,$z);
-  transform:translate3d($x,$y,$z);
+
+  -webkit-transform: translate3d($x,$y,$z);
+     -moz-transform: translate3d($x,$y,$z);
+       -o-transform: translate3d($x,$y,$z);
+          transform: translate3d($x,$y,$z);
 }
 
 @mixin rotate($d) {
   -webkit-transform: rotate($d);
-  -moz-transform: rotate($d);
-  -ms-transform: rotate($d);
-  -o-transform: rotate($d);
-  transform: rotate($d);
+     -moz-transform: rotate($d);
+      -ms-transform: rotate($d);
+       -o-transform: rotate($d);
+          transform: rotate($d);
 }
 
 @include exports("orbit") {
@@ -141,8 +141,8 @@ $orbit-timer-hide-for-small: true !default;
         -webkit-transform: translateZ(0);
 
         img { display: block; max-width: 100%; }
-        
-        &.fade li {
+
+        &.fade > li {
           opacity: 0;
           transition: opacity $orbit-animation-speed $orbit-animation-ease;
           @include translate3d(0,0,0);
@@ -156,8 +156,8 @@ $orbit-timer-hide-for-small: true !default;
             transition: opacity $orbit-animation-speed $orbit-animation-ease;
           }
         }
-            
-        &.swipe-next li {
+
+        &.swipe-next > li {
           @include translate3d(100%,0,0);
           &.animate-in {
             @include translate3d(0,0,0);
@@ -169,7 +169,7 @@ $orbit-timer-hide-for-small: true !default;
           }
         }
 
-        &.swipe-prev li {
+        &.swipe-prev > li {
           @include translate3d(-100%,0,0);
           &.animate-in {
             @include translate3d(0,0,0);
@@ -181,15 +181,19 @@ $orbit-timer-hide-for-small: true !default;
           }
         }
 
-        li {
+        > li {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           @include translate3d(100%,0,0);
 
+          > a { display: block; }
+
           &.active {
             opacity: 1;
+            // "relative" positioning is required for variable height of children.
+            position:relative;
             top: 0;
             left: 0;
             @include translate3d(0,0,0);
@@ -217,7 +221,7 @@ $orbit-timer-hide-for-small: true !default;
         top: 10px;
         #{$default-float}: 10px;
         font-size: 12px;
-        span { font-weight: 700; padding: $orbit-slide-number-padding;}
+        span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
         color: $orbit-slide-number-font-color;
         background: $orbit-slide-number-bg;
         z-index: 10;
@@ -256,7 +260,7 @@ $orbit-timer-hide-for-small: true !default;
           border-top: none;
           border-bottom: none;
         }
-      
+
         // Pause button
         &.paused {
           & > span {
@@ -268,14 +272,14 @@ $orbit-timer-hide-for-small: true !default;
             border-left-style: solid;
             @include rotate(180deg);
             border-color: transparent #fff transparent transparent;
-            &.dark { 
+            &.dark {
               border-color: transparent #333 transparent transparent;
             }
           }
         }
       }
-      
-      
+
+
 
       &:hover .orbit-timer > span { display: block; }
 
@@ -388,15 +392,15 @@ $orbit-timer-hide-for-small: true !default;
 
             .orbit-slides-container {height: auto !important;}
             .orbit-slides-container > * {
-                position: relative;
+                position: relative !important;
                 margin-left: 0% !important;
-                opacity:1 !important;
-                -webkit-transform:none !important;
-                -moz-transform:none !important;
-                -ms-transform:none !important;
-                -o-transform:none !important;
-                transform:none !important;
-                transition:none !important;
+                opacity: 1 !important;
+                -webkit-transform: none !important;
+                   -moz-transform: none !important;
+                    -ms-transform: none !important;
+                     -o-transform: none !important;
+                        transform: none !important;
+                transition: none !important;
             }
 
             @if $orbit-timer-hide-for-small {
@@ -408,6 +412,10 @@ $orbit-timer-hide-for-small: true !default;
             @if $orbit-bullet-hide-for-small {
                 .orbit-bullets{display: none;}
             }
+
+            .orbit-slide-number {
+              display: none;
+            }
         }
     }