sp-codes.de/bower_components/foundation-sites/scss/components/_tabs.scss

166 lines
3.4 KiB
SCSS
Raw Normal View History

2016-10-28 17:33:25 +00:00
// 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;
}
}