foundation-rails 5.2.3.0 → 5.3.0.0

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

@@ -10,6 +10,7 @@ $include-html-off-canvas-classes: $include-html-classes !default;
 
 $tabbar-bg: #333 !default;
 $tabbar-height: rem-calc(45) !default;
+$tabbar-icon-width: $tabbar-height !default;
 $tabbar-line-height: $tabbar-height !default;
 $tabbar-color: #fff !default;
 $tabbar-middle-padding: 0 rem-calc(10) !default;
@@ -33,6 +34,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-size: rem-calc(12) !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;
@@ -47,16 +49,15 @@ $tabbar-menu-icon-color: #FFF !default;
 $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;
 
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
-$tabbar-menu-icon-width: $tabbar-height !default;
+$tabbar-menu-icon-width: $tabbar-icon-width !default;
 $tabbar-menu-icon-height: $tabbar-height !default;
-$tabbar-menu-icon-line-height: rem-calc(33) !default;
 $tabbar-menu-icon-padding: 0 !default;
 
 $tabbar-hamburger-icon-width: rem-calc(16) !default;
 $tabbar-hamburger-icon-left: false !default;
 $tabbar-hamburger-icon-top: false !default;
-$tapbar-hamburger-icon-thickness: 1px !default;
-$tapbar-hamburger-icon-gap: 6px !default;
+$tabbar-hamburger-icon-thickness: 1px !default;
+$tabbar-hamburger-icon-gap: 6px !default;
 
 // Off Canvas Back-Link Overlay
 $off-canvas-overlay-transition: background 300ms ease !default;
@@ -147,7 +148,7 @@ $menu-slide: "transform 500ms ease" !default;
   background: $tabbar-bg;
   color: $tabbar-color;
   height: $tabbar-height;
-  line-height: $tabbar-height;
+  line-height: $tabbar-line-height;
 
   // make sure it's below the .exit-offcanvas link
   position: relative;
@@ -166,7 +167,7 @@ $menu-slide: "transform 500ms ease" !default;
 // SMALL SECTIONS
 // These are small sections on the left and right that contain the off-canvas toggle buttons;
 @mixin tabbar-small-section($position) {
-  width: $tabbar-height;
+  width: $tabbar-icon-width;
   height: $tabbar-height;
   position: absolute;
   top: 0;
@@ -193,15 +194,15 @@ $menu-slide: "transform 500ms ease" !default;
   // still need to make these non-presentational
   &.left {
     left: 0;
-    right: $tabbar-height;
+    right: $tabbar-icon-width;
   }
   &.right {
-    left: $tabbar-height;
+    left: $tabbar-icon-width;
     right: 0;
   }
   &.middle {
-    left: $tabbar-height;
-    right: $tabbar-height;
+    left: $tabbar-icon-width;
+    right: $tabbar-icon-width;
   }
 }
 
@@ -214,9 +215,11 @@ $menu-slide: "transform 500ms ease" !default;
 
   li {
     label {
+      display: block;
       padding: $off-canvas-label-padding;
       color: $off-canvas-label-color;
       text-transform: $off-canvas-label-text-transform;
+      font-size: $off-canvas-label-font-size;
       font-weight: $off-canvas-label-font-weight;
       background: $off-canvas-label-bg;
       border-top: $off-canvas-label-border-top;
@@ -282,10 +285,9 @@ $menu-slide: "transform 500ms ease" !default;
     // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
     .tab-bar .menu-icon {
       text-indent: $tabbar-menu-icon-text-indent;
-      width: $tabbar-height;
-      height: $tabbar-height;
+      width: $tabbar-menu-icon-width;
+      height: $tabbar-menu-icon-height;
       display: block;
-      line-height: $tabbar-menu-icon-line-height;
       padding: $tabbar-menu-icon-padding;
       color: $tabbar-menu-icon-color;
       position: relative;
@@ -297,12 +299,12 @@ $menu-slide: "transform 500ms ease" !default;
       // $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
+      // $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px
+      // $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-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)
+      @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
     }
 
     .left-off-canvas-menu { @include off-canvas-menu($position: left); }

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

@@ -37,10 +37,6 @@ $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;
@@ -50,33 +46,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.
-// 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);
-       -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 {
 
+    @-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 { @include rotate(0deg); }
-      to { @include rotate(360deg); }
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
     }
 
     /* Orbit Graceful Loading */
@@ -103,6 +91,9 @@ $orbit-timer-hide-for-small: true !default;
 
           .orbit-caption { display: block; }
         }
+        .orbit-bullets li {
+          display: inline-block;
+        }
       }
 
       // Orbit preloader
@@ -125,6 +116,7 @@ $orbit-timer-hide-for-small: true !default;
       }
     }
 
