diff options
Diffstat (limited to 'afb-client/bower_components/foundation-apps/scss/components/_tabs.scss')
-rw-r--r-- | afb-client/bower_components/foundation-apps/scss/components/_tabs.scss | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss new file mode 100644 index 0000000..7e4293e --- /dev/null +++ b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss @@ -0,0 +1,100 @@ +/* + 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; + } + } +} |