foundation-rails 5.0.3.1 → 5.1.0.1

data/vendor/assets/stylesheets/foundation/components/_button-groups.scss

@@ -91,7 +91,7 @@ $button-group-border-width: 1px !default;
       &.round > * { @include button-group-style($radius:$button-round, $float:null); }
 
       @for $i from 2 through 8 {
-        &.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
+        &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
       }
     }
 

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

@@ -37,7 +37,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
     // The variables above should give enough control.
 
     /* Clearing Styles */
-    [data-clearing] {
+    .clearing-thumbs, #{data('clearing')} {
       @include clearfix;
       margin-bottom: 0;
       margin-#{$default-float}: 0;
@@ -47,6 +47,10 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
         float: $default-float;
         margin-#{$opposite-direction}: 10px;
       }
+
+      &[class*="block-grid-"] li {
+        margin-#{$opposite-direction}: 0;
+      }
     }
 
     .clearing-blackout {
@@ -69,6 +73,14 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       margin: 0;
     }
 
+    .clearing-touch-label {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      color: #aaa;
+      font-size: 0.6em;
+    }
+
     .visible-img {
       height: 95%;
       position: relative;

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

@@ -115,7 +115,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
 
 @include exports("dropdown-button") {
   @if $include-html-button-classes {
-    .dropdown.button { @include dropdown-button;
+    .dropdown.button, button.dropdown { @include dropdown-button;
       &.tiny { @include dropdown-button(tiny,$base-style:false); }
       &.small { @include dropdown-button(small,$base-style:false); }
       &.large { @include dropdown-button(large,$base-style:false); }

data/vendor/assets/stylesheets/foundation/components/_flex-video.scss

@@ -11,7 +11,7 @@ $flex-video-padding-bottom: 67.5% !default;
 $flex-video-margin-bottom: rem-calc(16) !default;
 
 // We use this to control widescreen bottom padding
-$flex-video-widescreen-padding-bottom: 57.25% !default;
+$flex-video-widescreen-padding-bottom: 56.55% !default;
 
 //
 // @mixins

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

@@ -13,8 +13,9 @@ $form-spacing: rem-calc(16) !default;
 $form-label-pointer: pointer !default;
 $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-bottom-margin: rem-calc(8) !default;
+$form-label-bottom-margin: 0 !default;
 $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
 $input-font-size: rem-calc(14) !default;
@@ -146,6 +147,7 @@ $select-bg-color: #fafafa !default;
     cursor: $form-label-pointer;
     display: block;
     font-weight: $form-label-font-weight;
+    line-height: $form-label-line-height;
     margin-bottom: $form-label-bottom-margin;
   }
 
@@ -183,12 +185,11 @@ $select-bg-color: #fafafa !default;
 // $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default:false
 //
-@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
+@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: scale-color($bg, $lightness: -11%);
     border-#{$opposite-direction}: none;
 
     // Control the font color based on background brightness
@@ -196,6 +197,10 @@ $select-bg-color: #fafafa !default;
     @else { color: $input-prefix-font-color-alt; }
   }
 
+  @if $border {
+    border-color: $border;
+  }
+
   @if $is-button {
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
@@ -213,12 +218,11 @@ $select-bg-color: #fafafa !default;
 // We use this mixin to create postfix label styles
 // $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default: false
-@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
+@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: scale-color($bg, $lightness: -16%);
     border-#{$default-float}: none;
 
     // Control the font color based on background brightness
@@ -226,6 +230,10 @@ $select-bg-color: #fafafa !default;
     @else { color: $input-prefix-font-color-alt; }
   }
 
+  @if $border {
+    border-color: $border;
+  }
+
   @if $is-button {
     padding-#{$default-float}: 0;
     padding-#{$opposite-direction}: 0;
@@ -349,8 +357,8 @@ $select-bg-color: #fafafa !default;
     .postfix { @include prefix-postfix-base; }
 
     /* Adjust padding, alignment and radius if pre/post element is a button */
-    .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
-    .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
+    .postfix.button { @include button-size(false,false,false); @include postfix(false, false, true); }
+    .prefix.button { @include button-size(false,false,false); @include prefix(false, false, true); }
 
     .prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
     .postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
@@ -365,26 +373,6 @@ $select-bg-color: #fafafa !default;
       &.radius { @include radius(0); @include side-radius(right, $global-radius); }
     }
 
-    /* Input groups will automatically style first and last elements of the group */
-    .input-group {
-      &.radius {
-        &>*:first-child,  &>*:first-child * {
-          @include side-radius($default-float, $global-radius);
-        }
-        &>*:last-child, &>*:last-child * {
-          @include side-radius($opposite-direction, $global-radius);
-        }
-      }
-      &.round {
-        &>*:first-child,  &>*:first-child * {
-          @include side-radius($default-float, $button-round);
-        }
-        &>*:last-child, &>*:last-child * {
-          @include side-radius($opposite-direction, $button-round);
-        }
-      }
-    }
-
     /* We use this to get basic styling on all basic form elements */
     input[type="text"],
     input[type="password"],
@@ -443,15 +431,17 @@ $select-bg-color: #fafafa !default;
 
     /* Error Handling */
 
-    [data-abide] {
+    #{data('abide')} {
       .error small.error, span.error, small.error {
         @include form-error-message;
       }
       span.error, small.error { display: none; }
     }
+
     span.error, small.error {
       @include form-error-message;
     }
+
     .error {
       input,
       textarea,
@@ -459,12 +449,16 @@ $select-bg-color: #fafafa !default;
         margin-bottom: 0;
       }
 
+      input[type="checkbox"],
+      input[type="radio"] {
+        margin-bottom: $form-spacing
+      }
+
       label,
       label.error {
         @include form-label-error-color;
       }
 
-      > small,
       small.error {
         @include form-error-message;
       }

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

@@ -3,11 +3,18 @@
 // Foundation Variables
 //
 
+// Data attribute namespace
+// styles get applied to [data-mysite-plugin], etc
+$namespace: false !default;
+
+meta.foundation-data-attribute-namespace {
+  font-family: #{$namespace};
+}
 
 $experimental: true !default;
 
 // The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with brower-based text zoom or user-set defaults.
+// for compatibility with browser-based text zoom or user-set defaults.
 
 // Since the typical default browser font-size is 16px, that makes the calculation for grid size.
 // If you want your base font-size to be different and not have it affect the grid breakpoints,
@@ -17,6 +24,9 @@ $base-font-size: 100% !default;
 // $base-line-height is 24px while $base-font-size is 16px
 $base-line-height: 150% !default;
 
+// Must be 100% for off cavas to work
+html, body { height: 100%; }
+
 //
 // Global Foundation Mixins
 //
@@ -39,46 +49,14 @@ $base-line-height: 150% !default;
 // We use this to create equal side border radius on elements.
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
-  @if $side == left {
-    @if $experimental {
-      -moz-border-radius-bottomleft: $radius;
-      -moz-border-radius-topleft: $radius;
-      -webkit-border-bottom-left-radius: $radius;
-      -webkit-border-top-left-radius: $radius;
-    }
-    border-bottom-left-radius: $radius;
-    border-top-left-radius: $radius;
-  }
-  @else if $side == right {
-    @if $experimental {
-      -moz-border-radius-topright: $radius;
-      -moz-border-radius-bottomright: $radius;
-      -webkit-border-top-right-radius: $radius;
-      -webkit-border-bottom-right-radius: $radius;
-    }
-    border-top-right-radius: $radius;
-    border-bottom-right-radius: $radius;
-  }
-  @else if $side == top {
-    @if $experimental {
-      -moz-border-radius-topright: $radius;
-      -moz-border-radius-topleft: $radius;
-      -webkit-border-top-right-radius: $radius;
-      -webkit-border-top-left-radius: $radius;
-    }
-    border-top-right-radius: $radius;
-    border-top-left-radius: $radius;
-  }
-  @else if $side == bottom {
-    @if $experimental {
-      -moz-border-radius-bottomright: $radius;
-      -moz-border-radius-bottomleft: $radius;
-      -webkit-border-bottom-right-radius: $radius;
-      -webkit-border-bottom-left-radius: $radius;
-    }
-    border-bottom-right-radius: $radius;
-    border-bottom-left-radius: $radius;
-  }
+	@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;
 }
 
 // @mixins
@@ -210,8 +188,6 @@ $font-smoothing: antialiased !default;
 
 // We use these to control text direction settings
 $text-direction: ltr !default;
-
-// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
 $default-float: left !default;
 $opposite-direction: right !default;
 @if $text-direction == ltr {
@@ -221,7 +197,6 @@ $opposite-direction: right !default;
   $default-float: right;
   $opposite-direction: left;
 }
-
 // We use these as default colors throughout
 $primary-color: #008CBA !default;
 $secondary-color: #e7e7e7 !default;
@@ -250,7 +225,7 @@ $small-range: (0em, 40em) !default;
 $medium-range: (40.063em, 64em) !default;
 $large-range: (64.063em, 90em) !default;
 $xlarge-range: (90.063em, 120em) !default;
-$xxlarge-range: (120.063em) !default;
+$xxlarge-range: (120.063em, 99999999em) !default;
 
 
 $screen: "only screen" !default;
@@ -288,6 +263,9 @@ $cursor-text-value: text !default;
 
 
 @include exports("global") {
+  meta.foundation-version {
+    font-family: "/5.1.0/";
+  }
   // 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 {
@@ -364,16 +342,7 @@ $cursor-text-value: text !default;
     .left   { float: left !important; }
     .right  { float: right !important; }
     .clearfix     { @include clearfix; }
-    .text-left    { text-align: left !important; }
-    .text-right   { text-align: right !important; }
-    .text-center  { text-align: center !important; }
-    .text-justify { text-align: justify !important; }
     .hide         { display: none; }
-    // Bidi counterparts to .left, .right, .text-left, .text-right
-    .start { float: $default-float !important; }
-    .end   { float: $opposite-direction !important; }
-    .text-start { text-align: $default-float !important; }
-    .text-end   { text-align: $opposite-direction !important; }
 
     // Font smoothing
     // Antialiased font smoothing works best for light text on a dark background.

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

@@ -4,6 +4,7 @@
 // @variables
 //
 $include-html-grid-classes: $include-html-classes !default;
+$include-xl-html-grid-classes: false !default;
 
 $row-width: rem-calc(1000) !default;
 $column-gutter: rem-calc(30) !default;
@@ -33,7 +34,7 @@ $total-columns: 12 !default;
 // For creating container, nested, and collapsed rows.
 //
 // 
-// $behavior - Any special beavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
+// $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
 @mixin grid-row($behavior: false) {
 
   // use @include grid-row(nest); to include a nested row
@@ -92,9 +93,13 @@ $total-columns: 12 !default;
   $push:false, 
   $pull:false, 
   $collapse:false, 
-  $float:true) {
+  $float:true,
+  $position:false) {
 
-  position: relative;
+  // If positioned for default .column, include relative position
+  @if $position {
+    position: relative;
+  }
 
   // If collapsed, get rid of gutter padding
   @if $collapse {
@@ -121,6 +126,12 @@ $total-columns: 12 !default;
   @if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
   @if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
 
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
   // If centered, get rid of float and add appropriate margins
   @if $center {
     margin-#{$default-float}: auto;
@@ -131,12 +142,6 @@ $total-columns: 12 !default;
   // 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; }
-    @else { float: none; }
-  }
-
 }
 
 // Create presentational classes for grid
@@ -159,32 +164,32 @@ $total-columns: 12 !default;
     float: $opposite-direction;
   }
 
-  @for $i from 1 through $total-columns - 1 {
-    .#{$size}-push#{-$i} {
+  @for $i from 0 through $total-columns - 1 {
+    .#{$size}-push-#{$i} {
       @include grid-column($push:$i, $collapse:null, $float:false);
     }
-    .#{$size}-pull#{-$i} {
+    .#{$size}-pull-#{$i} {
       @include grid-column($pull:$i, $collapse:null, $float:false);
     }
   }
 
   .column,
-  .columns { @include grid-column($columns:false); }
+  .columns { @include grid-column($columns:false, $position:true); }
 
 
   @for $i from 1 through $total-columns {
-    .#{$size}#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
   [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
   [class*="column"] + [class*="column"].end { float: $default-float; }
 
 
-  @for $i from 0 through $total-columns - 2 {
+  @for $i from 0 through $total-columns - 1 {
     .#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
   }
-  .column.#{$size}-reset-order,
-  .columns.#{$size}-reset-order {
+  .#{$size}-reset-order,
+  .#{$size}-reset-order {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
     left: auto;
@@ -220,31 +225,33 @@ $total-columns: 12 !default;
     @media #{$medium-up} {
       @include grid-html-classes($size:medium);
       // Old push and pull classes
-      @for $i from 1 through $total-columns - 1 {
-        .push#{-$i} {
+      @for $i from 0 through $total-columns - 1 {
+        .push-#{$i} {
           @include grid-column($push:$i, $collapse:null, $float:false);
         }
-        .pull#{-$i} {
+        .pull-#{$i} {
           @include grid-column($pull:$i, $collapse:null, $float:false);
         }
       }
     }
     @media #{$large-up} {
       @include grid-html-classes($size:large);
-      @for $i from 1 through $total-columns - 1 {
-        .push#{-$i} {
+      @for $i from 0 through $total-columns - 1 {
+        .push-#{$i} {
           @include grid-column($push:$i, $collapse:null, $float:false);
         }
-        .pull#{-$i} {
+        .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);
-    // }
-  }
-}
+  }
+  @if $include-xl-html-grid-classes {
+    @media #{$xlarge-up} {
+      @include grid-html-classes($size:xlarge);
+    }
+    @media #{$xxlarge-up} {
+      @include grid-html-classes($size:xxlarge);
+    }
+  }
+}