foundation-rails 5.1.1.0 → 5.2.0.0

data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 @import "buttons";
 @import "dropdown-buttons";

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -88,7 +92,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
     }
 
     &.active a {
-      @include radius($global-radius);
+      @include radius($sub-nav-border-radius);
       font-weight: $sub-nav-active-font-weight;
       background: $active-bg;
       padding: $sub-nav-active-padding;
@@ -118,4 +122,4 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   @if $include-html-nav-classes {
     .sub-nav { @include sub-nav; }
   }
-}
+}

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 @import "grid";
 
@@ -28,16 +32,12 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
       dd {
         position: relative;
         margin-bottom: 0 !important;
-        top: 1px;
         float: $default-float;
         > a {
           display: block;
           background: $tabs-navigation-bg-color;
           color: $tabs-navigation-font-color;
-          padding-top: $tabs-navigation-padding;
-          padding-#{$opposite-direction}: $tabs-navigation-padding * 2;
-          padding-bottom: $tabs-navigation-padding + rem-calc(1);
-          padding-#{$default-float}: $tabs-navigation-padding * 2;
+          padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
           font-family: $tabs-navigation-font-family;
           font-size: $tabs-navigation-font-size;
           &:hover { background: $tabs-navigation-hover-bg-color; }
@@ -95,5 +95,11 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         }
       }
     }
+    .no-js {
+      .tabs-content > .content {
+        display: block;
+        float: none;
+      }
+    }
   }
-}
+}

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -69,6 +73,11 @@ $tooltip-pip-size: 5px !default;
         border: solid $tooltip-pip-size;
         border-color: transparent transparent $tooltip-bg transparent;
         top: -($tooltip-pip-size * 2);
