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