foundation-rails 5.5.2.1 → 5.5.3.1

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

@@ -70,9 +70,76 @@ $base-line-height: 1.5 !default;
 // We use this to add transitions to elements
 // $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
 // $speed - Default: 300ms
-// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
+// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
 @mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
-  transition: $property $speed $ease;
+  @include transition($property, $speed, $ease);
+}
+
+// @mixins
+//
+// We use this to add single or multiple transitions to elements
+// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
+// $speed - Default: 300ms
+// $ease - Default: ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
+// $delay - Default: null (0s)
+@mixin transition($property:all, $speed:300ms, $ease:ease-out, $delay:null) {
+  $transition: none;
+
+  @if length($property) > 1 {
+
+    @each $transition_list in $property {
+
+      @for $i from 1 through length($transition_list) {
+
+        @if $i == 1 {
+          $_property: nth($transition_list, $i);
+        }
+
+        @if length($transition_list) > 1 {
+          @if $i == 2 {
+            $_speed: nth($transition_list, $i);
+          }
+        } @else {
+          $_speed: $speed;
+        }
+
+        @if length($transition_list) > 2 {
+          @if $i == 3 {
+            $_ease: nth($transition_list, $i);
+          }
+        } @else {
+          $_ease: $ease;
+        }
+
+        @if length($transition_list) > 3 {
+          @if $i == 4 {
+            $_delay: nth($transition_list, $i);
+          }
+        } @else {
+          $_delay: $delay;
+        }
+      }
+
+      @if $transition == none {
+        $transition: $_property $_speed $_ease $_delay;
+      } @else {
+        $transition: $transition, $_property $_speed $_ease $_delay;
+      }
+    }
+  }
+  @else {
+
+    @each $prop in $property {
+
+      @if $transition == none {
+        $transition: $prop $speed $ease $delay;
+      } @else {
+        $transition: $transition, $prop $speed $ease $delay;
+      }
+    }
+  }
+
+  transition: $transition;
 }
 
 // @mixins
@@ -80,7 +147,7 @@ $base-line-height: 1.5 !default;
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
   -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
-     -moz-box-sizing: $type;
+     -moz-box-sizing: $type; // Firefox < 29
           box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
@@ -338,7 +405,7 @@ $retina: (
 );
 
 // Legacy
-$small: $medium-up;
+$small: $small-up;
 $medium: $medium-up;
 $large: $large-up;
 
@@ -362,7 +429,7 @@ $cursor-text-value: text !default;
   @if $include-js-meta-styles {
 
     meta.foundation-version {
-      font-family: "/5.5.2/";
+      font-family: "/5.5.3/";
     }
 
     meta.foundation-mq-small {
@@ -422,13 +489,10 @@ $cursor-text-value: text !default;
     html, body { height: 100%; }
 
     // Set box-sizing globally to handle padding and border widths
-    html {
-      box-sizing: border-box;
-    }
     *,
     *:before,
     *:after {
-      @include box-sizing(inherit);
+      @include box-sizing(border-box);
     }
 
     html,

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

@@ -128,7 +128,7 @@ $last-child-float: $opposite-direction !default;
   @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
   @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
 
-  @if $float {
+  @if $float and $last-column == false {
     @if $float == left or $float == true { float: $default-float; }
     @else if $float == right { float: $opposite-direction; }
     @else { float: none; }
@@ -207,20 +207,20 @@ $last-child-float: $opposite-direction !default;
     float: $opposite-direction;
   }
 
-	.row {
-		&.#{$size}-collapse {
-			> .column,
-			> .columns { @include grid-column($collapse:true, $float:false); }
-
-			.row {margin-left:0; margin-right:0;}
-		}
-		&.#{$size}-uncollapse {
-			> .column,
-			> .columns {
-				@include grid-column;
-			}
-		}
-	}
+  .row {
+    &.#{$size}-collapse {
+      > .column,
+      > .columns { @include grid-column($collapse:true, $float:false); }
+
+      .row {margin-left:0; margin-right:0;}
+    }
+    &.#{$size}-uncollapse {
+      > .column,
+      > .columns {
+        @include grid-column;
+      }
+    }
+  }
 }
 
 @include exports("grid") {

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

@@ -33,9 +33,10 @@ $inline-list-children-display: block !default;
 // We use this mixin to create inline lists
 @mixin inline-list {
   list-style: none;
+  margin-top: $inline-list-top-margin;
+  margin-bottom: $inline-list-bottom-margin;
   margin-#{$default-float}: $inline-list-default-float-margin;
   margin-#{$opposite-direction}: $inline-list-opposite-margin;
-  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
   overflow: $inline-list-overflow;
   padding: $inline-list-padding;
 

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

@@ -57,7 +57,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       position: absolute;
       top: 0;
       width: 95%;
-      z-index: 101;
+      z-index: 103;
       #{$default-float}: 2.5%;
     }
 

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

@@ -28,6 +28,7 @@ $tabbar-header-margin: 0 !default;
 
 // Off Canvas Menu Variables
 $off-canvas-width: rem-calc(250) !default;
+$off-canvas-height: rem-calc(300) !default;
 $off-canvas-bg: $oil !default;
 $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
 $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%) !default;
