diff options
Diffstat (limited to 'scss/uikit/components/navbar.scss')
| -rw-r--r-- | scss/uikit/components/navbar.scss | 537 |
1 files changed, 0 insertions, 537 deletions
diff --git a/scss/uikit/components/navbar.scss b/scss/uikit/components/navbar.scss deleted file mode 100644 index a1f633a3..00000000 --- a/scss/uikit/components/navbar.scss +++ /dev/null @@ -1,537 +0,0 @@ -// Name: Navbar -// Description: Component to create horizontal navigation bars -// -// Component: `uk-navbar` -// -// Sub-objects: `uk-navbar-container` -// `uk-navbar-left` -// `uk-navbar-right` -// `uk-navbar-center` -// `uk-navbar-center-left` -// `uk-navbar-center-right` -// `uk-navbar-nav` -// `uk-navbar-item` -// `uk-navbar-toggle` -// `uk-navbar-subtitle` -// `uk-navbar-dropbar` -// -// Adopted: `uk-navbar-dropdown` + Modifiers -// `uk-navbar-dropdown-nav` -// `uk-navbar-dropdown-grid` -// `uk-navbar-toggle-icon` -// -// Modifiers: `uk-navbar-transparent` -// `uk-navbar-sticky` -// `uk-navbar-dropdown-stack` -// -// States: `uk-active` -// `uk-parent` -// `uk-open` -// -// -// ======================================================================== - - -// Variables -// ======================================================================== - -$navbar-background: $global-muted-background !default; -$navbar-color-mode: none !default; - -$navbar-nav-item-height: 80px !default; -$navbar-nav-item-padding-horizontal: 15px !default; -$navbar-nav-item-color: $global-muted-color !default; -$navbar-nav-item-font-size: $global-font-size !default; -$navbar-nav-item-font-family: $global-font-family !default; -$navbar-nav-item-hover-color: $global-color !default; -$navbar-nav-item-onclick-color: $global-emphasis-color !default; -$navbar-nav-item-active-color: $global-emphasis-color !default; - -$navbar-item-color: $global-color !default; - -$navbar-toggle-color: $global-muted-color !default; -$navbar-toggle-hover-color: $global-color !default; - -$navbar-subtitle-font-size: $global-small-font-size !default; - -$navbar-dropdown-z-index: $global-z-index + 20 !default; -$navbar-dropdown-width: 200px !default; -$navbar-dropdown-margin: 0 !default; -$navbar-dropdown-padding: 15px !default; -$navbar-dropdown-background: $global-muted-background !default; -$navbar-dropdown-color: $global-color !default; -$navbar-dropdown-grid-gutter-horizontal: $global-gutter !default; -$navbar-dropdown-grid-gutter-vertical: $navbar-dropdown-grid-gutter-horizontal !default; - -$navbar-dropdown-dropbar-margin-top: 0 !default; -$navbar-dropdown-dropbar-margin-bottom: $navbar-dropdown-dropbar-margin-top !default; - -$navbar-dropdown-nav-item-color: $global-muted-color !default; -$navbar-dropdown-nav-item-hover-color: $global-color !default; -$navbar-dropdown-nav-item-active-color: $global-emphasis-color !default; -$navbar-dropdown-nav-header-color: $global-emphasis-color !default; -$navbar-dropdown-nav-divider-border-width: $global-border-width !default; -$navbar-dropdown-nav-divider-border: $global-border !default; -$navbar-dropdown-nav-sublist-item-color: $global-muted-color !default; -$navbar-dropdown-nav-sublist-item-hover-color: $global-color !default; - -$navbar-dropbar-background: $navbar-dropdown-background !default; -$navbar-dropbar-z-index: $global-z-index - 20 !default; - - -/* ======================================================================== - Component: Navbar - ========================================================================== */ - -/* - * 1. Create position context to center navbar group - */ - -.uk-navbar { - display: flex; - /* 1 */ - position: relative; - @if(mixin-exists(hook-navbar)) {@include hook-navbar();} -} - - -/* Container - ========================================================================== */ - -.uk-navbar-container:not(.uk-navbar-transparent) { - background: $navbar-background; - @if(mixin-exists(hook-navbar-container)) {@include hook-navbar-container();} -} - -// Color Mode -@if ( $navbar-color-mode == light ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-light !optional;} } -@if ( $navbar-color-mode == dark ) { .uk-navbar-container:not(.uk-navbar-transparent) { @extend .uk-dark !optional;} } - -/* - * Remove pseudo elements created by micro clearfix as precaution (if Container component is used) - */ - -.uk-navbar-container > ::before, -.uk-navbar-container > ::after { display: none !important; } - - -/* Groups - ========================================================================== */ - -/* - * 1. Align navs and items vertically if they have a different height - * 2. Note: IE 11 requires an extra `div` which affects the center selector - */ - -.uk-navbar-left, -.uk-navbar-right, -// 2. [class*='uk-navbar-center'], -.uk-navbar-center, -.uk-navbar-center-left > *, -.uk-navbar-center-right > * { - display: flex; - /* 1 */ - align-items: center; -} - -/* - * Horizontal alignment - * 1. Create position context for centered navbar with sub groups (left/right) - * 2. Needed for dropdowns because a new position context is created - * `z-index` must be smaller than off-canvas - * 3. Fix text wrapping if the centered section is larger than 50% of the navbar - * 4. Align sub groups for centered navbar - */ - -.uk-navbar-right { margin-left: auto; } - -.uk-navbar-center:only-child { - margin-left: auto; - margin-right: auto; - /* 1 */ - position: relative; -} - -.uk-navbar-center:not(:only-child) { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - /* 2 */ - z-index: $global-z-index - 10; -} - -/* 3 */ -.uk-navbar-center:not(:only-child) .uk-navbar-nav > li > a, -.uk-navbar-center:not(:only-child) .uk-navbar-item, -.uk-navbar-center:not(:only-child) .uk-navbar-toggle { white-space: nowrap; } - -/* 4 */ -.uk-navbar-center-left, -.uk-navbar-center-right { - position: absolute; - top: 0; -} - -.uk-navbar-center-left { right: 100%; } -.uk-navbar-center-right { left: 100%; } - -[class*='uk-navbar-center-'] .uk-navbar-nav > li > a, -[class*='uk-navbar-center-'] .uk-navbar-item, -[class*='uk-navbar-center-'] .uk-navbar-toggle { white-space: nowrap; } - - -/* Nav - ========================================================================== */ - -/* - * 1. Reset list - */ - -.uk-navbar-nav { - display: flex; - /* 1 */ - margin: 0; - padding: 0; - list-style: none; -} - -/* - * Allow items to wrap into the next line - * Only not `absolute` positioned groups - */ - -.uk-navbar-left, -.uk-navbar-right, -.uk-navbar-center:only-child { flex-wrap: wrap; } - -/* - * Items - * 1. Center content vertically and horizontally - * 2. Dimensions - * 3. Style - * 4. Required for `a` - */ - -.uk-navbar-nav > li > a, // Nav item -.uk-navbar-item, // Content item -.uk-navbar-toggle { // Clickable item - /* 1 */ - display: flex; - justify-content: center; - align-items: center; - /* 2 */ - box-sizing: border-box; - height: $navbar-nav-item-height; - padding: 0 $navbar-nav-item-padding-horizontal; - /* 3 */ - font-size: $navbar-nav-item-font-size; - font-family: $navbar-nav-item-font-family; - /* 4 */ - text-decoration: none; -} - -/* - * Nav items - */ - -.uk-navbar-nav > li > a { - color: $navbar-nav-item-color; - @if(mixin-exists(hook-navbar-nav-item)) {@include hook-navbar-nav-item();} -} - -/* - * Hover - * Apply hover style also to focus state and if dropdown is opened - */ - -.uk-navbar-nav > li:hover > a, -.uk-navbar-nav > li > a:focus, -.uk-navbar-nav > li > a.uk-open { - color: $navbar-nav-item-hover-color; - outline: none; - @if(mixin-exists(hook-navbar-nav-item-hover)) {@include hook-navbar-nav-item-hover();} -} - -/* OnClick */ -.uk-navbar-nav > li > a:active { - color: $navbar-nav-item-onclick-color; - @if(mixin-exists(hook-navbar-nav-item-onclick)) {@include hook-navbar-nav-item-onclick();} -} - -/* Active */ -.uk-navbar-nav > li.uk-active > a { - color: $navbar-nav-item-active-color; - @if(mixin-exists(hook-navbar-nav-item-active)) {@include hook-navbar-nav-item-active();} -} - - -/* Item - ========================================================================== */ - -.uk-navbar-item { - color: $navbar-item-color; - @if(mixin-exists(hook-navbar-item)) {@include hook-navbar-item();} -} - - -/* Toggle - ========================================================================== */ - -.uk-navbar-toggle { - color: $navbar-toggle-color; - @if(mixin-exists(hook-navbar-toggle)) {@include hook-navbar-toggle();} -} - -.uk-navbar-toggle:hover, -.uk-navbar-toggle:focus, -.uk-navbar-toggle.uk-open { - color: $navbar-toggle-hover-color; - outline: none; - text-decoration: none; - @if(mixin-exists(hook-navbar-toggle-hover)) {@include hook-navbar-toggle-hover();} -} - -/* - * Icon - * Adopts `uk-icon` - */ - -.uk-navbar-toggle-icon { - @if(mixin-exists(hook-navbar-toggle-icon)) {@include hook-navbar-toggle-icon();} -} - -/* Hover + Focus */ -:hover > .uk-navbar-toggle-icon, -:focus > .uk-navbar-toggle-icon { - @if(mixin-exists(hook-navbar-toggle-icon-hover)) {@include hook-navbar-toggle-icon-hover();} -} - - -/* Subtitle - ========================================================================== */ - -.uk-navbar-subtitle { - font-size: $navbar-subtitle-font-size; - @if(mixin-exists(hook-navbar-subtitle)) {@include hook-navbar-subtitle();} -} - - -/* Style modifiers - ========================================================================== */ - -.uk-navbar-transparent { - @if(mixin-exists(hook-navbar-transparent)) {@include hook-navbar-transparent();} -} - -.uk-navbar-sticky { - @if(mixin-exists(hook-navbar-sticky)) {@include hook-navbar-sticky();} -} - - -/* Dropdown - ========================================================================== */ - -/* - * Adopts `uk-dropdown` - * 1. Hide by default - * 2. Set position - * 3. Set a default width - * 4. Style - */ - -.uk-navbar-dropdown { - /* 1 */ - display: none; - /* 2 */ - position: absolute; - z-index: $navbar-dropdown-z-index; - /* 3 */ - box-sizing: border-box; - width: $navbar-dropdown-width; - /* 4 */ - padding: $navbar-dropdown-padding; - background: $navbar-dropdown-background; - color: $navbar-dropdown-color; - @if(mixin-exists(hook-navbar-dropdown)) {@include hook-navbar-dropdown();} -} - -/* Show */ -.uk-navbar-dropdown.uk-open { display: block; } - -/* - * Direction / Alignment modifiers - */ - -/* Direction */ -[class*='uk-navbar-dropdown-top'] { margin-top: (-$navbar-dropdown-margin); } -[class*='uk-navbar-dropdown-bottom'] { margin-top: $navbar-dropdown-margin; } -[class*='uk-navbar-dropdown-left'] { margin-left: (-$navbar-dropdown-margin); } -[class*='uk-navbar-dropdown-right'] { margin-left: $navbar-dropdown-margin; } - -/* - * Grid - * Adopts `uk-grid` - */ - -/* Gutter Horizontal */ -.uk-navbar-dropdown-grid { margin-left: (-$navbar-dropdown-grid-gutter-horizontal); } -.uk-navbar-dropdown-grid > * { padding-left: $navbar-dropdown-grid-gutter-horizontal; } - -/* Gutter Vertical */ -.uk-navbar-dropdown-grid > .uk-grid-margin { margin-top: $navbar-dropdown-grid-gutter-vertical; } - -/* Stack */ -.uk-navbar-dropdown-stack .uk-navbar-dropdown-grid > * { width: 100% !important; } - -/* - * Width modifier - */ - -.uk-navbar-dropdown-width-2:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 2); } -.uk-navbar-dropdown-width-3:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 3); } -.uk-navbar-dropdown-width-4:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 4); } -.uk-navbar-dropdown-width-5:not(.uk-navbar-dropdown-stack) { width: ($navbar-dropdown-width * 5); } - -/* - * Dropbar modifier - */ - -.uk-navbar-dropdown-dropbar { - margin-top: $navbar-dropdown-dropbar-margin-top; - margin-bottom: $navbar-dropdown-dropbar-margin-bottom; - @if(mixin-exists(hook-navbar-dropdown-dropbar)) {@include hook-navbar-dropdown-dropbar();} -} - - -/* Dropdown Nav - * Adopts `uk-nav` - ========================================================================== */ - -.uk-navbar-dropdown-nav { - @if(mixin-exists(hook-navbar-dropdown-nav)) {@include hook-navbar-dropdown-nav();} -} - -/* - * Items - */ - -.uk-navbar-dropdown-nav > li > a { - color: $navbar-dropdown-nav-item-color; - @if(mixin-exists(hook-navbar-dropdown-nav-item)) {@include hook-navbar-dropdown-nav-item();} -} - -/* Hover + Focus */ -.uk-navbar-dropdown-nav > li > a:hover, -.uk-navbar-dropdown-nav > li > a:focus { - color: $navbar-dropdown-nav-item-hover-color; - @if(mixin-exists(hook-navbar-dropdown-nav-item-hover)) {@include hook-navbar-dropdown-nav-item-hover();} -} - -/* Active */ -.uk-navbar-dropdown-nav > li.uk-active > a { - color: $navbar-dropdown-nav-item-active-color; - @if(mixin-exists(hook-navbar-dropdown-nav-item-active)) {@include hook-navbar-dropdown-nav-item-active();} -} - -/* - * Header - */ - -.uk-navbar-dropdown-nav .uk-nav-header { - color: $navbar-dropdown-nav-header-color; - @if(mixin-exists(hook-navbar-dropdown-nav-header)) {@include hook-navbar-dropdown-nav-header();} -} - -/* - * Divider - */ - -.uk-navbar-dropdown-nav .uk-nav-divider { - border-top: $navbar-dropdown-nav-divider-border-width solid $navbar-dropdown-nav-divider-border; - @if(mixin-exists(hook-navbar-dropdown-nav-divider)) {@include hook-navbar-dropdown-nav-divider();} -} - -/* - * Sublists - */ - -.uk-navbar-dropdown-nav .uk-nav-sub a { color: $navbar-dropdown-nav-sublist-item-color; } - -.uk-navbar-dropdown-nav .uk-nav-sub a:hover, -.uk-navbar-dropdown-nav .uk-nav-sub a:focus { color: $navbar-dropdown-nav-sublist-item-hover-color; } - - -/* Dropbar - ========================================================================== */ - -.uk-navbar-dropbar { - background: $navbar-dropbar-background; - @if(mixin-exists(hook-navbar-dropbar)) {@include hook-navbar-dropbar();} -} - -/* - * Slide modifier - */ - -.uk-navbar-dropbar-slide { - position: absolute; - z-index: $navbar-dropbar-z-index; - left: 0; - right: 0; - @if(mixin-exists(hook-navbar-dropbar-slide)) {@include hook-navbar-dropbar-slide();} -} - - -// Hooks -// ======================================================================== - -@if(mixin-exists(hook-navbar-misc)) {@include hook-navbar-misc();} - -// @mixin hook-navbar(){} -// @mixin hook-navbar-container(){} -// @mixin hook-navbar-nav-item(){} -// @mixin hook-navbar-nav-item-hover(){} -// @mixin hook-navbar-nav-item-onclick(){} -// @mixin hook-navbar-nav-item-active(){} -// @mixin hook-navbar-item(){} -// @mixin hook-navbar-toggle(){} -// @mixin hook-navbar-toggle-hover(){} -// @mixin hook-navbar-toggle-icon(){} -// @mixin hook-navbar-toggle-icon-hover(){} -// @mixin hook-navbar-subtitle(){} -// @mixin hook-navbar-transparent(){} -// @mixin hook-navbar-sticky(){} -// @mixin hook-navbar-dropdown(){} -// @mixin hook-navbar-dropdown-dropbar(){} -// @mixin hook-navbar-dropdown-nav(){} -// @mixin hook-navbar-dropdown-nav-item(){} -// @mixin hook-navbar-dropdown-nav-item-hover(){} -// @mixin hook-navbar-dropdown-nav-item-active(){} -// @mixin hook-navbar-dropdown-nav-header(){} -// @mixin hook-navbar-dropdown-nav-divider(){} -// @mixin hook-navbar-dropbar(){} -// @mixin hook-navbar-dropbar-slide(){} -// @mixin hook-navbar-misc(){} - - -// Inverse -// ======================================================================== - -$inverse-navbar-nav-item-color: $inverse-global-muted-color !default; -$inverse-navbar-nav-item-hover-color: $inverse-global-color !default; -$inverse-navbar-nav-item-onclick-color: $inverse-global-emphasis-color !default; -$inverse-navbar-nav-item-active-color: $inverse-global-emphasis-color !default; -$inverse-navbar-item-color: $inverse-global-color !default; -$inverse-navbar-toggle-color: $inverse-global-muted-color !default; -$inverse-navbar-toggle-hover-color: $inverse-global-color !default; - - - -// @mixin hook-inverse-navbar-nav-item(){} -// @mixin hook-inverse-navbar-nav-item-hover(){} -// @mixin hook-inverse-navbar-nav-item-onclick(){} -// @mixin hook-inverse-navbar-nav-item-active(){} -// @mixin hook-inverse-navbar-item(){} -// @mixin hook-inverse-navbar-toggle(){} -// @mixin hook-inverse-navbar-toggle-hover(){} |