// Name: Dropdown // Description: Component to create a dropdown based on Drop component // // Component: `uk-dropdown` // // Adopted: `uk-dropdown-nav` // // Modifiers: `uk-dropdown-large` // // States: `uk-active` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Dropdown ========================================================================== */ /* * Adopts `uk-drop` * 1. Reset drop and let text expand the width instead of wrapping * 2. Set a default width * 3. Style */ .uk-dropdown { --uk-position-offset: #{$dropdown-margin}; --uk-position-viewport-offset: #{$dropdown-viewport-margin}; /* 1 */ width: auto; /* 2 */ min-width: $dropdown-min-width; /* 3 */ padding: $dropdown-padding; background: $dropdown-background; color: $dropdown-color; @if(mixin-exists(hook-dropdown)) {@include hook-dropdown();} } /* * Remove margin from the last-child */ .uk-dropdown > :last-child { margin-bottom: 0; } // Color Mode @if ( $dropdown-color-mode == light ) { .uk-dropdown { @extend .uk-light !optional;} } @if ( $dropdown-color-mode == dark ) { .uk-dropdown { @extend .uk-dark !optional;} } @if ($dropdown-color-mode != $inverse-global-color-mode) { .uk-dropdown :focus-visible { outline-color: $dropdown-focus-outline !important; } } /* Size modifier ========================================================================== */ .uk-dropdown-large { padding: $dropdown-large-padding; } /* Dropbar modifier ========================================================================== */ /* * 1. Reset dropdown width to prevent to early shifting * 2. Reset style * 3. Padding */ .uk-dropdown-dropbar { /* 1 */ width: auto; /* 2 */ background: transparent; /* 3 */ padding: $dropdown-dropbar-padding-top 0 $dropdown-dropbar-padding-bottom 0; --uk-position-viewport-offset: #{$dropdown-dropbar-viewport-margin}; @if(mixin-exists(hook-dropdown-dropbar)) {@include hook-dropdown-dropbar();} } /* Phone landscape and bigger */ @media (min-width: $breakpoint-small) { .uk-dropdown-dropbar { --uk-position-viewport-offset: #{$dropdown-dropbar-viewport-margin-s}; } } /* Tablet landscape and bigger */ @media (min-width: $breakpoint-medium) { .uk-dropdown-dropbar { --uk-position-viewport-offset: #{$dropdown-dropbar-viewport-margin-m}; } } .uk-dropdown-dropbar-large { padding-top: $dropdown-dropbar-large-padding-top; padding-bottom: $dropdown-dropbar-large-padding-bottom; @if(mixin-exists(hook-dropdown-dropbar-large)) {@include hook-dropdown-dropbar-large();} } /* Nav * Adopts `uk-nav` ========================================================================== */ .uk-dropdown-nav { @if(mixin-exists(hook-dropdown-nav)) {@include hook-dropdown-nav();} } /* * Items */ .uk-dropdown-nav > li > a { color: $dropdown-nav-item-color; @if(mixin-exists(hook-dropdown-nav-item)) {@include hook-dropdown-nav-item();} } /* Hover + Active */ .uk-dropdown-nav > li > a:hover, .uk-dropdown-nav > li.uk-active > a { color: $dropdown-nav-item-hover-color; @if(mixin-exists(hook-dropdown-nav-item-hover)) {@include hook-dropdown-nav-item-hover();} } /* * Subtitle */ .uk-dropdown-nav .uk-nav-subtitle { font-size: $dropdown-nav-subtitle-font-size; @if(mixin-exists(hook-dropdown-nav-subtitle)) {@include hook-dropdown-nav-subtitle();} } /* * Header */ .uk-dropdown-nav .uk-nav-header { color: $dropdown-nav-header-color; @if(mixin-exists(hook-dropdown-nav-header)) {@include hook-dropdown-nav-header();} } /* * Divider */ .uk-dropdown-nav .uk-nav-divider { border-top: $dropdown-nav-divider-border-width solid $dropdown-nav-divider-border; @if(mixin-exists(hook-dropdown-nav-divider)) {@include hook-dropdown-nav-divider();} } /* * Sublists */ .uk-dropdown-nav .uk-nav-sub a { color: $dropdown-nav-sublist-item-color; } .uk-dropdown-nav .uk-nav-sub a:hover, .uk-dropdown-nav .uk-nav-sub li.uk-active > a { color: $dropdown-nav-sublist-item-hover-color; } // Hooks // ======================================================================== @if(mixin-exists(hook-dropdown-misc)) {@include hook-dropdown-misc();} // @mixin hook-dropdown(){} // @mixin hook-dropdown-dropbar(){} // @mixin hook-dropdown-dropbar-large(){} // @mixin hook-dropdown-nav(){} // @mixin hook-dropdown-nav-item(){} // @mixin hook-dropdown-nav-item-hover(){} // @mixin hook-dropdown-nav-subtitle(){} // @mixin hook-dropdown-nav-header(){} // @mixin hook-dropdown-nav-divider(){} // @mixin hook-dropdown-misc(){}