locomotivecms_wagon 1.5.1 → 1.5.2

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

@@ -0,0 +1,70 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+// toolbar styles
+
+.toolbar {
+	background: $oil;
+	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	&.label-bottom .tab .tab-content {
+		i, img { margin-bottom: 10px; }
+	}
+
+	&.label-right .tab .tab-content {
+		i, img { margin-right: 10px; display: inline-block;}
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right .tab .tab-content {
+		text-align: left;
+	}
+
+	&.vertical {
+		height: 100%;
+		width: auto;
+
+		.tab {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+	
+	.tab {
+		text-align: center;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: 20px;
+		float: left;
+
+		&:hover {
+			background: rgba($white, 0.1);
+		}
+	}
+}		
+		
+.toolbar .tab-content {
+	font-size: 16px;
+	text-align: center;
+
+	label { color: $iron; }
+
+	i {
+		font-size: 30px;
+		display: block;
+		margin: 0 auto;
+		color: $iron;
+		vertical-align: middle;
+	}
+
+	img {
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
+}

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

@@ -9,26 +9,27 @@
 //
 $include-html-tooltip-classes: $include-html-classes !default;
 
-$has-tip-border-bottom: dotted 1px #ccc !default;
+$has-tip-border-bottom: dotted 1px $iron !default;
 $has-tip-font-weight: $font-weight-bold !default;
-$has-tip-font-color: #333 !default;
+$has-tip-font-color: $oil !default;
 $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
 $has-tip-font-color-hover: $primary-color !default;
 $has-tip-cursor-type: help !default;
 
 $tooltip-padding: rem-calc(12) !default;
-$tooltip-bg: #333 !default;
+$tooltip-bg: $oil !default;
 $tooltip-font-size: rem-calc(14) !default;
 $tooltip-font-weight: $font-weight-normal !default;
-$tooltip-font-color: #fff !default;
+$tooltip-font-color: $white !default;
 $tooltip-line-height: 1.3 !default;
 $tooltip-close-font-size: rem-calc(10) !default;
 $tooltip-close-font-weight: $font-weight-normal !default;
-$tooltip-close-font-color: #777 !default;
+$tooltip-close-font-color: $monsoon !default;
 $tooltip-font-size-sml: rem-calc(14) !default;
 $tooltip-radius: $global-radius !default;
 $tooltip-rounded: $global-rounded !default;
 $tooltip-pip-size: 5px !default;
+$tooltip-max-width: 300px !default;
 
 @include exports("tooltip") {
   @if $include-html-tooltip-classes {
@@ -53,12 +54,12 @@ $tooltip-pip-size: 5px !default;
     .tooltip {
       display: none;
       position: absolute;
-      z-index: 999;
+      z-index: 1006;
       font-weight: $tooltip-font-weight;
       font-size: $tooltip-font-size;
       line-height: $tooltip-line-height;
       padding: $tooltip-padding;
-      max-width: 85%;
+      max-width: $tooltip-max-width;
       #{$default-float}: 50%;
       width: 100%;
       color: $tooltip-font-color;
@@ -73,6 +74,7 @@ $tooltip-pip-size: 5px !default;
         border: solid $tooltip-pip-size;
         border-color: transparent transparent $tooltip-bg transparent;
         top: -($tooltip-pip-size * 2);
+        pointer-events: none;
 
         &.rtl {
           left: auto;

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

@@ -5,6 +5,7 @@
 @import "global";
 @import "grid";
 @import "buttons";
+@import "forms";
 
 //
 // Top Bar Variables
@@ -12,7 +13,7 @@
 $include-html-top-bar-classes: $include-html-classes !default;
 
 // Background color for the top bar
-$topbar-bg-color: #333 !default;
+$topbar-bg-color: $oil !default;
 $topbar-bg: $topbar-bg-color !default;
 
 // Height and margin
@@ -23,49 +24,51 @@ $topbar-margin-bottom: 0 !default;
 $topbar-title-weight: $font-weight-normal !default;
 $topbar-title-font-size: rem-calc(17) !default;
 
-// Style the top bar dropdown elements
-$topbar-dropdown-bg: #333 !default;
-$topbar-dropdown-link-color: #fff !default;
-$topbar-dropdown-link-bg: #333 !default;
-$topbar-dropdown-link-weight: $font-weight-normal !default;
-$topbar-dropdown-toggle-size: 5px !default;
-$topbar-dropdown-toggle-color: #fff !default;
-$topbar-dropdown-toggle-alpha: 0.4 !default;
-
 // Set the link colors and styles for top-level nav
-$topbar-link-color: #fff !default;
-$topbar-link-color-hover: #fff !default;
-$topbar-link-color-active: #fff !default;
-$topbar-link-color-active-hover: #fff !default;
+$topbar-link-color: $white !default;
+$topbar-link-color-hover: $white !default;
+$topbar-link-color-active: $white !default;
+$topbar-link-color-active-hover: $white !default;
 $topbar-link-weight: $font-weight-normal !default;
 $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg: $topbar-bg !default;
 $topbar-link-bg-hover: #272727 !default;
-$topbar-link-bg-color-hover: #555555 !default;
+$topbar-link-bg-color-hover: $charcoal !default;
 $topbar-link-bg-active: $primary-color !default;
 $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
 $topbar-link-text-transform: none !default;
 $topbar-link-padding: $topbar-height / 3 !default;
-
+$topbar-back-link-size: rem-calc(18) !default;
+$topbar-link-dropdown-padding: 20px !default;
 $topbar-button-font-size: 0.75rem !default;
 $topbar-button-top: 7px !default;
 
-$topbar-dropdown-label-color: #777 !default;
+// Style the top bar dropdown elements
+$topbar-dropdown-bg: $oil !default;
+$topbar-dropdown-link-color: $white !default;
+$topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
+$topbar-dropdown-link-bg: $oil !default;
+$topbar-dropdown-link-weight: $font-weight-normal !default;
+$topbar-dropdown-toggle-size: 5px !default;
+$topbar-dropdown-toggle-color: $white !default;
+$topbar-dropdown-toggle-alpha: 0.4 !default;
+
+$topbar-dropdown-label-color: $monsoon !default;
 $topbar-dropdown-label-text-transform: uppercase !default;
 $topbar-dropdown-label-font-weight: $font-weight-bold !default;
 $topbar-dropdown-label-font-size: rem-calc(10) !default;
-$topbar-dropdown-label-bg: #333 !default;
+$topbar-dropdown-label-bg: $oil !default;
 
 // Top menu icon styles
 $topbar-menu-link-transform: uppercase !default;
 $topbar-menu-link-font-size: rem-calc(13) !default;
 $topbar-menu-link-weight: $font-weight-bold !default;
-$topbar-menu-link-color: #fff !default;
-$topbar-menu-icon-color: #fff !default;
-$topbar-menu-link-color-toggled: #888 !default;
-$topbar-menu-icon-color-toggled: #888 !default;
+$topbar-menu-link-color: $white !default;
+$topbar-menu-icon-color: $white !default;
+$topbar-menu-link-color-toggled: $jumbo !default;
+$topbar-menu-icon-color-toggled: $jumbo !default;
 
 // Transitions and breakpoint styles
 $topbar-transition-speed: 300ms !default;
@@ -80,6 +83,7 @@ $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness:
 // Sticky Class
 $topbar-sticky-class: ".sticky" !default;
 $topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
+$topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li
 
 // Accessibility mixins for hiding and showing the menu dropdown items
 @mixin topbar-hide-dropdown {
@@ -160,16 +164,21 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
       form,
       input { margin-bottom: 0; }
 
-      input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
+      input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
 
       .button, button {
-        padding-top: .45rem;
-        padding-bottom: .35rem;
+        padding-top: .35rem + rem-calc(1);
+        padding-bottom: .35rem + rem-calc(1);
         margin-bottom: 0;
         font-size: $topbar-button-font-size;
           // position: relative;
           // top: -1px;
 
+        // Corrects a slight misalignment when put next to an input field
+        @media #{$small-only} {
+          position: relative;
+          top: -1px;
+        }
       }
 
       // Title Area
@@ -240,9 +249,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               // $thickness - thickness of lines in hamburger icon, set value in px
               // $gap - spacing between the lines in hamburger icon, set value in px
               // $color - icon color
-              // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
+              // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
               // $offcanvas - Set to false of @include in topbar
-              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
+              @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
             }
           }
         }
@@ -257,18 +266,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
 
         .toggle-topbar {
           a { color: $topbar-menu-link-color-toggled;
-            &::after {
+			span::after {
               // Shh, don't tell, but box-shadows create the menu icon :)
-              box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
-                          0 16px 0 1px $topbar-menu-icon-color-toggled,
-                          0 22px 0 1px $topbar-menu-icon-color-toggled;
+              // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
+              box-shadow: 0 0px 0 1px $topbar-menu-icon-color-toggled,
+                          0 7px 0 1px $topbar-menu-icon-color-toggled,
+                          0 14px 0 1px $topbar-menu-icon-color-toggled;
             }
           }
         }
       }
-
-
-
     }
 
     // Right and Left Navigation that stacked by default
@@ -318,6 +325,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           &.button.secondary { @include button-style($bg:$secondary-color); }
           &.button.success { @include button-style($bg:$success-color); }
           &.button.alert { @include button-style($bg:$alert-color); }
+          &.button.warning { @include button-style($bg:$warning-color); }
         }
 
         > button {
@@ -329,6 +337,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           &.secondary { @include button-style($bg:$secondary-color); }
           &.success { @include button-style($bg:$success-color); }
           &.alert { @include button-style($bg:$alert-color); }
+          &.warning { @include button-style($bg:$warning-color); }
         }
 
         // Apply the hover link color when it has that class
@@ -404,13 +413,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             }
           }
 
-          &.title h5 {
+          &.title h5, &.parent-link {
+            // Back Button
             margin-bottom: 0;
             margin-top: 0;
+            font-size: $topbar-back-link-size;
             a {
               color: $topbar-link-color;
-              line-height: $topbar-height / 2;
+              // line-height: $topbar-height / 2;
               display: block;
+              &:hover { background:none; }
             }
           }
           &.has-form { padding: 8px $topbar-link-padding; }
@@ -504,7 +516,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               line-height: $topbar-height;
               color: $topbar-link-color-active;
               background: $topbar-link-bg-active;
-              &:hover { background: $topbar-link-bg-active-hover; }
+              &:hover {
+                background: $topbar-link-bg-active-hover;
+                color: $topbar-link-color-active-hover;
+              }
             }
           }
         }
