foundation-rails 5.2.1.0 → 5.2.2.0

data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss

@@ -42,6 +42,9 @@ $alert-close-padding: 9px 6px 4px !default;
 // We use this to control border radius
 $alert-radius: $global-radius !default;
 
+$alert-transition-speed: 300ms !default;
+$alert-transition-ease: ease-out !default;
+
 //
 // Alert Mixins
 //
@@ -56,6 +59,7 @@ $alert-radius: $global-radius !default;
   position: relative;
   padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
   font-size: $alert-font-size;
+  @include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
 }
 
 // We use this mixin to add alert styles
@@ -116,6 +120,7 @@ $alert-radius: $global-radius !default;
       &.secondary { @include alert-style($secondary-color); }
       &.warning { @include alert-style($warning-color); }
       &.info { @include alert-style($info-color); }
+      &.alert-close { opacity: 0}
     }
   }
-}
+}

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -8,12 +8,13 @@
 // Block Grid Variables
 //
 $include-html-grid-classes: $include-html-classes !default;
+$include-xl-html-block-grid-classes: false !default;
 
 // We use this to control the maximum number of block grid elements per row
 $block-grid-elements: 12 !default;
 $block-grid-default-spacing: rem-calc(20) !default;
 
-$align-block-grid-to-grid: true !default;
+$align-block-grid-to-grid: false !default;
 @if $align-block-grid-to-grid {
   $block-grid-default-spacing: $column-gutter;
 }
@@ -31,8 +32,8 @@ $block-grid-media-queries: true !default;
 // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
 // $base-style - Apply a base style to block grid. Default: true.
 @mixin block-grid(
-  $per-row:false, 
-  $spacing:$block-grid-default-spacing, 
+  $per-row:false,
+  $spacing:$block-grid-default-spacing,
   $include-spacing:true,
   $base-style:true) {
 
@@ -80,7 +81,7 @@ $block-grid-media-queries: true !default;
       @if $per-row == $i {
         $grid-column: '';
       }
-      &:nth-child(#{$per-row}n#{unquote($grid-column)}) {
+      &:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
         padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
         padding-right: ($spacing - (($spacing / $per-row) * $i));
       }
@@ -101,21 +102,31 @@ $block-grid-media-queries: true !default;
 
 @include exports("block-grid") {
   @if $include-html-grid-classes {
-    
+
     [class*="block-grid-"] { @include block-grid; }
-    
+
     @if $block-grid-media-queries {
       @media #{$small-up} {
         @include block-grid-html-classes($size:small,$include-spacing:false);
       }
-  
+
       @media #{$medium-up} {
         @include block-grid-html-classes($size:medium,$include-spacing:false);
       }
-  
+
       @media #{$large-up} {
         @include block-grid-html-classes($size:large,$include-spacing:false);
       }
+
+      @if $include-xl-html-block-grid-classes {
+        @media #{$xlarge-up} {
+          @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+        }
+
+        @media #{$xxlarge-up} {
+          @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+        }
+      }
     }
   }
 }

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

@@ -61,13 +61,13 @@ $crumb-slash: "/" !default;
   margin: 0;
   float: $default-float;
   font-size: $crumb-font-size;
+  line-height: $crumb-font-size;
   text-transform: $crumb-font-transform;
+  color: $crumb-font-color;
 
   &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
 
-  a,
-  span {
-    text-transform: $crumb-font-transform;
+  a {
     color: $crumb-font-color;
   }
 

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

@@ -36,6 +36,8 @@ $button-function-factor: -20% !default;
 // We use these to control button border styles.
 $button-border-width: 0px !default;
 $button-border-style: solid !default;
+$bg: $primary-color !default;
+$button-border-color: scale-color($bg, $lightness: $button-function-factor) !default;
 
 // We use this to set the default radius used throughout the core.
 $button-radius: $global-radius !default;
@@ -65,6 +67,8 @@ $button-disabled-opacity: 0.7 !default;
     position: relative;
     text-decoration: none;
     text-align: $button-font-align;
+    -webkit-appearance: none;
+    -webkit-border-radius:0;
   }
   @if $display { display: $display; }
 }
