// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source
//// /// @group tabs ////
/// Default margin of the tab bar. /// @type Number $tab-margin: 0 !default;
/// Default background color of a tab bar. /// @type Color $tab-background: $white !default;
/// 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;
/// Default background color on hover for items in a Menu. $tab-item-background-hover: $white !default;
/// Default padding of a tab item. /// @type Number $tab-item-padding: 1.25rem 1.5rem !default;
/// Maximum number of `expand-n` classes to include in the CSS. /// @type Number $tab-expand-max: 6 !default;
/// Default background color of tab content. /// @type Color $tab-content-background: $white !default;
/// Default border color of tab content. /// @type Color $tab-content-border: $light-gray !default;
/// Default text color of tab content. /// @type Color $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 (
$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%); } &: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; &[aria-hidden="false"] { 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: transparent; } } } // Primary color .tabs.primary { background: $primary-color; > li > a { color: color-pick-contrast($primary-color); &:hover, &:focus { background: smart-scale($primary-color); } } } .tabs-title { @include tabs-title; } .tabs-content { @include tabs-content; } .tabs-content.vertical { @include tabs-content-vertical; } .tabs-panel { @include tabs-panel; }
}