foundation-rails 5.0.2.0 → 5.0.3.0

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

@@ -10,7 +10,7 @@ $orbit-caption-bg: rgba(51,51,51, 0.8) !default;
 $orbit-caption-font-color: #fff !default;
 $orbit-caption-font-size: rem-calc(14) !default;
 $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
-$orbit-caption-padding: rem-calc(10,14) !default;
+$orbit-caption-padding: rem-calc(10 14) !default;
 $orbit-caption-height: auto !default;
 
 // We use these to control the left/right nav styles
@@ -164,8 +164,8 @@ $preloader-class: "preloader" !default;
             background-color: $orbit-caption-bg;
             color: $orbit-caption-font-color;
             width: 100%;
-            padding: 10px 14px;
-            font-size: rem-calc(14);
+            padding: $orbit-caption-padding;
+            font-size: $orbit-caption-font-size;
           }
         }
       }
@@ -212,7 +212,7 @@ $preloader-class: "preloader" !default;
           border-top: none;
           border-bottom: none;
         }
-  	  
+      
         // Pause button
         &.paused {
           & > span {
@@ -224,7 +224,7 @@ $preloader-class: "preloader" !default;
             border-right-style: solid;
             border-color: transparent transparent transparent #fff;
             &.dark { 
-            	border-color: transparent transparent transparent #333;
+              border-color: transparent transparent transparent #333;
             }
           }
         }
@@ -244,6 +244,7 @@ $preloader-class: "preloader" !default;
         height: 60px;
         line-height: 50px;
         color: white;
+        background-color: $orbit-nav-bg;
         text-indent: -9999px !important;
         z-index: 10;
 
@@ -292,15 +293,16 @@ $preloader-class: "preloader" !default;
       position: relative;
       top: 10px;
       float: none;
-  	text-align: center;
-  	display: inline-block;
+      text-align: center;
+      display: block;
 
       li {
-        display: block;
+        display: inline-block;
         width: $orbit-bullet-radius;
         height: $orbit-bullet-radius;
         background: $orbit-bullet-nav-color;
-        float: $default-float;
+        // float: $default-float;
+        float: none;
         margin-#{$opposite-direction}: 6px;
         @include radius(1000px);
 
@@ -350,4 +352,4 @@ $preloader-class: "preloader" !default;
     }
 
   }
-}
+}

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

@@ -19,7 +19,7 @@ $pagination-li-margin: rem-calc(5) !default;
 // We use these for the pagination anchor links
 $pagination-link-pad: rem-calc(1 10 1) !default;
 $pagination-link-font-color: #999 !default;
