foundation-rails 5.2.1.0 → 5.2.2.0

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

@@ -11,7 +11,6 @@ $include-html-grid-classes: $include-html-classes !default;
 $include-xl-html-grid-classes: false !default;
 
 $row-width: rem-calc(1000) !default;
-$column-gutter: rem-calc(30) !default;
 $total-columns: 12 !default;
 
 //
@@ -37,7 +36,7 @@ $total-columns: 12 !default;
 
 // For creating container, nested, and collapsed rows.
 //
-// 
+//
 // $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
 @mixin grid-row($behavior: false) {
 
@@ -90,13 +89,13 @@ $total-columns: 12 !default;
 // $collapse - Get rid of gutter padding on column? Default: false.
 // $float - Should this float? Default: true. Options: true, false, left, right.
 @mixin grid-column(
-  $columns:false, 
-  $last-column:false, 
-  $center:false, 
-  $offset:false, 
-  $push:false, 
-  $pull:false, 
-  $collapse:false, 
+  $columns:false,
+  $last-column:false,
+  $center:false,
+  $offset:false,
+  $push:false,
+  $pull:false,
+  $collapse:false,
   $float:true,
   $position:false) {
 
@@ -141,7 +140,7 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none !important;
+    float: none;
   }
 
   // If offset, calculate appropriate margins
@@ -154,21 +153,6 @@ $total-columns: 12 !default;
 // $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
 @mixin grid-html-classes($size) {
 
-  .column.#{$size}-centered,
-  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
-
-  .column.#{$size}-uncentered,
-  .columns.#{$size}-uncentered {
-    margin-#{$default-float}: 0;
-    margin-#{$opposite-direction}: 0;
-    float: $default-float !important;
-  }
-
-  .column.#{$size}-uncentered.opposite,
-  .columns.#{$size}-uncentered.opposite {
-    float: $opposite-direction;
-  }
-
   @for $i from 0 through $total-columns - 1 {
     .#{$size}-push-#{$i} {
       @include grid-column($push:$i, $collapse:null, $float:false);
@@ -199,7 +183,22 @@ $total-columns: 12 !default;
     margin-#{$opposite-direction}: 0;
     left: auto;
     right: auto;
-    float: $default-float; 
+    float: $default-float;
+  }
+
+  .column.#{$size}-centered,
+  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+  .column.#{$size}-uncentered,
+  .columns.#{$size}-uncentered {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    float: $default-float !important;
+  }
+
+  .column.#{$size}-uncentered.opposite,
+  .columns.#{$size}-uncentered.opposite {
+    float: $opposite-direction;
   }
 }
 

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

@@ -172,10 +172,6 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       position: absolute;
       border-radius: 3px;
       z-index: 102;
-      @if $experimental {
-        -moz-box-shadow: 0 0 30px #ffffff;
-        -webkit-box-shadow: 0 0 15px #ffffff;
-      }
       box-shadow: 0 0 15px #ffffff;
     }
 

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

@@ -15,7 +15,7 @@ $magellan-padding: 10px !default;
 @include exports("magellan") {
   @if $include-html-magellan-classes {
 
-    #{data('magellan-expedition')} {
+    #{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
       background: $magellan-bg;
       z-index: 50;
       min-width: 100%;
@@ -31,4 +31,4 @@ $magellan-padding: 10px !default;
     }
 
   }
-}
+}

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

@@ -83,6 +83,15 @@ $menu-slide: "transform 500ms ease" !default;
   width: 100%;
 }
 
+@mixin translate3d($tx,$ty,$tz) {
+      -ms-transform: translate($tx,$ty);
+  -webkit-transform: translate3d($tx,$ty,$tz);
+     -moz-transform: translate3d($tx,$ty,$tz);
+      -ms-transform: translate3d($tx,$ty,$tz);
+       -o-transform: translate3d($tx,$ty,$tz);
+          transform: translate3d($tx,$ty,$tz)
+}
+
 // basic styles for off-canvas menu container
 @mixin off-canvas-menu($position) {
   @include kill-flicker;
@@ -106,23 +115,14 @@ $menu-slide: "transform 500ms ease" !default;
   }
 }
 
-// TRANSLATE 3D
-@mixin translate3d($tx,$ty,$tz) {
-  -webkit-transform: translate3d($tx,$ty,$tz);
-  -moz-transform: translate3d($tx,$ty,$tz);
-  -ms-transform: translate3d($tx,$ty,$tz);
-  -o-transform: translate3d($tx,$ty,$tz);
-  transform: translate3d($tx,$ty,$tz)
-}
-
 // OFF CANVAS WRAP
 // Wrap visible content and prevent scroll bars
 @mixin off-canvas-wrap {
   @include kill-flicker;
   @include wrap-base;
-  overflow-x: hidden;
+  overflow: hidden;
   &.move-right,
-  &.move-left { height: 100%; }
+  &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; }
 }
 
 // INNER WRAP
