pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
section-nestables.less
(5356B)
1 /*
2 * NESTABLES
3 */
4
5 .dd {
6 position: relative;
7 display: block;
8 margin: 0;
9 padding: 0;
10 max-width: 600px;
11 list-style: none;
12 font-size: 13px;
13 line-height: 20px;
14 }
15
16 .dd-list {
17 display: block;
18 position: relative;
19 margin: 0;
20 padding: 0;
21 list-style: none;
22 }
23 .dd-list .dd-list {
24 padding-left: 30px;
25 }
26 .dd-collapsed .dd-list {
27 display: none;
28 }
29
30 .dd-item, .dd-empty, .dd-placeholder {
31 display: block;
32 position: relative;
33 margin: 0;
34 padding: 0;
35 min-height: 20px;
36 font-size: 13px;
37 line-height: 20px;
38 }
39
40 .dd-handle {
41 display: block;
42 font-size: 15px;
43 margin: 5px 0;
44 padding: 7px 15px;
45 color: @gray-dark;
46 text-decoration: none;
47 border: 1px solid lighten(@gray-mid-light, 6%);
48 background: lighten( @gray-lightest, 3%);
49 }
50 .dd-handle:hover {
51 color: #2ea8e5;
52 background: @white;
53 }
54
55 .dd-item > button {
56 position: relative;
57 cursor: pointer;
58 float: left;
59 width: 25px;
60 height: 20px;
61 margin: 7px 10px;
62 line-height: 22px !important;
63 padding: 0;
64 text-indent: 100%;
65 white-space: nowrap;
66 overflow: hidden;
67 border: 0;
68 background: rgba(red(@black), green(@black), blue(@black), 0);
69 text-align: center;
70 }
71 .dd-item > button {
72 display: inline-block;
73 font-family: FontAwesome;
74 font-style: normal;
75 font-weight: normal;
76 line-height: 1;
77 -webkit-font-smoothing: antialiased;
78 -moz-osx-font-smoothing: grayscale;
79 font-size: 18px;
80 }
81 .dd-item > button:before {
82 content: '\f055';
83 display: block;
84 position: absolute;
85 width: 100%;
86 text-align: center;
87 text-indent: 0;
88 color:@blueSky;
89 }
90 .dd-item > button[data-action="collapse"]:before {
91 content: '\f056';
92 color: @brand-danger;
93 }
94
95 .dd-placeholder, .dd-empty {
96 margin: 5px 0;
97 padding: 0;
98 min-height: 30px;
99 background: #f2fbff;
100 border: 1px dashed #b6bcbf;
101 box-sizing: border-box;
102 -moz-box-sizing: border-box;
103 }
104 .dd-empty {
105 border: 1px dashed #bbb;
106 min-height: 100px;
107 background-color: @gray-lighter;
108 background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
109 background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
110 background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
111 background-size: 60px 60px;
112 background-position: 0 0, 30px 30px;
113 }
114
115 .dd-dragel {
116 position: absolute;
117 pointer-events: none;
118 z-index: 9999;
119 }
120 .dd-dragel > .dd-item .dd-handle {
121 margin-top: 0;
122 }
123 .dd-dragel .dd-handle {
124 -webkit-box-shadow: 2px 4px 6px 0 rgba(red(@black), green(@black), blue(@black),.1);
125 box-shadow: 2px 4px 6px 0 rgba(red(@black), green(@black), blue(@black),.1);
126 }
127
128 /**
129 * Nestable Extras
130 */
131
132 .nestable-lists {
133 display: block;
134 clear: both;
135 padding: 30px 0;
136 width: 100%;
137 border: 0;
138 border-top: 2px solid @gray-mid-light;
139 border-bottom: 2px solid @gray-mid-light;
140 }
141
142 #nestable-menu {
143 padding: 0;
144 margin: 10px 0 20px;
145 }
146
147 #nestable-output, #nestable2-output {
148 width: 100%;
149 padding: 5px;
150 }
151
152 @media only screen and (min-width: 700px) {
153
154 .dd {
155 float: left;
156 width: 100%;
157 }
158 .dd + .dd {
159 margin-left: 2%;
160 }
161
162 }
163
164 .dd-hover > .dd-handle {
165 background: #2ea8e5 !important;
166 }
167
168 /**
169 * Nestable Draggable Handles
170 */
171
172 .dd3-content {
173 display: block;
174 margin: 5px 0;
175 padding: 6px 10px 8px 40px;
176 font-size: 15px;
177 color: @gray-dark;
178 text-decoration: none;
179 border: 1px solid lighten(@gray-mid-light, 6%);
180 background: lighten( @gray-lightest, 3%);
181 }
182 .dd3-content:hover {
183 color: #2ea8e5;
184 background: @white;
185 }
186
187 .dd-dragel > .dd3-item > .dd3-content {
188 margin: 0;
189 }
190
191 .dd3-item > button {
192 margin-left: 38px;
193 }
194
195 .dd3-handle {
196 position: absolute;
197 margin: 0;
198 left: 0;
199 top: 0;
200 cursor: move;
201 width: 30px;
202 text-indent: 100%;
203 white-space: nowrap;
204 overflow: hidden;
205 border: 1px solid #aaa;
206 background: @gray-mid-light;
207 background: -webkit-linear-gradient(top, darken(@gray-lighter, 7%) 0%, #bbb 100%);
208 background: -moz-linear-gradient(top, darken(@gray-lighter, 7%) 0%, #bbb 100%);
209 background: linear-gradient(top, darken(@gray-lighter, 7%) 0%, #bbb 100%);
210 display: inline-block;
211 font-family: FontAwesome;
212 font-style: normal;
213 font-weight: normal;
214 line-height: 1;
215 -webkit-font-smoothing: antialiased;
216 -moz-osx-font-smoothing: grayscale;
217 font-size: 18px;
218 padding: 8px 15px;
219 }
220 .dd3-handle:before {
221 content: '\f0c9';
222 display: block;
223 position: absolute;
224 left: 0;
225 top: 3px;
226 width: 100%;
227 text-align: center;
228 text-indent: 0;
229 color: #818181;
230 font-weight: normal;
231 line-height: 28px;
232 }
233 .dd3-handle:hover:before {
234 color: #C27616;
235 }
236
237 .dd-handle:hover + .dd-list .dd-handle, .dd-handle:hover {
238 background: #FDDFB3 !important;
239 border: 1px solid #FAA937;
240 color: #333 !important;
241 }
242
243 .dd-handle > span {
244 font-size: 13px;
245 color: #777;
246 }
247 .dd-dragel > .dd-item > .dd-handle {
248 border-left-width: 4px;
249 }
250
251 .dd-dragel > li.dd-item.dd3-item {
252 position: relative;
253 top: 10px;
254 left: 10px;
255 z-index: 999;
256 }