@@ -514,7 +529,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
           @if($topbar-arrows){
 
             & > a {
-              padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
+              padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
               &:after {
                 @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
                 margin-top: -($topbar-dropdown-toggle-size / 2);
@@ -535,16 +550,21 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
 
           .dropdown li.has-dropdown {
             & > a {
-              &:after {
-                border: none;
-                content: "\00bb";
-                top: 1rem;
-                margin-top: -1px;
-                #{$opposite-direction}: 5px;
-                line-height: 1.2;
+            @if ($topbar-dropdown-arrows){
+				&:after {
+				border: none;
+				content: "\00bb";
+				top: 1rem;
+				margin-top: -1px;
+				#{$opposite-direction}: 5px;
+				line-height: 1.2;
+				}
               }
             }
           }
@@ -566,15 +586,18 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               background: $topbar-dropdown-link-bg;
             }
 
-            &:not(.has-form) a:not(.button) {
-              color: $topbar-dropdown-link-color;
-              background: $topbar-dropdown-link-bg;
-            }
-            &:not(.has-form):hover > a:not(.button) {
-              color: $topbar-link-color-hover;
-              background-color: $topbar-link-bg-color-hover;
-              @if ($topbar-link-bg-hover) {
-                background: $topbar-link-bg-hover;
+            &:not(.has-form):not(.active) {
+              & > a:not(.button) {
+                color: $topbar-dropdown-link-color;
+                background: $topbar-dropdown-link-bg;
+              }
+
+              &:hover > a:not(.button) {
+                color: $topbar-dropdown-link-color-hover;
+                background-color: $topbar-link-bg-color-hover;
+                @if ($topbar-link-bg-hover) {
+                  background: $topbar-link-bg-hover;
+                }
               }
             }
 
@@ -608,7 +631,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
         }
 
         // Position overrides for ul.right and ul.left
-        .right {
+        .#{$opposite-direction} {
           li .dropdown {
             #{$default-float}: auto;
             #{$opposite-direction}: 0;
@@ -616,7 +639,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
             li .dropdown { #{$opposite-direction}: 100%; }
           }
         }
-        .left {
+        .#{$default-float} {
           li .dropdown {
             #{$opposite-direction}: auto;
             #{$default-float}: 0;
@@ -652,6 +675,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
               @include topbar-show-dropdown();
             }
           }
+          > a:focus + .dropdown {
+            @include topbar-show-dropdown();
+          }
         }
       }
     }

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

@@ -10,7 +10,7 @@ $include-html-type-classes: $include-html-classes !default;
 $header-font-family: $body-font-family !default;
 $header-font-weight: $font-weight-normal !default;
 $header-font-style: $font-weight-normal !default;
-$header-font-color: #222 !default;
+$header-font-color: $jet !default;
 $header-line-height: 1.4 !default;
 $header-top-margin: .2rem !default;
 $header-bottom-margin: .5rem !default;
@@ -55,9 +55,14 @@ $paragraph-aside-font-style: italic !default;
 $paragraph-text-rendering: optimizeLegibility !default;
 
 // We use these to style <code> tags
-$code-color: scale-color($alert-color, $lightness: -27%) !default;
-$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
-$code-font-weight: $font-weight-bold !default;
+$code-color: $oil !default;
+$code-font-family: $font-family-monospace !default;
+$code-font-weight: $font-weight-normal !default;
+$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
+$code-border-size: 1px !default;
+$code-border-style: solid !default;
+$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
 
 // We use these to style anchors
 $anchor-text-decoration: none !default;
@@ -68,7 +73,7 @@ $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !def
 // We use these to style the <hr> element
 $hr-border-width: 1px !default;
 $hr-border-style: solid !default;
-$hr-border-color: #ddd !default;
+$hr-border-color: $gainsboro !default;
 $hr-margin: rem-calc(20) !default;
 
 // We use these to style lists
@@ -88,13 +93,13 @@ $definition-list-margin-bottom: rem-calc(12) !default;
 // We use these to style blockquotes
 $blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
 $blockquote-padding: rem-calc(9 20 0 19) !default;
-$blockquote-border: 1px solid #ddd !default;
+$blockquote-border: 1px solid $gainsboro !default;
 $blockquote-cite-font-size: rem-calc(13) !default;
 $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
 $blockquote-cite-link-color: $blockquote-cite-font-color !default;
 
 // Acronym styles
-$acronym-underline: 1px dotted #ddd !default;
+$acronym-underline: 1px dotted $gainsboro !default;
 
 // We use these to control padding and margin
 $microformat-padding: rem-calc(10 12) !default;
@@ -103,7 +108,7 @@ $microformat-margin: rem-calc(0 0 20 0) !default;
 // We use these to control the border styles
 $microformat-border-width: 1px !default;
 $microformat-border-style: solid !default;
-$microformat-border-color: #ddd !default;
+$microformat-border-color: $gainsboro !default;
 
 // We use these to control full name font styles
 $microformat-fullname-font-weight: $font-weight-bold !default;
@@ -300,6 +305,11 @@ $align-class-breakpoints:
       font-family: $code-font-family;
       font-weight: $code-font-weight;
       color: $code-color;
+      background-color: $code-background-color;
+      border-width: $code-border-size;
+      border-style: $code-border-style;
+      border-color: $code-border-color;
+      padding: $code-padding;
     }
 
     /* Lists */
@@ -376,11 +386,13 @@ $align-class-breakpoints:
       text-transform: uppercase;
       font-size: 90%;
       color: $body-font-color;
-      border-bottom: $acronym-underline;
       cursor: $cursor-help-value;
     }
     abbr {
       text-transform: none;
+      &[title] {
+        border-bottom: $acronym-underline;
+      }
     }
 
     /* Blockquotes */
