foundation-rails 5.0.3.1 → 5.1.0.1

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

@@ -19,7 +19,7 @@ $inline-list-overflow: hidden !default;
 // We use this to control the list items
 $inline-list-display: block !default;
 
-// We use this to control any elments within list items
+// We use this to control any elements within list items
 $inline-list-children-display: block !default;
 
 //
@@ -49,4 +49,4 @@ $inline-list-children-display: block !default;
       @include inline-list();
     }
   }
-}
+}

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

@@ -185,7 +185,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     }
 
 
-    /* Styles for screens that are atleast 768px; */
+    /* Styles for screens that are at least 768px; */
     @media #{$small} {
       .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
         .joyride-nub {
@@ -217,4 +217,4 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       }
     }
   }
-}
+}

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

@@ -11,7 +11,7 @@ $magellan-padding: 10px !default;
 @include exports("magellan") {
   @if $include-html-magellan-classes {
 
-    [data-magellan-expedition] {
+    #{data('magellan-expedition')} {
       background: $magellan-bg;
       z-index: 50;
       min-width: 100%;
@@ -20,7 +20,7 @@ $magellan-padding: 10px !default;
       .sub-nav {
         margin-bottom: 0;
         dd { margin-bottom: 0; }
-        .active {
+        a {
           line-height: 1.8em;
         }
       }

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

@@ -59,11 +59,11 @@ $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000,
 $off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
 $off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;
 
-// Transition Variabls
+// Transition Variables
 $menu-slide: "transform 500ms ease" !default;
 
 
-// EXTEND CLASSES
+// MIXINS
 // Remove transition flicker on phones
 @mixin kill-flicker {
   // -webkit-transform: translateZ(0x);
@@ -81,7 +81,6 @@ $menu-slide: "transform 500ms ease" !default;
   width: $off-canvas-width;
   top:0;
   bottom:0;
-  height: 100%;
   position: absolute;
   overflow-y: auto;
   background: $off-canvas-bg;
@@ -101,24 +100,26 @@ $menu-slide: "transform 500ms ease" !default;
 // OFF CANVAS WRAP
 // Wrap visible content and prevent scroll bars
 @mixin off-canvas-wrap {
-    @include kill-flicker;
-    @include wrap-base;
-    overflow: hidden;
+
+  @include kill-flicker;
+  @include wrap-base;
+  overflow-x: hidden;
+  &.move-right,
+  &.move-left { height: 100%; }
 }
 
 // INNER WRAP
 // Main content area that moves to reveal the off-canvas nav
 @mixin inner-wrap {
-    @include kill-flicker;
-    @include wrap-base;
-    @include clearfix;
-
-    -webkit-transition: -webkit-#{$menu-slide};
-    -moz-transition: -moz-#{$menu-slide};
-    -ms-transition: -ms-#{$menu-slide};
-    -o-transition: -o-#{$menu-slide};
-    transition: #{$menu-slide};
-
+  @include kill-flicker;
+  @include wrap-base;
+  @include clearfix;
+  
+  -webkit-transition: -webkit-#{$menu-slide};
+  -moz-transition: -moz-#{$menu-slide};
+  -ms-transition: -ms-#{$menu-slide};
+  -o-transition: -o-#{$menu-slide};
+  transition: #{$menu-slide};
 }
 
 // TAB BAR
@@ -179,7 +180,7 @@ $menu-slide: "transform 500ms ease" !default;
     text-align: left;
   }
 
-  // still need to make these non-presntational
+  // still need to make these non-presentational
   &.left {
     left: 0;
     right: $tabbar-height;
@@ -268,105 +269,104 @@ $menu-slide: "transform 500ms ease" !default;
 //
 // DEFAULT CLASSES
 //
+@include exports("offcanvas") {
+  @if $include-html-off-canvas-classes {
 
-@if $include-html-off-canvas-classes {
+    .off-canvas-wrap { @include off-canvas-wrap; }
+    .inner-wrap { @include inner-wrap; }
 
-  .off-canvas-wrap { @include off-canvas-wrap; }
-  .inner-wrap { @include inner-wrap; }
+    nav.tab-bar { @include tab-bar-base; }
 
-  nav.tab-bar { @include tab-bar-base; }
+    section.left-small { @include left-small-section; }
+    section.right-small { @include right-small-section; }
 
-  section.left-small { @include left-small-section; }
-  section.right-small { @include right-small-section; }
+    section.tab-bar-section { @include tab-bar-section; }
 
-  section.tab-bar-section { @include tab-bar-section; }
-
-  // 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;
-
-    // this is the actual hamburger icon
-    span {
-
-      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: 1px 10px 1px 1px $tabbar-menu-icon-color,
-                            1px 16px 1px 1px $tabbar-menu-icon-color,
-                            1px 22px 1px 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;
       }
-        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;
+      &: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-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; }
+    .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; }
+    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);
+    // ANIMATION CLASSES
+    // These classes are added with JS and trigger the actual animation.
+    .move-right {
+      > .inner-wrap {
+        @include translate3d($off-canvas-width,0,0);
+      }
+      a.exit-off-canvas { @include back-link;}
     }
-    a.exit-off-canvas { @include back-link;}
-  }
 
-  .move-left {
-    > .inner-wrap {
-      @include translate3d(-($off-canvas-width),0,0);
+    .move-left {
+      > .inner-wrap {
+        @include translate3d(-($off-canvas-width),0,0);
 
+      }
+      a.exit-off-canvas { @include back-link; }
     }
-    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); }
-
-    .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); }
-    .right-off-canvas-menu { right: -($off-canvas-width); }
+    // 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 { right: $off-canvas-width; }
-    .move-right > .inner-wrap { left: $off-canvas-width; }
-  }
+      .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); }
+      .right-off-canvas-menu { right: -($off-canvas-width); }
 
