locomotivecms_wagon 1.5.1 → 1.5.2

data/generators/foundation5/public/stylesheets/foundation/components/_reveal.scss

@@ -3,6 +3,7 @@
 // Licensed under MIT Open Source
 
 @import "global";
+@import "grid";
 
 //
 // @name _reveal.scss
@@ -12,21 +13,22 @@
 $include-html-reveal-classes: $include-html-classes !default;
 
 // We use these to control the style of the reveal overlay.
-$reveal-overlay-bg: rgba(#000, .45) !default;
-$reveal-overlay-bg-old: #000 !default;
+$reveal-overlay-bg: rgba($black, .45) !default;
+$reveal-overlay-bg-old: $black !default;
 
 // We use these to control the style of the modal itself.
-$reveal-modal-bg: #fff !default;
+$reveal-modal-bg: $white !default;
 $reveal-position-top: rem-calc(100) !default;
 $reveal-default-width: 80% !default;
+$reveal-max-width: $row-width !default;
 $reveal-modal-padding: rem-calc(20) !default;
-$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
 
 // We use these to style the reveal close button
 $reveal-close-font-size: rem-calc(40) !default;
 $reveal-close-top: rem-calc(8) !default;
 $reveal-close-side: rem-calc(11) !default;
-$reveal-close-color: #aaa !default;
+$reveal-close-color: $base !default;
 $reveal-close-weight: $font-weight-bold !default;
 
 // We use this to set the default radius used throughout the core.
@@ -36,7 +38,7 @@ $reveal-round: $global-rounded !default;
 // We use these to control the modal border
 $reveal-border-style: solid !default;
 $reveal-border-width: 1px !default;
-$reveal-border-color: #666 !default;
+$reveal-border-color: $steel !default;
 
 $reveal-modal-class: "reveal-modal" !default;
 $close-reveal-modal-class: "close-reveal-modal" !default;
@@ -46,15 +48,16 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 //
 
 // We use this to create the reveal background overlay styles
-@mixin reveal-bg {
+@mixin reveal-bg( $include-z-index-value: true ) {
   position: fixed;
-  height: 100%;
-  width: 100%;
-  background: $reveal-overlay-bg-old;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
   background: $reveal-overlay-bg;
-  z-index: 99;
+  z-index: if( $include-z-index-value, 1004, auto );
   display: none;
-  top: 0;
   #{$default-float}: 0;
 }
 
@@ -63,44 +66,44 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 // $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
 // $width - Sets reveal width Default: $reveal-default-width || 80%
 //
-@mixin reveal-modal-base(
-  $base-style:true,
-  $width:$reveal-default-width) {
+@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
   @if $base-style {
     visibility: hidden;
     display: none;
     position: absolute;
-    z-index: 100;
+    z-index: 1005;
     width: 100vw;
     top:0;
+    border-radius: $border-radius;
     #{$default-float}: 0;
+
     @media #{$small-only} {
       min-height:100vh;
     }
-    @media #{$medium-up} {
-      #{$default-float}: 50%;
-    }
 
     // Make sure rows don't have a min-width on them
-    .column,
-    .columns { min-width: 0; }
+    .column, .columns { min-width: 0; }
 
     // Get rid of margin from first and last element inside modal
     & > :first-child { margin-top: 0; }
+
     & > :last-child { margin-bottom: 0; }
   }
 
   @if $width {
     @media #{$medium-up} {
-      margin-#{$default-float}: -($width / 2);
       width: $width;
+      max-width: $max-width;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
     }
   }
 }
 
 // We use this to style the reveal modal defaults
 //
-// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
 // $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
 // $border - Choose whether reveal uses a border. Default: true, Options: false
 // $border-style - Set reveal border style. Default: $reveal-border-style || solid
@@ -143,7 +146,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
 // We use this to create a close button for the reveal modal
 //
-// $color - Default: $reveal-close-color || #aaa
+// $color - Default: $reveal-close-color || $base
 @mixin reveal-close($color:$reveal-close-color) {
   font-size: $reveal-close-font-size;
   line-height: 1;
@@ -161,7 +164,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
     // Reveal Modals
     .reveal-modal-bg { @include reveal-bg; }
 
-    dialog, .#{$reveal-modal-class} {
+    .#{$reveal-modal-class} {
       @include reveal-modal-base;
       @include reveal-modal-style(
         $bg:$reveal-modal-bg,
@@ -169,48 +172,51 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
         $border:true,
         $box-shadow:true,
         $radius:false,
-        $top-offset:$reveal-position-top);
+        $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%); }
+      &.medium  { @include reveal-modal-base(false, 60%); }
+      &.large { @include reveal-modal-base(false, 70%); }
+      &.xlarge { @include reveal-modal-base(false, 95%); }
+      &.full {
+        @include reveal-modal-base(false, 100vw);
+        top:0;
+        left:0;
+        height:100%;
+        height: 100vh;
+        min-height:100vh;
+        max-width: none !important;
+        margin-left: 0 !important;
+      }
 
       .#{$close-reveal-modal-class} { @include reveal-close; }
     }
 
