locomotivecms_wagon 2.4.0.rc2 → 2.4.0

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

@@ -14,22 +14,26 @@ $tab-margin: 0 !default;
 /// @type Color
 $tab-background: $white !default;
 
-/// active background color of a tab bar.
+/// Font color of tab item.
 /// @type Color
-$tab-background-active: $light-gray !default;
+$tab-color: $primary-color !default;
 
-/// Default border color of tab content.
+/// Active background color of a tab bar.
 /// @type Color
-$tab-border: $light-gray !default;
+$tab-background-active: $light-gray !default;
 
-/// Default text color for items in a Menu.
+/// Active font color of tab item.
 /// @type Color
-$tab-item-color: foreground($tab-background, $primary-color) !default;
+$tab-active-color: $primary-color !default;
+
+/// Font size of tab items.
+/// @type Number
+$tab-item-font-size: rem-calc(12) !default;
 
 /// Default background color on hover for items in a Menu.
 $tab-item-background-hover: $white !default;
 
-/// Default padding of a a tab item.
+/// Default padding of a tab item.
 /// @type Number
 $tab-item-padding: 1.25rem 1.5rem !default;
 
@@ -47,91 +51,146 @@ $tab-content-border: $light-gray !default;
 
 /// Default text color of tab content.
 /// @type Color
-$tab-content-color: foreground($tab-background, $primary-color) !default;
+$tab-content-color: $body-font-color !default;
 
 /// Default padding for tab content.
 /// @type Number | List
 $tab-content-padding: 1rem !default;
 
