foundation-rails 5.2.1.0 → 5.2.2.0

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

@@ -55,8 +55,8 @@ $range-slider-handle-cursor: pointer !default;
   height: $range-slider-bar-height;
   border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
   margin: rem-calc(20 0);
-  touch-action: none;
   -ms-touch-action: none;
+  touch-action: none;
   @if $vertical == true {
     display: inline-block;
     width: $range-slider-vertical-bar-width;

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

@@ -29,6 +29,10 @@ $reveal-close-side: rem-calc(11) !default;
 $reveal-close-color: #aaa !default;
 $reveal-close-weight: bold !default;
 
+// We use this to set the default radius used throughout the core.
+$reveal-radius: $global-radius !default;
+$reveal-round: $global-rounded !default;
+
 // We use these to control the modal border
 $reveal-border-style: solid !default;
 $reveal-border-width: 1px !default;
@@ -71,7 +75,6 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     top:0;
     #{$default-float}: 0;
     @media #{$small-only} {
-      height: 100vh;
       min-height:100vh;
     }
     @media #{$medium-up} {
@@ -104,30 +107,33 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 // $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
 // $border-color - Color of border. Default: $reveal-border-color.
 // $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
+// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
 // $top-offset - Default: $reveal-position-top || 50px
 @mixin reveal-modal-style(
-  $bg:$reveal-modal-bg,
-  $padding:$reveal-modal-padding,
-  $border:true,
+  $bg:false,
+  $padding:false,
+  $border:false,
   $border-style:$reveal-border-style,
   $border-width:$reveal-border-width,
   $border-color:$reveal-border-color,
-  $box-shadow:true,
-  $top-offset:$reveal-position-top) {
+  $box-shadow:false,
+  $radius:false,
+  $top-offset:false) {
 
   @if $bg { background-color: $bg; }
-  @if $padding { padding: $padding; }
+  @if $padding != false { padding: $padding; }
 
   @if $border { border: $border-style $border-width $border-color; }
 
   // We can choose whether or not to include the default box-shadow.
   @if $box-shadow {
-    @if $experimental {
-      -webkit-box-shadow: $reveal-box-shadow;
-    }
     box-shadow: $reveal-box-shadow;
   }
 
+  // We can control how much radius is used on the modal
+  @if $radius == true { @include radius($reveal-radius); }
+  @else if $radius { @include radius($radius); }
+
   @if $top-offset {
     @media #{$medium-up} {
       top: $top-offset;
@@ -157,20 +163,31 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
     dialog, .#{$reveal-modal-class} {
       @include reveal-modal-base;
-      @include reveal-modal-style;
+      @include reveal-modal-style(
+        $bg:$reveal-modal-bg,
+        $padding:$reveal-modal-padding,
+        $border:true,
+        $box-shadow:true,
+        $radius:false,
+        $top-offset:$reveal-position-top);
 
       .#{$close-reveal-modal-class} { @include reveal-close; }
     }
 
     dialog[open] {
-	display:block;
-	visibility: visible;
+      display:block;
+      visibility: visible;
     }
 
     @media #{$medium-up} {
 
       dialog, .#{$reveal-modal-class} {
-        @include reveal-modal-style(false, $reveal-modal-padding * 1.5, false, $box-shadow: false, $top-offset: $reveal-position-top);
+        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
+
+        &.radius { @include reveal-modal-style($radius:true); }
+        &.round  { @include reveal-modal-style($radius:$reveal-round); }
+        
+        &.collapse { @include reveal-modal-style($padding:0); }
 
         &.tiny  { @include reveal-modal-base(false, 30%); }
         &.small { @include reveal-modal-base(false, 40%); }

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

@@ -143,16 +143,6 @@ $switch-label-outline: 1px dotted #888 !default;
   // Hiding custom form spans since we auto-create them
   span.custom { display: none !important; }
 
-  // FIXME We should be able to remove this going forward.
-  // Bugfix for older Webkit, including mobile Webkit. Adapted from:
-  // http://css-tricks.com/webkit-sibling-bug/
-  // @media only screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:480px) {
-  //   @if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
-  // }
-  // @media only screen and (-webkit-min-device-pixel-ratio:1.5) {
-  //   @if $experimental { -webkit-animation: none 0; }
-  // }
-
   form.custom & .hidden-field {
     margin-left: auto;
     position: absolute;
@@ -214,33 +204,19 @@ $switch-label-outline: 1px dotted #888 !default;
     span:last-child {
       border-color: scale-color($paddle-bg, $lightness: -30%);
       background: $paddle-bg;
-      @if $experimental {
-        background: -moz-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
-        background: -webkit-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
-      }
       background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
 
       // Building the alternating colored sides of the switch
-      @if $experimental {
-        -webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
-                            1000px 0 0 1000px $positive-color,
-                            -2px 0 10px 0 rgba(0,0,0,0.07),
-                            -1000px 0 0 1000px $negative-color;
-      }
-      box-shadow:         2px 0 10px 0 rgba(0,0,0,0.07),
-                          1000px 0 0 980px $positive-color,
-                          -2px 0 10px 0 rgba(0,0,0,0.07),
-                          -1000px 0 0 1000px $negative-color;
+      box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
+                  1000px 0 0 980px $positive-color,
+                  -2px 0 10px 0 rgba(0,0,0,0.07),
+                  -1000px 0 0 1000px $negative-color;
     }
 
     &:hover,
     &:focus {
       span:last-child {
         background: $paddle-bg;
-        @if $experimental {
-          background: -moz-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
-          background: -webkit-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
-        }
         background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
       }
     }
@@ -314,7 +290,5 @@ $switch-label-outline: 1px dotted #888 !default;
         }
 
       }