@@ -285,6 +285,7 @@ $menu-slide: "transform 500ms ease" !default;
     display: block;
     height: 0;
     width: $width;
+    line-height: 1;
 
     // disable height centering if $top is not false
     @if $top {
@@ -300,24 +301,14 @@ $menu-slide: "transform 500ms ease" !default;
     @else {
       left: ($tabbar-menu-icon-width - $width)/2;
     }
-    @if $experimental {
-      -webkit-box-shadow: 1px 0px                       1px $thickness $color,
-                          1px ($gap + $thickness)       1px $thickness $color,
-                          1px (2*$gap + 2*$thickness)   1px $thickness $color;
-    }
-      box-shadow:         0   0px                       0   $thickness $color,
-                          0   $gap + $thickness         0   $thickness $color,
-                          0   (2 * $gap + 2*$thickness) 0   $thickness $color;
+    box-shadow: 0   0px                       0   $thickness $color,
+                0   $gap + $thickness         0   $thickness $color,
+                0   (2 * $gap + 2*$thickness) 0   $thickness $color;
   }
   &:hover span {
-    @if $experimental {
-      -webkit-box-shadow: 1px 0px                       1px $thickness $hover-color,
-                          1px ($gap + $thickness)       1px $thickness $hover-color,
-                          1px (2*$gap + 2*$thickness)   1px $thickness $hover-color;
-    }
-      box-shadow:         0   0px                       0   $thickness $hover-color,
-                          0   $gap + $thickness         0   $thickness $hover-color,
-                          0   (2 * $gap + 2*$thickness) 0   $thickness $hover-color;
+    box-shadow: 0   0px                       0   $thickness $hover-color,
+                0   $gap + $thickness         0   $thickness $hover-color,
+                0   (2 * $gap + 2*$thickness) 0   $thickness $hover-color;
   }
 }
 
@@ -348,6 +339,7 @@ $menu-slide: "transform 500ms ease" !default;
       padding: $tabbar-menu-icon-padding;
       color: $topbar-menu-link-color;
       position: relative;
+      @include translate3d(0,0,0);
 
       // this is the actual hamburger icon
       @include hamburger();
@@ -376,15 +368,6 @@ $menu-slide: "transform 500ms ease" !default;
       .exit-off-canvas { @include back-link; }
     }
 
-    // Opera 12.16 and IE9 - don't have 3d transforms
-    .csstransforms.no-csstransforms3d {
-      .left-off-canvas-menu { @include translate2d(-100%, 0); }
-      .right-off-canvas-menu { @include translate2d(100%, 0); }
-
-      .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
-      .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
-    }
-
     // Older browsers
     .no-csstransforms {
       .left-off-canvas-menu { left: -($off-canvas-width); }

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

@@ -18,7 +18,7 @@ $orbit-caption-padding: rem-calc(10 14) !default;
 $orbit-caption-height: auto !default;
 
 // We use these to control the left/right nav styles
-$orbit-nav-bg: none !default;
+$orbit-nav-bg: transparent !default;
 $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
 $orbit-nav-arrow-color: #fff !default;
 $orbit-nav-arrow-color-hover: #fff !default;
@@ -37,30 +37,46 @@ $orbit-slide-number-bg: rgba(0,0,0,0) !default;
 $orbit-slide-number-font-color: #fff !default;
 $orbit-slide-number-padding: rem-calc(5) !default;
 
+// We use these to controls the css animation
+$orbit-animation-speed: 500ms !default;
+$orbit-animation-ease: ease-in-out !default;
+
 // Graceful Loading Wrapper and preloader
 $wrapper-class: "slideshow-wrapper" !default;
 $preloader-class: "preloader" !default;
 
+// Hide controls on small
+$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. 
+// 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);
+}
+
+@mixin rotate($d) {
+  -webkit-transform: rotate($d);
+  -moz-transform: rotate($d);
+  -ms-transform: rotate($d);
+  -o-transform: rotate($d);
+  transform: rotate($d);
+}
+
 @include exports("orbit") {
   @if $include-html-orbit-classes {
 
-    @if $experimental {
-      @-webkit-keyframes rotate {
-        from { -webkit-transform: rotate(0deg); }
-        to { -webkit-transform: rotate(360deg); }
-      }
-      @-moz-keyframes rotate {
-        from { -moz-transform: rotate(0deg); }
-        to { -moz-transform: rotate(360deg); }
-      }
-      @-o-keyframes rotate {
-        from { -o-transform: rotate(0deg); }
-        to { -o-transform: rotate(360deg); }
-      }
-    }
     @keyframes rotate {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
+      from { @include rotate(0deg); }
+      to { @include rotate(360deg); }
     }
 
     /* Orbit Graceful Loading */
@@ -88,39 +104,25 @@ $preloader-class: "preloader" !default;
           .orbit-caption { display: block; }
         }
       }
