Sha256: 3eb274e897ca1825c1f9b383a131cde88098ff5ffc78d59b7e23c26123f33037
Contents?: true
Size: 1.87 KB
Versions: 36
Compression:
Stored size: 1.87 KB
Contents
/*
TABS
----
*/
/// @Foundation.settings
// Tabs
$tabstrip-background: transparent !default;
$tab-title-background: $gray-light !default;
$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
$tab-title-color: isitlight($tab-title-background) !default;
$tab-title-color-active: $tab-title-color !default;
$tab-title-padding: $global-padding !default;
$tab-content-padding: $global-padding !default;
///
@mixin tabstrip(
$orientation: horizontal,
$background: $tabstrip-background
) {
/*
Container styles
*/
display: flex;
background: $background;
@if $orientation == vertical {
flex-flow: column nowrap;
}
@else {
flex-flow: row wrap;
}
}
@mixin tabstrip-item(
$background: $tab-title-background,
$background-hover: $tab-title-background-hover,
$background-active: $tab-title-background-active,
$color: $tab-title-color,
$color-active: $tab-title-color-active,
$padding: $tab-title-padding
) {
background: $background;
padding: $padding;
line-height: 1;
margin: 0;
flex: 0 1 auto;
cursor: pointer;
color: $color;
&.is-active {
background: $background-active;
color: $color-active;
&:hover {
background: $background-hover;
}
}
&:hover {
background: $background-hover;
}
}
@mixin tab-content(
$padding: $tab-content-padding
) {
padding: $padding;
}
@mixin tab-content-item {
display: none;
&.is-active {
display: block;
}
}
@include exports(tabs) {
.tabs {
@include tabstrip(horizontal);
&.vertical {
@include tabstrip(vertical);
}
.tab-item {
@include tabstrip-item;
}
}
.tab-contents {
@include tab-content;
.tab-content {
@include tab-content-item;
}
}
}
Version data entries
36 entries across 36 versions & 2 rubygems