locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/components/_dropdown-menu.scss

@@ -10,100 +10,184 @@
 /// @type Boolean
 $dropdownmenu-arrows: true !default;
 
+/// Sets dropdown menu arrow color if arrow is used.
+/// @type Color
+$dropdownmenu-arrow-color: $anchor-color !default;
+
+/// Sets dropdown menu arrow size if arrow is used.
+/// @type Length
+$dropdownmenu-arrow-size: 6px !default;
+
+/// Sets dropdown menu arrow padding for aligning the arrow correctly.
+/// @type Length
+$dropdownmenu-arrow-padding: 1.5rem !default;
+
 /// Minimum width of dropdown sub-menus.
 /// @type Length
 $dropdownmenu-min-width: 200px !default;
 
-/// Background color for dropdowns.
+/// Background color for top level items.
 /// @type Color
 $dropdownmenu-background: $white !default;
 
-/// Border for dropdown panes.
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-submenu-background: $dropdownmenu-background !default;
+
+/// Padding for top level items.
+/// @type Number
+$dropdownmenu-padding: $global-menu-padding !default;
+
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0 !default;
+
+/// Padding for sub-menu items.
+/// @type Number
+$dropdownmenu-submenu-padding: $dropdownmenu-padding !default;
+
+/// Border for dropdown sub-menus.
 /// @type List
-$dropdown-border: 1px solid $medium-gray !default;
+$dropdownmenu-border: 1px solid $medium-gray !default;
 
-@mixin foundation-dropdown-menu {
-  .dropdown.menu {
-    .has-submenu {
-      position: relative;
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
 
-      a::after {
-        float: right;
-        margin-top: 3px;
-        margin-left: 10px;
-      }
+/// Text color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-color-active: get-color(primary) !default;
 
-      @if $dropdownmenu-arrows {
-        &.is-down-arrow a {
-          padding-right: 1.5rem;
-          position: relative;
-        }
-        &.is-down-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, down);
-          position: absolute;
-          top: 12px;
-          right: 5px;
-        }
-        &.is-left-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, left);
-          float: left;
-          margin-left: 0;
-          margin-right: 10px;
-        }
-        &.is-right-arrow > a::after {
-          @include css-triangle(5px, $anchor-color, right);
-        }
-      }
+/// Background color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-background-active: transparent !default;
+
+@mixin zf-dropdown-left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+  }
+
+  &.opens-left > a::after {
+    right: auto;
+    left: 5px;
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
+  }
 
-      &.is-left-arrow.opens-inner .submenu{
+  &.opens-right > a::after {
+    @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
+  }
+}
+
+@mixin dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      > .is-dropdown-submenu {
+        top: 100%;
         right: 0;
         left: auto;
       }
-      &.is-right-arrow.opens-inner .submenu{
-        left: 0;
-        right: auto;
-      }
-      &.opens-inner .submenu {
+    }
+
+    > li.opens-right {
+      > .is-dropdown-submenu {
         top: 100%;
+        right: auto;
+        left: 0;
       }
     }
 
-    .submenu {
-      display: none;
-      position: absolute;
-      top: 0;
-      left: 100%;
-      min-width: $dropdownmenu-min-width;
-      z-index: 1;
-      background: $dropdownmenu-background;
-      border: $dropdown-border;
+    @if $dropdownmenu-arrows {
+      > li.is-dropdown-submenu-parent > a {
+        position: relative;
+        padding-#{$global-right}: $dropdownmenu-arrow-padding;
+      }
 
-      > li {
-        width: 100%;
+      > li.is-dropdown-submenu-parent > a::after {
+        @include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
+        #{$global-right}: 5px;
+        #{$global-left}: auto;
+        margin-top: -1 * ($dropdownmenu-arrow-size / 2);
+      }
+    }
+  }
+  @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
       }
 
-      &.first-sub {
-        top: 100%;
-        left: 0;
-        right: auto;
+      &.opens-left {
+        > .is-dropdown-submenu {
+          right: 100%;
+          left: auto;
+          top: 0;
+        }
       }
 
-      &:not(.js-dropdown-nohover) > .has-submenu:hover > &,
-      &.js-dropdown-active {
-        display: block;
+      &.opens-right {
+        > .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
       }
     }
+  }
+  @else {
+    @warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
 
-    .has-submenu.opens-left .submenu {
-      left: auto;
-      right: 100%;
+@mixin foundation-dropdown-menu {
+  .dropdown.menu {
+    @include dropdown-menu-direction(horizontal);
+
+    a {
+      @include disable-mouse-outline;
+      padding: $dropdownmenu-padding;
+    }
+
+    // Active state
+    .is-active > a {
+      background: $dropdown-menu-item-background-active;
+      color: $dropdown-menu-item-color-active;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
+    &.vertical {
+      @include dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
+        }
+      }
     }
 
     &.align-right {
-      .submenu.first-sub {
+      .is-dropdown-submenu.first-sub {
         top: 100%;
-        left: auto;
         right: 0;
+        left: auto;
       }
     }
   }
@@ -114,10 +198,77 @@ $dropdown-border: 1px solid $medium-gray !default;
     &.align-right {
       float: right;
     }
+  }
+
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      #{$global-left}: auto;
+      margin-top: -1 * $dropdownmenu-arrow-size;
+    }
+
+    &.opens-inner > .is-dropdown-submenu {
 
-    > li .submenu {
-      top: 0;
+      top: 100%;
+      @if $global-text-direction == 'rtl' {
+        right: auto;
+      }
+      @else {
+        left: auto;
+      }
+    }
+
+    &.opens-left > .is-dropdown-submenu {
+      right: 100%;
+      left: auto;
+    }
+
+    &.opens-right > .is-dropdown-submenu {
+      right: auto;
       left: 100%;
     }
   }
+
+  .is-dropdown-submenu {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    z-index: 1;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
+    border: $dropdownmenu-border;
+    background: $dropdownmenu-submenu-background;
+
+    .dropdown & a {
+      padding: $dropdownmenu-submenu-padding;
+    }
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include zf-dropdown-left-right-arrows;
+      }
+    }
+
+    @if (type-of($dropdownmenu-border-width) == 'number') {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
+
+    > li {
+      width: 100%;
+    }
+
+    // [TODO] Cut back specificity
+    //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
+    &.js-dropdown-active {
+      display: block;
+    }
+  }
 }

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