@@ -91,7 +95,6 @@ $button-disabled-opacity: 0.7 !default;
     @else if $padding == $button-tny { font-size: $button-font-tny; }
     @else if $padding == $button-sml { font-size: $button-font-sml; }
     @else if $padding == $button-lrg { font-size: $button-font-lrg; }
-/*     @else                            { font-size: $padding - rem-calc(2); } */
   }
 
   // We can set $full-width:true to remove side padding extend width.
@@ -147,9 +150,6 @@ $button-disabled-opacity: 0.7 !default;
   @if $disabled {
     cursor: $cursor-default-value;
     opacity: $button-disabled-opacity;
-    @if $experimental {
-      -webkit-box-shadow: none;
-    }
     box-shadow: none;
     &:hover,
     &:focus { background-color: $bg; }
@@ -189,7 +189,6 @@ $button-disabled-opacity: 0.7 !default;
       @include button-style;
 
       @include single-transition(background-color);
-      @include button-size($padding:$button-med, $full-width:false);
 
       &.secondary { @include button-style($bg:$secondary-color); }
       &.success   { @include button-style($bg:$success-color); }

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

@@ -201,6 +201,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
               position: relative;
               cursor: $cursor-pointer-value;
               opacity: 0.4;
+              clear: none;
 
               &.fix-height {
                 img {
@@ -211,10 +212,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
 
               a.th {
                 border: none;
-                @if $experimental {
-                  -webkit-box-shadow: none;
-                }
-                        box-shadow: none;
+                box-shadow: none;
                 display: block;
               }
 

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

@@ -19,6 +19,7 @@ $form-label-font-size: rem-calc(14) !default;
 $form-label-font-weight: normal !default;
 $form-label-line-height: 1.5 !default;
 $form-label-font-color: scale-color(#000, $lightness: 30%) !default;
+$form-label-small-transform: capitalize !default;
 $form-label-bottom-margin: 0 !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
@@ -89,10 +90,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       .column,
       .columns { padding: 0; }
       input {
-        -moz-border-radius-bottom#{$opposite-direction}: 0;
-        -moz-border-radius-top#{$opposite-direction}: 0;
-        -webkit-border-bottom-#{$opposite-direction}-radius: 0;
-        -webkit-border-top-#{$opposite-direction}-radius: 0;
+        @include side-radius($opposite-direction, 0);
       }
 
     }
@@ -110,9 +108,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   background-color: $input-bg-color;
   font-family: $input-font-family;
   border: $input-border-width $input-border-style $input-border-color;
-  @if $experimental {
-    -webkit-box-shadow: $input-box-shadow;
-  }
   box-shadow: $input-box-shadow;
   color: $input-font-color;
   display: block;
@@ -162,7 +157,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   }
   @else if $alignment == inline {
     margin: 0 0 $form-spacing 0;
-    padding: $form-spacing / 2 + rem-calc($input-border-width * 2) 0;
+    padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
   }
 }
 
@@ -307,6 +302,24 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
   @else { color: $input-error-message-font-color-alt; }
 }
 
