// 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; } }