diff options
Diffstat (limited to 'scss/uikit/components/nav.scss')
| -rw-r--r-- | scss/uikit/components/nav.scss | 357 |
1 files changed, 0 insertions, 357 deletions
diff --git a/scss/uikit/components/nav.scss b/scss/uikit/components/nav.scss deleted file mode 100644 index 9d990ca2..00000000 --- a/scss/uikit/components/nav.scss +++ /dev/null @@ -1,357 +0,0 @@ -// Name: Nav -// Description: Defines styles for list navigations -// -// Component: `uk-nav` -// -// Sub-objects: `uk-nav-header` -// `uk-nav-divider` -// `uk-nav-sub` -// -// Modifiers: `uk-nav-parent-icon` -// `uk-nav-default` -// `uk-nav-primary` -// `uk-nav-center` -// -// States: `uk-active` -// `uk-parent` -// `uk-open` -// `uk-touch` -// -// ======================================================================== - - -// Variables -// ======================================================================== - -$nav-item-padding-vertical: 5px !default; -$nav-item-padding-horizontal: 0 !default; - -$nav-sublist-padding-vertical: 5px !default; -$nav-sublist-padding-left: 15px !default; -$nav-sublist-deeper-padding-left: 15px !default; -$nav-sublist-item-padding-vertical: 2px !default; - -$nav-parent-icon-width: ($global-line-height * 1em) !default; -$nav-parent-icon-height: $nav-parent-icon-width !default; -$nav-parent-icon-color: $global-color !default; - -$nav-header-padding-vertical: $nav-item-padding-vertical !default; -$nav-header-padding-horizontal: $nav-item-padding-horizontal !default; -$nav-header-font-size: $global-small-font-size !default; -$nav-header-text-transform: uppercase !default; -$nav-header-margin-top: $global-margin !default; - -$nav-divider-margin-vertical: 5px !default; -$nav-divider-margin-horizontal: 0 !default; - -$nav-default-item-color: $global-muted-color !default; -$nav-default-item-hover-color: $global-color !default; -$nav-default-item-active-color: $global-emphasis-color !default; -$nav-default-header-color: $global-emphasis-color !default; -$nav-default-divider-border-width: $global-border-width !default; -$nav-default-divider-border: $global-border !default; -$nav-default-sublist-item-color: $global-muted-color !default; -$nav-default-sublist-item-hover-color: $global-color !default; - -$nav-primary-item-font-size: $global-large-font-size !default; -$nav-primary-item-line-height: $global-line-height !default; -$nav-primary-item-color: $global-muted-color !default; -$nav-primary-item-hover-color: $global-color !default; -$nav-primary-item-active-color: $global-emphasis-color !default; -$nav-primary-header-color: $global-emphasis-color !default; -$nav-primary-divider-border-width: $global-border-width !default; -$nav-primary-divider-border: $global-border !default; -$nav-primary-sublist-item-color: $global-muted-color !default; -$nav-primary-sublist-item-hover-color: $global-color !default; - -$internal-nav-parent-close-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; -$internal-nav-parent-open-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22#000%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E" !default; - - -/* ======================================================================== - Component: Nav - ========================================================================== */ - -/* - * Reset - * 1. Prepare lists - * 2. Prepare links - * 3. Remove default focus style - */ - -/* 1 */ -.uk-nav, -.uk-nav ul { - margin: 0; - padding: 0; - list-style: none; -} - -/* 2 */ -.uk-nav li > a { - display: block; - text-decoration: none; -} - -/* 3 */ -.uk-nav li > a:focus { outline: none; } - -/* - * Items - * Must target `a` elements to exclude other elements (e.g. lists) - */ - -.uk-nav > li > a { padding: $nav-item-padding-vertical $nav-item-padding-horizontal; } - - -/* Sublists - ========================================================================== */ - -/* - * Level 2 - * `ul` needed for higher specificity to override padding - */ - -ul.uk-nav-sub { - padding: $nav-sublist-padding-vertical 0 $nav-sublist-padding-vertical $nav-sublist-padding-left; - @if(mixin-exists(hook-nav-sub)) {@include hook-nav-sub();} -} - -/* - * Level 3 and deeper - */ - -.uk-nav-sub ul { padding-left: $nav-sublist-deeper-padding-left; } - -/* - * Items - */ - -.uk-nav-sub a { padding: $nav-sublist-item-padding-vertical 0; } - - -/* Parent icon modifier - ========================================================================== */ - -.uk-nav-parent-icon > .uk-parent > a::after { - content: ""; - width: $nav-parent-icon-width; - height: $nav-parent-icon-height; - float: right; - @include svg-fill($internal-nav-parent-close-image, "#000", $nav-parent-icon-color); - background-repeat: no-repeat; - background-position: 50% 50%; - @if(mixin-exists(hook-nav-parent-icon)) {@include hook-nav-parent-icon();} -} - -.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $nav-parent-icon-color); } - - -/* Header - ========================================================================== */ - -.uk-nav-header { - padding: $nav-header-padding-vertical $nav-header-padding-horizontal; - text-transform: $nav-header-text-transform; - font-size: $nav-header-font-size; - @if(mixin-exists(hook-nav-header)) {@include hook-nav-header();} -} - -.uk-nav-header:not(:first-child) { margin-top: $nav-header-margin-top; } - - -/* Divider - ========================================================================== */ - -.uk-nav-divider { - margin: $nav-divider-margin-vertical $nav-divider-margin-horizontal; - @if(mixin-exists(hook-nav-divider)) {@include hook-nav-divider();} -} - - -/* Default modifier - ========================================================================== */ - -.uk-nav-default { - @if(mixin-exists(hook-nav-default)) {@include hook-nav-default();} -} - -/* - * Items - */ - -.uk-nav-default > li > a { - color: $nav-default-item-color; - @if(mixin-exists(hook-nav-default-item)) {@include hook-nav-default-item();} -} - -/* Hover + Focus */ -.uk-nav-default > li > a:hover, -.uk-nav-default > li > a:focus { - color: $nav-default-item-hover-color; - @if(mixin-exists(hook-nav-default-item-hover)) {@include hook-nav-default-item-hover();} -} - -/* Active */ -.uk-nav-default > li.uk-active > a { - color: $nav-default-item-active-color; - @if(mixin-exists(hook-nav-default-item-active)) {@include hook-nav-default-item-active();} -} - -/* - * Header - */ - -.uk-nav-default .uk-nav-header { - color: $nav-default-header-color; - @if(mixin-exists(hook-nav-default-header)) {@include hook-nav-default-header();} -} - -/* - * Divider - */ - -.uk-nav-default .uk-nav-divider { - border-top: $nav-default-divider-border-width solid $nav-default-divider-border; - @if(mixin-exists(hook-nav-default-divider)) {@include hook-nav-default-divider();} -} - -/* - * Sublists - */ - -.uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; } - -.uk-nav-default .uk-nav-sub a:hover, -.uk-nav-default .uk-nav-sub a:focus { color: $nav-default-sublist-item-hover-color; } - - -/* Primary modifier - ========================================================================== */ - -.uk-nav-primary { - @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();} -} - -/* - * Items - */ - -.uk-nav-primary > li > a { - font-size: $nav-primary-item-font-size; - line-height: $nav-primary-item-line-height; - color: $nav-primary-item-color; - @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();} -} - -/* Hover + Focus */ -.uk-nav-primary > li > a:hover, -.uk-nav-primary > li > a:focus { - color: $nav-primary-item-hover-color; - @if(mixin-exists(hook-nav-primary-item-hover)) {@include hook-nav-primary-item-hover();} -} - -/* Active */ -.uk-nav-primary > li.uk-active > a { - color: $nav-primary-item-active-color; - @if(mixin-exists(hook-nav-primary-item-active)) {@include hook-nav-primary-item-active();} -} - -/* - * Header - */ - -.uk-nav-primary .uk-nav-header { - color: $nav-primary-header-color; - @if(mixin-exists(hook-nav-primary-header)) {@include hook-nav-primary-header();} -} - -/* - * Divider - */ - -.uk-nav-primary .uk-nav-divider { - border-top: $nav-primary-divider-border-width solid $nav-primary-divider-border; - @if(mixin-exists(hook-nav-primary-divider)) {@include hook-nav-primary-divider();} -} - -/* - * Sublists - */ - -.uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; } - -.uk-nav-primary .uk-nav-sub a:hover, -.uk-nav-primary .uk-nav-sub a:focus { color: $nav-primary-sublist-item-hover-color; } - - -/* Alignment modifier - ========================================================================== */ - -.uk-nav-center { text-align: center; } - -/* Sublists */ -.uk-nav-center .uk-nav-sub, -.uk-nav-center .uk-nav-sub ul { padding-left: 0; } - -/* Parent icon modifier */ -.uk-nav-center.uk-nav-parent-icon > .uk-parent > a::after { position: absolute; } - - -// Hooks -// ======================================================================== - -@if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();} - -// @mixin hook-nav-sub(){} -// @mixin hook-nav-parent-icon(){} -// @mixin hook-nav-header(){} -// @mixin hook-nav-divider(){} -// @mixin hook-nav-default(){} -// @mixin hook-nav-default-item(){} -// @mixin hook-nav-default-item-hover(){} -// @mixin hook-nav-default-item-active(){} -// @mixin hook-nav-default-header(){} -// @mixin hook-nav-default-divider(){} -// @mixin hook-nav-primary(){} -// @mixin hook-nav-primary-item(){} -// @mixin hook-nav-primary-item-hover(){} -// @mixin hook-nav-primary-item-active(){} -// @mixin hook-nav-primary-header(){} -// @mixin hook-nav-primary-divider(){} -// @mixin hook-nav-misc(){} - - -// Inverse -// ======================================================================== - -$inverse-nav-parent-icon-color: $inverse-global-color !default; -$inverse-nav-default-item-color: $inverse-global-muted-color !default; -$inverse-nav-default-item-hover-color: $inverse-global-color !default; -$inverse-nav-default-item-active-color: $inverse-global-emphasis-color !default; -$inverse-nav-default-header-color: $inverse-global-emphasis-color !default; -$inverse-nav-default-divider-border: $inverse-global-border !default; -$inverse-nav-default-sublist-item-color: $inverse-global-muted-color !default; -$inverse-nav-default-sublist-item-hover-color: $inverse-global-color !default; - -$inverse-nav-primary-item-color: $inverse-global-muted-color !default; -$inverse-nav-primary-item-hover-color: $inverse-global-color !default; -$inverse-nav-primary-item-active-color: $inverse-global-emphasis-color !default; -$inverse-nav-primary-header-color: $inverse-global-emphasis-color !default; -$inverse-nav-primary-divider-border: $inverse-global-border !default; -$inverse-nav-primary-sublist-item-color: $inverse-global-muted-color !default; -$inverse-nav-primary-sublist-item-hover-color: $inverse-global-color !default; - - - -// @mixin hook-inverse-nav-parent-icon(){} -// @mixin hook-inverse-nav-default-item(){} -// @mixin hook-inverse-nav-default-item-hover(){} -// @mixin hook-inverse-nav-default-item-active(){} -// @mixin hook-inverse-nav-default-header(){} -// @mixin hook-inverse-nav-default-divider(){} -// @mixin hook-inverse-nav-primary-item(){} -// @mixin hook-inverse-nav-primary-item-hover(){} -// @mixin hook-inverse-nav-primary-item-active(){} -// @mixin hook-inverse-nav-primary-header(){} -// @mixin hook-inverse-nav-primary-divider(){} |