// Name: Dropbar // Description: Component to create a dropbar based on Drop component // // Component: `uk-dropbar` // // Modifiers: `uk-dropbar-large` // `uk-dropbar-top` // `uk-dropbar-bottom` // `uk-dropbar-left` // `uk-dropbar-right` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Dropbar ========================================================================== */ /* * Adopts `uk-drop` * 1. Reset drop * 2. Style */ .uk-dropbar { --uk-position-offset: #{$dropbar-margin}; --uk-position-shift-offset: 0; --uk-position-viewport-offset: 0; /* 1 */ width: auto; /* 2 */ padding: $dropbar-padding-top $dropbar-padding-horizontal $dropbar-padding-bottom $dropbar-padding-horizontal; background: $dropbar-background; color: $dropbar-color; @if(mixin-exists(hook-dropbar)) {@include hook-dropbar();} } /* * Remove margin from the last-child */ .uk-dropbar > :last-child { margin-bottom: 0; } /* Phone landscape and bigger */ @media (min-width: $breakpoint-small) { .uk-dropbar { padding-left: $dropbar-padding-horizontal-s; padding-right: $dropbar-padding-horizontal-s; } } /* Tablet landscape and bigger */ @media (min-width: $breakpoint-medium) { .uk-dropbar { padding-left: $dropbar-padding-horizontal-m; padding-right: $dropbar-padding-horizontal-m; } } // Color Mode @if ( $dropbar-color-mode == light ) { .uk-dropbar { @extend .uk-light !optional;} } @if ( $dropbar-color-mode == dark ) { .uk-dropbar { @extend .uk-dark !optional;} } @if ($dropbar-color-mode != $inverse-global-color-mode) { .uk-dropbar :focus-visible { outline-color: $dropbar-focus-outline !important; } } /* Size modifier ========================================================================== */ .uk-dropbar-large { padding-top: $dropbar-large-padding-top; padding-bottom: $dropbar-large-padding-bottom; } /* Direction modifier ========================================================================== */ .uk-dropbar-top { @if(mixin-exists(hook-dropbar-top)) {@include hook-dropbar-top();} } .uk-dropbar-bottom { @if(mixin-exists(hook-dropbar-bottom)) {@include hook-dropbar-bottom();} } .uk-dropbar-left { @if(mixin-exists(hook-dropbar-left)) {@include hook-dropbar-left();} } .uk-dropbar-right { @if(mixin-exists(hook-dropbar-right)) {@include hook-dropbar-right();} } // Hooks // ======================================================================== @if(mixin-exists(hook-dropbar-misc)) {@include hook-dropbar-misc();} // @mixin hook-dropbar(){} // @mixin hook-dropbar-top(){} // @mixin hook-dropbar-bottom(){} // @mixin hook-dropbar-left(){} // @mixin hook-dropbar-right(){} // @mixin hook-dropbar-misc(){}