@@ -461,7 +473,7 @@ $align-class-breakpoints:
       @media print {
         * {
           background: transparent !important;
-          color: #000 !important; /* Black prints faster: h5bp.com/s */
+          color: $black !important; /* Black prints faster: h5bp.com/s */
           box-shadow: none !important;
           text-shadow: none !important;
         }
@@ -479,7 +491,7 @@ $align-class-breakpoints:
 
         pre,
         blockquote {
-          border: 1px solid #999;
+          border: 1px solid $aluminum;
           page-break-inside: avoid;
         }
 

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

@@ -257,7 +257,7 @@ $visibility-breakpoint-queries:
       }
       @if $include-table-visibility-classes != false {
         #{$visibility-table-list} {
-          display: table;
+          display: table !important;
         }
         #{$visibility-table-header-group-list} {
           display: table-header-group !important;
@@ -290,7 +290,7 @@ $visibility-breakpoint-queries:
   /* Specific visibility for tables */
   table {
     &.hide-for-landscape,
-    &.show-for-portrait { display: table; }
+    &.show-for-portrait { display: table !important; }
   }
   thead {
     &.hide-for-landscape,
@@ -319,7 +319,7 @@ $visibility-breakpoint-queries:
     /* Specific visibility for tables */
     table {
       &.show-for-landscape,
-      &.hide-for-portrait { display: table; }
+      &.hide-for-portrait { display: table !important; }
     }
     thead {
       &.show-for-landscape,
@@ -349,7 +349,7 @@ $visibility-breakpoint-queries:
     /* Specific visibility for tables */
     table {
       &.show-for-portrait,
-      &.hide-for-landscape { display: table; }
+      &.hide-for-landscape { display: table !important; }
     }
     thead {
       &.show-for-portrait,
@@ -377,8 +377,8 @@ $visibility-breakpoint-queries:
   .touch .hide-for-touch { display: none !important; }
 
   /* Specific visibility for tables */
-  table.hide-for-touch { display: table; }
-  .touch table.show-for-touch { display: table; }
+  table.hide-for-touch { display: table !important; }
+  .touch table.show-for-touch { display: table !important; }
   thead.hide-for-touch { display: table-header-group !important; }
   .touch thead.show-for-touch { display: table-header-group !important; }
   tbody.hide-for-touch { display: table-row-group !important; }
@@ -396,7 +396,7 @@ $visibility-breakpoint-queries:
     .show-for-print { display: block; }
     .hide-for-print { display: none; }
 
-    table.show-for-print { display: table; }
+    table.show-for-print { display: table !important; }
     thead.show-for-print { display: table-header-group !important; }
     tbody.show-for-print { display: table-row-group !important; }
     tr.show-for-print { display: table-row !important; }