-    }
 
-    // Orbit preloader
-    .#{$preloader-class} {
-      display: block;
-      width: 40px;
-      height: 40px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -20px;
-      margin-left: -20px;
-      border: solid 3px;
-      border-color: #555 #fff;
-      @include radius(1000px);
-      @if $experimental {
-        -webkit-animation-name: rotate;
-        -webkit-animation-duration: 1.5s;
-        -webkit-animation-iteration-count: infinite;
-        -webkit-animation-timing-function: linear;
-        -moz-animation-name: rotate;
-        -moz-animation-duration: 1.5s;
-        -moz-animation-iteration-count: infinite;
-        -moz-animation-timing-function: linear;
-        -o-animation-name: rotate;
-        -o-animation-duration: 1.5s;
-        -o-animation-iteration-count: infinite;
-        -o-animation-timing-function: linear;
+      // Orbit preloader
+      .#{$preloader-class} {
+        display: block;
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -20px;
+        margin-left: -20px;
+        border: solid 3px;
+        border-color: #555 #fff;
+        @include radius(1000px);
+        animation-name: rotate;
+        animation-duration: 1.5s;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
       }
-      animation-name: rotate;
-      animation-duration: 1.5s;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
     }
 
     .orbit-container {
@@ -140,103 +142,57 @@ $preloader-class: "preloader" !default;
 
         img { display: block; max-width: 100%; }
         
-        &.fade > * {
-          -webkit-transform: translate3d(0,0,0);
-          opacity: 0.01;
-          transition: opacity .25s ease-in-out;
-          -moz-transition: opacity .25s ease-in-out;
-          -webkit-transition: opacity .25s ease-in-out;
+        &.fade li {
+          opacity: 0;
+          transition: opacity $orbit-animation-speed $orbit-animation-ease;
+          @include translate3d(0,0,0);
           &.animate-in {
             opacity: 1;
             z-index: 20;
-            transition: opacity 500ms ease-in-out;
-            -moz-transition: opacity 500ms ease-in-out;
-            -webkit-transition: opacity 500ms ease-in-out;
+            transition: opacity $orbit-animation-speed $orbit-animation-ease;
           }
           &.animate-out {
-            opacity: 0.01;
             z-index: 10;
-            transition: opacity 500ms ease-in-out;
-            -moz-transition: opacity 500ms ease-in-out;
-            -webkit-transition: opacity 500ms ease-in-out;
+            transition: opacity $orbit-animation-speed $orbit-animation-ease;
           }
         }
-        &.swipe-next > * {
-          -webkit-transform: translate3d(100%,0,0);
+            
+        &.swipe-next li {
+          @include translate3d(100%,0,0);
           &.animate-in {
-            -webkit-transform:translate3d(0,0,0);
-            -moz-transform:translate3d(0,0,0);
-            -ms-transform:translate3d(0,0,0);
-            -o-transform:translate3d(0,0,0);
-            transform:translate3d(0,0,0);
-            -webkit-transition-duration:500ms;
-            -moz-transition-duration:500ms;
-            -o-transition-duration:500ms;
-            transition-duration:500ms;
+            @include translate3d(0,0,0);
+            transition-duration:$orbit-animation-speed;
           }
           &.animate-out {
-            -webkit-transform:translate3d(-100%,0,0);
-            -moz-transform:translate3d(-100%,0,0);
-            -ms-transform:translate3d(-100%,0,0);
-            -o-transform:translate3d(-100%,0,0);
-            transform:translate3d(-100%,0,0);
-            -webkit-transition-duration:500ms;
-            -moz-transition-duration:500ms;
-            -o-transition-duration:500ms;
-            transition-duration:500ms;
+            @include translate3d(-100%,0,0);
+            transition-duration:$orbit-animation-speed;
           }
         }
 
-        &.swipe-prev > * {
-          -webkit-transform:translate3d(-100%,0,0);
-          -moz-transform:translate3d(-100%,0,0);
-          -ms-transform:translate3d(-100%,0,0);
-          -o-transform:translate3d(-100%,0,0);
-          transform:translate3d(-100%,0,0);
+        &.swipe-prev li {
+          @include translate3d(-100%,0,0);
           &.animate-in {
-            -webkit-transform:translate3d(0,0,0);
-            -moz-transform:translate3d(0,0,0);
-            -ms-transform:translate3d(0,0,0);
-            -o-transform:translate3d(0,0,0);
-            transform:translate3d(0,0,0);
-            -webkit-transition-duration:500ms;
-            -moz-transition-duration:500ms;
-            -o-transition-duration:500ms;
-            transition-duration:500ms;
+            @include translate3d(0,0,0);
+            transition-duration:$orbit-animation-speed;
           }
           &.animate-out {
-            -webkit-transform:translate3d(100%,0,0);
-            -moz-transform:translate3d(100%,0,0);
-            -ms-transform:translate3d(100%,0,0);
-            -o-transform:translate3d(100%,0,0);
-            transform:translate3d(100%,0,0);
-            -webkit-transition-duration:500ms;
-            -moz-transition-duration:500ms;
-            -o-transition-duration:500ms;
-            transition-duration:500ms;
+            @include translate3d(100%,0,0);
+            transition-duration:$orbit-animation-speed;
           }
         }
 
-        &>* {
+        li {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
-          -webkit-transform:translate3d(100%,0,0);
-          -moz-transform:translate3d(100%,0,0);
-          -ms-transform:translate3d(100%,0,0);
-          -o-transform:translate3d(100%,0,0);
-          transform:translate3d(100%,0,0);
+          @include translate3d(100%,0,0);
 
           &.active {
             opacity: 1;
             top: 0;
             left: 0;
-            -webkit-transform:translate3d(0,0,0);
-            -moz-transform:translate3d(0,0,0);
-            -ms-transform:translate3d(0,0,0);
-            -o-transform:translate3d(0,0,0);
-            transform:translate3d(0,0,0);
+            @include translate3d(0,0,0);
           }
 
           .orbit-caption {
@@ -283,6 +239,8 @@ $preloader-class: "preloader" !default;
             position: relative;
             right: 20px;
             top: 5px;
+          } @else {
+              display:none; // This is used by the Javascript to not create a handler.
           }
         }
 
@@ -307,10 +265,11 @@ $preloader-class: "preloader" !default;
             width: 11px;
             height: 14px;
             border: inset 8px;
-            border-right-style: solid;
-            border-color: transparent transparent transparent #fff;
+            border-left-style: solid;
+            @include rotate(180deg);
+            border-color: transparent #fff transparent transparent;
             &.dark { 
-              border-color: transparent transparent transparent #333;
+              border-color: transparent #333 transparent transparent;
             }
           }
         }
@@ -370,36 +329,37 @@ $preloader-class: "preloader" !default;
           border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
         }
       }
-    }
 