-
-      @if $experimental { @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } } }
   }
 }

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

@@ -45,16 +45,10 @@ $thumb-transition-speed: 200ms !default;
   display: inline-block;
   border: $thumb-border-style $border-width $thumb-border-color;
   max-width: 100%;
-  @if $experimental {
-    -webkit-box-shadow: $box-shadow;
-  }
   box-shadow: $box-shadow;
 
   &:hover,
   &:focus {
-    @if $experimental {
-      -webkit-box-shadow: $box-shadow-hover;
-    }
     box-shadow: $box-shadow-hover;
   }
 }

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

@@ -4,6 +4,7 @@
 
 @import "global";
 @import "grid";
+@import "buttons";
 
 //
 // Top Bar Variables
@@ -47,7 +48,7 @@ $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;
+$topbar-button-font-size: 0.75rem !default;
 $topbar-button-top: 7px !default;
 
 $topbar-dropdown-label-color: #777 !default;
@@ -160,7 +161,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
       input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
 
-      .button {
+      .button, button {
         padding-top: .45rem;
         padding-bottom: .35rem;
         margin-bottom: 0;
@@ -188,7 +189,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           a {
             font-weight: $topbar-title-weight;
             color: $topbar-link-color;
-            width: 50%;
+            width: 75%;
             display: block;
             padding: 0 $topbar-link-padding;
           }
@@ -240,14 +241,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               top:0;
               height: 0;
               // Shh, don't tell, but box-shadows create the menu icon :)
-              @if $experimental {
-                -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,
-                                  0 22px 0 1px $topbar-menu-icon-color;
+              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;
             }
           }
         }
@@ -264,14 +260,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           a { color: $topbar-menu-link-color-toggled;
             &::after {
               // Shh, don't tell, but box-shadows create the menu icon :)
-              @if $experimental {
-                -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,
-                                  0 22px 0 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,
+                          0 22px 0 1px $topbar-menu-icon-color-toggled;
             }
           }
         }
@@ -318,34 +309,27 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           text-transform: $topbar-link-text-transform;
           background: $topbar-dropdown-bg;
 
