// 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;
/// active background color of a tab bar. /// @type Color $tab-background-active: $light-gray !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: foreground($tab-background, $primary-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 {
@include clearfix; margin: $tab-margin; 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; }
}
/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container. @mixin tabs-title {
float: #{$global-left}; > a { display: block; padding: $tab-item-padding; line-height: 1; font-size: $tab-item-font-size; &:hover { background: $tab-item-background-hover; } &:focus, &[aria-selected='true'] { background: $tab-background-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; border-top: 0;
}
/// 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; border-#{$global-left}: 0;
}
/// Adds styles for an individual tab content panel within the tab content container. @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: transparent; } } } // 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 { @include tabs-content; } .tabs-content.vertical { @include tabs-content-vertical; } .tabs-panel { @include tabs-panel; }
}