166 lines
3.4 KiB
SCSS
166 lines
3.4 KiB
SCSS
// 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;
|
|
}
|
|
}
|