locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/components/_float.scss

@@ -17,8 +17,8 @@
 
   .float-center {
     display: block;
-    margin-left: auto;
     margin-right: auto;
+    margin-left: auto;
   }
 
   .clearfix {

data/generators/foundation/public/stylesheets/foundation6/components/_label.scss

@@ -12,7 +12,15 @@ $label-background: $primary-color !default;
 
 /// Default text color for labels.
 /// @type Color
-$label-color: foreground($label-background) !default;
+$label-color: $white !default;
+
+/// Alternate text color for labels.
+/// @type Color
+$label-color-alt: $black !default;
+
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$label-palette: $foundation-palette !default;
 
 /// Default font size for labels.
 /// @type Number
@@ -30,11 +38,13 @@ $label-radius: $global-radius !default;
 @mixin label {
   display: inline-block;
   padding: $label-padding;
+
+  border-radius: $label-radius;
+
   font-size: $label-font-size;
   line-height: 1;
   white-space: nowrap;
   cursor: default;
-  border-radius: $label-radius;
 }
 
 @mixin foundation-label {
@@ -44,12 +54,10 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $name, $color in $foundation-colors {
-      @if $name != primary {
-        &.#{$name} {
-          background: $color;
-          color: foreground($color);
-        }
+    @each $name, $color in $label-palette {
+      &.#{$name} {
+        background: $color;
+        color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }
     }
   }

data/generators/foundation/public/stylesheets/foundation6/components/_media-object.scss

@@ -14,37 +14,57 @@ $mediaobject-margin-bottom: $global-margin !default;
 /// @type Number
 $mediaobject-section-padding: $global-padding !default;
 
-/// With of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
+/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
 /// @type Number
 $mediaobject-image-width-stacked: 100% !default;
 
 /// Adds styles for a media object container.
 @mixin media-object-container {
+  display: if($global-flexbox, flex, block);
   margin-bottom: $mediaobject-margin-bottom;
-  display: block;
+
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+  }
 }
 
 /// Adds styles for sections within a media object.
 /// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
 @mixin media-object-section($padding: $mediaobject-section-padding) {
-  display: table-cell;
-  vertical-align: top;
+  @if $global-flexbox {
+    flex: 0 1 auto;
+  }
+  @else {
+    display: table-cell;
+    vertical-align: top;
+  }
 
   &:first-child {
     padding-#{$global-right}: $padding;
   }
 
-  &:last-child:not(+ &:first-child) {
+  &:last-child:not(:nth-child(2)) {
     padding-#{$global-left}: $padding;
   }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
 }
 
 /// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
 @mixin media-object-stack {
-  display: block;
   padding: 0;
   padding-bottom: $mediaobject-section-padding;
 
+  @if $global-flexbox {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  @else {
+    display: block;
+  }
+
   img {
     width: $mediaobject-image-width-stacked;
   }
@@ -58,8 +78,16 @@ $mediaobject-image-width-stacked: 100% !default;
       max-width: none;
     }
 
-    &.stack-for-small .media-object-section {
-      @include breakpoint(small only) {
+    @if $global-flexbox {
+      &.stack-for-#{$-zf-zero-breakpoint} {
+        @include breakpoint($-zf-zero-breakpoint only) {
+          flex-wrap: wrap;
+        }
+      }
+    }
+
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
+      @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }
     }
@@ -68,7 +96,19 @@ $mediaobject-image-width-stacked: 100% !default;
   .media-object-section {
     @include media-object-section;
 
-    &.middle { vertical-align: middle; }
-    &.bottom { vertical-align: bottom; }
+    @if $global-flexbox {
+      &.main-section {
+        flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      }
+    }
+    @else {
+      &.middle {
+        vertical-align: middle;
+      }
+
+      &.bottom {
+        vertical-align: bottom;
+      }
+    }
   }
 }

data/generators/foundation/public/stylesheets/foundation6/components/_menu-icon.scss

