locomotivecms_wagon 1.5.1 → 1.5.2

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

@@ -11,7 +11,7 @@ $include-html-orbit-classes: $include-html-classes !default;
 // We use these to control the caption styles
 $orbit-container-bg: none !default;
 $orbit-caption-bg: rgba(51,51,51, 0.8) !default;
-$orbit-caption-font-color: #fff !default;
+$orbit-caption-font-color: $white !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;
@@ -20,27 +20,23 @@ $orbit-caption-height: auto !default;
 // We use these to control the left/right nav styles
 $orbit-nav-bg: transparent !default;
 $orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
-$orbit-nav-arrow-color: #fff !default;
-$orbit-nav-arrow-color-hover: #fff !default;
+$orbit-nav-arrow-color: $white !default;
+$orbit-nav-arrow-color-hover: $white !default;
 
 // We use these to control the timer styles
 $orbit-timer-bg: rgba(255,255,255,0.3) !default;
 $orbit-timer-show-progress-bar: true !default;
 
 // We use these to control the bullet nav styles
-$orbit-bullet-nav-color: #ccc !default;
-$orbit-bullet-nav-color-active: #999 !default;
+$orbit-bullet-nav-color: $iron !default;
+$orbit-bullet-nav-color-active: $aluminum !default;
 $orbit-bullet-radius: rem-calc(9) !default;
 
 // We use these to controls the style of slide numbers
 $orbit-slide-number-bg: rgba(0,0,0,0) !default;
-$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-font-color: $white !default;
 $orbit-slide-number-padding: rem-calc(5) !default;
 
-// We use these to controls the css animation
-$orbit-animation-speed: 500ms !default;
-$orbit-animation-ease: ease-in-out !default;
-
 // Graceful Loading Wrapper and preloader
 $wrapper-class: "slideshow-wrapper" !default;
 $preloader-class: "preloader" !default;
@@ -50,33 +46,25 @@ $orbit-nav-hide-for-small: true !default;
 $orbit-bullet-hide-for-small: true !default;
 $orbit-timer-hide-for-small: true !default;
 
-// CSS Transform
-// This function is needed in order to put in all of the browser prefixes.
-// The normal tranform attribute still does not work properly across all browsers.
-// In order to receive the transitionEnd events then you will still need to use the vendor prefixes
-@mixin translate3d($x,$y,$z) {
-  -ms-transform:translate($x,$y);
-
-  -webkit-transform: translate3d($x,$y,$z);
-     -moz-transform: translate3d($x,$y,$z);
-       -o-transform: translate3d($x,$y,$z);
-          transform: translate3d($x,$y,$z);
-}
-
-@mixin rotate($d) {
-  -webkit-transform: rotate($d);
-     -moz-transform: rotate($d);
-      -ms-transform: rotate($d);
-       -o-transform: rotate($d);
-          transform: rotate($d);
-}
 
 @include exports("orbit") {
   @if $include-html-orbit-classes {
 
+    @-webkit-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-moz-keyframes rotate {
+      from { -moz-transform: rotate(0deg); }
+      to { -moz-transform: rotate(360deg); }
+    }
+    @-o-keyframes rotate {
+      from { -o-transform: rotate(0deg); }
+      to { -o-transform: rotate(360deg); }
+    }
     @keyframes rotate {
-      from { @include rotate(0deg); }
-      to { @include rotate(360deg); }
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
     }
 
     /* Orbit Graceful Loading */
@@ -103,6 +91,9 @@ $orbit-timer-hide-for-small: true !default;
 
           .orbit-caption { display: block; }
         }
+        .orbit-bullets li {
+          display: inline-block;
+        }
       }
 
       // Orbit preloader
@@ -116,7 +107,7 @@ $orbit-timer-hide-for-small: true !default;
         margin-top: -20px;
         margin-left: -20px;
         border: solid 3px;
-        border-color: #555 #fff;
+        border-color: $charcoal $white;
         @include radius(1000px);
         animation-name: rotate;
         animation-duration: 1.5s;
@@ -125,6 +116,7 @@ $orbit-timer-hide-for-small: true !default;
       }
     }
 