+ 
     .orbit-container {
       overflow: hidden;
       width: 100%;
@@ -142,61 +134,24 @@ $orbit-timer-hide-for-small: true !default;
 
         img { display: block; max-width: 100%; }
 
-        &.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 $orbit-animation-speed $orbit-animation-ease;
-          }
-          &.animate-out {
-            z-index: 10;
-            transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          }
-        }
-
-        &.swipe-next > li {
-          @include translate3d(100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(-100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        &.swipe-prev > li {
-          @include translate3d(-100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        > li {
+        &>* {
           position: absolute;
           top: 0;
-          left: 0;
           width: 100%;
-          @include translate3d(100%,0,0);
-
-          > a { display: block; }
+          @if $text-direction == rtl {
+            margin-right: 100%;
+          }
+          @else {
+            margin-left: 100%;
+          }
 
-          &.active {
-            opacity: 1;
-            // "relative" positioning is required for variable height of children.
-            position:relative;
-            top: 0;
-            left: 0;
-            @include translate3d(0,0,0);
+          &:first-child {
+            @if $text-direction == rtl {
+            margin-right: 0%;
+            }
+            @else {
+            margin-left: 0%;
+            }
           }
 
           .orbit-caption {
@@ -221,7 +176,7 @@ $orbit-timer-hide-for-small: true !default;
         top: 10px;
         #{$default-float}: 10px;
         font-size: 12px;
-        span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
+        span { font-weight: 700; padding: $orbit-slide-number-padding;}
         color: $orbit-slide-number-font-color;
         background: $orbit-slide-number-bg;
         z-index: 10;
@@ -243,8 +198,6 @@ $orbit-timer-hide-for-small: true !default;
             position: relative;
             right: 20px;
             top: 5px;
-          } @else {
-              display:none; // This is used by the Javascript to not create a handler.
           }
         }
 
@@ -260,7 +213,7 @@ $orbit-timer-hide-for-small: true !default;
           border-top: none;
           border-bottom: none;
         }
-
+      
         // Pause button
         &.paused {
           & > span {
@@ -270,16 +223,16 @@ $orbit-timer-hide-for-small: true !default;
             height: 14px;
             border: inset 8px;
             border-left-style: solid;
-            @include rotate(180deg);
-            border-color: transparent #fff transparent transparent;
-            &.dark {
-              border-color: transparent #333 transparent transparent;
+            border-color: transparent;
+            border-left-color: #fff;
+            &.dark { 
+              border-left-color: #333;
             }
           }
         }
       }
-
-
+      
+      
 
       &:hover .orbit-timer > span { display: block; }
 
@@ -333,37 +286,37 @@ $orbit-timer-hide-for-small: true !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;
+    .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 {
+        cursor:pointer;
+        display: inline-block;
+        width: $orbit-bullet-radius;
+        height: $orbit-bullet-radius;
+        background: $orbit-bullet-nav-color;
+        // float: $default-float;
         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;
-          float: none;
-          margin-#{$opposite-direction}: 6px;
-          @include radius(1000px);
-
-          &.active {
-            background: $orbit-bullet-nav-color-active;
-          }
+        margin-#{$opposite-direction}: 6px;
+        @include radius(1000px);
 
-          &:last-child { margin-#{$opposite-direction}: 0; }
+        &.active {
+          background: $orbit-bullet-nav-color-active;
         }
+
+        &:last-child { margin-#{$opposite-direction}: 0; }
       }
     }
 
-
     .touch {
       .orbit-container {
         .orbit-prev,
@@ -388,36 +341,28 @@ $orbit-timer-hide-for-small: true !default;
     }
 
     @media #{$small-only} {
-        .orbit-stack-on-small {
-
-            .orbit-slides-container {height: auto !important;}
-            .orbit-slides-container > * {
-                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;
-            }
-
-            @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-stack-on-small {
+        .orbit-slides-container {height: auto !important;}
+        .orbit-slides-container > * {
+          position: relative;
+          margin:0% !important;
+          opacity:1 !important;
+        }
 
-            .orbit-slide-number {
-              display: none;
-            }
+        .orbit-slide-number {
+          display: none;
         }
-    }
+      }
 
+      @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;}
+      }
+    }
   }
 }

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

@@ -54,9 +54,12 @@ $callout-panel-link-color: $primary-color !default;
 
     @if $adjust {
       // We set the font color based on the darkness of the bg.
-      @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
-      @else if $bg-lightness >= 50%            { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color; } }
-      @else                                    { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
+      @if $bg-lightness >= 50% { 
+        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+      }
+      @else { 
+        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+      }
 
       // reset header line-heights for panels
       h1,h2,h3,h4,h5,h6 {

data/vendor/assets/stylesheets/foundation/components/_range-slider.scss

@@ -43,6 +43,7 @@ $range-slider-handle-round: $global-rounded !default;
 $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
 $range-slider-handle-cursor: pointer !default;
 
+$range-slider-disabled-opacity: 0.7 !default;
 
 //
 // @mixins
@@ -66,11 +67,16 @@ $range-slider-handle-cursor: pointer !default;
 @mixin range-slider-bar-style(
   $bg: true,
   $radius: false,
-  $round: false) {
-    @if $bg == true { background: $range-slider-bar-bg-color; }
-    @if $radius == true { @include radius($range-slider-radius); }
-    @if $round == true { @include radius($range-slider-round); }
+  $round: false,
+  $disabled: false) {
+  @if $bg == true { background: $range-slider-bar-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
   }
+}
 
 @mixin range-slider-bar(
   $bg: $range-slider-bar-bg-color, 
@@ -92,10 +98,15 @@ $range-slider-handle-cursor: pointer !default;
 @mixin range-slider-handle-style(
   $bg: true,
   $radius: false,
-  $round: false) {
+  $round: false,
+  $disabled: false) {
   @if $bg == true { background: $range-slider-handle-bg-color; }
   @if $radius == true { @include radius($range-slider-radius); }
   @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
+  }
   &:hover {
     background: $range-slider-handle-bg-hover-color;
   }
@@ -133,6 +144,10 @@ $range-slider-handle-cursor: pointer !default;
         @include range-slider-bar-style($round:true);
         .range-slider-handle { @include range-slider-handle-style($round: true); }
       }
+      &.disabled, &[disabled] {
+        @include range-slider-bar-style($disabled:true);
+        .range-slider-handle { @include range-slider-handle-style($disabled: true); }
+      }
     }
     .range-slider-active-segment {
       display: inline-block;