// Name: Drop // Description: Component to position any element next to any other element. // // Component: `uk-drop` // // Sub-objects: `uk-drop-parent-icon` // // Modifiers: `uk-drop-stack` // `uk-drop-grid` // // States: `uk-open` // // Uses: Animation // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Drop ========================================================================== */ /* * 1. Hide by default * 2. Set position * 3. Set a default width */ .uk-drop { /* 1 */ display: none; /* 2 */ position: absolute; z-index: $drop-z-index; --uk-position-offset: #{$drop-margin}; --uk-position-viewport-offset: #{$drop-viewport-margin}; /* 3 */ box-sizing: border-box; width: $drop-width; } /* Show */ .uk-drop.uk-open { display: block; } /* Grid modifiers ========================================================================== */ .uk-drop-stack .uk-drop-grid > * { width: 100% !important; } /* Parent icon ========================================================================== */ .uk-drop-parent-icon { margin-left: $drop-parent-icon-margin-left; transition: transform 0.3s ease-out; } [aria-expanded="true"] > .uk-drop-parent-icon { transform: rotateX(180deg); } // Hooks // ======================================================================== @if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();} // @mixin hook-drop-misc(){}