diff options
Diffstat (limited to 'scss/uikit/components/tab.scss')
| -rw-r--r-- | scss/uikit/components/tab.scss | 191 |
1 files changed, 0 insertions, 191 deletions
diff --git a/scss/uikit/components/tab.scss b/scss/uikit/components/tab.scss deleted file mode 100644 index 87e0a678..00000000 --- a/scss/uikit/components/tab.scss +++ /dev/null @@ -1,191 +0,0 @@ -// 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 |