1 | |
---|
2 | /* widget boxes */ |
---|
3 | .widget-box { |
---|
4 | padding:0; |
---|
5 | .box-shadow(none); |
---|
6 | margin:3px 0; |
---|
7 | |
---|
8 | border-bottom:1px solid #CCC; |
---|
9 | } |
---|
10 | |
---|
11 | @media only screen and (max-width: @screen-xs-max) { |
---|
12 | .widget-box { |
---|
13 | margin-top:7px; |
---|
14 | margin-bottom:7px; |
---|
15 | } |
---|
16 | } |
---|
17 | |
---|
18 | |
---|
19 | |
---|
20 | .widget-header { |
---|
21 | .box-sizing(content-box); |
---|
22 | |
---|
23 | position:relative; |
---|
24 | min-height:38px; |
---|
25 | |
---|
26 | background:mix(#FFFFFF , #EEEEEE); |
---|
27 | #gradient > .vertical(#FFFFFF , #EEEEEE); |
---|
28 | |
---|
29 | color:@widget-header-color; |
---|
30 | |
---|
31 | border:1px solid #CCC; |
---|
32 | border-bottom:1px solid #DDD; |
---|
33 | |
---|
34 | padding-left:12px; |
---|
35 | |
---|
36 | &:before, &:after { |
---|
37 | content: ""; |
---|
38 | display: table; |
---|
39 | line-height: 0; |
---|
40 | } |
---|
41 | &:after { |
---|
42 | clear:right; |
---|
43 | } |
---|
44 | } |
---|
45 | |
---|
46 | |
---|
47 | |
---|
48 | |
---|
49 | |
---|
50 | .collapsed { |
---|
51 | .widget-header { border-bottom-width:0; } |
---|
52 | .widget-body { display:none; } |
---|
53 | } |
---|
54 | |
---|
55 | |
---|
56 | .widget-header-flat { |
---|
57 | background:#F7F7F7; |
---|
58 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); |
---|
59 | } |
---|
60 | .widget-header-large { |
---|
61 | min-height:49px; |
---|
62 | padding-left:18px; |
---|
63 | } |
---|
64 | .widget-header-small { |
---|
65 | min-height:31px; |
---|
66 | padding-left:10px; |
---|
67 | } |
---|
68 | |
---|
69 | |
---|
70 | .widget-header > .widget-caption , .widget-header > :first-child { |
---|
71 | line-height:36px; |
---|
72 | padding:0; |
---|
73 | margin:0; |
---|
74 | display:inline; |
---|
75 | |
---|
76 | > [class*="icon-"] { |
---|
77 | margin-right:5px; |
---|
78 | font-weight:normal; |
---|
79 | //font-size:110%; |
---|
80 | display:inline-block; |
---|
81 | } |
---|
82 | } |
---|
83 | .widget-header-large > .widget-caption , .widget-header-large > :first-child { |
---|
84 | line-height:48px; |
---|
85 | } |
---|
86 | .widget-header-small > .widget-caption , .widget-header-small > :first-child { |
---|
87 | line-height:30px; |
---|
88 | } |
---|
89 | |
---|
90 | |
---|
91 | |
---|
92 | |
---|
93 | .widget-toolbar { |
---|
94 | display:inline-block; |
---|
95 | padding:0 10px; |
---|
96 | line-height:37px; |
---|
97 | float:right; |
---|
98 | position:relative; |
---|
99 | |
---|
100 | .widget-header-large > & { |
---|
101 | line-height:48px; |
---|
102 | } |
---|
103 | .widget-header-small > & { |
---|
104 | line-height:29px; |
---|
105 | } |
---|
106 | |
---|
107 | &.no-padding { |
---|
108 | padding:0; |
---|
109 | } |
---|
110 | &.padding-5 { |
---|
111 | padding:0 5px; |
---|
112 | } |
---|
113 | |
---|
114 | &:before {/* border on left ot it! */ |
---|
115 | display:inline-block; |
---|
116 | content:""; |
---|
117 | position:absolute; top:3px; bottom:3px; left:-1px; |
---|
118 | border:1px solid #D9D9D9; |
---|
119 | border-width:0 1px 0 0; |
---|
120 | |
---|
121 | .widget-header-large > & { |
---|
122 | top:6px; bottom:6px; |
---|
123 | } |
---|
124 | [class*="header-color-"] > & { |
---|
125 | border-color:#EEE; |
---|
126 | } |
---|
127 | .header-color-orange > & { |
---|
128 | border-color:#FEA; |
---|
129 | } |
---|
130 | .header-color-dark > & { |
---|
131 | border-color:#222; |
---|
132 | box-shadow:-1px 0 0 rgba(255, 255, 255, 0.2) , inset 1px 0 0 rgba(255, 255, 255, 0.1); |
---|
133 | } |
---|
134 | } |
---|
135 | &.no-border:before { |
---|
136 | display:none; |
---|
137 | } |
---|
138 | |
---|
139 | label { |
---|
140 | display:inline-block; |
---|
141 | vertical-align:middle; |
---|
142 | margin-bottom:0; |
---|
143 | } |
---|
144 | |
---|
145 | /* widget toolbar basic buttons */ |
---|
146 | > a { |
---|
147 | font-size:14px; |
---|
148 | margin:0 1px; |
---|
149 | display:inline-block; |
---|
150 | padding:0; |
---|
151 | line-height:24px; |
---|
152 | |
---|
153 | &:hover { |
---|
154 | text-decoration:none; |
---|
155 | } |
---|
156 | |
---|
157 | .widget-header-large > & { |
---|
158 | font-size:15px; |
---|
159 | margin:0 1px; |
---|
160 | } |
---|
161 | } |
---|
162 | |
---|
163 | |
---|
164 | /* toolbar buttons */ |
---|
165 | > .btn { |
---|
166 | line-height:27px; |
---|
167 | margin-top:-2px; |
---|
168 | &.smaller { line-height:26px; } |
---|
169 | &.bigger { line-height:28px; } |
---|
170 | } |
---|
171 | > .btn-sm { |
---|
172 | line-height:24px; |
---|
173 | &.smaller { line-height:23px; } |
---|
174 | &.bigger { line-height:25px; } |
---|
175 | } |
---|
176 | > .btn-xs { |
---|
177 | line-height:22px; |
---|
178 | &.smaller { line-height:21px; } |
---|
179 | &.bigger { line-height:23px; } |
---|
180 | } |
---|
181 | > .btn-minier { |
---|
182 | line-height:18px; |
---|
183 | &.smaller { line-height:17px; } |
---|
184 | &.bigger { line-height:19px; } |
---|
185 | } |
---|
186 | > .btn-lg { |
---|
187 | line-height:36px; |
---|
188 | &.smaller { line-height:34px; } |
---|
189 | &.bigger { line-height:38px; } |
---|
190 | } |
---|
191 | |
---|
192 | } |
---|
193 | |
---|
194 | .widget-toolbar-dark { |
---|
195 | background:#444; |
---|
196 | } |
---|
197 | .widget-toolbar-light { |
---|
198 | background: rgba(255, 255, 255, 0.85); |
---|
199 | } |
---|
200 | |
---|
201 | |
---|
202 | |
---|
203 | |
---|
204 | |
---|
205 | |
---|
206 | /* widget-toolbar buttons*/ |
---|
207 | .widget-toolbar > [data-action] { |
---|
208 | > [class*="icon-"] { |
---|
209 | margin-right:0; |
---|
210 | } |
---|
211 | &:focus { |
---|
212 | text-decoration:none; |
---|
213 | } |
---|
214 | } |
---|
215 | |
---|
216 | [class*="header-color-"] > .widget-toolbar { |
---|
217 | > [data-action] { text-shadow:0px 1px 1px rgba(0,0,0,0.2); } |
---|
218 | > [data-action="settings"] { color:#D3E4ED; } |
---|
219 | > [data-action="reload"] { color:#DEEAD3; } |
---|
220 | > [data-action="collapse"] { color:#E2E2E2; } |
---|
221 | > [data-action="close"] { color:#FFD9D5; } |
---|
222 | } |
---|
223 | .header-color-orange > .widget-toolbar { |
---|
224 | > [data-action] { text-shadow:none; } |
---|
225 | > [data-action="settings"] { color:#559AAB; } |
---|
226 | > [data-action="reload"] { color:#7CA362; } |
---|
227 | > [data-action="collapse"] { color:#777777; } |
---|
228 | > [data-action="close"] { color:#A05656; } |
---|
229 | } |
---|
230 | .widget-toolbar { |
---|
231 | & , .header-color-dark > & { |
---|
232 | > [data-action="settings"] { color:#99CADB; } |
---|
233 | > [data-action="reload"] { color:#ACD392; } |
---|
234 | > [data-action="collapse"] { color:#AAAAAA; } |
---|
235 | > [data-action="close"] { color:#E09E96; } |
---|
236 | } |
---|
237 | } |
---|
238 | |
---|
239 | |
---|
240 | |
---|
241 | |
---|
242 | |
---|
243 | .widget-body { |
---|
244 | border:1px solid #CCC; |
---|
245 | border-top:none; |
---|
246 | background-color:#FFF; |
---|
247 | } |
---|
248 | .widget-main { |
---|
249 | padding:12px; |
---|
250 | } |
---|
251 | .widget-main { |
---|
252 | .widget-paddingX (@index) when (@index >= 0) { |
---|
253 | &.padding-@{index} { padding:unit(@index,px); } |
---|
254 | .widget-paddingX(@index - 2); |
---|
255 | } |
---|
256 | .widget-paddingX(32); |
---|
257 | &.no-padding { padding:0; } |
---|
258 | } |
---|
259 | |
---|
260 | |
---|
261 | .widget-toolbar .progress { |
---|
262 | vertical-align:middle; |
---|
263 | display:inline-block; |
---|
264 | margin:0; |
---|
265 | } |
---|
266 | |
---|
267 | |
---|
268 | |
---|
269 | /* toolbar dropdowns */ |
---|
270 | .widget-toolbar > .dropdown , .widget-toolbar > .dropup{ |
---|
271 | display:inline-block; |
---|
272 | } |
---|
273 | .widget-toolbar > .dropdown > .dropdown-menu:before , .dropdown-menu.dropdown-caret:before { |
---|
274 | border-bottom: 7px solid rgba(0, 0, 0, 0.2); |
---|
275 | border-left: 7px solid transparent; |
---|
276 | border-right: 7px solid transparent; |
---|
277 | content: ""; |
---|
278 | display: inline-block; |
---|
279 | left: 9px; |
---|
280 | position: absolute; |
---|
281 | top: -7px; |
---|
282 | } |
---|
283 | .widget-toolbar > .dropdown > .dropdown-menu:after, .dropdown-menu.dropdown-caret:after { |
---|
284 | border-bottom: 6px solid #FFFFFF; |
---|
285 | border-left: 6px solid transparent; |
---|
286 | border-right: 6px solid transparent; |
---|
287 | content: ""; |
---|
288 | display: inline-block; |
---|
289 | left: 10px; |
---|
290 | position: absolute; |
---|
291 | top: -6px; |
---|
292 | } |
---|
293 | |
---|
294 | .widget-toolbar > .dropdown > .dropdown-menu.pull-right:before, .dropdown-menu.pull-right.dropdown-caret:before { |
---|
295 | left: auto; |
---|
296 | right:9px; |
---|
297 | } |
---|
298 | .widget-toolbar > .dropdown > .dropdown-menu.pull-right:after, .dropdown-menu.pull-right.dropdown-caret:after { |
---|
299 | left: auto; |
---|
300 | right:10px; |
---|
301 | } |
---|
302 | |
---|
303 | |
---|
304 | |
---|
305 | |
---|
306 | |
---|
307 | /* widget header colors */ |
---|
308 | .widget-header[class*="header-color-"] { |
---|
309 | color:#FFF; |
---|
310 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); |
---|
311 | } |
---|
312 | |
---|
313 | |
---|
314 | //widget color |
---|
315 | .widget-color(@color) { |
---|
316 | @widget-class:~`"header-color-@{color}"`; |
---|
317 | @widget-bg:~`"widget-@{color}"`; |
---|
318 | @widget-cl:@@widget-bg; |
---|
319 | |
---|
320 | .@{widget-class} { |
---|
321 | background:@widget-cl; |
---|
322 | border-color:@widget-cl; |
---|
323 | + .widget-body { |
---|
324 | border-color:@widget-cl; |
---|
325 | } |
---|
326 | } |
---|
327 | } |
---|
328 | .widget-color(~"blue"); |
---|
329 | .widget-color(~"blue2"); |
---|
330 | .widget-color(~"blue3"); |
---|
331 | .widget-color(~"green"); |
---|
332 | .widget-color(~"green2"); |
---|
333 | .widget-color(~"green3"); |
---|
334 | .widget-color(~"red"); |
---|
335 | .widget-color(~"red2"); |
---|
336 | .widget-color(~"red3"); |
---|
337 | .widget-color(~"purple"); |
---|
338 | .widget-color(~"pink"); |
---|
339 | |
---|
340 | .header-color-orange { |
---|
341 | background:@widget-orange; |
---|
342 | border-color:@widget-orange-border; |
---|
343 | color:@widget-orange-txt !important; |
---|
344 | + .widget-body { |
---|
345 | border-color:@widget-orange-border; |
---|
346 | } |
---|
347 | } |
---|
348 | |
---|
349 | .header-color-dark { |
---|
350 | background:@widget-dark; |
---|
351 | border-color:lighten(@widget-dark, 2%); |
---|
352 | + .widget-body { |
---|
353 | border-color:lighten(@widget-dark, 15%); |
---|
354 | } |
---|
355 | } |
---|
356 | |
---|
357 | .header-color-grey { |
---|
358 | background:@widget-grey; |
---|
359 | border-color:lighten(@widget-grey, 8%); |
---|
360 | + .widget-body { |
---|
361 | border-color:lighten(@widget-grey, 15%); |
---|
362 | } |
---|
363 | } |
---|
364 | |
---|
365 | |
---|
366 | /* different borders */ |
---|
367 | .widget-box.light-border > [class*="header-color-"] + .widget-body { |
---|
368 | border-color:#D6D6D6 !important; |
---|
369 | } |
---|
370 | .widget-box.no-border { |
---|
371 | border-bottom:none; |
---|
372 | > .widget-body{ |
---|
373 | border:none; |
---|
374 | } |
---|
375 | } |
---|
376 | |
---|
377 | |
---|
378 | |
---|
379 | |
---|
380 | /* transparent box */ |
---|
381 | .widget-box.transparent { |
---|
382 | border:none; |
---|
383 | box-shadow:none; |
---|
384 | |
---|
385 | > .widget-header { |
---|
386 | background:none; |
---|
387 | filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); |
---|
388 | |
---|
389 | border:none; |
---|
390 | border-bottom:1px solid #DCE8F1; |
---|
391 | color:#4383B4; |
---|
392 | |
---|
393 | padding-left:3px; |
---|
394 | } |
---|
395 | > .widget-header-large { |
---|
396 | padding-left:5px; |
---|
397 | } |
---|
398 | > .widget-header-small { |
---|
399 | padding-left:1px; |
---|
400 | } |
---|
401 | |
---|
402 | .widget-body { |
---|
403 | border:none; |
---|
404 | background-color:transparent; |
---|
405 | } |
---|
406 | .widget-main { |
---|
407 | &.no-padding-left { padding-left:0; } |
---|
408 | &.no-padding-right { padding-right:0; } |
---|
409 | &.no-padding-top { padding-top:0; } |
---|
410 | &.no-padding-bottom { padding-bottom:0; } |
---|
411 | } |
---|
412 | } |
---|
413 | |
---|
414 | |
---|
415 | |
---|
416 | |
---|
417 | |
---|
418 | /* table in widget */ |
---|
419 | .widget-body .table { |
---|
420 | border-top:1px solid #E5E5E5; |
---|
421 | |
---|
422 | thead:first-child tr { |
---|
423 | background:#FFF; |
---|
424 | [class*="header-color-"] + & { |
---|
425 | background : mix(#F8F8F8 , #ECECEC); |
---|
426 | #gradient > .vertical(#F8F8F8 , #ECECEC); |
---|
427 | } |
---|
428 | } |
---|
429 | &.table-bordered thead:first-child > tr { |
---|
430 | border-top:none; |
---|
431 | } |
---|
432 | |
---|
433 | } |
---|
434 | |
---|
435 | .widget-main.no-padding , .widget-main.padding-0 { |
---|
436 | .table { |
---|
437 | margin-bottom:0; |
---|
438 | border:none; |
---|
439 | } |
---|
440 | .table-bordered th:first-child, |
---|
441 | .table-bordered td:first-child { |
---|
442 | border-left-width:0; |
---|
443 | } |
---|
444 | |
---|
445 | } |
---|
446 | |
---|
447 | .transparent .widget-main , .widget-main.no-padding { |
---|
448 | .table-bordered > thead > tr > th:last-child, .table-bordered > tbody > tr > td:last-child, .table-bordered > tfoot > tr > td:last-child { |
---|
449 | border-right-width: 0 !important; |
---|
450 | } |
---|
451 | } |
---|
452 | .transparent .widget-main , .widget-main.no-padding { |
---|
453 | .table-bordered > tbody > tr:last-child > td { |
---|
454 | border-bottom-width: 0 !important; |
---|
455 | } |
---|
456 | } |
---|
457 | .table-bordered > thead.thin-border-bottom > tr > th, .table-bordered > thead.thin-border-bottom > tr > td { |
---|
458 | border-bottom-width: 1px; |
---|
459 | } |
---|
460 | |
---|
461 | |
---|
462 | |
---|
463 | /* elements in widget */ |
---|
464 | .widget-body .alert:last-child { |
---|
465 | margin-bottom:0; |
---|
466 | } |
---|
467 | |
---|
468 | |
---|
469 | /* tabs in widget */ |
---|
470 | .widget-main .tab-content { |
---|
471 | border:none; |
---|
472 | } |
---|
473 | .widget-toolbar > .nav-tabs { |
---|
474 | border-bottom:none; |
---|
475 | margin-bottom:0; |
---|
476 | position:relative; top:5px; |
---|
477 | |
---|
478 | > li > a { |
---|
479 | box-shadow:none; |
---|
480 | } |
---|
481 | > li:not(.active) > a{ |
---|
482 | border-color:transparent; |
---|
483 | background-color:transparent; |
---|
484 | &:hover { |
---|
485 | background-color:transparent; |
---|
486 | } |
---|
487 | } |
---|
488 | > li.active > a { |
---|
489 | background-color:#FFF; |
---|
490 | border-bottom-color:transparent; |
---|
491 | box-shadow:none; |
---|
492 | } |
---|
493 | |
---|
494 | |
---|
495 | .widget-header-small > & { |
---|
496 | top:5px; |
---|
497 | > li > a { |
---|
498 | line-height:16px; |
---|
499 | padding-top:6px; padding-bottom:6px; |
---|
500 | } |
---|
501 | > li.active > a { |
---|
502 | border-top-width:2px; |
---|
503 | margin-top:-1px; |
---|
504 | } |
---|
505 | } |
---|
506 | |
---|
507 | .widget-header-large > & { |
---|
508 | top:8px; |
---|
509 | > li > a { |
---|
510 | line-height:22px; |
---|
511 | padding-top:9px; padding-bottom:9px; |
---|
512 | } |
---|
513 | } |
---|
514 | |
---|
515 | |
---|
516 | [class*="header-color-"] > & { |
---|
517 | > li > a { |
---|
518 | border-color:transparent; |
---|
519 | background-color:transparent; |
---|
520 | color:#FFF; |
---|
521 | margin-right:1px; |
---|
522 | &:hover { |
---|
523 | background-color:#FFF; |
---|
524 | color:#555; |
---|
525 | border-top-color:#FFF; |
---|
526 | } |
---|
527 | } |
---|
528 | > li.active > a { |
---|
529 | background-color:#FFF; |
---|
530 | color:#555; |
---|
531 | border-top-width:1px; |
---|
532 | margin-top:0; |
---|
533 | } |
---|
534 | } |
---|
535 | .header-color-orange > & > li > a{ |
---|
536 | color:#855D10; |
---|
537 | } |
---|
538 | |
---|
539 | |
---|
540 | .transparent & { |
---|
541 | > li > a { |
---|
542 | color:#555; |
---|
543 | background-color:transparent; |
---|
544 | border-right:1px solid transparent; |
---|
545 | border-left:1px solid transparent; |
---|
546 | } |
---|
547 | > li.active > a { |
---|
548 | border-top-color:#4C8FBD; |
---|
549 | border-right:1px solid #C5D0DC; |
---|
550 | border-left:1px solid #C5D0DC; |
---|
551 | background-color:#FFF; |
---|
552 | box-shadow:none; |
---|
553 | } |
---|
554 | } |
---|
555 | |
---|
556 | |
---|
557 | } |
---|
558 | |
---|
559 | |
---|
560 | |
---|
561 | |
---|
562 | |
---|
563 | |
---|
564 | |
---|
565 | |
---|
566 | /* toolbox */ |
---|
567 | .widget-toolbox { |
---|
568 | background-color:#EEE; |
---|
569 | |
---|
570 | &:first-child {/* the toolbox coming before content */ |
---|
571 | padding:2px; |
---|
572 | border-bottom:1px solid #CCC; |
---|
573 | } |
---|
574 | &:last-child {/* the toolbox coming after content */ |
---|
575 | padding:2px; |
---|
576 | border-top:1px solid #CCC; |
---|
577 | |
---|
578 | .transparent & { |
---|
579 | border:none; |
---|
580 | border-top:1px solid #CCC; |
---|
581 | } |
---|
582 | } |
---|
583 | |
---|
584 | > .btn-toolbar { |
---|
585 | margin:0; |
---|
586 | padding:0; |
---|
587 | } |
---|
588 | |
---|
589 | &.center { |
---|
590 | text-align:center; |
---|
591 | } |
---|
592 | } |
---|
593 | |
---|
594 | |
---|
595 | |
---|
596 | .widget-toolbox { |
---|
597 | .widget-paddingX (@index) when (@index >= 0) { |
---|
598 | &.padding-@{index} { padding:unit(@index,px); } |
---|
599 | .widget-paddingX(@index - 2); |
---|
600 | } |
---|
601 | .widget-paddingX(16); |
---|
602 | } |
---|
603 | |
---|
604 | |
---|
605 | |
---|
606 | |
---|
607 | |
---|
608 | /*when clicking refresh*/ |
---|
609 | .widget-box-overlay { |
---|
610 | position:absolute; |
---|
611 | top:0;bottom:0;right:0;left:0; |
---|
612 | background-color:rgba(0,0,0,0.3); |
---|
613 | |
---|
614 | z-index: 21; |
---|
615 | |
---|
616 | |
---|
617 | > [class*="icon-"] { |
---|
618 | position:absolute; |
---|
619 | top:15%; |
---|
620 | left:0; right:0; |
---|
621 | text-align:center; |
---|
622 | |
---|
623 | .widget-box.collapsed & { |
---|
624 | top: 5%; |
---|
625 | } |
---|
626 | } |
---|
627 | |
---|
628 | > .icon-spin { |
---|
629 | .animation-duration(1.2s); |
---|
630 | } |
---|
631 | |
---|
632 | } |
---|
633 | |
---|
634 | |
---|
635 | |
---|
636 | /* simple forms in widgetboxes */ |
---|
637 | .widget-main { |
---|
638 | > form { |
---|
639 | margin-bottom:0; |
---|
640 | .input-append , .input-prepend { |
---|
641 | margin-bottom:0; |
---|
642 | } |
---|
643 | } |
---|
644 | |
---|
645 | &.no-padding, &.padding-0 { |
---|
646 | > form { |
---|
647 | > fieldset { |
---|
648 | padding:16px; |
---|
649 | + .form-actions { |
---|
650 | padding:10px 0 12px; |
---|
651 | } |
---|
652 | } |
---|
653 | > .form-actions { |
---|
654 | margin:0; |
---|
655 | padding:10px 12px 12px; |
---|
656 | } |
---|
657 | } |
---|
658 | } |
---|
659 | } |
---|
660 | |
---|
661 | /* for dragging and dropping */ |
---|
662 | .widget-placeholder { |
---|
663 | border:2px dashed #D9D9D9; |
---|
664 | } |
---|
665 | |
---|