diff options
Diffstat (limited to 'scss/uikit/components/dotnav.scss')
| -rw-r--r-- | scss/uikit/components/dotnav.scss | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/scss/uikit/components/dotnav.scss b/scss/uikit/components/dotnav.scss new file mode 100644 index 00000000..f1f2a402 --- /dev/null +++ b/scss/uikit/components/dotnav.scss @@ -0,0 +1,157 @@ +// Name: Dotnav +// Description: Component to create dot navigations +// +// Component: `uk-dotnav` +// +// Modifier: `uk-dotnav-vertical` +// +// States: `uk-active` +// +// ======================================================================== + + +// Variables +// ======================================================================== + +$dotnav-margin-horizontal: 12px !default; +$dotnav-margin-vertical: $dotnav-margin-horizontal !default; + +$dotnav-item-width: 10px !default; +$dotnav-item-height: $dotnav-item-width !default; +$dotnav-item-border-radius: 50% !default; + +$dotnav-item-background: rgba($global-color, 0.2) !default; +$dotnav-item-hover-background: rgba($global-color, 0.6) !default; +$dotnav-item-onclick-background: rgba($global-color, 0.2) !default; +$dotnav-item-active-background: rgba($global-color, 0.6) !default; + + +/* ======================================================================== + Component: Dotnav + ========================================================================== */ + +/* + * 1. Allow items to wrap into the next line + * 2. Reset list + * 3. Gutter + */ + +.uk-dotnav { + display: flex; + /* 1 */ + flex-wrap: wrap; + /* 2 */ + margin: 0; + padding: 0; + list-style: none; + /* 3 */ + margin-left: (-$dotnav-margin-horizontal); + @if(mixin-exists(hook-dotnav)) {@include hook-dotnav();} +} + +/* + * 1. Space is allocated solely based on content dimensions: 0 0 auto + * 2. Gutter + */ + +.uk-dotnav > * { + /* 1 */ + flex: none; + /* 2 */ + padding-left: $dotnav-margin-horizontal; +} + + +/* Items + ========================================================================== */ + +/* + * Items + * 1. Hide text if present + */ + +.uk-dotnav > * > * { + display: block; + box-sizing: border-box; + width: $dotnav-item-width; + height: $dotnav-item-height; + border-radius: $dotnav-item-border-radius; + background: $dotnav-item-background; + /* 1 */ + text-indent: 100%; + overflow: hidden; + white-space: nowrap; + @if(mixin-exists(hook-dotnav-item)) {@include hook-dotnav-item();} +} + +/* Hover + Focus */ +.uk-dotnav > * > :hover, +.uk-dotnav > * > :focus { + background-color: $dotnav-item-hover-background; + outline: none; + @if(mixin-exists(hook-dotnav-item-hover)) {@include hook-dotnav-item-hover();} +} + +/* OnClick */ +.uk-dotnav > * > :active { + background-color: $dotnav-item-onclick-background; + @if(mixin-exists(hook-dotnav-item-onclick)) {@include hook-dotnav-item-onclick();} +} + +/* Active */ +.uk-dotnav > .uk-active > * { + background-color: $dotnav-item-active-background; + @if(mixin-exists(hook-dotnav-item-active)) {@include hook-dotnav-item-active();} +} + + +/* Modifier: 'uk-dotnav-vertical' + ========================================================================== */ + +/* + * 1. Change direction + * 2. Gutter + */ + +.uk-dotnav-vertical { + /* 1 */ + flex-direction: column; + /* 2 */ + margin-left: 0; + margin-top: (-$dotnav-margin-vertical); +} + +/* 2 */ +.uk-dotnav-vertical > * { + padding-left: 0; + padding-top: $dotnav-margin-vertical; +} + + +// Hooks +// ======================================================================== + +@if(mixin-exists(hook-dotnav-misc)) {@include hook-dotnav-misc();} + +// @mixin hook-dotnav(){} +// @mixin hook-dotnav-item(){} +// @mixin hook-dotnav-item-hover(){} +// @mixin hook-dotnav-item-onclick(){} +// @mixin hook-dotnav-item-active(){} +// @mixin hook-dotnav-misc(){} + + +// Inverse +// ======================================================================== + +$inverse-dotnav-item-background: rgba($inverse-global-color, 0.5) !default; +$inverse-dotnav-item-hover-background: rgba($inverse-global-color, 0.9) !default; +$inverse-dotnav-item-onclick-background: rgba($inverse-global-color, 0.5) !default; +$inverse-dotnav-item-active-background: rgba($inverse-global-color, 0.9) !default; + + + +// @mixin hook-inverse-dotnav-item(){} +// @mixin hook-inverse-dotnav-item-hover(){} +// @mixin hook-inverse-dotnav-item-onclick(){} +// @mixin hook-inverse-dotnav-item-active(){}
\ No newline at end of file |