locomotivecms_wagon 1.5.1 → 1.5.2

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

@@ -11,9 +11,6 @@
 // styles get applied to [data-mysite-plugin], etc
 $namespace: false !default;
 
-// Control the inclusion of experimental properties
-$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.
 
@@ -23,22 +20,12 @@ $experimental: true !default;
 $base-font-size: 100% !default;
 
 // $base-line-height is 24px while $base-font-size is 16px
-$base-line-height: 150% !default;
+$base-line-height: 1.5 !default;
 
 //
 // Global Foundation Mixins
 //
 
-// @mixins
-//
-// We use this to optionally include experimental or
-// explicitly vendor prefixed properties
-@mixin experimental() {
-  @if $experimental {
-    @content;
-  }
-}
-
 // @mixins
 //
 // We use this to control border radius.
@@ -55,9 +42,13 @@ $base-line-height: 150% !default;
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
   @if ($side == left or $side == right) {
+    -webkit-border-bottom-#{$side}-radius: $radius;
+    -webkit-border-top-#{$side}-radius: $radius;
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
   } @else {
+    -webkit-#{$side}-left-radius: $radius;
+    -webkit-#{$side}-right-radius: $radius;
     border-#{$side}-left-radius: $radius;
     border-#{$side}-right-radius: $radius;
   }
@@ -89,8 +80,8 @@ $base-line-height: 150% !default;
 // We use this to add box-sizing across browser prefixes
 @mixin box-sizing($type:border-box) {
   -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
+     -moz-box-sizing: $type; // Firefox < 29
+          box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
 // @mixins
@@ -149,16 +140,16 @@ $base-line-height: 150% !default;
         top: 50%;
         margin-top: -$width/2;
       }
-    	@if $left {
-    	  left: $left;
-    	}
-    	@else {
-    	  left: ($tabbar-menu-icon-width - $width)/2;
-    	}
+      @if $left {
+        left: $left;
+      }
+      @else {
+        left: ($tabbar-menu-icon-width - $width)/2;
+      }
     }
     @else {
       top: 50%;
-      margin-top: -$width/2;
+      margin-top: -($width/2);
       #{$opposite-direction}: $topbar-link-padding;
     }
 
@@ -229,6 +220,39 @@ $base-line-height: 150% !default;
   clip: auto;
 }
 
+$white         : #FFFFFF !default;
+$ghost         : #FAFAFA !default;
+$snow          : #F9F9F9 !default;
+$vapor         : #F6F6F6 !default;
+$white-smoke   : #F5F5F5 !default;
+$silver        : #EFEFEF !default;
+$smoke         : #EEEEEE !default;
+$gainsboro     : #DDDDDD !default;
+$iron          : #CCCCCC !default;
+$base          : #AAAAAA !default;
+$aluminum      : #999999 !default;
+$jumbo         : #888888 !default;
+$monsoon       : #777777 !default;
+$steel         : #666666 !default;
+$charcoal      : #555555 !default;
+$tuatara       : #444444 !default;
+$oil           : #333333 !default;
+$jet           : #222222 !default;
+$black         : #000000 !default;
+
+// We use these as default colors throughout
+$primary-color: #008CBA !default;   // bondi-blue
+$secondary-color: #e7e7e7 !default; // white-lilac
+$alert-color: #f04124 !default;     // cinnabar
+$success-color: #43AC6A !default;   // sea-green
+$warning-color: #f08a24 !default;   // carrot
+$info-color: #a0d3e8 !default;      // cornflower
+
+// We use these to define default font stacks
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
+$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
+$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
+
 // We use these to define default font weights
 $font-weight-normal: normal !default;
 $font-weight-bold: bold !default;
@@ -236,7 +260,7 @@ $font-weight-bold: bold !default;
 // We use these to control various global styles
 $body-bg: #fff !default;
 $body-font-color: #222 !default;
-$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-family: $font-family-sans-serif !default;
 $body-font-weight: $font-weight-normal !default;
 $body-font-style: normal !default;
 