+ 
     .orbit-container {
       overflow: hidden;
       width: 100%;
@@ -142,61 +134,24 @@ $orbit-timer-hide-for-small: true !default;
 
         img { display: block; max-width: 100%; }
 
-        &.fade > li {
-          opacity: 0;
-          transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          @include translate3d(0,0,0);
-          &.animate-in {
-            opacity: 1;
-            z-index: 20;
-            transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          }
-          &.animate-out {
-            z-index: 10;
-            transition: opacity $orbit-animation-speed $orbit-animation-ease;
-          }
-        }
-
-        &.swipe-next > li {
-          @include translate3d(100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(-100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        &.swipe-prev > li {
-          @include translate3d(-100%,0,0);
-          &.animate-in {
-            @include translate3d(0,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-          &.animate-out {
-            @include translate3d(100%,0,0);
-            transition-duration:$orbit-animation-speed;
-          }
-        }
-
-        > li {
+        &>* {
           position: absolute;
           top: 0;
-          left: 0;
           width: 100%;
-          @include translate3d(100%,0,0);
-
-          > a { display: block; }
+          @if $text-direction == rtl {
+            margin-right: 100%;
+          }
+          @else {
+            margin-left: 100%;
+          }
 
-          &.active {
-            opacity: 1;
-            // "relative" positioning is required for variable height of children.
-            position:relative;
-            top: 0;
-            left: 0;
-            @include translate3d(0,0,0);
+          &:first-child {
+            @if $text-direction == rtl {
+            margin-right: 0%;
+            }
+            @else {
+            margin-left: 0%;
+            }
           }
 
           .orbit-caption {
@@ -221,7 +176,7 @@ $orbit-timer-hide-for-small: true !default;
         top: 10px;
         #{$default-float}: 10px;
         font-size: 12px;
-        span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
+        span { font-weight: 700; padding: $orbit-slide-number-padding;}
         color: $orbit-slide-number-font-color;
         background: $orbit-slide-number-bg;
         z-index: 10;
@@ -243,8 +198,6 @@ $orbit-timer-hide-for-small: true !default;
             position: relative;
             right: 20px;
             top: 5px;
-          } @else {
-              display:none; // This is used by the Javascript to not create a handler.
           }
         }
 
@@ -256,11 +209,11 @@ $orbit-timer-hide-for-small: true !default;
           #{$opposite-direction}: 0;
           width: 11px;
           height: 14px;
-          border: solid 4px #fff;
+          border: solid 4px $white;
           border-top: none;
           border-bottom: none;
         }
-
+      
         // Pause button
         &.paused {
           & > span {
@@ -270,16 +223,16 @@ $orbit-timer-hide-for-small: true !default;
             height: 14px;
             border: inset 8px;
             border-left-style: solid;
-            @include rotate(180deg);
-            border-color: transparent #fff transparent transparent;
-            &.dark {
-              border-color: transparent #333 transparent transparent;
+            border-color: transparent;
+            border-left-color: $white;
+            &.dark { 
+              border-left-color: $oil;
             }
           }
         }
       }
-
-
+      
+      
 
       &:hover .orbit-timer > span { display: block; }
 
@@ -333,37 +286,37 @@ $orbit-timer-hide-for-small: true !default;
           border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
         }
       }
+    }
 
-      .orbit-bullets-container { text-align: center; }
-      .orbit-bullets {
-        margin: 0 auto 30px auto;
-        overflow: hidden;
-        position: relative;
-        top: 10px;
+    .orbit-bullets-container { text-align: center; }
+    .orbit-bullets {
+      margin: 0 auto 30px auto;
+      overflow: hidden;
+      position: relative;
+      top: 10px;
+      float: none;
+      text-align: center;
+      display: block;
+
+      li {
+        cursor:pointer;
+        display: inline-block;
+        width: $orbit-bullet-radius;
+        height: $orbit-bullet-radius;
+        background: $orbit-bullet-nav-color;
+        // float: $default-float;
         float: none;
-        text-align: center;
-        display: block;
-
-        li {
-          display: inline-block;
-          width: $orbit-bullet-radius;
-          height: $orbit-bullet-radius;
-          background: $orbit-bullet-nav-color;
-          // float: $default-float;
-          float: none;
-          margin-#{$opposite-direction}: 6px;
-          @include radius(1000px);
-
-          &.active {
-            background: $orbit-bullet-nav-color-active;
-          }
+        margin-#{$opposite-direction}: 6px;
+        @include radius(1000px);
 
-          &:last-child { margin-#{$opposite-direction}: 0; }
+        &.active {
+          background: $orbit-bullet-nav-color-active;
         }
+
+        &:last-child { margin-#{$opposite-direction}: 0; }
       }
     }
 
-
     .touch {
       .orbit-container {
         .orbit-prev,
@@ -388,36 +341,28 @@ $orbit-timer-hide-for-small: true !default;
     }
 
     @media #{$small-only} {
-        .orbit-stack-on-small {
-
-            .orbit-slides-container {height: auto !important;}
-            .orbit-slides-container > * {
-                position: relative !important;
-                margin-left: 0% !important;
-                opacity: 1 !important;
-                -webkit-transform: none !important;
-                   -moz-transform: none !important;
-                    -ms-transform: none !important;
-                     -o-transform: none !important;
-                        transform: none !important;
-                transition: none !important;
-            }
-
-            @if $orbit-timer-hide-for-small {
-                .orbit-timer{display: none;}
-            }
-            @if $orbit-nav-hide-for-small {
-                .orbit-next,.orbit-prev{display: none;}
-            }
-            @if $orbit-bullet-hide-for-small {
-                .orbit-bullets{display: none;}
-            }
+      .orbit-stack-on-small {
+        .orbit-slides-container {height: auto !important;}
+        .orbit-slides-container > * {
+          position: relative;
+          margin:0% !important;
+          opacity:1 !important;
+        }
 
-            .orbit-slide-number {
-              display: none;
-            }
+        .orbit-slide-number {
+          display: none;
         }
-    }
+      }
 
+      @if $orbit-timer-hide-for-small {
+         .orbit-timer{display: none;}
+      }
+      @if $orbit-nav-hide-for-small {
+         .orbit-next,.orbit-prev{display: none;}
+      }
+      @if $orbit-bullet-hide-for-small {
+         .orbit-bullets{display: none;}
+      }
+    }
   }
 }

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

@@ -16,23 +16,23 @@ $pagination-margin: rem-calc(-5) !default;
 // We use these to set the list-item properties
 $pagination-li-float: $default-float !default;
 $pagination-li-height: rem-calc(24) !default;
-$pagination-li-font-color: #222 !default;
+$pagination-li-font-color: $jet !default;
 $pagination-li-font-size: rem-calc(14) !default;
 $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: scale-color(#fff, $lightness: -10%) !default;
+$pagination-link-font-color: $aluminum !default;
+$pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default !default;
-$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-font-color: $aluminum !default;
 $pagination-link-unavailable-bg-active: transparent !default;
 
 // We use these for currently selected anchor links
 $pagination-link-current-background: $primary-color !default;
-$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-color: $white !default;
 $pagination-link-current-font-weight: $font-weight-bold !default;
 $pagination-link-current-cursor: default !default;
 $pagination-link-current-active-bg: $primary-color !default;
@@ -48,12 +48,16 @@ $pagination-link-current-active-bg: $primary-color !default;
 // @mixins
 // Style unavailable list items
 @mixin pagination-unavailable-item {
-  a {
+  a, button {
     cursor: $pagination-link-unavailable-cursor;
     color: $pagination-link-unavailable-font-color;
   }
   &:hover a,
-  & a:focus { background: $pagination-link-unavailable-bg-active; }
+  & a:focus,
+
+  &:hover button,
+  & button:focus
+  { background: $pagination-link-unavailable-bg-active; }
 }
 // @mixins
 // Style the current list item. Do not assume that the current item has
@@ -61,7 +65,7 @@ $pagination-link-current-active-bg: $primary-color !default;
 // $has-anchor - Default: true, Options: false
 @mixin pagination-current-item($has-anchor: true) {
   @if $has-anchor {
-    a {
+    a, button {
       background: $pagination-link-current-background;
       color: $pagination-link-current-font-color;
       font-weight: $pagination-link-current-font-weight;
@@ -103,15 +107,23 @@ $pagination-link-current-active-bg: $primary-color !default;
       font-size: $pagination-li-font-size;
       margin-#{$default-float}: $pagination-li-margin;
 
-      a {
+      a, button {
         display: block;
         padding: $pagination-link-pad;
         color: $pagination-link-font-color;
+        background: none;
         @include radius;
+        font-weight: normal;
+        font-size: 1em;
+        line-height: inherit;
+        @include single-transition(background-color);
       }
 
       &:hover a,
-      a:focus { background: $pagination-link-active-bg; }
+      a:focus,
+      &:hover button,
+      button:focus
+      { background: $pagination-link-active-bg; }
 
       @if $use-default-classes {
         &.unavailable { @include pagination-unavailable-item(); }

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

@@ -10,7 +10,7 @@
 $include-html-panel-classes: $include-html-classes !default;
 
 // We use these to control the background and border styles
-$panel-bg: scale-color(#fff, $lightness: -5%) !default;
+$panel-bg: scale-color($white, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
 
@@ -23,8 +23,8 @@ $panel-margin-bottom: rem-calc(20) !default;
 $panel-padding: rem-calc(20) !default;
 
 // We use these to set default font colors
-$panel-font-color: #333 !default;
-$panel-font-color-alt: #fff !default;
+$panel-font-color: $oil !default;
+$panel-font-color-alt: $white !default;
 
 $panel-header-adjust: true !default;
 $callout-panel-link-color: $primary-color !default;
@@ -32,7 +32,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 || scale-color(#fff, $lightness: -5%) !default
+// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $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) {
@@ -47,6 +47,8 @@ $callout-panel-link-color: $primary-color !default;
     padding: $padding;
 
     background: $bg;
+    @if $bg-lightness >= 50% { color: $panel-font-color; }
+    @else { color: $panel-font-color-alt; }
 
     // Respect the padding, fool.
     &>:first-child { margin-top: 0; }
@@ -54,9 +56,12 @@ $callout-panel-link-color: $primary-color !default;
 
     @if $adjust {
       // We set the font color based on the darkness of the bg.
-      @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
-      @else if $bg-lightness >= 50%            { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color; } }
-      @else                                    { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
+      @if $bg-lightness >= 50% { 
+        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+      }
+      @else { 
+        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+      }
 
       // reset header line-heights for panels
       h1,h2,h3,h4,h5,h6 {

data/generators/foundation5/public/stylesheets/foundation/components/_pricing-tables.scss

@@ -10,50 +10,50 @@
 $include-html-pricing-classes: $include-html-classes !default;
 
 // We use this to control the border color
-$price-table-border: solid 1px #ddd !default;
+$price-table-border: solid 1px $gainsboro !default;
 
 // We use this to control the bottom margin of the pricing table
 $price-table-margin-bottom: rem-calc(20) !default;
 
 // We use these to control the title styles
-$price-title-bg: #333 !default;
+$price-title-bg: $oil !default;
 $price-title-padding: rem-calc(15 20) !default;
 $price-title-align: center !default;
-$price-title-color: #eee !default;
+$price-title-color: $smoke !default;
 $price-title-weight: $font-weight-normal !default;
 $price-title-size: rem-calc(16) !default;
 $price-title-font-family: $body-font-family !default;
 
 // We use these to control the price styles
-$price-money-bg: #f6f6f6 !default;
+$price-money-bg: $vapor !default;
 $price-money-padding: rem-calc(15 20) !default;
 $price-money-align: center !default;
-$price-money-color: #333 !default;
+$price-money-color: $oil !default;
 $price-money-weight: $font-weight-normal !default;
 $price-money-size: rem-calc(32) !default;
 $price-money-font-family: $body-font-family !default;
 
 
 // We use these to control the description styles
-$price-bg: #fff !default;
-$price-desc-color: #777 !default;
+$price-bg: $white !default;
+$price-desc-color: $monsoon !default;
 $price-desc-padding: rem-calc(15) !default;
 $price-desc-align: center !default;
 $price-desc-font-size: rem-calc(12) !default;
 $price-desc-weight: $font-weight-normal !default;
 $price-desc-line-height: 1.4 !default;
-$price-desc-bottom-border: dotted 1px #ddd !default;
+$price-desc-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the list item styles
-$price-item-color: #333 !default;
+$price-item-color: $oil !default;
 $price-item-padding: rem-calc(15) !default;
 $price-item-align: center !default;
 $price-item-font-size: rem-calc(14) !default;
 $price-item-weight: $font-weight-normal !default;
-$price-item-bottom-border: dotted 1px #ddd !default;
+$price-item-bottom-border: dotted 1px $gainsboro !default;
 
 // We use these to control the CTA area styles
-$price-cta-bg: #fff !default;
+$price-cta-bg: $white !default;
 $price-cta-align: center !default;
 $price-cta-padding: rem-calc(20 20 0) !default;
 

data/generators/foundation5/public/stylesheets/foundation/components/_progress-bars.scss

@@ -11,10 +11,10 @@ $include-html-media-classes: $include-html-classes !default;
 
 // We use this to set the progress bar height
 $progress-bar-height: rem-calc(25) !default;
-$progress-bar-color: #f6f6f6 !default;
+$progress-bar-color: $vapor !default;
 
 // We use these to control the border styles
-$progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
+$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;

data/generators/foundation5/public/stylesheets/foundation/components/_range-slider.scss

@@ -21,10 +21,11 @@ $range-slider-bar-height: rem-calc(16) !default;
 
 $range-slider-bar-border-width: 1px !default;
 $range-slider-bar-border-style: solid !default;
-$range-slider-bar-border-color: #ddd !default; 
+$range-slider-bar-border-color: $gainsboro !default;
 $range-slider-radius: $global-radius !default;
 $range-slider-round: $global-rounded !default;
-$range-slider-bar-bg-color: #fafafa !default;
+$range-slider-bar-bg-color: $ghost !default;
+$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
 
 // Vertical bar styles
 $range-slider-vertical-bar-width: rem-calc(16) !default;
@@ -43,6 +44,7 @@ $range-slider-handle-round: $global-rounded !default;
 $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
 $range-slider-handle-cursor: pointer !default;
 
+$range-slider-disabled-opacity: 0.7 !default;
 
 //
 // @mixins
@@ -66,14 +68,19 @@ $range-slider-handle-cursor: pointer !default;
 @mixin range-slider-bar-style(
   $bg: true,
   $radius: false,
-  $round: false) {
-    @if $bg == true { background: $range-slider-bar-bg-color; }
-    @if $radius == true { @include radius($range-slider-radius); }
-    @if $round == true { @include radius($range-slider-round); }
+  $round: false,
+  $disabled: false) {
+  @if $bg == true { background: $range-slider-bar-bg-color; }
+  @if $radius == true { @include radius($range-slider-radius); }
+  @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
   }
+}
 
 @mixin range-slider-bar(
-  $bg: $range-slider-bar-bg-color, 
+  $bg: $range-slider-bar-bg-color,
   $radius:false) {
   @include range-slider-bar-base;
   @include range-slider-bar-style;
@@ -88,14 +95,23 @@ $range-slider-handle-cursor: pointer !default;
   height: $range-slider-handle-height;
   border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
   cursor: $range-slider-handle-cursor;
+
+  // This removes the 300ms touch delay on Windows 8
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
 }
 @mixin range-slider-handle-style(
   $bg: true,
   $radius: false,
-  $round: false) {
+  $round: false,
+  $disabled: false) {
   @if $bg == true { background: $range-slider-handle-bg-color; }
   @if $radius == true { @include radius($range-slider-radius); }
   @if $round == true { @include radius($range-slider-round); }
+  @if $disabled == true {
+    cursor: $cursor-default-value;
+    opacity: $range-slider-disabled-opacity;
+  }
   &:hover {
     background: $range-slider-handle-bg-hover-color;
   }
@@ -133,12 +149,16 @@ $range-slider-handle-cursor: pointer !default;
         @include range-slider-bar-style($round:true);
         .range-slider-handle { @include range-slider-handle-style($round: true); }
       }
+      &.disabled, &[disabled] {
+        @include range-slider-bar-style($disabled:true);
+        .range-slider-handle { @include range-slider-handle-style($disabled: true); }
+      }
     }
     .range-slider-active-segment {
       display: inline-block;
       position: absolute;
       height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
-      background: scale-color($secondary-color, $lightness: -1%);
+      background: $range-slider-active-segment-bg-color;
     }
     .range-slider-handle {
       @include range-slider-handle-base;