foundation-rails 5.0.2.0 → 5.0.3.0

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

@@ -117,9 +117,6 @@ $total-columns: 12 !default;
     @if $last-column { float: $opposite-direction; }
   }
 
-  // If offset, calculate appropriate margins
-  @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns); }
-
   // Source Ordering, adds left/right depending on which you use.
   @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
   @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
@@ -128,9 +125,12 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none !important;
+    float: none;
   }
 
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }
+
   @if $float {
     @if $float == left or $float == true { float: $default-float; }
     @else if $float == right { float: $opposite-direction; }
@@ -144,6 +144,21 @@ $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;
+  }
+
+  .column.#{$size}-uncentered.opposite,
+  .columns.#{$size}-uncentered.opposite {
+    float: $opposite-direction;
+  }
+
   @for $i from 1 through $total-columns - 1 {
     .#{$size}-push#{-$i} {
       @include grid-column($push:$i, $collapse:null, $float:false);
@@ -161,27 +176,20 @@ $total-columns: 12 !default;
     .#{$size}#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
-  @for $i from 0 through $total-columns - 2 {
-    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
-  }
-
   [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
   [class*="column"] + [class*="column"].end { float: $default-float; }
 
-  .column.#{$size}-centered,
-  .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
 
-  .column.#{$size}-uncentered,
-  .columns.#{$size}-uncentered {
+  @for $i from 0 through $total-columns - 2 {
+    .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+  }
+  .column.#{$size}-reset-order,
+  .columns.#{$size}-reset-order {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    float: $default-float !important;
-  }
-
-  .column.#{$size}-uncentered.opposite,
-  .columns.#{$size}-uncentered.opposite {
-    float: $opposite-direction !important;
-
+    left: auto;
+    right: auto;
+    float: $default-float; 
   }
 }
 
@@ -223,12 +231,20 @@ $total-columns: 12 !default;
     }
     @media #{$large-up} {
       @include grid-html-classes($size:large);
+      @for $i from 1 through $total-columns - 1 {
+        .push#{-$i} {
+          @include grid-column($push:$i, $collapse:null, $float:false);
+        }
+        .pull#{-$i} {
+          @include grid-column($pull:$i, $collapse:null, $float:false);
+        }
+      }
     }
-    @media #{$xlarge-up} {
-      @include grid-html-classes($size:xlarge);
-    }
-    @media #{$xxlarge-up} {
-      @include grid-html-classes($size:xxlarge);
-    }
+    // @media #{$xlarge-up} {
+    //   @include grid-html-classes($size:xlarge);
+    // }
+    // @media #{$xxlarge-up} {
+    //   @include grid-html-classes($size:xxlarge);
+    // }
   }
 }

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

@@ -13,7 +13,7 @@ $joyride-tip-border: solid 1px #555 !default;
 $joyride-tip-radius: 4px !default;
 $joyride-tip-position-offset: 22px !default;
 
-// Here, we're setting the tip dont styles
+// 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;

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

@@ -10,29 +10,29 @@ $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
 $keystroke-font-size: rem-calc(14) !default;
 $keystroke-font-color: #222 !default;
 $keystroke-font-color-alt: #fff !default;