+      .move-left > .inner-wrap { right: $off-canvas-width; }
+      .move-right > .inner-wrap { left: $off-canvas-width; }
+    }
 
+  }
+}

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

@@ -131,6 +131,9 @@ $preloader-class: "preloader" !default;
         padding: 0;
         position: relative;
 
+        // Prevents images (and captions) from disappearing after first rotation on Chrome for Android
+        -webkit-transform: translateZ(0);
+
         img { display: block; max-width: 100%; }
 
         &>* {

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

@@ -5,7 +5,7 @@
 //
 $include-html-media-classes: $include-html-classes !default;
 
-// We use this to se the prog bar height
+// We use this to set the progress bar height
 $progress-bar-height: rem-calc(25) !default;
 $progress-bar-color: #f6f6f6 !default;
 
@@ -72,4 +72,4 @@ $progress-meter-alert-color: $alert-color !default;
     }
 
   }
-}
+}

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

@@ -137,16 +137,21 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     // Reveal Modals
     .reveal-modal-bg { @include reveal-bg; }
 
-    .#{$reveal-modal-class} {
+    dialog, .#{$reveal-modal-class} {
       @include reveal-modal-base;
       @include reveal-modal-style;
 
       .#{$close-reveal-modal-class} { @include reveal-close; }
     }
 
+    dialog[open] {
+	display:block;
+	visibility: visible;
+    }
+
     @media #{$medium-up} {
 
-      .#{$reveal-modal-class} {
+      dialog, .#{$reveal-modal-class} {
         @include reveal-modal-style(false, $reveal-modal-padding * 1.5, false, $box-shadow: false, $top-offset: $reveal-position-top);
 
         &.tiny  { @include reveal-modal-base(false, 30%); }
@@ -159,7 +164,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
     // Reveal Print Styles
     @media print {
-      .#{$reveal-modal-class} {background: #fff !important;}
+      dialog, .#{$reveal-modal-class} {background: #fff !important;}
     }
   }
 }

data/vendor/assets/stylesheets/foundation/components/_side-nav.scss

@@ -16,7 +16,8 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default;
 
 // We use these to control link styles.
 $side-nav-link-color: $primary-color !default;
-$side-nav-link-color-active: scale-color(#000, $lightness: 30%) !default;
+$side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default;
+$side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default;
 $side-nav-font-size: rem-calc(14) !default;
 $side-nav-font-weight: normal !default;
 $side-nav-font-family: $body-font-family !default;
@@ -40,10 +41,12 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
 // $divider-color - Border color of divider. Default: $side-nav-divider-color.
 // $font-size - Font size of nav items. Default: $side-nav-font-size.
 // $link-color - Color of navigation links. Default: $side-nav-link-color.
+// $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover.
 @mixin side-nav(
   $divider-color:$side-nav-divider-color,
   $font-size:$side-nav-font-size,
-  $link-color:$side-nav-link-color) {
+  $link-color:$side-nav-link-color,
+  $link-color-hover:$side-nav-link-color-hover) {
   display: block;
   margin: 0;
   padding: $side-nav-padding;
@@ -55,12 +58,14 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
     margin: $side-nav-list-margin;
     font-size: $font-size;
 
-    a {
+    a:not(.button) {
       display: block;
       color: $link-color;
+      &:hover,
+      &:focus { color: $link-color-hover; }
     }
 
-    &.active > a:first-child {
+    &.active > a:first-child:not(.button) {
       color: $side-nav-link-color-active;
       font-weight: $side-nav-font-weight;
       font-family: $side-nav-active-font-family;
@@ -80,4 +85,4 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
   @if $include-html-nav-classes {
     .side-nav { @include side-nav; }
   }
-}
+}

data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss

@@ -21,6 +21,7 @@ $sub-nav-font-size: rem-calc(14) !default;
 $sub-nav-font-color: #999 !default;
 $sub-nav-font-weight: normal !default;
 $sub-nav-text-decoration: none !default;
+$sub-nav-padding: rem-calc(3 16) !default;
 $sub-nav-border-radius: 3px !default;
 $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
 
@@ -31,7 +32,7 @@ $sub-nav-active-font-weight: normal !default;
 $sub-nav-active-bg: $primary-color !default;
 $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
 $sub-nav-active-color: #fff !default;
-$sub-nav-active-padding: rem-calc(3 16) !default;
+$sub-nav-active-padding: $sub-nav-padding !default;
 $sub-nav-active-cursor: default !default;
 
 $sub-nav-item-divider: "" !default;
@@ -47,11 +48,12 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
 // $font-color - Font color. Default: $sub-nav-font-color.
 // $font-size - Font size. Default: $sub-nav-font-size.
 // $active-bg - Background of active nav item. Default: $sub-nav-active-bg.
+// $active-bg-hover - Background of active nav item, when hovered. Default: $sub-nav-active-bg-hover.
 @mixin sub-nav(
   $font-color: $sub-nav-font-color,
   $font-size: $sub-nav-font-size,
   $active-bg: $sub-nav-active-bg,
-  $active-bg-hover: scale-color(#008CBA, $lightness: -5%)) {
+  $active-bg-hover: $sub-nav-active-bg-hover) {
   display: block;
   width: auto;
   overflow: hidden;
@@ -79,8 +81,9 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
     a {
       text-decoration: $sub-nav-text-decoration;
       color: $sub-nav-font-color;
+      padding: $sub-nav-padding;
       &:hover {
-        color: $active-bg-hover;
+        color: $sub-nav-font-color-hover;
       }
     }