1 | // Name: Sortable
|
2 | // Description: Component to create sortable grids and lists
|
3 | //
|
4 | // Component: `uk-sortable`
|
5 | //
|
6 | // Sub-objects: `uk-sortable-drag`
|
7 | // `uk-sortable-placeholder`
|
8 | // `uk-sortable-handle`
|
9 | //
|
10 | // Modifiers: `uk-sortable-empty`
|
11 | //
|
12 | // States: `uk-drag`
|
13 | //
|
14 | // ========================================================================
|
15 |
|
16 |
|
17 | // Variables
|
18 | // ========================================================================
|
19 |
|
20 | $sortable-dragged-z-index: $global-z-index + 50 !default;
|
21 |
|
22 | $sortable-placeholder-opacity: 0 !default;
|
23 |
|
24 | $sortable-empty-height: 50px !default;
|
25 |
|
26 |
|
27 | /* ========================================================================
|
28 | Component: Sortable
|
29 | ========================================================================== */
|
30 |
|
31 | .uk-sortable {
|
32 | position: relative;
|
33 | @if(mixin-exists(hook-sortable)) {@include hook-sortable();}
|
34 | }
|
35 |
|
36 | /*
|
37 | * Deactivate pointer-events on SVGs in Safari
|
38 | */
|
39 |
|
40 | .uk-sortable svg { pointer-events: none; }
|
41 |
|
42 | /*
|
43 | * Remove margin from the last-child
|
44 | */
|
45 |
|
46 | .uk-sortable > :last-child { margin-bottom: 0; }
|
47 |
|
48 |
|
49 | /* Drag
|
50 | ========================================================================== */
|
51 |
|
52 | .uk-sortable-drag {
|
53 | position: absolute ;
|
54 | z-index: $sortable-dragged-z-index ;
|
55 | pointer-events: none;
|
56 | @if(mixin-exists(hook-sortable-drag)) {@include hook-sortable-drag();}
|
57 | }
|
58 |
|
59 |
|
60 | /* Placeholder
|
61 | ========================================================================== */
|
62 |
|
63 | .uk-sortable-placeholder {
|
64 | opacity: $sortable-placeholder-opacity;
|
65 | pointer-events: none;
|
66 | @if(mixin-exists(hook-sortable-placeholder)) {@include hook-sortable-placeholder();}
|
67 | }
|
68 |
|
69 |
|
70 | /* Empty modifier
|
71 | ========================================================================== */
|
72 |
|
73 | .uk-sortable-empty {
|
74 | min-height: $sortable-empty-height;
|
75 | @if(mixin-exists(hook-sortable-empty)) {@include hook-sortable-empty();}
|
76 | }
|
77 |
|
78 |
|
79 | /* Handle
|
80 | ========================================================================== */
|
81 |
|
82 | /* Hover */
|
83 | .uk-sortable-handle:hover { cursor: move; }
|
84 |
|
85 |
|
86 |
|
87 | // Hooks
|
88 | // ========================================================================
|
89 |
|
90 | @if(mixin-exists(hook-sortable-misc)) {@include hook-sortable-misc();}
|
91 |
|
92 | // @mixin hook-sortable(){}
|
93 | // @mixin hook-sortable-drag(){}
|
94 | // @mixin hook-sortable-placeholder(){}
|
95 | // @mixin hook-sortable-empty(){}
|
96 | // @mixin hook-sortable-misc(){}
|