-    dialog[open] {
-      display:block;
-      visibility: visible;
-    }
-
-    @media #{$medium-up} {
+    dialog {
+      @extend .#{$reveal-modal-class};
+      display: none;
 
-      dialog, .#{$reveal-modal-class} {
-        @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%); }
-        &.medium  { @include reveal-modal-base(false, 60%); }
-        &.large { @include reveal-modal-base(false, 70%); }
-        &.xlarge { @include reveal-modal-base(false, 95%); }
+      &::backdrop, & + .backdrop {
+        @include reveal-bg(false);
       }
 
-      dialog, .#{$reveal-modal-class} {
-        &.full {
-          @include reveal-modal-base(false, 100vw);
-          top:0;
-          left:0;
-          height: 100vh;
-          min-height:100vh;
-          margin-left: 0 !important;
-        }
+      &[open]{
+        display: block;
       }
     }
 
-    // Reveal Print Styles
+    // Reveal Print Styles: It should be invisible, adds no value being printed.
     @media print {
-      dialog, .#{$reveal-modal-class} {background: #fff !important;}
+      dialog, .#{$reveal-modal-class} { 
+        display: none;
+        background: $white !important;
+      }
     }
   }
 }

data/generators/foundation5/public/stylesheets/foundation/components/_side-nav.scss

@@ -15,7 +15,7 @@ $side-nav-padding: rem-calc(14 0) !default;
 
 // We use these to control list styles.
 $side-nav-list-type: none !default;
-$side-nav-list-position: inside !default;
+$side-nav-list-position: outside !default;
 $side-nav-list-margin: rem-calc(0 0 7 0) !default;
 
 // We use these to control link styles.
@@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default;
 // We use these to control border styles
 $side-nav-divider-size: 1px !default;
 $side-nav-divider-style: solid !default;
-$side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
+$side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
 
 
 //