-@mixin foundation-tabs {
-  .tabs {
-    @include clearfix;
-    margin: $tab-margin;
-    list-style-type: none;
-    background: $tab-background;
-    border: 1px solid $tab-content-border;
-
-    // Simple
-    &.simple {
-      > li > a {
-        padding: 0;
-
-        &:hover {
-          background: transparent;
-        }
-      }
+/// Adds styles for a tab container. Apply this to a `<ul>`.
+@mixin tabs-container (
+  $margin: $tab-margin,
+  $background: $tab-background,
+  $border-color: $tab-content-border
+) {
+  @include clearfix;
+  margin: $margin;
+  border: 1px solid $border-color;
+  background: $background;
+  list-style-type: none;
+}
+
+/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
+@mixin tabs-container-vertical {
+  > li {
+    display: block;
+    float: none;
+    width: auto;
+  }
+}
+
+/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
+@mixin tabs-title (
+  $padding: $tab-item-padding,
+  $font-size: $tab-item-font-size,
+  $color: $tab-color,
+  $color-active: $tab-active-color,
+  $background-hover: $tab-item-background-hover,
+  $background-active: $tab-background-active
+) {
+  float: #{$global-left};
+
+  > a {
+    display: block;
+    padding: $padding;
+    font-size: $font-size;
+    line-height: 1;
+    color: $color;
+
+    &:hover {
+      background: $background-hover;
+      color: scale-color($color, $lightness: -14%);
     }
 
-    // Vertical
-    &.vertical {
-      > li {
-        width: auto;
-        float: none;
-        display: block;
-      }
+    &:focus,
+    &[aria-selected='true'] {
+      background: $background-active;
+      color: $color-active;
     }
+  }
+}
+
+/// Adds styles for the wrapper that surrounds a tab group's content panes.
+@mixin tabs-content (
+  $background: $tab-content-background,
+  $color: $tab-content-color,
+  $border-color: $tab-content-border
+) {
+  border: 1px solid $border-color;
+  border-top: 0;
+  background: $background;
+  color: $color;
+  transition: all 0.5s ease;
+}
+
+/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
+@mixin tabs-content-vertical (
+  $border-color: $tab-content-border
+) {
+  border: 1px solid $border-color;
+  border-#{$global-left}: 0;
+}
+
+/// Adds styles for an individual tab content panel within the tab content container.
+@mixin tabs-panel (
+  $padding: $tab-content-padding
+) {
+  display: none;
+  padding: $padding;
+
+  &.is-active {
+    display: block;
+  }
+}
 
-    // Primary color
-    &.primary {
-      background: $primary-color;
+@mixin foundation-tabs {
+  .tabs {
+    @include tabs-container;
+  }
+
+  // Vertical
+  .tabs.vertical {
+    @include tabs-container-vertical;
+  }
 
-      > li > a {
-        color: foreground($primary-color);
+  // Simple
+  .tabs.simple {
+    > li > a {
+      padding: 0;
 
-        &:hover,
-        &:focus {
-          background: smart-scale($primary-color);
-        }
+      &:hover {
+        background: transparent;
       }
     }
   }
 
-  .tabs-title {
-    float: #{$global-left};
+  // Primary color
+  .tabs.primary {
+    background: $primary-color;
 
-    > a {
-      display: block;
-      padding: $tab-item-padding;
-      line-height: 1;
-      font-size: 12px;
-      color: $tab-item-color;
+    > li > a {
+      color: color-pick-contrast($primary-color);
 
       &:hover,
-      &:focus,
-      &[aria-selected="true"] {
-        background: $tab-background-active;
+      &:focus {
+        background: smart-scale($primary-color);
       }
     }
   }
 
+  .tabs-title {
+    @include tabs-title;
+  }
+
   .tabs-content {
-    background: $tab-content-background;
-    transition: all 0.5s ease;
-    border: 1px solid $tab-content-border;
-    border-top: 0;
-
-    &.vertical {
-      border: 1px solid $tab-content-border;
-      border-#{$global-left}: 0;
-    }
+    @include tabs-content;
   }
 
-  .tabs-panel {
-    display: none;
-    padding: $tab-content-padding;
+  .tabs-content.vertical {
+    @include tabs-content-vertical;
+  }
 
-    &.is-active {
-      display: block;
-    }
+  .tabs-panel {
+    @include tabs-panel;
   }
 }

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

@@ -32,23 +32,36 @@ $thumbnail-radius: $global-radius !default;
 
 /// Adds thumbnail styles to an element.
 @mixin thumbnail {
+  display: inline-block;
+  max-width: 100%;
+  margin-bottom: $thumbnail-margin-bottom;
+
   border: $thumbnail-border;
+  border-radius: $thumbnail-radius;
   box-shadow: $thumbnail-shadow;
-  display: inline-block;
+
   line-height: 0;
-  max-width: 100%;
+}
+
+@mixin thumbnail-link {
   transition: $thumbnail-transition;
-  border-radius: $thumbnail-radius;
-  margin-bottom: $thumbnail-margin-bottom;
 
   &:hover,
   &:focus {
     box-shadow: $thumbnail-shadow-hover;
   }
+
+  image {
+    box-shadow: none;
+  }
 }
 
 @mixin foundation-thumbnail {
   .thumbnail {
     @include thumbnail;
   }
+
+  a.thumbnail {
+    @include thumbnail-link;
+  }
 }

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

@@ -6,39 +6,79 @@
 /// @group title-bar
 ////
 
+/// Background color of a title bar.
+/// @type Color
+$titlebar-background: $black !default;
+
+/// Color of text inside a title bar.
+/// @type Color
+$titlebar-color: $white !default;
+
+/// Padding inside a title bar.
+/// @type Length
+$titlebar-padding: 0.5rem !default;
+
+/// Font weight of text inside a title bar.
+/// @type Weight
+$titlebar-text-font-weight: bold !default;
+
+/// Color of menu icons inside a title bar.
+/// @type Color
+$titlebar-icon-color: $white !default;
+
+/// Color of menu icons inside a title bar on hover.
+/// @type Color
+$titlebar-icon-color-hover: $medium-gray !default;
+
+/// Spacing between the menu icon and text inside a title bar.
+/// @type Length
+$titlebar-icon-spacing: 0.25rem !default;
+
 @mixin foundation-title-bar {
   .title-bar {
-    @include clearfix;
-    background: $black;
-    color: $white;
-    padding: 0.5rem;
+    padding: $titlebar-padding;
+    background: $titlebar-background;
+    color: $titlebar-color;
+
+    @if $global-flexbox {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    @else {
+      @include clearfix;
+    }
 
     .menu-icon {
-      margin-#{$global-left}: 0.25rem;
-      margin-#{$global-right}: 0.5rem;
+      margin-#{$global-left}: $titlebar-icon-spacing;
+      margin-#{$global-right}: $titlebar-icon-spacing;
     }
   }
 
-  .title-bar-left {
-    float: left;
+  @if $global-flexbox {
+    .title-bar-left,
+    .title-bar-right {
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
+    }
+
+    .title-bar-right {
+      text-align: right;
+    }
   }
+  @else {
+    .title-bar-left {
+      float: left;
+    }
 
-  .title-bar-right {
-    float: right;
-    text-align: right;
+    .title-bar-right {
+      float: right;
+      text-align: right;
+    }
   }
 
   .title-bar-title {
-    font-weight: bold;
-    vertical-align: middle;
     display: inline-block;
-  }
-
-  .menu-icon {
-    @include hamburger($color: white, $color-hover: $medium-gray);
-  }
-
-  .menu-icon.dark {
-    @include hamburger;
+    vertical-align: middle;
+    font-weight: $titlebar-text-font-weight;
   }
 }

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

@@ -6,18 +6,34 @@
 /// @group tooltip
 ////
 
+/// Default cursor of the defined term.
+/// @type Keyword
+$has-tip-cursor: help !default;
+
+/// Default font weight of the defined term.
+/// @type Keyword | Number
+$has-tip-font-weight: $global-weight-bold !default;
+
+/// Default border bottom of the defined term.
+/// @type List
+$has-tip-border-bottom: dotted 1px $dark-gray !default;
+
 /// Default color of the tooltip background.
 /// @type Color
 $tooltip-background-color: $black !default;
 
 /// Default color of the tooltip font.
 /// @type Color
-$tooltip-color: $white;
+$tooltip-color: $white !default;
 
 /// Default padding of the tooltip background.
 /// @type Number
 $tooltip-padding: 0.75rem !default;
 
+/// Default max width for tooltips.
+/// @type Number
+$tooltip-max-width: 10rem !default;
+
 /// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
 /// @type Number
 $tooltip-font-size: $small-font-size !default;
@@ -30,43 +46,46 @@ $tooltip-pip-width: 0.75rem !default;
 /// @type Number
 $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
 
-/// Default pip offset for tooltips. This controls how far the pip is indented from the left edge of the tooltip.
-/// @type Number
-$tooltip-pip-offset: 1.25rem !default;
-
 /// Default radius for tooltips.
 /// @type Number
 $tooltip-radius: $global-radius !default;
 
 @mixin has-tip {
-  border-bottom: dotted 1px $dark-gray;
-  font-weight: bold;
   position: relative;
   display: inline-block;
 
-  &:hover {
-    cursor: help;
-  }
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
+  cursor: $has-tip-cursor;
 }
 
 @mixin tooltip {
-  background-color: $tooltip-background-color;
-  color: $tooltip-color;
-  font-size: $tooltip-font-size;
-  padding: $tooltip-padding;
   position: absolute;
-  z-index: 10;
   top: calc(100% + #{$tooltip-pip-height});
-  max-width: 10rem !important;
+  z-index: 1200;
+
+  max-width: $tooltip-max-width;
+  padding: $tooltip-padding;
+
   border-radius: $tooltip-radius;
-  // visibility: hidden;
+  background-color: $tooltip-background-color;
+  font-size: $tooltip-font-size;
+  color: $tooltip-color;
 
   &::before {
-    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
-    bottom: 100%;
     position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+  }
+
+  &.bottom {
+    &::before {
+      @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+      bottom: 100%;
+    }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &.top {
@@ -75,13 +94,21 @@ $tooltip-radius: $global-radius !default;
       top: 100%;
       bottom: auto;
     }
+
+    &.align-center::before {
+      left: 50%;
+      transform: translateX(-50%);
+    }
   }
 
   &.left {
     &::before {
       @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
-      bottom: auto;
       left: 100%;
+    }
+
+    &.align-center::before {
+      bottom: auto;
       top: 50%;
       transform: translateY(-50%);
     }
@@ -90,13 +117,36 @@ $tooltip-radius: $global-radius !default;
   &.right {
     &::before {
       @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
-      bottom: auto;
-      left: auto;
       right: 100%;
+      left: auto;
+    }
+
+    &.align-center::before {
+      bottom: auto;
       top: 50%;
       transform: translateY(-50%);
     }
   }
+
+  &.align-top::before {
+    bottom: auto;
+    top: 10%;
+  }
+
+  &.align-bottom::before {
+    bottom: 10%;
+    top: auto;
+  }
+
+  &.align-left::before {
+    left: 10%;
+    right: auto;
+  }
+
+  &.align-right::before {
+    left: auto;
+    right: 10%;
+  }
 }
 
 @mixin foundation-tooltip {