diff options
Diffstat (limited to 'scss/uikit/components/tab.scss')
| -rw-r--r-- | scss/uikit/components/tab.scss | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/scss/uikit/components/tab.scss b/scss/uikit/components/tab.scss new file mode 100644 index 00000000..87e0a678 --- /dev/null +++ b/scss/uikit/components/tab.scss @@ -0,0 +1,191 @@ +// Name: Tab +// Description: Component to create a tabbed navigation +// +// Component: `uk-tab` +// +// Modifiers: `uk-tab-bottom` +// `uk-tab-left` +// `uk-tab-right` +// +// States: `uk-active` +// `uk-disabled` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$tab-margin-horizontal: 20px !default; + +$tab-item-padding-horizontal: 10px !default; +$tab-item-padding-vertical: 5px !default; +$tab-item-color: $global-muted-color !default; +$tab-item-hover-color: $global-color !default; +$tab-item-hover-text-decoration: none !default; +$tab-item-active-color: $global-emphasis-color !default; +$tab-item-disabled-color: $global-muted-color !default; + + +/* ======================================================================== + Component: Tab + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Gutter + * 3. Reset list + */ + +.uk-tab { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin-left: (-$tab-margin-horizontal); + /* 3 */ + padding: 0; + list-style: none; + @if(mixin-exists(hook-tab)) {@include hook-tab();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + * 3. Create position context for dropdowns + */ + +.uk-tab > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $tab-margin-horizontal; + /* 3 */ + position: relative; +} + + +/* Items + ========================================================================== */ + +/* + * Items must target `a` elements to exclude other elements (e.g. dropdowns) + * 1. Center text if a width is set + * 2. Style + */ + +.uk-tab > * > a { + /* 1 */ + display: block; + text-align: center; + /* 2 */ + padding: $tab-item-padding-vertical $tab-item-padding-horizontal; + color: $tab-item-color; + @if(mixin-exists(hook-tab-item)) {@include hook-tab-item();} +} + +/* Hover + Focus */ +.uk-tab > * > a:hover, +.uk-tab > * > a:focus { + color: $tab-item-hover-color; + text-decoration: $tab-item-hover-text-decoration; + @if(mixin-exists(hook-tab-item-hover)) {@include hook-tab-item-hover();} +} + +/* Active */ +.uk-tab > .uk-active > a { + color: $tab-item-active-color; + @if(mixin-exists(hook-tab-item-active)) {@include hook-tab-item-active();} +} + +/* Disabled */ +.uk-tab > .uk-disabled > a { + color: $tab-item-disabled-color; + @if(mixin-exists(hook-tab-item-disabled)) {@include hook-tab-item-disabled();} +} + + +/* Position modifier + ========================================================================== */ + +/* + * Bottom + */ + +.uk-tab-bottom { + @if(mixin-exists(hook-tab-bottom)) {@include hook-tab-bottom();} +} + +.uk-tab-bottom > * > a { + @if(mixin-exists(hook-tab-bottom-item)) {@include hook-tab-bottom-item();} +} + +/* + * Left + Right + * 1. Reset Gutter + */ + +.uk-tab-left, +.uk-tab-right { + flex-direction: column; + /* 1 */ + margin-left: 0; +} + +/* 1 */ +.uk-tab-left > *, +.uk-tab-right > * { padding-left: 0; } + +.uk-tab-left { + @if(mixin-exists(hook-tab-left)) {@include hook-tab-left();} +} + +.uk-tab-right { + @if(mixin-exists(hook-tab-right)) {@include hook-tab-right();} +} + +.uk-tab-left > * > a { + text-align: left; + @if(mixin-exists(hook-tab-left-item)) {@include hook-tab-left-item();} +} + +.uk-tab-right > * > a { + text-align: left; + @if(mixin-exists(hook-tab-right-item)) {@include hook-tab-right-item();} +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-tab-misc)) {@include hook-tab-misc();} + +// @mixin hook-tab(){} +// @mixin hook-tab-item(){} +// @mixin hook-tab-item-hover(){} +// @mixin hook-tab-item-active(){} +// @mixin hook-tab-item-disabled(){} +// @mixin hook-tab-bottom(){} +// @mixin hook-tab-bottom-item(){} +// @mixin hook-tab-left(){} +// @mixin hook-tab-left-item(){} +// @mixin hook-tab-right(){} +// @mixin hook-tab-right-item(){} +// @mixin hook-tab-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-tab-item-color: $inverse-global-muted-color !default; +$inverse-tab-item-hover-color: $inverse-global-color !default; +$inverse-tab-item-active-color: $inverse-global-emphasis-color !default; +$inverse-tab-item-disabled-color: $inverse-global-muted-color !default; + + + +// @mixin hook-inverse-tab(){} +// @mixin hook-inverse-tab-item(){} +// @mixin hook-inverse-tab-item-hover(){} +// @mixin hook-inverse-tab-item-active(){} +// @mixin hook-inverse-tab-item-disabled(){}
\ No newline at end of file |