// Name: Nav // Description: Defines styles for list navigations // // Component: `uk-nav` // // Sub-objects: `uk-nav-parent-icon` // `uk-nav-header` // `uk-nav-divider` // `uk-nav-subtitle` // `uk-nav-sub` // // Modifiers: `uk-nav-default` // `uk-nav-primary` // `uk-nav-center`, // `uk-nav-divider` // // States: `uk-active` // `uk-parent` // `uk-open` // `uk-touch` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Nav ========================================================================== */ /* * Reset */ .uk-nav, .uk-nav ul { margin: 0; padding: 0; list-style: none; } /* * 1. Center content vertically, e.g. an icon * 2. Imitate white space gap when using flexbox * 3. Reset link */ .uk-nav li > a { /* 1 */ display: flex; align-items: center; /* 2 */ column-gap: 0.25em; /* 3*/ text-decoration: 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 ========================================================================== */ .uk-nav-parent-icon { margin-left: auto; transition: transform 0.3s ease-out; } .uk-nav > li.uk-open > a .uk-nav-parent-icon { transform: rotateX(180deg); } /* 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 .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 { font-size: $nav-default-font-size; line-height: $nav-default-line-height; @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 */ .uk-nav-default > li > a:hover { 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();} } /* * Subtitle */ .uk-nav-default .uk-nav-subtitle { font-size: $nav-default-subtitle-font-size; @if(mixin-exists(hook-nav-default-subtitle)) {@include hook-nav-default-subtitle();} } /* * 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 { font-size: $nav-default-sublist-font-size; line-height: $nav-default-sublist-line-height; } .uk-nav-default .uk-nav-sub a { color: $nav-default-sublist-item-color; } .uk-nav-default .uk-nav-sub a:hover { color: $nav-default-sublist-item-hover-color; } .uk-nav-default .uk-nav-sub li.uk-active > a { color: $nav-default-sublist-item-active-color; } /* Primary modifier ========================================================================== */ .uk-nav-primary { font-size: $nav-primary-font-size; line-height: $nav-primary-line-height; @if(mixin-exists(hook-nav-primary)) {@include hook-nav-primary();} } /* * Items */ .uk-nav-primary > li > a { color: $nav-primary-item-color; @if(mixin-exists(hook-nav-primary-item)) {@include hook-nav-primary-item();} } /* Hover */ .uk-nav-primary > li > a:hover { 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();} } /* * Subtitle */ .uk-nav-primary .uk-nav-subtitle { font-size: $nav-primary-subtitle-font-size; @if(mixin-exists(hook-nav-primary-subtitle)) {@include hook-nav-primary-subtitle();} } /* * 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 { font-size: $nav-primary-sublist-font-size; line-height: $nav-primary-sublist-line-height; } .uk-nav-primary .uk-nav-sub a { color: $nav-primary-sublist-item-color; } .uk-nav-primary .uk-nav-sub a:hover { color: $nav-primary-sublist-item-hover-color; } .uk-nav-primary .uk-nav-sub li.uk-active > a { color: $nav-primary-sublist-item-active-color; } /* Secondary modifier ========================================================================== */ .uk-nav-secondary { font-size: $nav-secondary-font-size; line-height: $nav-secondary-line-height; @if(mixin-exists(hook-nav-secondary)) {@include hook-nav-secondary();} } /* * Items */ .uk-nav-secondary > li > a { color: $nav-secondary-item-color; @if(mixin-exists(hook-nav-secondary-item)) {@include hook-nav-secondary-item();} } /* Hover */ .uk-nav-secondary > li > a:hover { color: $nav-secondary-item-hover-color; @if(mixin-exists(hook-nav-secondary-item-hover)) {@include hook-nav-secondary-item-hover();} } /* Active */ .uk-nav-secondary > li.uk-active > a { color: $nav-secondary-item-active-color; @if(mixin-exists(hook-nav-secondary-item-active)) {@include hook-nav-secondary-item-active();} } /* * Subtitle */ .uk-nav-secondary .uk-nav-subtitle { font-size: $nav-secondary-subtitle-font-size; color: $nav-secondary-subtitle-color; @if(mixin-exists(hook-nav-secondary-subtitle)) {@include hook-nav-secondary-subtitle();} } /* Hover */ .uk-nav-secondary > li > a:hover .uk-nav-subtitle { color: $nav-secondary-subtitle-hover-color; @if(mixin-exists(hook-nav-secondary-subtitle-hover)) {@include hook-nav-secondary-subtitle-hover();} } /* Active */ .uk-nav-secondary > li.uk-active > a .uk-nav-subtitle { color: $nav-secondary-subtitle-active-color; @if(mixin-exists(hook-nav-secondary-subtitle-active)) {@include hook-nav-secondary-subtitle-active();} } /* * Header */ .uk-nav-secondary .uk-nav-header { color: $nav-secondary-header-color; @if(mixin-exists(hook-nav-secondary-header)) {@include hook-nav-secondary-header();} } /* * Divider */ .uk-nav-secondary .uk-nav-divider { border-top: $nav-secondary-divider-border-width solid $nav-secondary-divider-border; @if(mixin-exists(hook-nav-secondary-divider)) {@include hook-nav-secondary-divider();} } /* * Sublists */ .uk-nav-secondary .uk-nav-sub { font-size: $nav-secondary-sublist-font-size; line-height: $nav-secondary-sublist-line-height; } .uk-nav-secondary .uk-nav-sub a { color: $nav-secondary-sublist-item-color; } .uk-nav-secondary .uk-nav-sub a:hover { color: $nav-secondary-sublist-item-hover-color; } .uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $nav-secondary-sublist-item-active-color; } /* Alignment modifier ========================================================================== */ /* * 1. Center header * 2. Center items */ /* 1 */ .uk-nav-center { text-align: center; } /* 2 */ .uk-nav-center li > a { justify-content: center; } /* Sublists */ .uk-nav-center .uk-nav-sub, .uk-nav-center .uk-nav-sub ul { padding-left: 0; } /* Parent icon */ .uk-nav-center .uk-nav-parent-icon { margin-left: $nav-parent-icon-margin-left; } /* Style modifier ========================================================================== */ /* * Divider * Naming is in plural to prevent conflicts with divider sub object. */ .uk-nav.uk-nav-divider > :not(.uk-nav-header, .uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: $nav-dividers-margin-top; padding-top: $nav-dividers-margin-top; border-top: $nav-dividers-border-width solid $nav-dividers-border; @if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();} } // Hooks // ======================================================================== @if(mixin-exists(hook-nav-misc)) {@include hook-nav-misc();} // @mixin hook-nav-sub(){} // @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-subtitle(){} // @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-subtitle(){} // @mixin hook-nav-primary-header(){} // @mixin hook-nav-primary-divider(){} // @mixin hook-nav-secondary(){} // @mixin hook-nav-secondary-item(){} // @mixin hook-nav-secondary-item-hover(){} // @mixin hook-nav-secondary-item-active(){} // @mixin hook-nav-secondary-subtitle(){} // @mixin hook-nav-secondary-subtitle-hover(){} // @mixin hook-nav-secondary-subtitle-active(){} // @mixin hook-nav-secondary-header(){} // @mixin hook-nav-secondary-divider(){} // @mixin hook-nav-dividers(){} // @mixin hook-nav-misc(){} // Inverse // ======================================================================== // @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(){} // @mixin hook-inverse-nav-secondary-item(){} // @mixin hook-inverse-nav-secondary-item-hover(){} // @mixin hook-inverse-nav-secondary-item-active(){} // @mixin hook-inverse-nav-secondary-subtitle(){} // @mixin hook-inverse-nav-secondary-subtitle-hover(){} // @mixin hook-inverse-nav-secondary-subtitle-active(){} // @mixin hook-inverse-nav-secondary-header(){} // @mixin hook-inverse-nav-secondary-divider(){} // @mixin hook-inverse-nav-dividers(){}