Project

General

Profile

1
// Name:            Drop
2
// Description:     Component to position any element next to any other element.
3
//
4
// Component:       `uk-drop`
5
//
6
// Modifiers:       `uk-drop-top-*`
7
//                  `uk-drop-bottom-*`
8
//                  `uk-drop-left-*`
9
//                  `uk-drop-right-*`
10
//                  `uk-drop-stack`
11
//                  `uk-drop-grid`
12
//
13
// States:          `uk-open`
14
//
15
// Uses:            Animation
16
//
17
// ========================================================================
18

    
19

    
20
// Variables
21
// ========================================================================
22

    
23
@drop-z-index:                              @global-z-index + 20;
24
@drop-width:                                300px;
25
@drop-margin:                               @global-margin;
26

    
27

    
28
/* ========================================================================
29
   Component: Drop
30
 ========================================================================== */
31

    
32
/*
33
 * 1. Hide by default
34
 * 2. Set position
35
 * 3. Set a default width
36
 */
37

    
38
.uk-drop {
39
    /* 1 */
40
    display: none;
41
    /* 2 */
42
    position: absolute;
43
    z-index: @drop-z-index;
44
    /* 3 */
45
    box-sizing: border-box;
46
    width: @drop-width;
47
}
48

    
49
/* Show */
50
.uk-drop.uk-open { display: block; }
51

    
52

    
53
/* Direction / Alignment modifiers
54
 ========================================================================== */
55

    
56
/* Direction */
57
[class*='uk-drop-top'] { margin-top: -@drop-margin; }
58
[class*='uk-drop-bottom'] { margin-top: @drop-margin; }
59
[class*='uk-drop-left'] { margin-left: -@drop-margin; }
60
[class*='uk-drop-right'] { margin-left: @drop-margin; }
61

    
62

    
63
/* Grid modifiers
64
 ========================================================================== */
65

    
66
.uk-drop-stack .uk-drop-grid > * { width: 100% !important; }
67

    
68

    
69
// Hooks
70
// ========================================================================
71

    
72
.hook-drop-misc;
73

    
74
.hook-drop-misc() {}
(22-22/66)