source: pro-violet-viettel/www/deploy/20150304/assets/css/less/widget.less @ 896

Last change on this file since 896 was 780, checked in by dungnv, 10 years ago
File size: 11.4 KB
Line 
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
Note: See TracBrowser for help on using the repository browser.