locomotivecms_wagon 2.4.0.rc2 → 2.4.0

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

@@ -12,46 +12,164 @@ $topbar-padding: 0.5rem !default;
 
 /// Background color for the top bar. This color also cascades to menus within the top bar.
 /// @type Color
-$topbar-background: #eee !default;
+$topbar-background: $light-gray !default;
 
-/// Color for links inside a top bar menu.
+/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
 /// @type Color
-$topbar-link-color: #fff !default;
+$topbar-submenu-background: $topbar-background !default;
 
-/// Width of `<input>` elements inside the top bar.
+/// Spacing for the top bar title.
+/// @type Number
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
+
+/// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
 $topbar-input-width: 200px !default;
 
+/// Breakpoint at which top bar switches from mobile to desktop view.
+/// @type Breakpoint
+$topbar-unstack-breakpoint: medium !default;
+
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
-  @include clearfix;
+  @if $global-flexbox {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+  @else {
+    @include clearfix;
+  }
+
   padding: $topbar-padding;
 
-  &, ul {
+  &,
+  ul {
     background-color: $topbar-background;
   }
 
+  // Check if $topbar-background is differnt from $topbar-background-submenu
+  @if ($topbar-background != $topbar-submenu-background) {
+    ul ul {
+      background-color: $topbar-submenu-background;
+    }
+  }
+
+  // Restrain width of inputs by default to make them easier to arrange
   input {
-    width: $topbar-input-width;
+    max-width: $topbar-input-width;
     margin-#{$global-right}: 1rem;
   }
+
+  // The above styles shouldn't apply to input group fields
+  .input-group-field {
+    width: 100%;
+    margin-#{$global-right}: 0;
+  }
+
+  input.button { // sass-lint:disable-line no-qualifying-elements
+    width: auto;
+  }
+}
+
+/// Makes sections of a top bar stack on top of each other.
+@mixin top-bar-stacked {
+  @if $global-flexbox {
+    flex-wrap: wrap;
+
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  }
+  @else {
+    // Sub-sections
+    .top-bar-left,
+    .top-bar-right {
+      width: 100%;
+    }
+  }
+}
+
+/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
+@mixin top-bar-unstack {
+  @if $global-flexbox {
+    flex-wrap: nowrap;
+
+    .top-bar-left {
+      flex: 1 1 auto;
+      margin-right: auto;
+    }
+
+    .top-bar-right {
+      flex: 0 1 auto;
+      margin-left: auto;
+    }
+  }
+  @else {
+    .top-bar-left,
+    .top-bar-right {
+      width: auto;
+    }
+  }
 }
 
 @mixin foundation-top-bar {
   // Top bar container
   .top-bar {
     @include top-bar-container;
+
+    // Stack on small screens by default
+    @include top-bar-stacked;
+
+    @include breakpoint($topbar-unstack-breakpoint) {
+      @include top-bar-unstack;
+    }
+
+    // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        &.stacked-for-#{$size} {
+          @include breakpoint($size down) {
+            @include top-bar-stacked;
+          }
+        }
+      }
+    }
   }
 
   // Sub-sections
-  // Stack on small screens
-  @include breakpoint(medium) {
+  @if $global-flexbox {
+    .top-bar-title {
+      flex: 0 0 auto;
+      margin: $topbar-title-spacing;
+    }
+
+    .top-bar-left,
+    .top-bar-right {
+      flex: 0 0 auto;
+    }
+  }
+  @else {
+    .top-bar-title {
+      display: inline-block;
+      float: left;
+      padding: $topbar-title-spacing;
+
+      .menu-icon {
+        bottom: 2px;
+      }
+    }
+
     .top-bar-left {
       float: left;
     }
 
     .top-bar-right {
-      float: right
+      float: right;
     }
   }
 }

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