@@ -10,13 +10,17 @@
 /// @type List
 $dropdown-padding: 1rem !default;
 
+/// Background for dropdown panes.
+/// @type Color
+$dropdown-background: $body-background !default;
+
 /// Border for dropdown panes.
 /// @type List
 $dropdown-border: 1px solid $medium-gray !default;
 
 /// Font size for dropdown panes.
 /// @type List
-$dropdown-font-size: 16rem !default;
+$dropdown-font-size: 1rem !default;
 
 /// Width for dropdown panes.
 /// @type Number
@@ -36,18 +40,29 @@ $dropdown-sizes: (
 
 /// Applies styles for a basic dropdown.
 @mixin dropdown-container {
-  background-color: $body-background;
-  border: $dropdown-border;
-  display: block;
-  padding: $dropdown-padding;
   position: absolute;
-  visibility: hidden;
-  width: 300px;
   z-index: 10;
+
+  width: $dropdown-width;
+  padding: $dropdown-padding;
+
+  visibility: hidden;
+  display: none;
+  border: $dropdown-border;
   border-radius: $dropdown-radius;
+  background-color: $dropdown-background;
+
+  font-size: $dropdown-font-size;
+
+
+  // Allow an intermittent state to do positioning before making visible.
+  &.is-opening {
+    display: block;
+  }
 
   &.is-open {
     visibility: visible;
+    display: block;
   }
 }
 

data/generators/foundation/public/stylesheets/foundation6/components/_flex-video.scss

@@ -1,68 +1 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group flex-video
-////
-
-/// Padding above a flex video container.
-/// @type Number
-$flexvideo-padding-top: rem-calc(25) !default;
-
-/// Margin below a flex video container.
-/// @type Number
-$flexvideo-margin-bottom: rem-calc(16) !default;
-
-/// Padding used to create a 4:3 aspect ratio.
-/// @type Number
-$flexvideo-ratio: 4 by 3 !default;
-
-/// Padding used to create a 16:9 aspect ratio.
-/// @type Number
-$flexvideo-ratio-widescreen: 16 by 9 !default;
-
-/// Creates a percentage height that can be used as padding in a flex video container.
-/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
-/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
-@function flex-video($ratio) {
-  $w: nth($ratio, 1);
-  $h: nth($ratio, 3);
-  @return $h / $w * 100%;
-}
-
-/// Creates a flex video container.
-/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
-@mixin flex-video($ratio: $flexvideo-ratio) {
-  position: relative;
-  height: 0;
-  padding-top: $flexvideo-padding-top;
-  padding-bottom: flex-video($ratio);
-  margin-bottom: $flexvideo-margin-bottom;
-  overflow: hidden;
-
-  iframe,
-  object,
-  embed,
-  video {
-    position: absolute;
-    top: 0;
-    #{$global-left}: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@mixin foundation-flex-video {
-  .flex-video {
-    @include flex-video;
-
-    &.widescreen {
-      padding-bottom: flex-video($flexvideo-ratio-widescreen);
-    }
-
-    &.vimeo {
-      padding-top: 0;
-    }
-  }
-}
+@import 'responsive-embed';

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

@@ -0,0 +1,117 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group Flexbox Utilities
+////
+//
+/// Default value for the count of source ordering`
+/// @type Number
+$flex-source-ordering-count: 6 !default;
+
+/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+/// @type Boolean
+$flexbox-responsive-breakpoints: true !default;
+
+@mixin flex-helpers {
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
+  @if ($flexbox-responsive-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-flex-container {
+            @include flex;
+          }
+
+          .#{$size}-flex-child-auto {
+            flex: 1 1 auto;
+          }
+
+          .#{$size}-flex-child-grow {
+            flex: 1 0 auto;
+          }
+
+          .#{$size}-flex-child-shrink {
+            flex: 0 1 auto;
+          }
+
+          @each $dir, $prop in $-zf-flex-direction {
+            .#{$size}-flex-dir-#{$dir} {
+              @include flex-direction($prop);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin foundation-flex-classes {
+  // Horizontal alignment using justify-content
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
+    .align-#{$hdir} {
+      @include flex-align($x: $hdir);
+    }
+  }
+  
+  // Horizontal alignment Specifically for Vertical Menu
+  @each $hdir, $prop in map-remove($-zf-flex-justify, 'left', 'justify', 'spaced') {
+    .align-#{$hdir} {
+      &.vertical.menu > li > a { 
+        @include flex-align($x: $hdir);
+      }
+    }
+  }
+
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
+  }
+
+  // Central alignment of content
+  .align-center-middle {
+    @include flex-align($x: center, $y: middle);
+    align-content: center;
+  }
+
+  // Source ordering
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $flex-source-ordering-count {
+      .#{$-zf-size}-order-#{$i} {
+        @include flex-order($i);
+      }
+    }
+  }
+
+  // Vanilla Flexbox Helpers
+  @include flex-helpers;
+}