@@ -95,7 +96,6 @@ $menu-slide: "transform 500ms ease" !default;
   -webkit-transform: translate3d($tx, $ty, $tz);
      -moz-transform: translate3d($tx, $ty, $tz);
       -ms-transform: translate($tx, $ty);
-      -ms-transform: translate3d($tx, $ty, $tz);
        -o-transform: translate3d($tx, $ty, $tz);
           transform: translate3d($tx, $ty, $tz)
 }
@@ -112,7 +112,6 @@ $menu-slide: "transform 500ms ease" !default;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  top: 0;
   transition: transform 500ms ease 0s;
   width: $off-canvas-width;
   z-index: 1001;
@@ -120,10 +119,24 @@ $menu-slide: "transform 500ms ease" !default;
   @if $position == left {
     @include translate3d(-100%,0,0);
     left: 0;
+    top: 0;
   }
   @if $position == right {
     @include translate3d(100%,0,0);
     right: 0;
+    top: 0;
+  }
+  @if $position == top {
+    @include translate3d(0,-100%,0);
+    top: 0;
+    width: 100%;
+    height: $off-canvas-height;
+  }
+  @if $position == bottom {
+    @include translate3d(0,100%,0);
+    bottom: 0;
+    width: 100%;
+    height: $off-canvas-height;
   }
 }
 
@@ -134,7 +147,9 @@ $menu-slide: "transform 500ms ease" !default;
   @include wrap-base;
   overflow: hidden;
   &.move-right,
-  &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; }
+  &.move-left,
+  &.move-bottom,
+  &.move-top { min-height: 100%; -webkit-overflow-scrolling: touch; }
 }
 
 // INNER WRAP
@@ -300,6 +315,7 @@ $menu-slide: "transform 500ms ease" !default;
   position: absolute;
   top: 0;
   width: $off-canvas-width;
+  height: $off-canvas-height;
   z-index: 1002;
   @if $position == left {
     @include translate3d(-100%,0,0);
@@ -309,6 +325,16 @@ $menu-slide: "transform 500ms ease" !default;
     @include translate3d(100%,0,0);
     right: 0;
   }
+  @if $position == top {
+    @include translate3d(0,-100%,0);
+    top: 0;
+    width: 100%;
+  }  
+  @if $position == bottom {
+    @include translate3d(0,100%,0);
+    bottom: 0;
+    width: 100%;
+  }
   -webkit-transition: -webkit-#{$menu-slide};
   -moz-transition: -moz-#{$menu-slide};
   -ms-transition: -ms-#{$menu-slide};
@@ -421,6 +447,8 @@ $menu-slide: "transform 500ms ease" !default;
 
     .left-off-canvas-menu { @include off-canvas-menu($position: left); }
     .right-off-canvas-menu { @include off-canvas-menu($position: right); }
+    .top-off-canvas-menu { @include off-canvas-menu($position: top); }
+    .bottom-off-canvas-menu { @include off-canvas-menu($position: bottom); }
 
     ul.off-canvas-list { @include off-canvas-list; }
 