+
           &.button {
-            background: $primary-color;
             font-size: $topbar-link-font-size;
-             padding-#{$opposite-direction}: $topbar-link-padding;
-             padding-#{$default-float}: $topbar-link-padding;
-            &:hover {
-              background: scale-color($primary-color, $lightness: -27%);
-            }
-          }
-          &.button.secondary {
-            background: $secondary-color;
-            &:hover {
-              background: scale-color($secondary-color, $lightness: -11%);
-            }
-          }
-          &.button.success {
-            background: $success-color;
-            &:hover {
-              background: scale-color($success-color, $lightness: -21%);
-            }
-          }
-          &.button.alert {
-            background: $alert-color;
-            &:hover {
-              background: scale-color($alert-color, $lightness: -18%);
-            }
+            padding-#{$opposite-direction}: $topbar-link-padding;
+            padding-#{$default-float}: $topbar-link-padding;
+            @include button-style($bg:$primary-color);
           }
+          &.button.secondary { @include button-style($bg:$secondary-color); }
+          &.button.success   { @include button-style($bg:$success-color); }
+          &.button.alert     { @include button-style($bg:$alert-color); }
+        }
 
+        > button {
+          font-size: $topbar-link-font-size;
+          padding-#{$opposite-direction}: $topbar-link-padding;
+          padding-#{$default-float}: $topbar-link-padding;
+          @include button-style($bg:$primary-color);
+
+          &.secondary { @include button-style($bg:$secondary-color); }
+          &.success   { @include button-style($bg:$success-color); }
+          &.alert     { @include button-style($bg:$alert-color); }
         }
 
         // Apply the hover link color when it has that class
@@ -425,7 +409,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
           }
           &.has-form { padding: 8px $topbar-link-padding; }
-          .button { top: auto; }
+          .button, button { top: auto; }
         }
 
         label {
@@ -455,7 +439,8 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         .name h1 a { width: auto; }
 
         input,
-        .button {
+        .button,
+        button {
           font-size: rem-calc(14);
           position: relative;
           top: $topbar-button-top;
@@ -568,6 +553,15 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               background: $topbar-dropdown-link-bg;
             }
 
+            &:not(.has-form) a:not(.button) {
+              color: $topbar-dropdown-link-color;
+              background: $topbar-dropdown-link-bg;   
+            }
+            &:not(.has-form):hover > a:not(.button) {
+              color: $topbar-link-color-hover;
+              background: $topbar-link-bg-hover;
+            }
+
             label {
               white-space: nowrap;
               background: $topbar-dropdown-label-bg;

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

@@ -106,63 +106,49 @@ $microformat-abbr-padding: rem-calc(0 1) !default;
 $microformat-abbr-font-weight: bold !default;
 $microformat-abbr-font-decoration: none !default;
 
-//
-// Responsive Text alignment
-//
-
-// Text Breakpoints
-$text-breakpoint-sizes:
+// Text alignment class names
+$align-class-names:
+  small-only,
   small,
+  medium-only,
   medium,
+  large-only,
   large,
+  xlarge-only,
   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;
-        }
-      }
+  xxlarge-only,
+  xxlarge;
+
+// Text alignment breakpoints
+$align-class-breakpoints:
+  $small-only,
+  $small-up,
+  $medium-only,
+  $medium-up,
+  $large-only,
+  $large-up,
+  $xlarge-only,
+  $xlarge-up,
+  $xxlarge-only,
+  $xxlarge-up;
+
+// Generates text align and justify classes
+@mixin align-classes{
+  .text-left    { text-align: left !important; }
+  .text-right   { text-align: right !important; }
+  .text-center  { text-align: center !important; }
+  .text-justify { text-align: justify !important; }
+
+  @for $i from 1 through length($align-class-names) {
+    @media #{(nth($align-class-breakpoints, $i))} {
+      .#{(nth($align-class-names, $i))}-text-left { text-align: left !important; }
+      .#{(nth($align-class-names, $i))}-text-right   { text-align: right !important; }
+      .#{(nth($align-class-names, $i))}-text-center  { text-align: center !important; }
+      .#{(nth($align-class-names, $i))}-text-justify { text-align: justify !important; }
     }
   }
 }
 
-@include text-alignment-loop;
-
 //
 // Typography Placeholders
 //
@@ -182,82 +168,8 @@ $text-breakpoint-up-queries:
 }
 @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; }
-    }
+    // Responsive Text alignment
+    @include align-classes;
 
     /* Typography resets */
     div,