-$pagination-link-active-bg: darken(#fff, 10%) !default;
+$pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default !default;

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

@@ -6,13 +6,13 @@
 $include-html-panel-classes: $include-html-classes !default;
 
 // We use these to control the background and border styles
-$panel-bg: darken(#fff, 5%) !default;
+$panel-bg: scale-color(#fff, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
 
 // We use this % to control how much we darken things on hover
-$panel-function-factor: 10% !default;
-$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
+$panel-function-factor: -11% !default;
+$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default;
 
 // We use these to set default inner padding and bottom margin
 $panel-margin-bottom: rem-calc(20) !default;
@@ -28,7 +28,7 @@ $callout-panel-link-color: $primary-color !default;
 // @mixins
 //
 // We use this mixin to create panels.
-// $bg - Sets the panel background color. Default: $panel-pg || darken(#fff, 5%) !default
+// $bg - Sets the panel background color. Default: $panel-pg || scale-color(#fff, $lightness: -5%) !default
 // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
 // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
 @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
@@ -38,7 +38,7 @@ $callout-panel-link-color: $primary-color !default;
 
     border-style: $panel-border-style;
     border-width: $panel-border-size;
-    border-color: darken($bg, $panel-function-factor);
+    border-color: scale-color($bg, $lightness: $panel-function-factor);
     margin-bottom: $panel-margin-bottom;
     padding: $padding;
 
@@ -70,7 +70,7 @@ $callout-panel-link-color: $primary-color !default;
     .panel { @include panel;
 
       &.callout {
-        @include panel(lighten($primary-color, 60%));
+        @include panel(scale-color($primary-color, $lightness: 94%));
         a {
           color: $callout-panel-link-color;
         }

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

@@ -10,7 +10,7 @@ $progress-bar-height: rem-calc(25) !default;
 $progress-bar-color: #f6f6f6 !default;
 
 // We use these to control the border styles
-$progress-bar-border-color: darken(#fff, 20%) !default;
+$progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;

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

@@ -13,7 +13,7 @@ $reveal-overlay-bg-old: #000 !default;
 
 // We use these to control the style of the modal itself.
 $reveal-modal-bg: #fff !default;
-$reveal-position-top: 50px !default;
+$reveal-position-top: rem-calc(100) !default;
 $reveal-default-width: 80% !default;
 $reveal-modal-padding: rem-calc(20) !default;
 $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
@@ -147,7 +147,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     @media #{$medium-up} {
 
       .#{$reveal-modal-class} {
-        @include reveal-modal-style(false, rem-calc(30), false, $box-shadow: false, $top-offset: rem-calc(100));
+        @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%); }
         &.small { @include reveal-modal-base(false, 40%); }

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

@@ -16,7 +16,7 @@ $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: lighten(#000, 30%) !default;
+$side-nav-link-color-active: scale-color(#000, $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;
@@ -27,7 +27,7 @@ $side-nav-active-font-family: $side-nav-font-family !default;
 // We use these to control border styles
 $side-nav-divider-size: 1px !default;
 $side-nav-divider-style: solid !default;
-$side-nav-divider-color: darken(#fff, 10%) !default;
+$side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
 
 
 //
@@ -41,8 +41,8 @@ $side-nav-divider-color: darken(#fff, 10%) !default;
 // $font-size - Font size of nav items. Default: $side-nav-font-size.
 // $link-color - Color of navigation links. Default: $side-nav-link-color.
 @mixin side-nav(
-  $divider-color:$side-nav-divider-color, 
-  $font-size:$side-nav-font-size, 
+  $divider-color:$side-nav-divider-color,
+  $font-size:$side-nav-font-size,
   $link-color:$side-nav-link-color) {
   display: block;
   margin: 0;

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

@@ -22,14 +22,14 @@ $sub-nav-font-color: #999 !default;
 $sub-nav-font-weight: normal !default;
 $sub-nav-text-decoration: none !default;
 $sub-nav-border-radius: 3px !default;
-$sub-nav-font-color-hover: darken($sub-nav-font-color, 15%) !default;
+$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
 
 
 // We use these to control the active item styles
 
 $sub-nav-active-font-weight: normal !default;
 $sub-nav-active-bg: $primary-color !default;
-$sub-nav-active-bg-hover: darken($sub-nav-active-bg, 5%) !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-cursor: default !default;
@@ -48,10 +48,10 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
 // $font-size - Font size. Default: $sub-nav-font-size.
 // $active-bg - Background of active nav item. Default: $sub-nav-active-bg.
 @mixin sub-nav(
-  $font-color:$sub-nav-font-color,
-  $font-size:$sub-nav-font-size,
-  $active-bg:$sub-nav-active-bg,
-  $active-bg-hover:darken($active-bg, 5%)) {
+  $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%)) {
   display: block;
   width: auto;
   overflow: hidden;
@@ -61,7 +61,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   margin-#{$default-float}: rem-calc(-12);
 
   dt {
-	  text-transform: uppercase;
+    text-transform: uppercase;
   }
 
   dt,
@@ -80,7 +80,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
       text-decoration: $sub-nav-text-decoration;
       color: $sub-nav-font-color;
       &:hover {
-	      color: $active-bg-hover;
+        color: $active-bg-hover;
       }
     }
 
@@ -92,7 +92,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
       cursor: $sub-nav-active-cursor;
       color: $sub-nav-active-color;
       &:hover {
-	      background: $active-bg-hover;
+        background: $active-bg-hover;
       }
     }
     @if $sub-nav-item-divider != "" {

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

@@ -3,16 +3,18 @@
 //
 // @name
 // @dependencies _global.scss
-// 
+//
 
 //
 // @variables
 //
 
+// NOTE: Switches have been deprecated in Foundation 5 and will be removed in the future.
+
 $include-html-form-classes: $include-html-classes !default;
 
 // Controlling border styles and background colors for the switch container
-$switch-border-color: darken(#fff, 20%) !default;
+$switch-border-color: scale-color(#fff, $lightness: -20%) !default;
 $switch-border-style: solid !default;
 $switch-border-width: 1px !default;
 $switch-bg: #fff !default;
@@ -33,13 +35,13 @@ $switch-label-side-padding: 6px !default;
 
 // We use these to style the switch-paddle
 $switch-paddle-bg: #fff !default;
-$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) !default;
-$switch-paddle-border-color: darken($switch-paddle-bg, 35%) !default;
+$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%) !default;
+$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%) !default;
 $switch-paddle-border-width: 1px !default;
 $switch-paddle-border-style: solid !default;
 $switch-paddle-transition-speed: .1s !default;
 $switch-paddle-transition-ease: ease-out !default;
-$switch-positive-color: lighten($success-color, 50%) !default;
+$switch-positive-color: scale-color($success-color, $lightness: 94%) !default;
 $switch-negative-color: #f5f5f5 !default;
 
 // Outline Style for tabbing through switches
@@ -55,7 +57,7 @@ $switch-label-outline: 1px dotted #888 !default;
 // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
 // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
 @mixin switch-base(
-  $transition-speed:$switch-paddle-transition-speed, 
+  $transition-speed:$switch-paddle-transition-speed,
   $transition-ease:$switch-paddle-transition-ease) {
 
   // Default position and structure for switch container.
@@ -160,8 +162,8 @@ $switch-label-outline: 1px dotted #888 !default;
 // $font-size - Font size of text in switch. Default: $switch-font-size-med.
 // $line-height - Line height of switch. Default: 2.3rem.
 @mixin switch-size(
-  $height: $switch-height-med, 
-  $font-size: $switch-font-size-med, 
+  $height: $switch-height-med,
+  $font-size: $switch-font-size-med,
   $line-height: 2.3rem) {
 
   height: rem-calc($height);
@@ -195,10 +197,10 @@ $switch-label-outline: 1px dotted #888 !default;
 // $radius - Radius to apply to switch. Default: false.
 // $base-style - Apply base styles? Default: true.
 @mixin switch-style(
-  $paddle-bg:$switch-paddle-bg, 
-  $positive-color:$switch-positive-color, 
-  $negative-color:$switch-negative-color, 
-  $radius:false, 
+  $paddle-bg:$switch-paddle-bg,
+  $positive-color:$switch-positive-color,
+  $negative-color:$switch-negative-color,
+  $radius:false,
   $base-style:true) {
 
   @if $base-style {
@@ -206,13 +208,13 @@ $switch-label-outline: 1px dotted #888 !default;
     border-color: $switch-border-color;
 
     span:last-child {
-      border-color: darken($paddle-bg, 30%);
+      border-color: scale-color($paddle-bg, $lightness: -30%);
       background: $paddle-bg;
       @if $experimental {
-        background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
-        background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+        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%, darken($paddle-bg, 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 {
@@ -232,10 +234,10 @@ $switch-label-outline: 1px dotted #888 !default;
       span:last-child {
         background: $paddle-bg;
         @if $experimental {
-          background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
-          background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+          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%, darken($paddle-bg, 10%) 100%);
+        background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
       }
     }
 
@@ -267,15 +269,15 @@ $switch-label-outline: 1px dotted #888 !default;
 // $radius - Radius to apply to switch. Default: false.
 // $base-style - Apply base styles? Default: true.
 @mixin switch(
-  $transition-speed: $switch-paddle-transition-speed, 
-  $transition-ease: $switch-paddle-transition-ease, 
-  $height: $switch-height-med, 
-  $font-size: $switch-font-size-med, 
-  $line-height: 2.3rem, 
-  $paddle-bg: $switch-paddle-bg, 
-  $positive-color: $switch-positive-color, 
-  $negative-color: $switch-negative-color, 
-  $radius:false, 
+  $transition-speed: $switch-paddle-transition-speed,
+  $transition-ease: $switch-paddle-transition-ease,
+  $height: $switch-height-med,
+  $font-size: $switch-font-size-med,
+  $line-height: 2.3rem,
+  $paddle-bg: $switch-paddle-bg,
+  $positive-color: $switch-positive-color,
+  $negative-color: $switch-negative-color,
+  $radius:false,
   $base-style:true) {
     @include switch-base($transition-speed, $transition-ease);
     @include switch-size($height, $font-size, $line-height);

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

@@ -49,14 +49,14 @@ $table-margin-bottom: rem-calc(20) !default;
 
   thead,
   tfoot {
-    background: $table-head-bg;
-    font-weight: $table-head-font-weight;
+    background: $table-head-bg;    
 
     tr {
       th,
       td {
         padding: $table-head-padding;
         font-size: $table-head-font-size;
+        font-weight: $table-head-font-weight;
         color: $table-head-font-color;
         text-align: $default-float;
       }

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

@@ -1,4 +1,5 @@
 @import "global";
+@import "grid";
 
 //
 // @variables
@@ -8,7 +9,8 @@ $include-html-tabs-classes: $include-html-classes !default;
 
 $tabs-navigation-padding: rem-calc(16) !default;
 $tabs-navigation-bg-color: #efefef !default;
-$tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%) !default;
+$tabs-navigation-active-bg-color: #fff !default;
+$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
 $tabs-navigation-font-color: #222 !default;
 $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
@@ -19,77 +21,77 @@ $tabs-content-padding: $column-gutter/2 !default;
 $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
 
 @include exports("tab") {
-	@if $include-html-tabs-classes {
-		.tabs { 
-			@include clearfix; 
-			margin-bottom: 0 !important;
-			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;
-					font-family: $tabs-navigation-font-family;
-					font-size: $tabs-navigation-font-size; 
-					&:hover { background: $tabs-navigation-hover-bg-color; }
-				}
-				&.active a { background: #fff; }
-			}
-			&.radius {
-				dd:first-child {
-					a { @include side-radius($default-float, $global-radius); }
-				}
-				dd:last-child {
-					a { @include side-radius($opposite-direction, $global-radius); }
-				}
-			}
-			&.vertical { 
-				dd {
-					position: inherit;
-					float: none;
-					display: block;
-					top: auto;
-				}
-			}
-		}
+  @if $include-html-tabs-classes {
+    .tabs {
+      @include clearfix;
+      margin-bottom: 0 !important;
+      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;
+          font-family: $tabs-navigation-font-family;
+          font-size: $tabs-navigation-font-size;
+          &:hover { background: $tabs-navigation-hover-bg-color; }
+        }
+        &.active a { background: $tabs-navigation-active-bg-color; }
+      }
+      &.radius {
+        dd:first-child {
+          a { @include side-radius($default-float, $global-radius); }
+        }
+        dd:last-child {
+          a { @include side-radius($opposite-direction, $global-radius); }
+        }
+      }
+      &.vertical {
+        dd {
+          position: inherit;
+          float: none;
+          display: block;
+          top: auto;
+        }
+      }
+    }
 
-		.tabs-content { 
-			@include clearfix; 
-			margin-bottom: $tabs-content-margin-bottom;
-			> .content { 
-				display: none; 
-				float: $default-float; 
-				padding: $tabs-content-padding 0; 
-				&.active { display: block; }
-				&.contained { padding: $tabs-content-padding; }
-			}
-			&.vertical {
-				display: block;
-				> .content { padding: 0 $tabs-content-padding; }
-			}
-		}
-		@media #{$medium-up} {
-			.tabs {
-				&.vertical {
-					width: 20%; 
-					float: $default-float; 
-					margin-bottom: $tabs-vertical-navigation-margin-bottom;
-				}
-			}
-			.tabs-content {
-				&.vertical {
-					width: 80%; 
-					float: $default-float; 
-					margin-#{$default-float}: -1px;
-				}
-			}
-		}
-	}
+    .tabs-content {
+      @include clearfix;
+      margin-bottom: $tabs-content-margin-bottom;
+      > .content {
+        display: none;
+        float: $default-float;
+        padding: $tabs-content-padding 0;
+        &.active { display: block; }
+        &.contained { padding: $tabs-content-padding; }
+      }
+      &.vertical {
+        display: block;
+        > .content { padding: 0 $tabs-content-padding; }
+      }
+    }
+    @media #{$medium-up} {
+      .tabs {
+        &.vertical {
+          width: 20%;
+          float: $default-float;
+          margin-bottom: $tabs-vertical-navigation-margin-bottom;
+        }
+      }
+      .tabs-content {
+        &.vertical {
+          width: 80%;
+          float: $default-float;
+          margin-#{$default-float}: -1px;
+        }
+      }
+    }
+  }
 }