@@ -441,8 +469,23 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .move-top {
+      > .inner-wrap {
+        @include translate3d(0,-($off-canvas-height),0);
+
+      }
+      .exit-off-canvas { @include back-link; }
+    }
+    .move-bottom {
+      > .inner-wrap {
+        @include translate3d(0,($off-canvas-height),0);
+
+      }
+      .exit-off-canvas { @include back-link; }
+    }
     .offcanvas-overlap {
-      .left-off-canvas-menu, .right-off-canvas-menu {
+      .left-off-canvas-menu, .right-off-canvas-menu,
+      .top-off-canvas-menu, .bottom-off-canvas-menu {
         -ms-transform: none;
         -webkit-transform: none;
         -moz-transform: none;
@@ -474,14 +517,42 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap-top {
+      .bottom-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-bottom {
+      .top-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 {
       .left-off-canvas-menu { left: -($off-canvas-width); }
       .right-off-canvas-menu { right: -($off-canvas-width); }
+      .top-off-canvas-menu { top: -($off-canvas-height); }
+      .bottom-off-canvas-menu { bottom: -($off-canvas-height); }
 
       .move-left > .inner-wrap { right: $off-canvas-width; }
       .move-right > .inner-wrap { left: $off-canvas-width; }
+      .move-top > .inner-wrap { right: $off-canvas-height; }
+      .move-bottom > .inner-wrap { left: $off-canvas-height; }
+
+
     }
 
     .left-submenu {
@@ -498,6 +569,20 @@ $menu-slide: "transform 500ms ease" !default;
       }
     }
 
+    .top-submenu {
+      @include off-canvas-submenu($position: top);
+      &.move-bottom, &.offcanvas-overlap-bottom, &.offcanvas-overlap {
+        @include translate3d(0,0%,0);
+      }
+    }
+
+    .bottom-submenu {
+      @include off-canvas-submenu($position: bottom);
+      &.move-top, &.offcanvas-overlap-top, &.offcanvas-overlap {
+        @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);
@@ -516,3 +601,6 @@ $menu-slide: "transform 500ms ease" !default;
 
   }
 }
+
+
+

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

@@ -51,6 +51,7 @@ $pagination-link-current-active-bg: $primary-color !default;
   a, button {
     cursor: $pagination-link-unavailable-cursor;
     color: $pagination-link-unavailable-font-color;
+    pointer-events: none;
   }
   &:hover a,
   & a:focus,

data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss

@@ -47,6 +47,8 @@ $progress-meter-alert-color: $alert-color !default;
   background: $bg;
   display: block;
   height: 100%;
+  float: left;
+  width: 0%;
 }
 
 
@@ -60,6 +62,10 @@ $progress-meter-alert-color: $alert-color !default;
       // Meter
       .meter {
         @include progress-meter;
+
+        &.secondary { @include progress-meter($bg:$progress-meter-secondary-color); }
+        &.success { @include progress-meter($bg:$progress-meter-success-color); }
+        &.alert { @include progress-meter($bg:$progress-meter-alert-color); }
       }
       &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
       &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }

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

@@ -15,7 +15,7 @@
 
 $include-html-range-slider-classes: $include-html-classes !default;
 
-// These variabels define the slider bar styles
+// These variables define the slider bar styles
 $range-slider-bar-width: 100% !default;
 $range-slider-bar-height: rem-calc(16) !default;
 
@@ -31,7 +31,7 @@ $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness:
 $range-slider-vertical-bar-width: rem-calc(16) !default;
 $range-slider-vertical-bar-height: rem-calc(200) !default;
 
-// These variabels define the slider handle styles
+// These variables define the slider handle styles
 $range-slider-handle-width: rem-calc(32) !default;
 $range-slider-handle-height: rem-calc(22) !default;
 $range-slider-handle-position-top: rem-calc(-5) !default;

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

@@ -136,6 +136,9 @@ $z-index-base: 1005;
   @if $box-shadow {
     box-shadow: $reveal-box-shadow;
   }
+  @else{
+       box-shadow: none;
+  }
 
   // We can control how much radius is used on the modal
   @if $radius == true { @include radius($reveal-radius); }

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

@@ -52,7 +52,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
           }
         }
 
-        &.active a {
+        &.active > a {
           background-color: $tabs-navigation-active-bg-color;
           color: $tabs-navigation-active-font-color;
         }

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

@@ -66,8 +66,8 @@ $tooltip-max-width: 300px !default;
       #{$default-float}: 50%;
 
       > .nub {
-        border-color: transparent transparent $tooltip-bg transparent;
         border: solid $tooltip-pip-size;
+        border-color: transparent transparent $tooltip-bg transparent;
         display: block;
         height: 0;
         pointer-events: none;