@@ -0,0 +1,9 @@
+@mixin foundation-menu-icon {
+  .menu-icon {
+    @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
+  }
+
+  .menu-icon.dark {
+    @include hamburger;
+  }
+}

data/generators/foundation/public/stylesheets/foundation6/components/_menu.scss

@@ -12,59 +12,163 @@ $menu-margin: 0 !default;
 
 /// Left-hand margin of a nested menu.
 /// @type Number
-$menu-margin-nested: 1rem !default;
+$menu-nested-margin: $global-menu-nested-margin !default;
 
-/// Padding for items in a menu.
+/// Padding for items in a pill menu.
 /// @type Number
-$menu-item-padding: 0.7rem 1rem !default;
+$menu-items-padding: $global-menu-padding !default;
+
+/// margin for items in a simple menu.
+/// @type Number
+$menu-simple-margin: 1rem !default;
+
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: get-color(primary) !default;
 
 /// Spacing between an icon and text in a menu item.
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
 
-/// Maximum number of `expand-n` classes to include in the CSS.
-/// @type Number
-$menu-expand-max: 6 !default;
+/// Background color for an hovered menu item.
+/// @type Color
+$menu-item-background-hover: $light-gray !default;
+
+/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`. 
+/// But please note that `active` will be removed in upcoming versions.
+/// @type Boolean
+$menu-state-back-compat: true !default;
+
+/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`. 
+/// But please note that `menu-centered` will be removed in upcoming versions.
+/// @type Boolean
+$menu-centered-back-compat: true !default;
+
+/// Backward compatibility for using `icon-*` classes without `.icons` classes
+/// But please note that this backward compatibility will be removed in upcoming versions.
+/// @type Boolean
+$menu-icons-back-compat: true !default;
 
 /// Creates the base styles for a Menu.
 @mixin menu-base {
-  margin: $menu-margin;
-  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
-  // List items are table cell to allow for vertical alignment
-  > li {
+  li {
     @include disable-mouse-outline;
-    display: table-cell;
-    vertical-align: middle;
   }
 
-  // Reset line height to make the height of the overall item easier to calculate
-  > li > a {
-    display: block;
-    padding: $menu-item-padding;
+  a,
+  .button {
     line-height: 1;
+    text-decoration: none;
+    display: block;
+    padding: $menu-items-padding;
   }
 
   // Reset styles of inner elements
   input,
+  select,
   a,
   button {
     margin-bottom: 0;
   }
+
+  input {
+    display: inline-block;
+  }
 }
 
 /// Expands the items of a Menu, so each item is the same width.
-/// @param {Keyword|Number} $count [auto] - Number of items in the Menu. You can hardcode a number, or use `auto` to generate CSS that will adapt to the number of items inside the menu.
-@mixin menu-expand($count: auto) {
-  display: table;
-  width: 100%;
+@mixin menu-expand {
+  @if $global-flexbox {
+    li {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+  }
+  @else {
+    display: table;
+    width: 100%;
+
+    > li {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+}
+
+/// Align menu items.
+@mixin menu-align($alignment) {
+  @if $alignment == left {
+    @if $global-flexbox {
+      justify-content: flex-start;
+    }
+    @else {
+      text-align: $global-left;
+    }
+  }
+  @else if $alignment == right {
+    @if $global-flexbox {
+      li {
+        display: flex;
+        justify-content: flex-end;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
+      }
+
+      &.vertical li {
+        display: block;
+        text-align: $global-right;
+
+        .submenu li {
+          text-align: $global-right;
+        }
+      }
+    }
+    @else {
+      text-align: $global-right;
+
+      .submenu li {
+        text-align: $global-left;
+      }
 
-  > li {
-    @if $count == auto {
-      @include auto-width($menu-expand-max);
+      &.vertical {
+        .submenu li {
+          text-align: $global-right;
+        }
+      }
+    }
+  }
+  @else if $alignment == center {
+    @if $global-flexbox {
+      li {
+        display: flex;
+        justify-content: center;
+
+        .submenu li {
+          justify-content: flex-start;
+        }
+      }
     }
-    @else if type-of($count) == 'number' {
-      width: percentage(1 / $count);
+    @else {
+      text-align: center;
+
+      .submenu li {
+        text-align: $global-left;
+      }
     }
   }
 }
@@ -73,13 +177,25 @@ $menu-expand-max: 6 !default;
 /// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
 @mixin menu-direction($dir: horizontal) {
   @if $dir == horizontal {
-    > li {
-      display: table-cell;
+    @if $global-flexbox {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    @else {
+      li {
+        display: inline-block;
+      }
     }
   }
   @else if $dir == vertical {
-    > li {
-      display: block;
+    @if $global-flexbox {
+      flex-wrap: nowrap;
+      flex-direction: column;
+    }
+    @else {
+      li {
+        display: block;
+      }
     }
   }
   @else {
@@ -88,91 +204,176 @@ $menu-expand-max: 6 !default;
 }
 
 /// Creates a simple Menu, which has no padding or hover state.
-@mixin menu-simple {
+/// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
+/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
+@mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
+  @if $global-flexbox {
+    align-items: center;
+  }
+
+  li + li {
+    margin-#{$dir}: $margin;
+  }
+
   a {
     padding: 0;
-    margin-#{$global-right}: get-side($menu-item-padding, $global-right);
   }
 }
 
 /// Adds styles for a nested Menu, by adding `margin-left` to the menu.
-/// @param {Keyword|Number} $padding [auto] - Length of the margin.
-@mixin menu-nested($margin: $menu-margin-nested) {
-  margin-#{$global-left}: $margin;
+/// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
+/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
+@mixin menu-nested(
+  $margin: $menu-nested-margin,
+  $nested-alignment: left
+) {
+  @if $nested-alignment == right {
+    margin-#{$global-right}: $margin;
+    margin-#{$global-left}: 0;
+  }
+  @else {
+    margin-#{$global-right}: 0;
+    margin-#{$global-left}: $margin;
+  }
+
 }
 
-/// Adds support for icons to Menu items.
-/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
-/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
-@mixin menu-icons($position: side, $base: true) {
-  @if $base {
-    > li > a {
-      > img,
-      > i {
+/// Adds basic styles for icons in menus.
+@mixin menu-icons() {
+  @if $global-flexbox {
+    a {
+      display: flex;
+    }
+  }
+  @else {
+    img,
+    i,
+    svg {
+      vertical-align: middle;
+
+      + span {
         vertical-align: middle;
       }
+    }
+  }
+}
 
-      > span {
-        vertical-align: middle;
+/// Adds position classes for icons within a menu.
+@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
+  @if $position == left {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
+
+      img,
+      i,
+      svg {
+        margin-#{$global-right}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
       }
     }
   }
+  @else if $position == right {
+    li a {
+      @if $global-flexbox {
+        flex-flow: row nowrap;
+      }
 
-  @if $position == side {
-    > li > a {
-      > img,
-      > i {
-        display: inline-block;
-        margin-#{$global-right}: $menu-icon-spacing;
+      img,
+      i,
+      svg {
+        margin-#{$global-left}: $spacing;
+
+        @if not $global-flexbox {
+          display: inline-block;
+        }
       }
     }
   }
   @else if $position == top {
-    > li > a {
-      text-align: center;
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
 
-      > img,
-      > i {
-        display: block;
-        margin: 0 auto $menu-icon-spacing;
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: 0 auto $spacing;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
+      }
+    }
+  }
+  @else if $position == bottom {
+    li a {
+      @if $global-flexbox {
+        flex-flow: column nowrap;
+      }
+      @else {
+        text-align: center;
+      }
+
+      img,
+      i,
+      svg {
+        @if not $global-flexbox {
+          display: block;
+          margin: $spacing auto 0;
+        }
+        @else {
+          align-self: stretch;
+          margin-bottom: $spacing;
+          text-align: center;
+        }
       }
     }
   }
 }
 
 @mixin menu-text {
+  padding: $global-menu-padding;
+
   font-weight: bold;
-  color: inherit;
   line-height: 1;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding: $menu-item-padding;
+  color: inherit;
+}
+
+@mixin menu-state-active {
+  background: $menu-item-background-active;
+  color: $menu-item-color-active;
 }
 
 @mixin foundation-menu {
   .menu {
     @include menu-base;
-    @include menu-icons;
 
-    // Orientation
-    @include menu-direction(horizontal);
+    // Default orientation: horizontal
+    &, &.horizontal {
+      @include menu-direction(horizontal);
+    }
 
+    // Vertical orientation modifier
     &.vertical {
       @include menu-direction(vertical);
     }
 
-    @each $size in $breakpoint-classes {
-      @if $size != small {
-        @include breakpoint($size) {
-          &.#{$size}-horizontal {
-            @include menu-direction(horizontal);
-          }
-
-          &.#{$size}-vertical {
-            @include menu-direction(vertical);
-          }
-        }
-      }
+    // Even-width modifier for horizontal orientation
+    &.expanded {
+      @include menu-expand;
     }
 
     // Simple
@@ -180,34 +381,115 @@ $menu-expand-max: 6 !default;
       @include menu-simple;
     }
 
-    // Align right
-    &.align-#{$global-right} {
-      > li {
-        float: $global-right;
+    // Breakpoint specific versions
+    @include -zf-each-breakpoint($small: false) {
+      &.#{$-zf-size}-horizontal {
+        @include menu-direction(horizontal);
       }
-    }
 
-    // Even-width
-    &.expanded {
-      @include menu-expand;
+      &.#{$-zf-size}-vertical {
+        @include menu-direction(vertical);
+      }
 
-      > li:first-child:last-child {
-        width: 100%;
+      &.#{$-zf-size}-expanded {
+        @include menu-expand;
       }
-    }
 
-    // Vertical icons
-    &.icon-top {
-      @include menu-icons(top, $base: false);
+      &.#{$-zf-size}-simple {
+        @include menu-expand;
+      }
     }
 
     // Nesting
     &.nested {
       @include menu-nested;
     }
+
+    // Icon Base Styles
+    &.icons {
+      @include menu-icons;
+    }
+
+    // Backward Compatibility for active state
+    @if $menu-icons-back-compat {
+      &.icon-top,
+      &.icon-right,
+      &.icon-bottom,
+      &.icon-left {
+        @include menu-icons;
+      }
+    }
+
+    // Icon Left
+    &.icon-left {
+      @include menu-icon-position(left);
+    }
+
+    // Icon Right
+    &.icon-right {
+      @include menu-icon-position(right);
+    }
+
+    // Icon Top
+    &.icon-top {
+      @include menu-icon-position(top);
+    }
+
+    // Icon Bottom
+    &.icon-bottom {
+      @include menu-icon-position(bottom);
+    }
+
+    // Active state
+    .is-active > a {
+      @include menu-state-active;
+    }
+    
+    // Backward Compatibility for active state
+    @if $menu-state-back-compat {
+      .active > a {
+        @include menu-state-active;
+      }
+    }
+
+    // Align left
+    &.align-#{$global-left} {
+      @include menu-align(left);
+    }
+
+    // Align right
+    &.align-#{$global-right} {
+      @include menu-align(right);
+
+      .nested {
+        @include menu-nested($nested-alignment: right);
+      }
+    }
+
+    // Align center
+    &.align-center {
+      @include menu-align(center);
+    }
+
+    .menu-text {
+      @include menu-text;
+    }
+  }
+
+  @if $menu-centered-back-compat {
+    .menu-centered {
+      > .menu {
+        @if $global-flexbox {
+          justify-content: center;
+        }
+        
+        @include menu-align(center);
+      }
+    }
   }
 
-  .menu-text {
-    @include menu-text;
+  // Prevent FOUC when using the Responsive Menu plugin
+  .no-js [data-responsive-menu] ul {
+    display: none;
   }
 }