+// We use this mixin to style select elements
+@mixin form-select  {
+  -webkit-appearance: none !important;
+  background-color: $select-bg-color;
+  background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+  background-repeat: no-repeat;
+  background-position: if($text-direction == 'rtl', 3%, 97%) center;
+  border: $input-border-width $input-border-style $input-border-color;
+  padding: $form-spacing / 2;
+  font-size: $input-font-size;
+  @include radius(0);
+  &.radius { @include radius($global-radius); }
+  &:hover {
+    background-color: $select-hover-bg-color;
+    border-color: $input-focus-border-color;
+  }
+}
+
 @include exports("form") {
   @if $include-html-form-classes {
     /* Standard Forms */
@@ -321,28 +334,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       &.inline { @include form-label(inline,false); }
       /* Styles for required inputs */
       small {
-        text-transform: capitalize;
+        text-transform: $form-label-small-transform;
         color: scale-color($form-label-font-color, $lightness: 15%);
       }
     }
 
-    select {
-      -webkit-appearance: none !important;
-      background-color: $select-bg-color;
-      background-image: url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
-      background-repeat: no-repeat;
-      background-position: if($text-direction == 'rtl', 3%, 97%) center;
-      border: $input-border-width $input-border-style $input-border-color;
-      padding: $form-spacing / 2;
-      font-size: $input-font-size;
-      @include radius(0);
-      &.radius { @include radius($global-radius); }
-      &:hover {
-        background-color: $select-hover-bg-color;
-        border-color: $input-focus-border-color;
-      }
-    }
-
     select::-ms-expand {
       display:none;
     }
@@ -389,14 +385,18 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
     textarea {
       -webkit-appearance: none;
       @include form-element;
-      @if not $input-include-glowing-effect {
+      @if $input-include-glowing-effect == false {
           @include single-transition(all, 0.15s, linear);
       }
       &.radius {
         @include radius($input-border-radius);
       }
     }
-    
+
+    input[type="submit"] {
+      -webkit-appearance: none;
+    }
+
     /* Respect enforced amount of rows for textarea */
     textarea[rows] {
       height: auto;
@@ -404,6 +404,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 
     /* Add height value for select elements to match text input height */
     select {
+      @include form-select;
       height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
     }
 
@@ -473,7 +474,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
           color: scale-color($form-label-font-color, $lightness: 15%);
           background: transparent;
           padding: 0;
-          text-transform: capitalize;
+          text-transform: $form-label-small-transform;
           font-style: normal;
           font-size: 60%;
           margin: 0;

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

@@ -11,8 +11,6 @@
 // styles get applied to [data-mysite-plugin], etc
 $namespace: false !default;
 
-$experimental: true !default;
-
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
 // for compatibility with browser-based text zoom or user-set defaults.
 
@@ -34,9 +32,6 @@ $base-line-height: 150% !default;
 // $radius - Default: $global-radius || 4px
 @mixin radius($radius:$global-radius) {
   @if $radius {
-    @if $experimental {
-      -webkit-border-radius: $radius;
-    }
     border-radius: $radius;
   }
 }
@@ -47,21 +42,9 @@ $base-line-height: 150% !default;
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
   @if ($side == left or $side == right) {
-    @if $experimental {
-      -moz-border-radius-bottom#{$side}: $radius;
-      -moz-border-radius-top#{$side}: $radius;
-      -webkit-border-bottom-#{$side}-radius: $radius;
-      -webkit-border-top-#{$side}-radius: $radius;
-    }
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
   } @else {
-    @if $experimental {
-      -moz-border-radius-#{$side}left: $radius;
-      -moz-border-radius-#{$side}right: $radius;
-      -webkit-border-#{$side}-left-radius: $radius;
-      -webkit-border-#{$side}-right-radius: $radius;
-    }
     border-#{$side}-left-radius: $radius;
     border-#{$side}-right-radius: $radius;
   }
@@ -72,15 +55,9 @@ $base-line-height: 150% !default;
 // We can control whether or not we have inset shadows edges.
 // $active - Default: true, Options: false
 @mixin inset-shadow($active:true) {
-  @if $experimental {
-    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
-  }
   box-shadow: $shiny-edge-size $shiny-edge-color inset;
 
   @if $active { &:active {
-    @if $experimental {
-      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
-    }
     box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
 }
 
@@ -91,10 +68,6 @@ $base-line-height: 150% !default;
 // $speed - Default: 300ms
 // $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) {
-  @if $experimental {
-    -webkit-transition: $property $speed $ease;
-    -moz-transition: $property $speed $ease;
-  }
   transition: $property $speed $ease;
 }
 
@@ -102,16 +75,14 @@ $base-line-height: 150% !default;
 //
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
-  @if $experimental {
-    -moz-box-sizing: $type;
-    -webkit-box-sizing: $type;
-  }
-  box-sizing: $type;
+  -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
+	   -moz-box-sizing: $type; // Firefox < 29
+	        box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
 // @mixins
 //
-// We use this to create equilateral triangles
+// We use this to create isosceles triangles
 // $triangle-size - Used to set border-size. No default, set a px or em size.
 // $triangle-color - Used to set border-color which makes up triangle. No default
 // $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
@@ -153,17 +124,9 @@ $base-line-height: 150% !default;
 // $fade-time - Default: 300ms
 // $glowing-effect-color - Default: fade-out($primary-color, .25)
 @mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
-  @if $experimental {
-    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
-    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
-  }
   transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
 
   &:#{$selector} {
-    @if $experimental {
-      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
-      -moz-box-shadow: 0 0 5px $glowing-effect-color;
-    }
     box-shadow: 0 0 5px $glowing-effect-color;
     border-color: $glowing-effect-color;
   }
@@ -175,12 +138,6 @@ $base-line-height: 150% !default;
 // $horizontal: Default: 0
 // $vertical: Default: 0
 @mixin translate2d($horizontal:0, $vertical:0) {
-  @if $experimental {
-    -webkit-transform: translate($horizontal,$vertical);
-    -moz-transform: translate($horizontal,$vertical);
-    -ms-transform: translate($horizontal,$vertical);
-    -o-transform: translate($horizontal,$vertical);
-  }
   transform: translate($horizontal,$vertical)
 }
 
@@ -250,6 +207,7 @@ $include-html-classes: true !default;
 $include-print-styles: true !default;
 $include-html-global-classes: $include-html-classes !default;
 
+$column-gutter: rem-calc(30) !default;
 
 // Media Query Ranges
 $small-range: (0em, 40em) !default;
@@ -295,41 +253,44 @@ $cursor-text-value: text !default;
 
 @include exports("global") {
 
-  @if $include-html-global-classes {
+  // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+  // Used to provide media query values for javascript components.
+  // Forward slash placed around everything to convince PhantomJS to read the value.
+  
+  meta.foundation-version {
+    font-family: "/5.2.2/";
+  }
+  
+  meta.foundation-mq-small {
+    font-family: "/" + unquote($small-up) + "/";
+    width: lower-bound($small-range);
+  }
 
-    meta.foundation-version {
-      font-family: "/5.2.1/";
-    }
-    // Used to provide media query values for javascript components.
-    // Forward slash placed around everything to convince PhantomJS to read the value.
-    meta.foundation-mq-small {
-      font-family: "/" + unquote($small-only) + "/";
-      width: lower-bound($small-range);
-    }
+  meta.foundation-mq-medium {
+    font-family: "/" + unquote($medium-up) + "/";
+    width: lower-bound($medium-range);
+  }
 
-    meta.foundation-mq-medium {
-      font-family: "/" + unquote($medium-up) + "/";
-      width: lower-bound($medium-range);
-    }
+  meta.foundation-mq-large {
+    font-family: "/" + unquote($large-up) + "/";
+    width: lower-bound($large-range);
+  }
 
-    meta.foundation-mq-large {
-      font-family: "/" + unquote($large-up) + "/";
-      width: lower-bound($large-range);
-    }
+  meta.foundation-mq-xlarge {
+    font-family: "/" + unquote($xlarge-up) + "/";
+    width: lower-bound($xlarge-range);
+  }
 
-    meta.foundation-mq-xlarge {
-      font-family: "/" + unquote($xlarge-up) + "/";
-      width: lower-bound($xlarge-range);
-    }
+  meta.foundation-mq-xxlarge {
+    font-family: "/" + unquote($xxlarge-up) + "/";
+    width: lower-bound($xxlarge-range);
+  }
 
-    meta.foundation-mq-xxlarge {
-      font-family: "/" + unquote($xxlarge-up) + "/";
-      width: lower-bound($xxlarge-range);
-    }
+  meta.foundation-data-attribute-namespace {
+    font-family: #{$namespace};
+  }
 
-    meta.foundation-data-attribute-namespace {
-      font-family: #{$namespace};
-    }
+  @if $include-html-global-classes {
 
     // Must be 100% for off canvas to work
     html, body { height: 100%; }