@@ -6,7 +6,7 @@
 /// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
 @mixin show-for($size) {
   $size: map-get($breakpoints, $size);
-  $size: -zf-bp-to-em($size) - (1/16);
+  $size: -zf-bp-to-em($size) - (1 / 16);
 
   @include breakpoint($size down) {
     display: none !important;
@@ -20,9 +20,9 @@
   $upper-bound-size: -zf-map-next($breakpoints, $size);
 
   // more often than not this will be correct, just one time round the loop it won't so set in scope here
-  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1/16);
+  $lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
   // test actual lower-bound-size, if 0 set it to 0em
-  @if $lower-bound-size == 0 {
+  @if strip-unit($lower-bound-size) == 0 {
     $lower-bound: -zf-bp-to-em($lower-bound-size);
   }
 
@@ -33,6 +33,7 @@
   }
   @else {
     $upper-bound: -zf-bp-to-em($upper-bound-size);
+
     @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
       display: none !important;
     }
@@ -68,7 +69,7 @@
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
-    @if $size != small {
+    @if $size != $-zf-zero-breakpoint {
       .hide-for-#{$size} {
         @include hide-for($size);
       }
@@ -88,7 +89,7 @@
   }
 
   // Screen reader visibility classes
-  // Need a "hide-for-sr" class? Add aria-hidden="true" to the element
+  // Need a "hide-for-sr" class? Add aria-hidden='true' to the element
   .show-for-sr,
   .show-on-focus {
     @include element-invisible;

data/generators/foundation/public/stylesheets/foundation6/forms/_checkbox.scss

@@ -7,30 +7,35 @@
 ////
 
 @mixin foundation-form-checkbox {
-  [type="file"],
-  [type="checkbox"],
-  [type="radio"] {
+  [type='file'],
+  [type='checkbox'],
+  [type='radio'] {
     margin: 0 0 $form-spacing;
   }
 
   // Styles for input/label siblings
-  [type="checkbox"] + label,
-  [type="radio"] + label {
+  [type='checkbox'] + label,
+  [type='radio'] + label {
     display: inline-block;
+    vertical-align: baseline;
+
     margin-#{$global-left}: $form-spacing * 0.5;
     margin-#{$global-right}: $form-spacing;
     margin-bottom: 0;
-    vertical-align: baseline;
+
+    &[for] {
+      cursor: pointer;
+    }
   }
 
   // Styles for inputs inside labels
-  label > [type="checkbox"],
-  label > [type="label"] {
+  label > [type='checkbox'],
+  label > [type='radio'] {
     margin-#{$global-right}: $form-spacing * 0.5;
   }
 
   // Normalize file input width
-  [type="file"] {
+  [type='file'] {
     width: 100%;
   }
 }

data/generators/foundation/public/stylesheets/foundation6/forms/_error.scss

@@ -16,15 +16,15 @@ $abide-labels: true !default;
 
 /// Background color to use for invalid text inputs.
 /// @type Color
-$input-background-invalid: $alert-color !default;
+$input-background-invalid: get-color(alert) !default;
 
 /// Color to use for labels of invalid inputs.
 /// @type Color
-$form-label-color-invalid: $alert-color !default;
+$form-label-color-invalid: get-color(alert) !default;
 
 /// Default font color for form error text.
 /// @type Color
-$input-error-color: $alert-color !default;
+$input-error-color: get-color(alert) !default;
 
 /// Default font size for form error text.
 /// @type Number
@@ -35,13 +35,19 @@ $input-error-font-size: rem-calc(12) !default;
 $input-error-font-weight: $global-weight-bold !default;
 
 /// Styles the background and border of an input field to have an error state.
+///
 /// @param {Color} $background [$alert-color] - Color to use for the background and border.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
 @mixin form-input-error(
-  $background: $alert-color
+  $background: $input-background-invalid,
+  $background-lighten: 10%
 ) {
   &:not(:focus) {
-    background-color: rgba($background, 0.1);
     border-color: $background;
+    background-color: mix($background, $white, $background-lighten);
+    &::placeholder {
+      color: $background;
+    }
   }
 }
 
@@ -50,6 +56,7 @@ $input-error-font-weight: $global-weight-bold !default;
   display: none;
   margin-top: $form-spacing * -0.5;
   margin-bottom: $form-spacing;
+
   font-size: $input-error-font-size;
   font-weight: $input-error-font-weight;
   color: $input-error-color;

data/generators/foundation/public/stylesheets/foundation6/forms/_fieldset.scss

@@ -23,27 +23,27 @@ $fieldset-margin: rem-calc(18 0) !default;
 $legend-padding: rem-calc(0 3) !default;
 
 @mixin fieldset {
-  border: $fieldset-border;
-  padding: $fieldset-padding;
   margin: $fieldset-margin;
+  padding: $fieldset-padding;
+  border: $fieldset-border;
 
   legend {
     // Covers up the fieldset's border to create artificial padding
-    background: $body-background;
-    padding: $legend-padding;
     margin: 0;
     margin-#{$global-left}: rem-calc(-3);
+    padding: $legend-padding;
   }
 }
 
 @mixin foundation-form-fieldset {
   fieldset {
-    border: 0;
-    padding: 0;
     margin: 0;
+    padding: 0;
+    border: 0;
   }
 
   legend {
+    max-width: 100%;
     margin-bottom: $form-spacing * 0.5;
   }
 

data/generators/foundation/public/stylesheets/foundation6/forms/_forms.scss

@@ -10,15 +10,17 @@
 /// @type Number
 $form-spacing: rem-calc(16) !default;
 
-@import
-  'text',
-  'checkbox',
-  'label',
-  'help-text',
-  'input-group',
-  'fieldset',
-  'select',
-  'error';
+@import 'text';
+@import 'checkbox';
+@import 'label';
+@import 'help-text';
+@import 'input-group';
+@import 'fieldset';
+@import 'select';
+@import 'range';
+@import 'progress';
+@import 'meter';
+@import 'error';
 
 @mixin foundation-forms {
   @include foundation-form-text;

data/generators/foundation/public/stylesheets/foundation6/forms/_help-text.scss

@@ -8,7 +8,7 @@
 
 /// Default color for help text.
 /// @type Color
-$helptext-color: #333 !default;
+$helptext-color: $black !default;
 
 /// Default font size for help text.
 /// @type Number

data/generators/foundation/public/stylesheets/foundation6/forms/_input-group.scss

@@ -22,29 +22,59 @@ $input-prefix-border: 1px solid $medium-gray !default;
 $input-prefix-padding: 1rem !default;
 
 @mixin foundation-form-prepostfix {
+  $height: ($input-font-size + $form-spacing * 1.5);
+
   .input-group {
-    display: table;
+    display: if($global-flexbox, flex, table);
     width: 100%;
     margin-bottom: $form-spacing;
+
+    @if $global-flexbox {
+      align-items: stretch;
+    }
+
+    > :first-child {
+      border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);
+    }
+
+    > :last-child {
+      > * {
+        border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);
+      }
+    }
   }
 
   %input-group-child {
-    display: table-cell;
     margin: 0;
-    vertical-align: middle;
+    white-space: nowrap;
+
+    @if not $global-flexbox {
+      display: table-cell;
+      vertical-align: middle;
+    }
   }
 
   .input-group-label {
     @extend %input-group-child;
-    text-align: center;
-    width: 1%;
-    height: 100%;
     padding: 0 $input-prefix-padding;
+    border: $input-prefix-border;
     background: $input-prefix-background;
+
     color: $input-prefix-color;
-    border: $input-prefix-border;
+    text-align: center;
+    white-space: nowrap;
+
+    @if $global-flexbox {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
 
-    @if hasvalue($input-prefix-border) {
+    @if has-value($input-prefix-border) {
       &:first-child {
         border-#{$global-right}: 0;
       }
@@ -57,14 +87,56 @@ $input-prefix-padding: 1rem !default;
 
   .input-group-field {
     @extend %input-group-child;
+    border-radius: 0;
+
+    @if $global-flexbox {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+      height: auto;
+      min-width: 0;
+    }
+    @else {
+      height: $height;
+    }
   }
 
   .input-group-button {
     @extend %input-group-child;
-    height: 100%;
     padding-top: 0;
     padding-bottom: 0;
     text-align: center;
-    width: 1%;
+
+    @if $global-flexbox {
+      display: flex;
+      flex: 0 0 auto;
+    }
+    @else {
+      width: 1%;
+      height: 100%;
+    }
+
+    a,
+    input,
+    button,
+    label {
+      @extend %input-group-child;
+
+      @if $global-flexbox {
+        height: auto;
+        align-self: stretch;
+      }
+      @else {
+        height: $height;
+      }
+      padding-top: 0;
+      padding-bottom: 0;
+      font-size: $input-font-size;
+    }
+  }
+
+  // Specificity bump needed to prevent override by buttons
+  @if not $global-flexbox {
+      .input-group .input-group-button {
+          display: table-cell;
+      }
   }
 }