Add tab mixins, closes #7114

diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index e0ef7788fd3b55c5114be09c0b1e82a808ea20b0..1c2dcb08422b493b23395387c99ba9fd2afb13e9 100644 (file)
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -53,88 +53,112 @@ $tab-content-color: foreground($tab-background, $primary-color) !default;
 /// @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;
-        }
-      }
-    }
+@mixin tabs-container {
+  @include clearfix;
+  margin: $tab-margin;
+  list-style-type: none;
+  background: $tab-background;
+  border: 1px solid $tab-content-border;
+}
 
-    // Vertical
-    &.vertical {
-      > li {
-        width: auto;
-        float: none;
-        display: block;
-      }
-    }
+@mixin tabs-container-vertical {
+  > li {
+    width: auto;
+    float: none;
+    display: block;
+  }
+}
 
-    // Primary color
-    &.primary {
-      background: $primary-color;
+@mixin tabs-title {
+  float: #{$global-left};
 
-      > li > a {
-        color: foreground($primary-color);
+  > a {
+    display: block;
+    padding: $tab-item-padding;
+    line-height: 1;
+    font-size: 12px;
+    color: $tab-item-color;
 
-        &:hover,
-        &:focus {
-          background: smart-scale($primary-color);
-        }
-      }
+    &:hover {
+      background: $tab-item-background-hover;
+    }
+    
+    &:focus,
+    &[aria-selected='true'] {
+      background: $tab-background-active;
     }
   }
+}
 
-  .tabs-title {
-    float: #{$global-left};
+@mixin tabs-content {
+  background: $tab-content-background;
+  transition: all 0.5s ease;
+  border: 1px solid $tab-content-border;
+  border-top: 0;
+}
+
+@mixin tabs-content-vertical {
+  border: 1px solid $tab-content-border;
+  border-#{$global-left}: 0;
+}
 
-    > a {
-      display: block;
-      padding: $tab-item-padding;
-      line-height: 1;
-      font-size: 12px;
-      color: $tab-item-color;
+@mixin tabs-panel {
+  display: none;
+  padding: $tab-content-padding;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+@mixin foundation-tabs {
+  .tabs {
+    @include tabs-container;
+  }
+
+  // Vertical
+  .tabs.vertical {
+    @include tabs-container-vertical; 
+  }
+
+  // Simple
+  .tabs.simple {
+    > li > a {
+      padding: 0;
 
       &:hover {
-        background: $tab-item-background-hover;
+        background: transparent;
       }
-      
-      &:focus,
-      &[aria-selected='true'] {
-        background: $tab-background-active;
+    }
+  }
+
+  // Primary color
+  .tabs.primary {
+    background: $primary-color;
+
+    > li > a {
+      color: foreground($primary-color);
+
+      &:hover,
+      &: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; 
   }
 }