|
0
|
1 $nestable-root-class: dd;
|
|
|
2 $nestable-list-class: dd-list;
|
|
|
3 $nestable-item-class: dd-item;
|
|
|
4 $nestable-drag-class: dd-dragel;
|
|
|
5 $nestable-handle-class: dd-handle;
|
|
|
6 $nestable-collapsed-class: dd-collapsed;
|
|
|
7 $nestable-placeholder-class: dd-placeholder;
|
|
|
8 $nestable-no-children-class: dd-nochildren;
|
|
|
9 $nestable-empty-class: dd-empty;
|
|
|
10
|
|
|
11 .#{$nestable-root-class} {
|
|
|
12 position: relative;
|
|
|
13 display: block;
|
|
|
14 margin: 0;
|
|
|
15 padding: 0;
|
|
|
16 max-width: 600px;
|
|
|
17 list-style: none;
|
|
|
18 font-size: 13px;
|
|
|
19 line-height: 20px;
|
|
|
20 }
|
|
|
21
|
|
|
22 .#{$nestable-list-class} {
|
|
|
23 display: block;
|
|
|
24 position: relative;
|
|
|
25 margin: 0;
|
|
|
26 padding: 0;
|
|
|
27 list-style: none;
|
|
|
28
|
|
|
29 .#{$nestable-list-class} {
|
|
|
30 padding-left: 30px;
|
|
|
31 }
|
|
|
32 }
|
|
|
33
|
|
|
34 .#{$nestable-item-class},
|
|
|
35 .#{$nestable-empty-class},
|
|
|
36 .#{$nestable-placeholder-class} {
|
|
|
37 display: block;
|
|
|
38 position: relative;
|
|
|
39 margin: 0;
|
|
|
40 padding: 0;
|
|
|
41 min-height: 20px;
|
|
|
42 font-size: 13px;
|
|
|
43 line-height: 20px;
|
|
|
44 }
|
|
|
45
|
|
|
46 .#{$nestable-handle-class} {
|
|
|
47 display: block;
|
|
|
48 height: 30px;
|
|
|
49 margin: 5px 0;
|
|
|
50 padding: 5px 10px;
|
|
|
51 color: #333;
|
|
|
52 text-decoration: none;
|
|
|
53 font-weight: bold;
|
|
|
54 border: 1px solid #ccc;
|
|
|
55 background: #fafafa;
|
|
|
56 border-radius: 3px;
|
|
|
57 box-sizing: border-box;
|
|
|
58
|
|
|
59 &:hover {
|
|
|
60 color: #2ea8e5;
|
|
|
61 background: #fff;
|
|
|
62 }
|
|
|
63 }
|
|
|
64
|
|
|
65 .#{$nestable-item-class} > button {
|
|
|
66 position: relative;
|
|
|
67 cursor: pointer;
|
|
|
68 float: left;
|
|
|
69 width: 25px;
|
|
|
70 height: 20px;
|
|
|
71 margin: 5px 0;
|
|
|
72 padding: 0;
|
|
|
73 text-indent: 100%;
|
|
|
74 white-space: nowrap;
|
|
|
75 overflow: hidden;
|
|
|
76 border: 0;
|
|
|
77 background: transparent;
|
|
|
78 font-size: 12px;
|
|
|
79 line-height: 1;
|
|
|
80 text-align: center;
|
|
|
81 font-weight: bold;
|
|
|
82
|
|
|
83 &:before {
|
|
|
84 display: block;
|
|
|
85 position: absolute;
|
|
|
86 width: 100%;
|
|
|
87 text-align: center;
|
|
|
88 text-indent: 0;
|
|
|
89 }
|
|
|
90
|
|
|
91 &.dd-expand:before {
|
|
|
92 content: '+';
|
|
|
93 }
|
|
|
94
|
|
|
95 &.dd-collapse:before {
|
|
|
96 content: '-';
|
|
|
97 }
|
|
|
98 }
|
|
|
99
|
|
|
100 .dd-expand {
|
|
|
101 display: none;
|
|
|
102 }
|
|
|
103 .#{$nestable-collapsed-class} .#{$nestable-list-class},
|
|
|
104 .#{$nestable-collapsed-class} .dd-collapse {
|
|
|
105 display: none;
|
|
|
106 }
|
|
|
107 .#{$nestable-collapsed-class} .dd-expand {
|
|
|
108 display: block;
|
|
|
109 }
|
|
|
110
|
|
|
111 .#{$nestable-empty-class},
|
|
|
112 .#{$nestable-placeholder-class} {
|
|
|
113 margin: 5px 0;
|
|
|
114 padding: 0;
|
|
|
115 min-height: 30px;
|
|
|
116 background: #f2fbff;
|
|
|
117 border: 1px dashed #b6bcbf;
|
|
|
118 box-sizing: border-box;
|
|
|
119 -moz-box-sizing: border-box;
|
|
|
120 }
|
|
|
121
|
|
|
122 .#{$nestable-empty-class} {
|
|
|
123 border: 1px dashed #bbb;
|
|
|
124 min-height: 100px;
|
|
|
125 background-color: #e5e5e5;
|
|
|
126 background-size: 60px 60px;
|
|
|
127 background-position: 0 0, 30px 30px;
|
|
|
128 }
|
|
|
129
|
|
|
130 .#{$nestable-drag-class} {
|
|
|
131 position: absolute;
|
|
|
132 pointer-events: none;
|
|
|
133 z-index: 9999;
|
|
|
134
|
|
|
135 &> .#{$nestable-item-class} .#{$nestable-handle-class} {
|
|
|
136 margin-top: 0;
|
|
|
137 }
|
|
|
138
|
|
|
139 .#{$nestable-handle-class} {
|
|
|
140 box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
|
|
|
141 }
|
|
|
142 }
|
|
|
143
|
|
|
144 .#{$nestable-no-children-class} .#{$nestable-placeholder-class} {
|
|
|
145 display: none;
|
|
|
146 }
|