@@ -254,13 +278,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;
-$alert-color: #f04124 !default;
-$success-color: #43AC6A !default;
-$warning-color: #f08a24 !default;
-$info-color: #a0d3e8 !default;
 
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 3px !default;
@@ -313,6 +330,7 @@ $large: $large-up;
 
 
 //We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+$cursor-auto-value: auto !default;
 $cursor-crosshair-value: crosshair !default;
 $cursor-default-value: default !default;
 $cursor-pointer-value: pointer !default;
@@ -327,7 +345,7 @@ $cursor-text-value: text !default;
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.2.3/";
+    font-family: "/5.4.7/";
   }
 
   meta.foundation-mq-small {
@@ -383,9 +401,9 @@ $cursor-text-value: text !default;
       font-family: $body-font-family;
       font-weight: $body-font-weight;
       font-style: $body-font-style;
-      line-height: 1; // Set to $base-line-height to take on browser default of 150%
+      line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
       position: relative;
-      cursor: $cursor-default-value;
+      cursor: $cursor-auto-value;
     }
 
   a:hover { cursor: $cursor-pointer-value; }
@@ -404,10 +422,18 @@ $cursor-text-value: text !default;
     }
 
     // Miscellaneous useful HTML classes
-    .left   { float: left !important; }
-    .right  { float: right !important; }
-    .clearfix     { @include clearfix; }
-    .hide         { display: none; }
+    .left { float: left !important; }
+    .right { float: right !important; }
+    .clearfix { @include clearfix; }
+
+    // Hide visually and from screen readers
+    .hide {
+      display: none !important;
+      visibility: hidden;
+    }
+
+    // Hide visually and from screen readers, but maintain layout
+    .invisible { visibility: hidden; }
 
     // Font smoothing
     // Antialiased font smoothing works best for light text on a dark background.

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

@@ -13,6 +13,8 @@ $include-xl-html-grid-classes: false !default;
 $row-width: rem-calc(1000) !default;
 $total-columns: 12 !default;
 
+$last-child-float: $opposite-direction !default;
+
 //
 // Grid Functions
 //
@@ -140,7 +142,7 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none !important;
+    float: none;
   }
 
   // If offset, calculate appropriate margins
@@ -170,8 +172,6 @@ $total-columns: 12 !default;
     .#{$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 - 1 {
@@ -192,7 +192,19 @@ $total-columns: 12 !default;
   .columns.#{$size}-uncentered {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    float: $default-float !important;
+    float: $default-float;
+  }
+
+  // Fighting [class*="column"] + [class*="column"]:last-child
+  .column.#{$size}-centered:last-child,
+  .columns.#{$size}-centered:last-child{
+    float: none;
+  }
+
+  // Fighting .column.<previous-size>-centered:last-child
+  .column.#{$size}-uncentered:last-child,
+  .columns.#{$size}-uncentered:last-child {
+    float: $default-float;
   }
 
   .column.#{$size}-uncentered.opposite,
@@ -221,6 +233,9 @@ $total-columns: 12 !default;
     .column,
     .columns { @include grid-column($columns:$total-columns); }
 
+    [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
     @media #{$small-up} {
       @include grid-html-classes($size:small);
     }

data/generators/foundation5/public/stylesheets/foundation/components/_icon-bar.scss

