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