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 browser touch actions in IE11
|
38
|
*/
|
39
|
|
40
|
.uk-sortable > * { touch-action: none; }
|
41
|
|
42
|
/*
|
43
|
* Deactivate pointer-events on SVGs in Safari
|
44
|
*/
|
45
|
|
46
|
.uk-sortable svg { pointer-events: none; }
|
47
|
|
48
|
/*
|
49
|
* Remove margin from the last-child
|
50
|
*/
|
51
|
|
52
|
.uk-sortable > :last-child { margin-bottom: 0; }
|
53
|
|
54
|
|
55
|
/* Drag
|
56
|
========================================================================== */
|
57
|
|
58
|
.uk-sortable-drag {
|
59
|
position: absolute !important;
|
60
|
z-index: $sortable-dragged-z-index !important;
|
61
|
pointer-events: none;
|
62
|
@if(mixin-exists(hook-sortable-drag)) {@include hook-sortable-drag();}
|
63
|
}
|
64
|
|
65
|
|
66
|
/* Placeholder
|
67
|
========================================================================== */
|
68
|
|
69
|
.uk-sortable-placeholder {
|
70
|
opacity: $sortable-placeholder-opacity;
|
71
|
@if(mixin-exists(hook-sortable-placeholder)) {@include hook-sortable-placeholder();}
|
72
|
}
|
73
|
|
74
|
|
75
|
/* Empty modifier
|
76
|
========================================================================== */
|
77
|
|
78
|
.uk-sortable-empty {
|
79
|
min-height: $sortable-empty-height;
|
80
|
@if(mixin-exists(hook-sortable-empty)) {@include hook-sortable-empty();}
|
81
|
}
|
82
|
|
83
|
|
84
|
/* Handle
|
85
|
========================================================================== */
|
86
|
|
87
|
/* Hover */
|
88
|
.uk-sortable-handle:hover { cursor: move; }
|
89
|
|
90
|
|
91
|
|
92
|
// Hooks
|
93
|
// ========================================================================
|
94
|
|
95
|
@if(mixin-exists(hook-sortable-misc)) {@include hook-sortable-misc();}
|
96
|
|
97
|
// @mixin hook-sortable(){}
|
98
|
// @mixin hook-sortable-drag(){}
|
99
|
// @mixin hook-sortable-placeholder(){}
|
100
|
// @mixin hook-sortable-empty(){}
|
101
|
// @mixin hook-sortable-misc(){}
|