Project

General

Profile

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(){}
(51-51/66)