+
+        &.rtl {
+          left: auto;
+          #{$opposite-direction}: $tooltip-pip-size;
+        }
       }
 
       &.radius {

data/vendor/assets/stylesheets/foundation/components/_top-bar.scss

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 @import "grid";
 
@@ -35,10 +39,12 @@ $topbar-link-color-active-hover: #fff !default;
 $topbar-link-weight: normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
+$topbar-link-bg: $topbar-bg !default;
 $topbar-link-bg-hover: #272727 !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
+$topbar-link-text-transform: none !default;
 $topbar-link-padding: $topbar-height / 3 !default;
 
 $topbar-button-font-size: 0.75rem;
@@ -73,17 +79,31 @@ $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness:
 $topbar-sticky-class: ".sticky" !default;
 $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
 
+// Accessibility mixins for hiding and showing the menu dropdown items
+@mixin topbar-hide-dropdown {
+  // Makes an element visually hidden by default, but visible when focused.
+  display: block;
+  @include element-invisible();
+}
+
+@mixin topbar-show-dropdown {
+  display: block;
+  @include element-invisible-off();
+  position: absolute !important; // Reset the position from static to absolute
+}
+
 @include exports("top-bar") {
-  // Used to provide media query values for javascript components.
-  // This class is generated despite the value of $include-html-top-bar-classes
-  // to ensure width calculations work correctly.
-  meta.foundation-mq-topbar {
-    font-family: "/" + unquote($topbar-media-query) + "/";
-    width: $topbar-breakpoint;
-  }
 
   @if $include-html-top-bar-classes {
 
+    // Used to provide media query values for javascript components.
+    // This class is generated despite the value of $include-html-top-bar-classes
+    // to ensure width calculations work correctly.
+    meta.foundation-mq-topbar {
+      font-family: "/" + unquote($topbar-media-query) + "/";
+      width: $topbar-breakpoint;
+    }
+
     /* Wrapped around .top-bar to contain to grid width */
     .contain-to-grid {
       width: 100%;
@@ -221,9 +241,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               height: 0;
               // Shh, don't tell, but box-shadows create the menu icon :)
               @if $experimental {
-                -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
-                                    0 16px 0 1px $topbar-menu-icon-color,
-                                    0 22px 0 1px $topbar-menu-icon-color;
+                -webkit-box-shadow: 1px 10px 1px 1px $topbar-menu-icon-color,
+                                    1px 16px 1px 1px $topbar-menu-icon-color,
+                                    1px 22px 1px 1px $topbar-menu-icon-color;
               }
               box-shadow:         0 10px 0 1px $topbar-menu-icon-color,
                                   0 16px 0 1px $topbar-menu-icon-color,
@@ -242,12 +262,12 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         .toggle-topbar {
           a { color: $topbar-menu-link-color-toggled;
-            span {
+            &::after {
               // Shh, don't tell, but box-shadows create the menu icon :)
               @if $experimental {
-                -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
-                                    0 16px 0 1px $topbar-menu-icon-color-toggled,
-                                    0 22px 0 1px $topbar-menu-icon-color-toggled;
+                -webkit-box-shadow: 1px 10px 1px 1px $topbar-menu-icon-color-toggled,
+                                    1px 16px 1px 1px $topbar-menu-icon-color-toggled,
+                                    1px 22px 1px 1px $topbar-menu-icon-color-toggled;
               }
               box-shadow:         0 10px 0 1px $topbar-menu-icon-color-toggled,
                                   0 16px 0 1px $topbar-menu-icon-color-toggled,
@@ -295,6 +315,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           font-family: $topbar-link-font-family;
           font-size: $topbar-link-font-size;
           font-weight: $topbar-link-weight;
+          text-transform: $topbar-link-text-transform;
           background: $topbar-dropdown-bg;
 
           &.button {
@@ -328,7 +349,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         }
 
         // Apply the hover link color when it has that class
-        &:hover > a {
+        &:hover:not(.has-form) > a {
           background: $topbar-link-bg-hover;
           color: $topbar-link-color-hover;
 
@@ -367,7 +388,11 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         &.moved { position: static;
           & > .dropdown {
-            display: block;
+            @include topbar-show-dropdown();
+            width: 100%;
+          }
+          & > a:after {
+            display: none;
           }
         }
       }
@@ -377,8 +402,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         position: absolute;
         #{$default-float}: 100%;
         top: 0;
-        display: none;
         z-index: 99;
+        @include topbar-hide-dropdown();
 
         li {
           width: 100%;
@@ -471,13 +496,13 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             a:not(.button) {
               padding: 0 $topbar-link-padding;
               line-height: $topbar-height;
-              background: $topbar-bg;
+              background: $topbar-link-bg;
               &:hover { background: $topbar-link-bg-hover; }
             }
           }
           &.active:not(.has-form) {
             a:not(.button) {
-              padding: 0 $topbar-height / 3;
+              padding: 0 $topbar-link-padding;
               line-height: $topbar-height;
               color: $topbar-link-color-active;
               background: $topbar-link-bg-active;
@@ -502,12 +527,14 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           }
 
           &.moved { position: relative;
-            & > .dropdown { display: none; }
+            & > .dropdown {
+              @include topbar-hide-dropdown();
+            }
           }
 
           &.hover, &.not-click:hover {
             & > .dropdown {
-              display: block;
+              @include topbar-show-dropdown();
             }
           }
 
@@ -517,7 +544,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
                 border: none;
                 content: "\00bb";
                 top: 1rem;
-                margin-top: -2px;
+                margin-top: -1px;
                 #{$opposite-direction}: 5px;
                 line-height: 1.2;
               }
@@ -565,8 +592,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         }
 
         .has-form {
-          background: $topbar-bg;
-          padding: 0 $topbar-link-padding;
+          background: $topbar-link-bg;
+          padding: 0 $topbar-height / 3;
           height: $topbar-height;
         }
 
@@ -609,7 +636,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         .has-dropdown {
           &:hover {
             & > .dropdown {
-              display: block;
+              @include topbar-show-dropdown();
             }
           }
         }

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

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 $include-html-type-classes: $include-html-classes !default;
@@ -50,7 +54,7 @@ $code-font-weight: bold !default;
 // We use these to style anchors
 $anchor-text-decoration: none !default;
 $anchor-font-color: $primary-color !default;
-$anchor-font-color-hover: scale-color($primary-color, $lightness: -14%) !default;
+$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;
 
 // We use these to style the <hr> element
 $hr-border-width: 1px !default;
@@ -106,81 +110,58 @@ $microformat-abbr-font-decoration: none !default;
 // Responsive Text alignment
 //
 
-// Global Text Styles
-.text-left    { text-align: left !important; }
-.text-right   { text-align: right !important; }
-.text-center  { text-align: center !important; }
-.text-justify { text-align: justify !important; }
-
-@media #{$small-only} {
-    .small-only-text-left    { text-align: left !important; }
-    .small-only-text-right   { text-align: right !important; }
-    .small-only-text-center  { text-align: center !important; }
-    .small-only-text-justify { text-align: justify !important; }
-}
-
-@media #{$small-up} {
-    .small-text-left    { text-align: left !important; }
-    .small-text-right   { text-align: right !important; }
-    .small-text-center  { text-align: center !important; }
-    .small-text-justify { text-align: justify !important; }
-}
-
-@media #{$medium-only} {
-    .medium-only-text-left    { text-align: left !important; }
-    .medium-only-text-right   { text-align: right !important; }
-    .medium-only-text-center  { text-align: center !important; }
-    .medium-only-text-justify { text-align: justify !important; }
-}
-
-@media #{$medium-up} {
-    .medium-text-left    { text-align: left !important; }
-    .medium-text-right   { text-align: right !important; }
-    .medium-text-center  { text-align: center !important; }
-    .medium-text-justify { text-align: justify !important; }
-}
-
-@media #{$large-only} {
-    .large-only-text-left    { text-align: left !important; }
-    .large-only-text-right   { text-align: right !important; }
-    .large-only-text-center  { text-align: center !important; }
-    .large-only-text-justify { text-align: justify !important; }
-}
-
-@media #{$large-up} {
-    .large-text-left    { text-align: left !important; }
-    .large-text-right   { text-align: right !important; }
-    .large-text-center  { text-align: center !important; }
-    .large-text-justify { text-align: justify !important; }
-}
-
-@media #{$xlarge-only} {
-    .xlarge-only-text-left    { text-align: left !important; }
-    .xlarge-only-text-right   { text-align: right !important; }
-    .xlarge-only-text-center  { text-align: center !important; }
-    .xlarge-only-text-justify { text-align: justify !important; }
-}
-
-@media #{$xlarge-up} {
-    .xlarge-text-left    { text-align: left !important; }
-    .xlarge-text-right   { text-align: right !important; }
-    .xlarge-text-center  { text-align: center !important; }
-    .xlarge-text-justify { text-align: justify !important; }
-}
-
-@media #{$xxlarge-only} {
-    .xxlarge-only-text-left    { text-align: left !important; }
-    .xxlarge-only-text-right   { text-align: right !important; }
-    .xxlarge-only-text-center  { text-align: center !important; }
-    .xxlarge-only-text-justify { text-align: justify !important; }
+// Text Breakpoints
+$text-breakpoint-sizes:
+  small,
+  medium,
+  large,
+  xlarge,
+  xxlarge
+;
+$text-breakpoint-only-queries:
+  unquote($small-only),
+  unquote($medium-only),
+  unquote($large-only),
+  unquote($xlarge-only),
+  unquote($xxlarge-only)
+;
+$text-breakpoint-up-queries:
+  unquote($small-up),
+  unquote($medium-up),
+  unquote($large-up),
+  unquote($xlarge-up),
+  unquote($xxlarge-up)
+;
+
+@mixin text-alignment-loop {
+  $text-alignments: left, right, center, justify;
+  
+  // Global Text Styles
+  @each $alignment in $text-alignments {
+    .text-#{$alignment} {
+      text-align: #{$alignment} !important;
+    }
+  }
+  
+  @each $current-text-breakpoint in $text-breakpoint-sizes {
+    @media #{nth($text-breakpoint-only-queries, index($text-breakpoint-sizes, $current-text-breakpoint))} {
+      @each $alignment in $text-alignments {
+        .#{$current-text-breakpoint}-only-text-#{$alignment} {
+          text-align: #{$alignment} !important;
+        }
+      }
+    }
+    @media #{nth($text-breakpoint-up-queries, index($text-breakpoint-sizes, $current-text-breakpoint))} {
+      @each $alignment in $text-alignments {
+        .#{$current-text-breakpoint}-text-#{$alignment} {
+          text-align: #{$alignment} !important;
+        }
+      }
+    }
+  }
 }
 