@@ -0,0 +1,293 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+
+// @name
+// @dependencies _global.scss
+
+$include-html-icon-bar-classes: $include-html-classes !default;
+
+// @variables
+
+// We use these to style the icon-bar and items
+$icon-bar-bg: $oil !default;
+$icon-bar-font-color: $white !default;
+$icon-bar-font-size: 1rem !default;
+$icon-bar-hover-color: $primary-color !default;
+$icon-bar-icon-color: $white !default;
+$icon-bar-icon-size: 1.875rem !default;
+$icon-bar-image-width: 1.875rem !default;
+$icon-bar-image-height: 1.875rem !default;
+$icon-bar-active-color: $primary-color !default;
+$icon-bar-item-padding: 1.25rem !default;
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our Icon bar element.
+//
+@mixin icon-bar-base() {
+ 
+ 	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	& > * {
+		text-align: center;
+		font-size: $icon-bar-font-size;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: $icon-bar-item-padding;
+		float: left;
+
+		i, img { 
+			display: block;
+			margin: 0 auto; 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-bar-icon-size;
+			vertical-align: middle;
+		}
+
+		img {
+			width: $icon-bar-image-width;
+			height: $icon-bar-image-height;
+		}
+	}
+
+	&.label-right > * {
+
+		i, img { 
+			margin: 0 .0625rem 0 0; 
+			display: inline-block;
+
+			& + label {
+				margin-top: 0;
+			}
+		}
+
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right > * {
+		text-align: left;
+	}
+
+	&.vertical, &.small-vertical{
+		height: 100%;
+		width: auto;
+
+		.item {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+
+	&.medium-vertical {
+		@media #{$medium-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+	&.large-vertical {
+		@media #{$large-up} {
+			height: 100%;
+			width: auto;
+
+			.item {
+				width: auto;
+				margin: auto;
+				float: none;
+			}
+		}
+	}
+}
+
+// We use this mixin to create the size styles for icon bars.
+@mixin icon-bar-size(
+	$padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height) {
+
+	& > * {
+		font-size: $font-size;
+		padding: $padding;
+
+		i, img { 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-size;
+		}
+
+		img {
+			width: $image-width;
+			height: $image-height;
+		}
+	}
+
+}
+
+@mixin icon-bar-style(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $base-style:true) {
+
+	@if $base-style {
+	
+		background: $bar-bg;
+
+		& > * {
+
+			&:hover { background: $bar-hover-color; }
+
+			label { color: $bar-font-color; }
+
+			i {
+				color: $bar-icon-color;
+			}
+		}
+	}
+
+}
+
+// We use this to quickly create icon bars with a single mixin
+// $height - The overall calculated height of the icon bar (horizontal)
+// $bar-bg - the background color of the bar
+// $bar-font-color - the font color
+// $bar-hover-color - okay these are pretty obvious variables
+// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+// $bar-active-color - the color of an active / hover state
+// $base-style - Apply base styles? Default: true.
+
+@mixin icon-bar(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height,
+  $base-style:true) {
+    @include icon-bar-base();
+    @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+}
+
+@include exports("icon-bar") {
+  @if $include-html-icon-bar-classes {
+    .icon-bar {
+      @include icon-bar;
+    }
+  }
+}
+
+@if $include-html-icon-bar-classes {
+
+	// toolbar styles
+
+	.icon-bar {
+
+		// Counts
+
+		&.two-up {
+			.item { width: 50%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.three-up {
+			.item { width: 33.3333%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.four-up {
+			.item { width: 25%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.five-up {
+			.item { width: 20%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+		&.six-up {
+			.item { width: 16.66667%; }
+			&.vertical .item, &.small-vertical .item { width: auto; }
+			&.medium-vertical .item {
+				@media #{$medium-up} {
+					width: auto;
+				}
+			}
+			&.large-vertical .item {
+				@media #{$large-up} {
+					width: auto;
+				}
+			}
+		}
+	}
+}

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

@@ -10,15 +10,15 @@
 $include-html-joyride-classes: $include-html-classes !default;
 
 // Controlling default Joyride styles
-$joyride-tip-bg: #333 !default;
+$joyride-tip-bg: $oil !default;
 $joyride-tip-default-width: 300px !default;
 $joyride-tip-padding: rem-calc(18 20 24) !default;
-$joyride-tip-border: solid 1px #555 !default;
+$joyride-tip-border: solid 1px $charcoal !default;
 $joyride-tip-radius: 4px !default;
 $joyride-tip-position-offset: 22px !default;
 
 // Here, we're setting the tip font styles
-$joyride-tip-font-color: #fff !default;
+$joyride-tip-font-color: $white !default;
 $joyride-tip-font-size: rem-calc(14) !default;
 $joyride-tip-header-weight: $font-weight-bold !default;
 
@@ -28,10 +28,10 @@ $joyride-tip-nub-size: 10px !default;
 // This adjusts the styles for the timer when its enabled
 $joyride-tip-timer-width: 50px !default;
 $joyride-tip-timer-height: 3px !default;
-$joyride-tip-timer-color: #666 !default;
+$joyride-tip-timer-color: $steel !default;
 
 // This changes up the styles for the close button
-$joyride-tip-close-color: #777 !default;
+$joyride-tip-close-color: $monsoon !default;
 $joyride-tip-close-size: 24px !default;
 $joyride-tip-close-weight: $font-weight-normal !default;
 
@@ -39,7 +39,7 @@ $joyride-tip-close-weight: $font-weight-normal !default;
 $joyride-screenfill: rgba(0,0,0,0.5) !default;
 
 
-// We decided not to make a mixin for this because it relies on 
+// We decided not to make a mixin for this because it relies on
 // predefined classes to work properly.
 @include exports("joyride") {
   @if $include-html-joyride-classes {
@@ -73,6 +73,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       padding: $joyride-tip-padding;
 
       .button { margin-bottom: 0 !important; }
+
+      .joyride-prev-tip { margin-right: 10px; }
     }
 
     /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
@@ -151,7 +153,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
       line-height: .5 !important;
 
       &:hover,
-      &:focus { color: #eee !important; }
+      &:focus { color: $smoke !important; }
     }
 
     .joyride-modal-bg {
@@ -168,11 +170,11 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
     }
 
     .joyride-expose-wrapper {
-      background-color: #ffffff;
+      background-color: $white;
       position: absolute;
       border-radius: 3px;
       z-index: 102;
-      box-shadow: 0 0 15px #ffffff;
+      box-shadow: 0 0 15px $white;
     }
 
     .joyride-expose-cover {

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

@@ -12,15 +12,15 @@ $include-html-keystroke-classes: $include-html-classes !default;
 // We use these to control text styles.
 $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
 $keystroke-font-size: inherit !default;
-$keystroke-font-color: #222 !default;
-$keystroke-font-color-alt: #fff !default;
+$keystroke-font-color: $jet !default;
+$keystroke-font-color-alt: $white !default;
 $keystroke-function-factor: -7% !default;
 
 // We use this to control keystroke padding.
 $keystroke-padding: rem-calc(2 4 0) !default;
 
 // We use these to control background and border styles.
-$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+$keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default;
 $keystroke-border-style: solid !default;
 $keystroke-border-width: 1px !default;
 $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
@@ -30,7 +30,7 @@ $keystroke-radius: $global-radius !default;
 // @mixins
 //
 // We use this mixin to create keystroke styles.
-// $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+// $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default;
 @mixin keystroke($bg:$keystroke-bg) {
   // This find the lightness percentage of the background color.
   $bg-lightness: lightness($bg);

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

@@ -10,14 +10,14 @@
 $include-html-label-classes: $include-html-classes !default;
 
 // We use these to style the labels
-$label-padding: rem-calc(4 8 6) !default;
+$label-padding: rem-calc(4 8 4) !default;
 $label-radius: $global-radius !default;
 
 // We use these to style the label text
 $label-font-sizing: rem-calc(11) !default;
 $label-font-weight: $font-weight-normal !default;
-$label-font-color: #333 !default;
-$label-font-color-alt: #fff !default;
+$label-font-color: $oil !default;
+$label-font-color-alt: $white !default;
 $label-font-family: $body-font-family !default;
 
 //
@@ -97,8 +97,10 @@ $label-font-family: $body-font-family !default;
       &.round { @include label-style(false, $radius:1000px); }
 
       &.alert     { @include label-style($alert-color); }
+      &.warning   { @include label-style($warning-color); }
       &.success   { @include label-style($success-color); }
       &.secondary { @include label-style($secondary-color); }
+      &.info      { @include label-style($info-color); }
     }
   }
 }

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

@@ -9,7 +9,7 @@
 //
 $include-html-magellan-classes: $include-html-classes !default;
 
-$magellan-bg: #fff !default;
+$magellan-bg: $white !default;
 $magellan-padding: 10px !default;
 
 @include exports("magellan") {