-    .orbit-bullets-container { text-align: center; }
-    .orbit-bullets {
-      margin: 0 auto 30px auto;
-      overflow: hidden;
-      position: relative;
-      top: 10px;
-      float: none;
-      text-align: center;
-      display: block;
-
-      li {
-        display: inline-block;
-        width: $orbit-bullet-radius;
-        height: $orbit-bullet-radius;
-        background: $orbit-bullet-nav-color;
-        // float: $default-float;
+      .orbit-bullets-container { text-align: center; }
+      .orbit-bullets {
+        margin: 0 auto 30px auto;
+        overflow: hidden;
+        position: relative;
+        top: 10px;
         float: none;
-        margin-#{$opposite-direction}: 6px;
-        @include radius(1000px);
+        text-align: center;
+        display: block;
+
+        li {
+          display: inline-block;
+          width: $orbit-bullet-radius;
+          height: $orbit-bullet-radius;
+          background: $orbit-bullet-nav-color;
+          // float: $default-float;
+          float: none;
+          margin-#{$opposite-direction}: 6px;
+          @include radius(1000px);
 
-        &.active {
-          background: $orbit-bullet-nav-color-active;
-        }
+          &.active {
+            background: $orbit-bullet-nav-color-active;
+          }
 
-        &:last-child { margin-#{$opposite-direction}: 0; }
+          &:last-child { margin-#{$opposite-direction}: 0; }
+        }
       }
     }
 
+
     .touch {
       .orbit-container {
         .orbit-prev,
@@ -424,17 +384,31 @@ $preloader-class: "preloader" !default;
     }
 
     @media #{$small-only} {
-      .orbit-stack-on-small {
-        .orbit-slides-container {height: auto !important;}
-        .orbit-slides-container > * {
-          position: relative;
-          margin-left: 0% !important;
+        .orbit-stack-on-small {
+
+            .orbit-slides-container {height: auto !important;}
+            .orbit-slides-container > * {
+                position: relative;
+                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;
+            }
+
+            @if $orbit-timer-hide-for-small {
+                .orbit-timer{display: none;}
+            }
+            @if $orbit-nav-hide-for-small {
+                .orbit-next,.orbit-prev{display: none;}
+            }
+            @if $orbit-bullet-hide-for-small {
+                .orbit-bullets{display: none;}
+            }
         }
-        .orbit-timer,
-        .orbit-next,
-        .orbit-prev,
-        .orbit-bullets {display: none;}
-      }
     }
 
   }