foundation-rails 6.2.4.0 → 6.3.0.0

data/vendor/assets/scss/components/_table.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-// scss-lint:disable MergeableSelector, QualifyingElement
+// sass-lint:disable force-element-nesting, no-qualifying-elements
 
 ////
 /// @group table
@@ -36,6 +36,10 @@ $table-row-hover: darken($table-background, $table-hover-scale) !default;
 /// @type List
 $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
 
+/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
+/// @type Boolean
+$table-is-striped: true !default;
+
 /// Default background color for striped rows.
 /// @type Color
 $table-striped-background: smart-scale($table-background, $table-color-scale) !default;
@@ -72,7 +76,34 @@ $table-foot-font-color: $body-font-color !default;
 /// @type Boolean
 $show-header-for-stacked: false !default;
 
-@mixin -zf-table-children-styles($stripe: $table-stripe) {
+@mixin -zf-table-stripe($stripe: $table-stripe) {
+  tr {
+    // If stripe is set to even, darken the even rows.
+    @if $stripe == even {
+      &:nth-child(even) {
+        border-bottom: 0;
+        background-color: $table-striped-background;
+      }
+    }
+
+    // If stripe is set to odd, darken the odd rows.
+    @else if $stripe == odd {
+      &:nth-child(odd) {
+        background-color: $table-striped-background;
+      }
+    }
+  }
+}
+
+@mixin -zf-table-unstripe() {
+  tr {
+    border-bottom: 0;
+    border-bottom: $table-border;
+    background-color: $table-background;
+  }
+}
+
+@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
   thead,
   tbody,
   tfoot {
@@ -82,10 +113,10 @@ $show-header-for-stacked: false !default;
 
   // Caption
   caption {
-    font-weight: $global-weight-bold;
     padding: $table-padding;
+    font-weight: $global-weight-bold;
   }
-  
+
   // Table head
   thead {
     background: $table-head-background;
@@ -117,25 +148,36 @@ $show-header-for-stacked: false !default;
 
   // Table rows
   tbody {
-    tr {
-      // If stripe is set to even, darken the even rows.
-      @if $stripe == even {
-        &:nth-child(even) {
-          background-color: $table-striped-background;
-        }
-      }
+    th,
+    td {
+      padding: $table-padding;
+    }
+  }
+
+  // If tables are striped
+  @if $is-striped == true {
+    tbody {
+      @include -zf-table-stripe($stripe);
+    }
 
-      // If stripe is set to odd, darken the odd rows.
-      @else if $stripe == odd {
-        &:nth-child(odd) {
-          background-color: $table-striped-background;
-        }
+    &.unstriped {
+      tbody {
+        @include -zf-table-unstripe();
+        background-color: $table-background;
       }
     }
+  }
 
-    th,
-    td {
-      padding: $table-padding;
+  // If tables are not striped
+  @else if $is-striped == false {
+    tbody {
+      @include -zf-table-unstripe();
+    }
+
+    &.striped {
+      tbody {
+        @include -zf-table-stripe($stripe);
+      }
     }
   }
 }
@@ -188,17 +230,35 @@ $show-header-for-stacked: false !default;
     &:hover {
       background-color: $table-row-hover;
     }
+  }
+
+  @if $table-is-striped == true {
+    // Darkens the even striped table rows.
+    @if($table-stripe == even) {
+      &:not(.unstriped) tr:nth-of-type(even):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+
+    // Darkens the odd striped table rows.
+    @elseif($table-stripe == odd) {
+      &:not(.unstriped) tr:nth-of-type(odd):hover {
+        background-color: $table-row-stripe-hover;
+      }
+    }
+  }
 
-    //Darkens the even striped table rows.
+  @else if $table-is-striped == false {
+    // Darkens the even striped table rows.
     @if($table-stripe == even) {
-      &:nth-of-type(even):hover {
+      &.striped tr:nth-of-type(even):hover {
         background-color: $table-row-stripe-hover;
       }
     }
 
-    //Darkens the odd striped table rows.
+    // Darkens the odd striped table rows.
     @elseif($table-stripe == odd) {
-      &:nth-of-type(odd):hover {
+      &.striped tr:nth-of-type(odd):hover {
         background-color: $table-row-stripe-hover;
       }
     }

data/vendor/assets/scss/components/_tabs.scss

@@ -14,10 +14,18 @@ $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-color: $primary-color !default;
+
+/// Active background color of a tab bar.
 /// @type Color
 $tab-background-active: $light-gray !default;
 
+/// Active font color of tab item.
+/// @type Color
+$tab-active-color: $primary-color !default;
+
 /// Font size of tab items.
 /// @type Number
 $tab-item-font-size: rem-calc(12) !default;
@@ -43,71 +51,94 @@ $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;
 
 /// Adds styles for a tab container. Apply this to a `<ul>`.
-@mixin tabs-container {
+@mixin tabs-container (
+  $margin: $tab-margin,
+  $background: $tab-background,
+  $border-color: $tab-content-border
+) {
   @include clearfix;
-  margin: $tab-margin;
+  margin: $margin;
+  border: 1px solid $border-color;
+  background: $background;
   list-style-type: none;
-  background: $tab-background;
-  border: 1px solid $tab-content-border;
 }
 
 /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
 @mixin tabs-container-vertical {
   > li {
-    width: auto;
-    float: none;
     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 {
+@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: $tab-item-padding;
+    padding: $padding;
+    font-size: $font-size;
     line-height: 1;
-    font-size: $tab-item-font-size;
+    color: $color;
 
     &:hover {
-      background: $tab-item-background-hover;
+      background: $background-hover;
+      color: scale-color($color, $lightness: -14%);
     }
 
     &:focus,
     &[aria-selected='true'] {
-      background: $tab-background-active;
+      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;
-  transition: all 0.5s ease;
-  border: 1px solid $tab-content-border;
+@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: 1px solid $tab-content-border;
+@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 {
+@mixin tabs-panel (
+  $padding: $tab-content-padding
+) {
   display: none;
-  padding: $tab-content-padding;
+  padding: $padding;
 
-  &.is-active {
+  &[aria-hidden="false"] {
     display: block;
   }
 }
@@ -138,7 +169,7 @@ $tab-content-padding: 1rem !default;
     background: $primary-color;
 
     > li > a {
-      color: foreground($primary-color);
+      color: color-pick-contrast($primary-color);
 
       &:hover,
       &:focus {

data/vendor/assets/scss/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/vendor/assets/scss/components/_title-bar.scss

@@ -36,14 +36,14 @@ $titlebar-icon-spacing: 0.25rem !default;
 
 @mixin foundation-title-bar {
   .title-bar {
+    padding: $titlebar-padding;
     background: $titlebar-background;
     color: $titlebar-color;
-    padding: $titlebar-padding;
 
     @if $global-flexbox {
       display: flex;
-      align-items: center;
       justify-content: space-between;
+      align-items: center;
     }
     @else {
       @include clearfix;
@@ -56,10 +56,9 @@ $titlebar-icon-spacing: 0.25rem !default;
   }
 
   @if $global-flexbox {
-    // scss-lint:disable ZeroUnit
     .title-bar-left,
     .title-bar-right {
-      flex: 1 1 0px;
+      flex: 1 1 0px; // sass-lint:disable-line zero-unit
     }
 
     .title-bar-right {
@@ -78,8 +77,8 @@ $titlebar-icon-spacing: 0.25rem !default;
   }
 
   .title-bar-title {
-    font-weight: $titlebar-text-font-weight;
-    vertical-align: middle;
     display: inline-block;
+    vertical-align: middle;
+    font-weight: $titlebar-text-font-weight;
   }
 }

data/vendor/assets/scss/components/_tooltip.scss

@@ -43,28 +43,31 @@ $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
 $tooltip-radius: $global-radius !default;
 
 @mixin has-tip {
-  border-bottom: $has-tip-border-bottom;
-  font-weight: $has-tip-font-weight;
   position: relative;
   display: inline-block;
+
+  border-bottom: $has-tip-border-bottom;
+  font-weight: $has-tip-font-weight;
   cursor: help;
 }
 
 @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: 10rem;
+  padding: $tooltip-padding;
+
   border-radius: $tooltip-radius;
+  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;
+    bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -77,18 +80,18 @@ $tooltip-radius: $global-radius !default;
 
   &.left::before {
     @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
+    top: 50%;
     bottom: auto;
     left: 100%;
-    top: 50%;
     transform: translateY(-50%);
   }
 
   &.right::before {
     @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
+    top: 50%;
+    right: 100%;
     bottom: auto;
     left: auto;
-    right: 100%;
-    top: 50%;
     transform: translateY(-50%);
   }
 }

data/vendor/assets/scss/components/_top-bar.scss

@@ -20,7 +20,7 @@ $topbar-submenu-background: $topbar-background !default;
 
 /// Spacing for the top bar title.
 /// @type Number
-$topbar-title-spacing: 1rem !default;
+$topbar-title-spacing: 0.5rem 1rem 0.5rem 0 !default;
 
 /// Maximum width of `<input>` elements inside the top bar.
 /// @type Number
@@ -34,9 +34,9 @@ $topbar-unstack-breakpoint: medium !default;
 @mixin top-bar-container {
   @if $global-flexbox {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
   }
   @else {
     @include clearfix;
@@ -68,8 +68,7 @@ $topbar-unstack-breakpoint: medium !default;
     margin-#{$global-right}: 0;
   }
 
-  // scss-lint:disable QualifyingElement
-  input.button {
+  input.button { // sass-lint:disable-line no-qualifying-elements
     width: auto;
   }
 }
@@ -100,10 +99,10 @@ $topbar-unstack-breakpoint: medium !default;
   @if $global-flexbox {
     flex-wrap: nowrap;
 
-    // scss-lint:disable ZeroUnit
     .top-bar-left {
       flex: 1 1 auto;
     }
+
     .top-bar-right {
       flex: 0 1 auto;
     }
@@ -144,7 +143,7 @@ $topbar-unstack-breakpoint: medium !default;
   @if $global-flexbox {
     .top-bar-title {
       flex: 0 0 auto;
-      margin-right: $topbar-title-spacing;
+      margin: $topbar-title-spacing;
     }
 
     .top-bar-left,
@@ -154,9 +153,13 @@ $topbar-unstack-breakpoint: medium !default;
   }
   @else {
     .top-bar-title {
+      display: inline-block;
       float: left;
-      margin-right: $topbar-title-spacing;
+      padding: $topbar-title-spacing;
 
+      .menu-icon {
+        bottom: 2px;
+      }
     }
 
     .top-bar-left {