@@ -70,6 +70,7 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
   li {
     margin: $side-nav-list-margin;
     font-size: $font-size;
+    font-weight: $side-nav-font-weight;
 
     a:not(.button) {
       display: block;

data/generators/foundation5/public/stylesheets/foundation/components/_split-buttons.scss

@@ -19,8 +19,8 @@ $include-html-button-classes: $include-html-classes !default;
 
 // We use these to control different shared styles for Split Buttons
 $split-button-function-factor: 10% !default;
-$split-button-pip-color: #fff !default;
-$split-button-pip-color-alt: #333 !default;
+$split-button-pip-color: $white !default;
+$split-button-pip-color-alt: $oil !default;
 $split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
 
 // We use these to control tiny split buttons

data/generators/foundation5/public/stylesheets/foundation/components/_sub-nav.scss

@@ -22,7 +22,7 @@ $sub-nav-list-padding-top: rem-calc(4) !default;
 // We use this to control the definition
 $sub-nav-font-family: $body-font-family !default;
 $sub-nav-font-size: rem-calc(14) !default;
-$sub-nav-font-color: #999 !default;
+$sub-nav-font-color: $aluminum !default;
 $sub-nav-font-weight: $font-weight-normal !default;
 $sub-nav-text-decoration: none !default;
 $sub-nav-padding: rem-calc(3 16) !default;
@@ -35,7 +35,7 @@ $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !d
 $sub-nav-active-font-weight: $font-weight-normal !default;
 $sub-nav-active-bg: $primary-color !default;
 $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
-$sub-nav-active-color: #fff !default;
+$sub-nav-active-color: $white !default;
 $sub-nav-active-padding: $sub-nav-padding !default;
 $sub-nav-active-cursor: default !default;
 
@@ -61,10 +61,8 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   display: block;
   width: auto;
   overflow: hidden;
-  margin: $sub-nav-list-margin;
+  margin-bottom: $sub-nav-list-margin;
   padding-top: $sub-nav-list-padding-top;
-  margin-#{$opposite-direction}: 0;
-  margin-#{$default-float}: rem-calc(-12);
 
   dt {
     text-transform: uppercase;
@@ -76,7 +74,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
     float: $default-float;
     display: inline;
     margin-#{$default-float}: rem-calc(16);
-    margin-bottom: rem-calc(10);
+    margin-bottom: 0;
     font-family: $sub-nav-font-family;
     font-weight: $sub-nav-font-weight;
     font-size: $font-size;

data/generators/foundation5/public/stylesheets/foundation/components/_switches.scss

@@ -0,0 +1,230 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+//
+// @name
+// @dependencies _global.scss
+//
+
+//
+// @variables
+//
+
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling background color for the switch container
+$switch-bg: $gainsboro !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny: 1.5rem !default;
+$switch-height-sml: 1.75rem !default;
+$switch-height-med: 2rem !default;
+$switch-height-lrg: 2.5rem !default;
+$switch-bottom-margin: 1.5rem !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg: $white !default;
+$switch-paddle-transition-speed: .15s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-active-color: $primary-color !default;
+
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+//
+// $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-ease:$switch-paddle-transition-ease) {
+
+  padding: 0;
+  border: none;
+  position: relative;
+  outline: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+
+  // Default label styles for type and transition
+  label {
+    display: block;
+    margin-bottom: $switch-height-med / 2;
+    position: relative;
+    color: transparent;
+    background: $switch-bg;
+    text-indent: 100%;
+    width: $switch-height-med * 2; height: $switch-height-med;
+    cursor: pointer;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(left, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing checkbox or radio button, but we cleverly position and hide it.
+  input {
+    opacity: 0;
+    position: absolute;
+    top: 9px;
+    left: 10px;
+    padding:0;
+
+    & + label { margin-left: 0; margin-right: 0; }
+  }
+
+  // The paddle for the switch is created from an after psuedoclass
+  // content element. This is sized and positioned, and reacts to
+  // the state of the input.
+
+  label:after {
+    content: "";
+    display: block;
+    background: $switch-paddle-bg;
+    position: absolute; top: .25rem; left: .25rem;
+    width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+
+    -webkit-transition: left $transition-speed $transition-ease;
+    -moz-transition: left $transition-speed $transition-ease;
+    transition: left $transition-speed $transition-ease;
+
+    -webkit-transform: translate3d(0,0,0);
+    -moz-transform: translate3d(0,0,0);
+    transform: translate3d(0,0,0);
+  }
+
+  input:checked + label {
+    background: $switch-active-color;
+  }
+
+  input:checked + label:after {
+    left: $switch-height-med + 0.25rem;
+  }
+}
+
+// We use this mixin to create the size styles for switches.
+//
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $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) {
+
+  label {
+    width: $height * 2; height: $height;
+  }
+
+  label:after {
+    width: $height - 0.5rem; height: $height - 0.5rem;
+  }
+
+  input:checked + label:after {
+    left: $height + 0.25rem;
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+//
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin switch-style(
+  $paddle-bg:$switch-paddle-bg,
+  $radius:false,
+  $base-style:true) {
+
+  @if $base-style {
+
+    label {
+      color: transparent;
+      background: $switch-bg;
+    }
+
+    label:after {
+      background: $paddle-bg;
+    }
+
+    input:checked + label {
+      background: $switch-active-color;
+    }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    label {
+      border-radius: 2rem;
+    }
+    label:after {
+      border-radius: 2rem;
+    }
+  }
+  @else if $radius {
+    label {
+      border-radius: $radius;
+    }
+    label:after {
+      border-radius: $radius;
+    }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+//
+// $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.
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of an active switch. Default: $switch-active-color.
+// $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,
+  $paddle-bg: $switch-paddle-bg,
+  $active-color: $switch-active-color,
+  $radius:false,
+  $base-style:true) {
+    @include switch-base($transition-speed, $transition-ease);
+    @include switch-size($height);
+    @include switch-style($paddle-bg, $radius, $base-style);
+}
+
+@include exports("switch") {
+  @if $include-html-form-classes {
+      .switch {
+        @include switch;
+
+        // Large radio switches
+        &.large { @include switch-size($switch-height-lrg); }
+
+        // Small radio switches
+        &.small { @include switch-size($switch-height-sml); }
+
+        // Tiny radio switches
+        &.tiny { @include switch-size($switch-height-tny); }
+
+        // Add a radius to the switch
+        &.radius { 
+          label { @include radius(4px); }
+          label:after { @include radius(3px); }
+        }
+
+        // Make the switch completely round, like a pill
+        &.round { @include radius(1000px);
+          label { @include radius(2rem); }
+          label:after { @include radius(2rem); }
+        }
+
+      }
+  }
+}

data/generators/foundation5/public/stylesheets/foundation/components/_tables.scss

@@ -1,3 +1,7 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
 @import "global";
 
 //
@@ -12,18 +16,18 @@
 $include-html-table-classes: $include-html-classes !default;
 
 // These control the background color for the table and even rows
-$table-bg: #fff !default;
-$table-even-row-bg: #f9f9f9 !default;
+$table-bg: $white !default;
+$table-even-row-bg: $snow !default;
 
 // These control the table cell border style
 $table-border-style: solid !default;
 $table-border-size: 1px !default;
-$table-border-color: #ddd !default;
+$table-border-color: $gainsboro !default;
 
 // These control the table head styles
-$table-head-bg: #f5f5f5 !default;
+$table-head-bg: $white-smoke !default;
 $table-head-font-size: rem-calc(14) !default;
-$table-head-font-color: #222 !default;
+$table-head-font-color: $jet !default;
 $table-head-font-weight: $font-weight-bold !default;
 $table-head-padding: rem-calc(8 10 10) !default;
 
@@ -43,10 +47,11 @@ $table-caption-font-weight: bold !default;
 // These control the row padding and font styles
 $table-row-padding: rem-calc(9 10) !default;
 $table-row-font-size: rem-calc(14) !default;
-$table-row-font-color: #222 !default;
+$table-row-font-color: $jet !default;
 $table-line-height: rem-calc(18) !default;
 
-// These are for controlling the display and margin of tables
+// These are for controlling the layout, display and margin of tables
+$table-layout: auto !default;
 $table-display: table-cell !default;
 $table-margin-bottom: rem-calc(20) !default;
 
@@ -59,6 +64,7 @@ $table-margin-bottom: rem-calc(20) !default;
   background: $table-bg;
   margin-bottom: $table-margin-bottom;
   border: $table-border-style $table-border-size $table-border-color;
+  table-layout: $table-layout;
 
   caption {
     background: $table-caption-bg;

data/generators/foundation5/public/stylesheets/foundation/components/_tabs.scss

@@ -4,7 +4,6 @@
 
 @import "global";
 @import "grid";
-@import "type";
 
 //
 // @variables
@@ -13,10 +12,10 @@
 $include-html-tabs-classes: $include-html-classes !default;
 
 $tabs-navigation-padding: rem-calc(16) !default;
-$tabs-navigation-bg-color: #efefef !default;
-$tabs-navigation-active-bg-color: #fff !default;
+$tabs-navigation-bg-color: $silver !default;
+$tabs-navigation-active-bg-color: $white !default;
 $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
-$tabs-navigation-font-color: #222 !default;
+$tabs-navigation-font-color: $jet !default;
 $tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
 $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
@@ -38,15 +37,27 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
         list-style: none;
         float: $default-float;
         > a {
+          outline: none;
           display: block;
-          background: $tabs-navigation-bg-color;
+          background: {
+            color: $tabs-navigation-bg-color;
+          }
           color: $tabs-navigation-font-color;
           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; }
+          &:hover {
+            background: {
+              color: $tabs-navigation-hover-bg-color;
+            }
+          }
         }
-        &.active a { background: $tabs-navigation-active-bg-color; color:$tabs-navigation-active-font-color; }
+        &.active a {
+          background: {
+            color: $tabs-navigation-active-bg-color;
+          }
+          color:$tabs-navigation-active-font-color;
+          }
       }
       &.radius {
         dd:first-child, .tab:first-child {
@@ -87,15 +98,18 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
       .tabs {
         &.vertical {
           width: 20%;
+          max-width: 20%;
           float: $default-float;
-          margin-bottom: $tabs-vertical-navigation-margin-bottom;
+          margin: 0 0 $tabs-vertical-navigation-margin-bottom;
         }
       }
       .tabs-content {
         &.vertical {
           width: 80%;
+          max-width: 80%;
           float: $default-float;
           margin-#{$default-float}: -1px;
+          padding-#{$default-float}: 1rem;
         }
       }
     }

data/generators/foundation5/public/stylesheets/foundation/components/_thumbs.scss

@@ -4,8 +4,6 @@
 
 @import "global";
 
-
-
 //
 // @name _thumbs.scss
 // @dependencies _globals.scss
@@ -20,8 +18,8 @@ $include-html-media-classes: $include-html-classes !default;
 // We use these to control border styles
 $thumb-border-style: solid !default;
 $thumb-border-width: 4px !default;
-$thumb-border-color: #fff !default;
-$thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
+$thumb-border-color: $white !default;
+$thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
 $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
 
 // Radius and transition speed for thumbs