-$keystroke-function-factor: 7% !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: darken(#fff, $keystroke-function-factor) !default;
+$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
 $keystroke-border-style: solid !default;
 $keystroke-border-width: 1px !default;
-$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
+$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
 $keystroke-radius: $global-radius !default;
 
 //
 // @mixins
 //
 // We use this mixin to create keystroke styles.
-// $bg - Default: $keystroke-bg || darken(#fff, $keystroke-function-factor) !default;
+// $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
 @mixin keystroke($bg:$keystroke-bg) {
   // This find the lightness percentage of the background color.
   $bg-lightness: lightness($bg);
 
   background-color: $bg;
-  border-color: darken($bg, $keystroke-function-factor);
+  border-color: scale-color($bg, $lightness: $keystroke-function-factor);
 
   // We adjust the font color based on the brightness of the background.
   @if $bg-lightness > 70% { color: $keystroke-font-color; }

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

@@ -2,8 +2,9 @@
 @import "type";
 @import "top-bar";
 
-// OFF CANVAS VARIABLES
 // Off Canvas Tab Bar Variables
+$include-html-off-canvas-classes: $include-html-classes !default;
+
 $tabbar-bg: #333 !default;
 $tabbar-height: rem-calc(45) !default;
 $tabbar-line-height: $tabbar-height !default;
@@ -11,8 +12,8 @@ $tabbar-color: #FFF !default;
 $tabbar-middle-padding: 0 rem-calc(10) !default;
 
 // Off Canvas Divider Styles
-$tabbar-right-section-border: solid 1px lighten($tabbar-bg, 10%) !default;
-$tabbar-left-section-border: solid 1px darken($tabbar-bg, 10%) !default;
+$tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
+$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;
 
 // Off Canvas Tab Bar Headers
 $tabbar-header-color: #FFF !default;
@@ -30,16 +31,16 @@ $off-canvas-label-color: #999 !default;
 $off-canvas-label-text-transform: uppercase !default;
 $off-canvas-label-font-weight: bold !default;
 $off-canvas-label-bg: #444 !default;
-$off-canvas-label-border-top: 1px solid lighten(#444, 10%) !default;
+$off-canvas-label-border-top: 1px solid scale-color(#444, $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-border-bottom: 1px solid darken($off-canvas-bg, 5%) !default;
+$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
 
 // Off Canvas Menu Icon Variables
 $tabbar-menu-icon-color: #FFF !default;
-$tabbar-menu-icon-hover: darken($tabbar-menu-icon-color, 30%) !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;
@@ -64,19 +65,19 @@ $menu-slide: "transform 500ms ease" !default;
 
 // EXTEND CLASSES
 // Remove transition flicker on phones
-%kill-flicker {
-  // -webkit-transform: translateZ(0);
+@mixin kill-flicker {
+  // -webkit-transform: translateZ(0x);
   -webkit-backface-visibility: hidden;
 }
 
 // Basic properties for the content wraps
-%wrap-base {
+@mixin wrap-base {
   position: relative;
   width: 100%;
 }
 
 // basic styles for off-canvas menu container
-%off-canvas-menu {
+@mixin off-canvas-menu {
   width: $off-canvas-width;
   top:0;
   bottom:0;
@@ -100,16 +101,16 @@ $menu-slide: "transform 500ms ease" !default;
 // OFF CANVAS WRAP
 // Wrap visible content and prevent scroll bars
 @mixin off-canvas-wrap {
-    @extend %kill-flicker;
-    @extend %wrap-base;
+    @include kill-flicker;
+    @include wrap-base;
     overflow: hidden;
 }
 
 // INNER WRAP
 // Main content area that moves to reveal the off-canvas nav
 @mixin inner-wrap {
-    @extend %kill-flicker;
-    @extend %wrap-base;
+    @include kill-flicker;
+    @include wrap-base;
     @include clearfix;
 
     -webkit-transition: -webkit-#{$menu-slide};
@@ -122,8 +123,8 @@ $menu-slide: "transform 500ms ease" !default;
 
 // TAB BAR
 // This is the tab bar base
-@mixin tab-bar-base { 
-  @extend %kill-flicker;
+@mixin tab-bar-base {
+  @include kill-flicker;
 
   // base styles
   background: $tabbar-bg;
@@ -147,7 +148,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;
-%tabbar-small-section {
+@mixin tabbar-small-section {
   width: $tabbar-height;
   height: $tabbar-height;
   position: absolute;
@@ -155,16 +156,16 @@ $menu-slide: "transform 500ms ease" !default;
 }
 
 @mixin left-small-section {
-  @extend %tabbar-small-section;
+  @include tabbar-small-section;
   border-right: $tabbar-left-section-border;
-  box-shadow: 1px 0 0 lighten($tabbar-bg, 10%);
+  box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
   left:0;
 }
 
 @mixin right-small-section {
-  @extend %tabbar-small-section;
+  @include tabbar-small-section;
   border-left: $tabbar-right-section-border;
-  box-shadow: -1px 0 0 darken($tabbar-bg, 10%);
+  box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
   right:0;
 }
 
@@ -179,7 +180,7 @@ $menu-slide: "transform 500ms ease" !default;
   }
 
   // still need to make these non-presntational
-  &.left {     
+  &.left {
     left: 0;
     right: $tabbar-height;
   }
@@ -224,7 +225,7 @@ $menu-slide: "transform 500ms ease" !default;
 // BACK LINK
 // This is an overlay that, when clicked, will toggle off the off canvas menu
 @mixin back-link {
-    @extend %kill-flicker;
+    @include kill-flicker;
 
     transition: $off-canvas-overlay-transition;
     cursor: $off-canvas-overlay-cursor;
@@ -239,6 +240,7 @@ $menu-slide: "transform 500ms ease" !default;
     left:0;
     right:0;
     z-index: 1002;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 
     @media #{$medium-up} {
       &:hover {
@@ -250,14 +252,14 @@ $menu-slide: "transform 500ms ease" !default;
 // OFF CANVAS MENUS
 // These are the containers that contain the off canvas content
 @mixin left-off-canvas-menu {
-  @extend %kill-flicker;
-  @extend %off-canvas-menu;
+  @include kill-flicker;
+  @include off-canvas-menu;
   @include translate3d(-100%,0,0);
-  * { @extend %kill-flicker; } 
+  * { @include kill-flicker; }
 }
 @mixin right-off-canvas-menu {
-  @extend %kill-flicker;
-  @extend %off-canvas-menu;
+  @include kill-flicker;
+  @include off-canvas-menu;
   @include translate3d(100%,0,0);
   right:0;
 }
@@ -267,94 +269,104 @@ $menu-slide: "transform 500ms ease" !default;
 // DEFAULT CLASSES
 //
 
-.off-canvas-wrap { @include off-canvas-wrap; }
-.inner-wrap { @include inner-wrap; }
-
-nav.tab-bar { @include tab-bar-base; }
+@if $include-html-off-canvas-classes {
 
-section.left-small { @include left-small-section; }
-section.right-small { @include right-small-section; }
+  .off-canvas-wrap { @include off-canvas-wrap; }
+  .inner-wrap { @include inner-wrap; }
 
-section.tab-bar-section { @include tab-bar-section; }
+  nav.tab-bar { @include tab-bar-base; }
 
-// MENU BUTTON
-// This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
-a.menu-icon {
-  text-indent: $tabbar-menu-icon-text-indent;
-  width: $tabbar-height;
-  height: $tabbar-height;
-  display: block;
-  line-height: $tabbar-menu-icon-line-height;
-  padding: $tabbar-menu-icon-padding;
-  color: $topbar-menu-link-color;
-  position: relative;
+  section.left-small { @include left-small-section; }
+  section.right-small { @include right-small-section; }
 
-  // this is the actual hamburger icon
-  span {
+  section.tab-bar-section { @include tab-bar-section; }
 
-    position: absolute;
+  // MENU BUTTON
+  // This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
+  a.menu-icon {
+    text-indent: $tabbar-menu-icon-text-indent;
+    width: $tabbar-height;
+    height: $tabbar-height;
     display: block;
-    width: $tabbar-hamburger-icon-width;
-    height: 0;
-    left: $tabbar-hamburger-icon-left;
-    top: $tabbar-hamburger-icon-top;
-    // margin-top: $tabbar-height / 4;
-
-    @if $experimental {
-      -webkit-box-shadow: 0 10px 0 1px $tabbar-menu-icon-color,
-                          0 16px 0 1px $tabbar-menu-icon-color,
-                          0 22px 0 1px $tabbar-menu-icon-color;
+    line-height: $tabbar-menu-icon-line-height;
+    padding: $tabbar-menu-icon-padding;
+    color: $topbar-menu-link-color;
+    position: relative;
+
+    // this is the actual hamburger icon
+    span {
+
+      position: absolute;
+      display: block;
+      width: $tabbar-hamburger-icon-width;
+      height: 0;
+      left: $tabbar-hamburger-icon-left;
+      top: $tabbar-hamburger-icon-top;
+      // margin-top: $tabbar-height / 4;
+
+      @if $experimental {
+        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-color,
+                            1px 16px 1px 1px $tabbar-menu-icon-color,
+                            1px 22px 1px 1px $tabbar-menu-icon-color;
+      }
+        box-shadow:        0 10px 0 1px $tabbar-menu-icon-color,
+                            0 16px 0 1px $tabbar-menu-icon-color,
+                            0 22px 0 1px $tabbar-menu-icon-color;
+    }
+
+    &:hover span {
+      @if $experimental {
+        -webkit-box-shadow: 1px 10px 1px 1px $tabbar-menu-icon-hover,
+                            1px 16px 1px 1px $tabbar-menu-icon-hover,
+                            1px 22px 1px 1px $tabbar-menu-icon-hover;
+      }
+        box-shadow:        0 10px 0 1px $tabbar-menu-icon-hover,
+                            0 16px 0 1px $tabbar-menu-icon-hover,
+                            0 22px 0 1px $tabbar-menu-icon-hover;
     }
-      box-shadow:        0 10px 0 1px $tabbar-menu-icon-color,
-                          0 16px 0 1px $tabbar-menu-icon-color,
-                          0 22px 0 1px $tabbar-menu-icon-color;
   }
-  
-  &:hover span {
-    @if $experimental {
-      -webkit-box-shadow: 0 10px 0 1px $tabbar-menu-icon-hover,
-                          0 16px 0 1px $tabbar-menu-icon-hover,
-                          0 22px 0 1px $tabbar-menu-icon-hover;
+
+  .left-off-canvas-menu { @include left-off-canvas-menu; }
+  .right-off-canvas-menu { @include right-off-canvas-menu; }
+
+  ul.off-canvas-list { @include off-canvas-list; }
+
+
+  // ANIMATION CLASSES
+  // These classes are added with JS and trigger the actual animation.
+  .move-right {
+    > .inner-wrap {
+      @include translate3d($off-canvas-width,0,0);
     }
-      box-shadow:        0 10px 0 1px $tabbar-menu-icon-hover,
-                          0 16px 0 1px $tabbar-menu-icon-hover,
-                          0 22px 0 1px $tabbar-menu-icon-hover;
+    a.exit-off-canvas { @include back-link;}
   }
-}
 
-.left-off-canvas-menu { @include left-off-canvas-menu; }
-.right-off-canvas-menu { @include right-off-canvas-menu; }
+  .move-left {
+    > .inner-wrap {
+      @include translate3d(-($off-canvas-width),0,0);
 
-ul.off-canvas-list { @include off-canvas-list; }
+    }
+    a.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); }
 
-// ANIMATION CLASSES
-// These classes are added with JS and trigger the actual animation. 
-.move-right {
-  > .inner-wrap {
-    @include translate3d($off-canvas-width,0,0);
+    .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
+    .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
   }
-  a.exit-off-canvas { @include back-link;}
-}
 
-.move-left {
-  > .inner-wrap {
-    @include translate3d(-($off-canvas-width),0,0);
+  // Older browsers
+  .no-csstransforms {
+    .left-off-canvas-menu { left: -($off-canvas-width); }
+    .right-off-canvas-menu { right: -($off-canvas-width); }
 
+    .move-left > .inner-wrap { right: $off-canvas-width; }
+    .move-right > .inner-wrap { left: $off-canvas-width; }
   }
-  a.exit-off-canvas { @include back-link; }
-}
 
-// IE9 HAX
-// Womp womp! IE9 doesn't do CSS transforms. Let's fix this.
-.lt-ie10 {
-  
-  // move off canvas menus off the viewport
-  .left-off-canvas-menu { left: -($off-canvas-width); } 
-  .right-off-canvas-menu { right: -($off-canvas-width); }
+}
 
-  // Snap them in place
-  .move-left > .inner-wrap { right: $off-canvas-width; }
-  .move-right > .inner-wrap { left: $off-canvas-width; }
 
-}