-@media #{$xxlarge-up} {
-    .xxlarge-text-left    { text-align: left !important; }
-    .xxlarge-text-right   { text-align: right !important; }
-    .xxlarge-text-center  { text-align: center !important; }
-    .xxlarge-text-justify { text-align: justify !important; }
-}
+@include text-alignment-loop;
 
 //
 // Typography Placeholders
@@ -202,6 +183,82 @@ $microformat-abbr-font-decoration: none !default;
 @include exports("type") {
   @if $include-html-type-classes {
 
+    // Global Text Styles
+    .text-left    { text-align: left !important; }
+    .text-right   { text-align: right !important; }
+    .text-center  { text-align: center !important; }
+    .text-justify { text-align: justify !important; }
+
+    @media #{$small-only} {
+        .small-only-text-left    { text-align: left !important; }
+        .small-only-text-right   { text-align: right !important; }
+        .small-only-text-center  { text-align: center !important; }
+        .small-only-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$small-up} {
+        .small-text-left    { text-align: left !important; }
+        .small-text-right   { text-align: right !important; }
+        .small-text-center  { text-align: center !important; }
+        .small-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$medium-only} {
+        .medium-only-text-left    { text-align: left !important; }
+        .medium-only-text-right   { text-align: right !important; }
+        .medium-only-text-center  { text-align: center !important; }
+        .medium-only-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$medium-up} {
+        .medium-text-left    { text-align: left !important; }
+        .medium-text-right   { text-align: right !important; }
+        .medium-text-center  { text-align: center !important; }
+        .medium-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$large-only} {
+        .large-only-text-left    { text-align: left !important; }
+        .large-only-text-right   { text-align: right !important; }
+        .large-only-text-center  { text-align: center !important; }
+        .large-only-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$large-up} {
+        .large-text-left    { text-align: left !important; }
+        .large-text-right   { text-align: right !important; }
+        .large-text-center  { text-align: center !important; }
+        .large-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$xlarge-only} {
+        .xlarge-only-text-left    { text-align: left !important; }
+        .xlarge-only-text-right   { text-align: right !important; }
+        .xlarge-only-text-center  { text-align: center !important; }
+        .xlarge-only-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$xlarge-up} {
+        .xlarge-text-left    { text-align: left !important; }
+        .xlarge-text-right   { text-align: right !important; }
+        .xlarge-text-center  { text-align: center !important; }
+        .xlarge-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$xxlarge-only} {
+        .xxlarge-only-text-left    { text-align: left !important; }
+        .xxlarge-only-text-right   { text-align: right !important; }
+        .xxlarge-only-text-center  { text-align: center !important; }
+        .xxlarge-only-text-justify { text-align: justify !important; }
+    }
+
+    @media #{$xxlarge-up} {
+        .xxlarge-text-left    { text-align: left !important; }
+        .xxlarge-text-right   { text-align: right !important; }
+        .xxlarge-text-center  { text-align: center !important; }
+        .xxlarge-text-justify { text-align: justify !important; }
+    }
+
     /* Typography resets */
     div,
     dl,
@@ -287,7 +344,7 @@ $microformat-abbr-font-decoration: none !default;
       border: $hr-border-style $hr-border-color;
       border-width: $hr-border-width 0 0;
       clear: both;
-      margin: $hr-margin 0 ($hr-margin - rem-calc(1));
+      margin: $hr-margin 0 ($hr-margin - em-calc(strip-unit($hr-border-width)));
       height: 0;
     }