blob: fb5e9e8c5a19190354198dc93ee07636684dea25 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
// Name: Drop
// Description: Component to position any element next to any other element.
//
// Component: `uk-drop`
//
// Modifiers: `uk-drop-top-*`
// `uk-drop-bottom-*`
// `uk-drop-left-*`
// `uk-drop-right-*`
// `uk-drop-stack`
// `uk-drop-grid`
//
// States: `uk-open`
//
// Uses: Animation
//
// ========================================================================
// Variables
// ========================================================================
$drop-z-index: $global-z-index + 20 !default;
$drop-width: 300px !default;
$drop-margin: $global-margin !default;
/* ========================================================================
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;
/* 3 */
box-sizing: border-box;
width: $drop-width;
}
/* Show */
.uk-drop.uk-open { display: block; }
/* Direction / Alignment modifiers
========================================================================== */
/* Direction */
[class*='uk-drop-top'] { margin-top: (-$drop-margin); }
[class*='uk-drop-bottom'] { margin-top: $drop-margin; }
[class*='uk-drop-left'] { margin-left: (-$drop-margin); }
[class*='uk-drop-right'] { margin-left: $drop-margin; }
/* Grid modifiers
========================================================================== */
.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
// Hooks
// ========================================================================
@if(mixin-exists(hook-drop-misc)) {@include hook-drop-misc();}
// @mixin hook-drop-misc(){}
|
