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

Last change on this file since 896 was 780, checked in by dungnv, 10 years ago
File size: 10.5 KB
Line 
1.ui-jqgrid {
2 .ui-jqgrid-view,
3 .ui-paging-info,
4 .ui-pg-table,
5 .ui-pg-selbox {
6    font-size: @baseFontSize;
7 }
8
9 .ui-jqgrid-title {
10    float: left;
11    margin: 8px;
12 }
13 .ui-jqgrid-title-rtl {
14        float:right;
15        margin: 8px;
16 }
17}
18
19
20.ui-jqgrid-view > .ui-jqgrid-titlebar {
21    height: 40px;
22    line-height: 24px;
23    color: #FFF;
24    background: @table-header-bg;
25        padding:0;
26        font-size:15px;
27}
28
29
30.ui-jqgrid tr.jqgrow.ui-row-rtl td:last-child {
31        border-right:none;
32        border-left:1px solid #E1E1E1;
33}
34
35.ui-jqgrid .ui-jqgrid-hdiv {
36        background-color:@modal-footer-bg;
37    border: 1px solid #D3D3D3;
38        border-width:1px 0 0 1px;
39
40    line-height: 15px;
41    font-weight: bold;
42    color: #777;
43    text-shadow: none;
44}
45
46
47.ui-jqgrid .ui-jqgrid-htable {
48        thead {
49                background-color:@modal-footer-bg;
50        }
51        th span.ui-jqgrid-resize {
52                height: 45px !important;
53        }
54        th div {
55                padding-top: 12px;
56                padding-bottom: 12px;
57        }
58}
59
60
61.ui-jqgrid-hdiv .ui-jqgrid-htable {
62  border-top:none;
63}
64//when titlebar is hidden
65.ui-jqgrid-hdiv .ui-jqgrid-htable {
66  border-top:1px solid #E1E1E1;
67}
68
69.ui-jqgrid-titlebar {
70 position:relative;
71 top:1px;//so it will cover the .ui-jqgrid-htable border if it's visible
72 z-index:1;
73}
74
75
76.ui-jqgrid {
77 tr.jqgrow , tr.ui-row-ltr , tr.ui-row-rtl{
78        border:none;
79 }
80 tr.ui-row-ltr td, tr.ui-row-rtl td {
81        border-bottom: 1px solid #E1E1E1;
82        padding:6px 4px;
83        border-color:#E1E1E1;
84 }
85
86 tr.ui-state-highlight.ui-row-ltr td { 
87        border-right-color:#C7D3A9;
88 }
89 tr.ui-state-highlight.ui-row-rtl td { 
90        border-left-color:#C7D3A9;
91 }
92}
93
94.ui-jqgrid-btable .ui-widget-content {
95        &.ui-priority-secondary{
96                background-image:none;
97                background-color: #F9F9F9;
98                opacity: 1;
99        }
100        &.ui-state-hover {
101                background-image:none;
102                background-color: #EFF4F7;
103                opacity: 1;
104        }
105        &.ui-state-highlight {
106                background-color:#E4EFC9;
107        }
108}
109
110
111
112.ui-jqgrid {
113        .ui-jqgrid-pager {
114                line-height: 15px;
115                height: 55px;
116               
117                padding-top:3px !important;
118                padding-bottom:5px !important;
119               
120                background-color:@modal-footer-bg !important;
121               
122                border-bottom: 1px solid #E1E1E1 !important;
123                border-top: 1px solid #E1E1E1 !important;
124                //border:1px solid #E1E1E1 !important;
125        }
126       
127
128        .ui-pg-input {
129                font-size: inherit;
130                width:24px;
131               
132                height:20px;
133                line-height:16px;
134                .box-sizing(content-box);
135               
136                text-align:center;
137                padding-top:1px; padding-bottom:1px;
138        }
139
140        .ui-pg-selbox {
141                display: block;
142                height:24px;
143                width:60px;
144                margin: 0;
145                padding: 1px;
146                line-height: normal;
147        }
148       
149        .ui-jqgrid-htable th div{
150                overflow:visible;
151        }
152       
153        .ui-pager-control {
154                height: 50px;
155                position: relative;
156                padding-left:9px;
157                padding-right:9px;
158        }
159       
160       
161        .ui-jqgrid-toppager {
162                height:auto !important;
163                background-color:@modal-footer-bg;
164                border-bottom:1px solid #E1E1E1 !important;
165        }
166
167        .jqgrow .editable {
168                max-width:90%;
169                max-width:calc(98% - 6px) !important;
170        }
171}
172
173
174
175.ui-pg-table .navtable .ui-corner-all{
176    border-radius: 0;
177}
178
179
180.ui-jqgrid .ui-pg-button:hover {
181    padding: 1px;
182}
183
184.ui-jqgrid .ui-pg-button .ui-separator {
185        margin-left:4px;
186        margin-right:4px;
187        border-color:#C9D4DB;
188}
189
190.ui-jqgrid .ui-jqgrid-btable {
191 border-left:1px solid #E1E1E1;
192}
193.ui-jqgrid .ui-jqgrid-bdiv {
194        border-top:1px solid #E1E1E1;
195        //.box-sizing(content-box);
196}
197
198
199
200
201.ui-jqgrid .loading {
202        position: absolute;
203        top: 45%;
204        left: 45%;
205        width: auto;
206        height: auto;
207        z-index:101;
208       
209        padding: 6px;
210        margin: 5px;
211       
212        text-align: center;
213        display: none;
214        font-weight: bold;
215
216        font-size:12px;
217       
218        background-color:#FFF;
219        border:2px solid #8EB8D1;
220        color:#E2B018;
221}
222
223
224
225
226
227
228.ui-jqgrid .ui-search-toolbar {
229         border-top: 1px solid #E1E1E1;
230}
231.ui-jqgrid .ui-jqgrid-labels {
232        border-bottom:none;
233        background:#F2F2F2;
234        #gradient > .vertical(@table-labels-grad-color1 , @table-labels-grad-color2);
235       
236        padding:0 !important;
237        border-left:1px solid #E1E1E1 !important;
238       
239        th {
240                border-right:1px solid #E1E1E1 !important;
241                text-align:left !important;
242        }
243}
244
245
246/* checkbox container */
247.ui-jqgrid-labels th[id*="_cb"]:first-child > div {
248 padding-top:0;
249 text-align:center !important;
250}
251
252
253
254
255.ui-jqgrid-sortable {
256  padding-left:4px;
257  font-size:@baseFontSize;
258  color:#777;
259  font-weight:bold;
260
261  &:hover {
262        color:@table-sort-hover;
263  }
264}
265
266th[aria-selected=true] {
267 #gradient > .vertical(#EFF3F8 , #E3E7ED);
268 .ui-jqgrid-sortable {
269        color:@table-sort-active;
270 }
271}
272
273
274
275.ui-icon {
276  text-indent:0;
277  color:@table-sort-active;
278  float:none;
279  right:2px;
280  position:absolute;
281 
282  .rtl &{
283        right:auto;
284        left:2px;
285  }
286}
287
288
289.ui-grid-ico-sort:before {
290 display:inline;
291 content:"\f0d7";
292 font-family:FontAwesome;
293 font-size:12px;
294}
295.ui-icon-asc:before {
296 content:"\f0d8";
297}
298.ui-state-disabled {
299 color:#BBB;
300}
301
302
303
304.ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon {
305  display:inline-block;
306  padding:0;
307  width:24px; height:24px; line-height:22px;
308  text-align:center;
309 
310  position:static;
311  float:none;
312  margin:0 2px !important;
313 
314
315  color:#808080;
316  border:1px solid #CCC;
317  background-color:#FFF;
318  border-radius:100%;
319
320  &:hover {
321                color:#699AB5;
322                border-color:#699AB5;
323  }
324  &:before {
325        width:20px;
326        text-align:center;
327        display:inline-block;
328  }
329}
330
331.ui-pg-table > tbody > tr > .ui-pg-button.ui-state-disabled .ui-icon{
332  color:#B0B0B0;
333  background-color:#F7F7F7;
334  border-color:#DDD;
335 
336  .transform(~"scale(0.9)");
337}
338
339
340
341
342
343
344.ui-jqgrid-btable {
345        input , textarea, select{
346                padding:2px;
347                width:auto;
348                max-width:100%;
349                margin-bottom:0;
350        }
351        select  {
352                padding:1px;
353                height:25px;
354                line-height:25px;
355        }
356}
357
358.ui-pg-div .ui-icon{
359  display:inline-block;
360  width:18px;
361  float:none;
362 
363  position:static;
364  text-align:center;
365  opacity:0.85;
366 
367  .transition(~"all 0.12s");
368  margin:0 1px;
369 
370  vertical-align:middle;
371  cursor:pointer;
372 
373  font-size:17px;
374 
375  &:hover{
376        .transform(~"scale(1.2)");
377        opacity:1;
378        position:static;
379        margin:0 1px;
380  }
381  &:before {
382        font-family:FontAwesome;
383        display:inline;
384  }
385}
386
387.ui-icon-pencil { color:#478FCA; }
388.ui-icon-pencil:before { content:"\f040"; }
389.ui-icon-trash { color:#DD5A43; }
390.ui-icon-trash:before { content:"\f014"; }
391.ui-icon-disk { color:#69AA46; }
392.ui-icon-disk:before { content:"\f00c"; }
393.ui-icon-cancel { color:#DD5A43; }
394.ui-icon-cancel:before { content:"\f00d"; }
395
396
397
398.ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content {
399        font-size:@baseFontSize;
400        padding:4px 0 0;
401
402        .formdata {
403                font-size:@baseFontSize;
404                padding:6px 12px;
405        }
406
407        .form-view-data {
408                vertical-align:middle;
409                font-size:@baseFontSize;
410        }
411       
412       
413        &[id*="alertcnt_"]{
414                padding:8px 11px;
415        }
416}
417
418.ui-jqdialog-content {
419        .CaptionTD {
420                font-size:12px;
421                text-align:right;
422                color:#666;
423        }
424        .FormData {
425                border-bottom:1px dotted #E8E8E8;
426                &:last-child {
427                        border-bottom:none;
428                }
429               
430                > td {
431                        padding-top:6px;
432                        padding-bottom:6px;
433                }
434        }
435        input.FormElement {
436                width:auto;
437        }
438        select.FormElement {
439                padding:1px;
440                height:25px;
441                line-height:25px;
442                width:auto;
443        }
444        td.EditButton {
445                padding:8px;
446        }
447}
448
449
450.EditTable {
451  background-color:@modal-footer-bg;
452  border-top:1px solid #D6E1EA !important;
453  padding:8px;
454 
455  tr:first-child{
456        display:none;
457  }
458
459 
460  .navButton .fm-button {
461        float:none !important;
462        width:auto !important;
463        margin:1px 1px 2px !important;
464        background-color:transparent;
465        border-radius:100%;
466       
467        &:hover {
468                background-color:transparent;
469        }
470        &:focus {
471                outline:none;
472        }
473       
474        [class*="icon-"] {
475                display:inline-block;
476                color:#999;
477                border:1px solid #AAA;
478                width:26px;
479                height:26px; line-height:26px;
480                text-align:center;
481                border-radius:100%;
482
483                background-color:#FFF;
484        }
485       
486        &:hover [class*="icon-"] {
487                color:#699AB5;
488                border-color:#699AB5;
489        }
490       
491        &.ui-state-disabled , &.ui-state-disabled:hover {
492                [class*="icon-"] {
493                        color:#BBB;
494                        border-color:#CCC;
495                        .transform(~"scale(0.88)");
496                }
497        }
498
499  }
500}
501
502
503.FormGrid  .EditTable {
504  background-color:#FFF;
505  border-top:none !important;
506  padding:0;
507
508  tr:first-child{
509        display:none;
510  }
511}
512
513
514.ui-jqdialog-content .searchFilter {
515 select {
516        padding:1px;
517        height:26px;
518        line-height:26px;
519        width:auto;  max-width:95%;
520        margin-bottom:0;
521 }
522 .input-elm {
523        margin-bottom:0;
524        height:18px;
525        line-height:18px;
526        width:95% !important;
527        padding-left:1px;
528        padding-right:1px;
529       
530        .box-sizing(content-box);
531 }
532 
533 table {
534        margin-left:4px;
535 }
536 tr td {
537        padding:5px 0;
538 }
539 
540 .add-group , .add-rule , .delete-group {
541        margin-left:4px !important;
542        font-size:15px !important;
543 }
544
545 .delete-rule {
546        border:none;
547        background-color:#FFF;
548    color: #D15B47;
549    font-size: 20px;
550    width: 22px;
551    line-height: 10px;
552    padding: 0;
553    text-shadow: none !important;
554   
555        display:inline-block;
556        .transition(~"all 0.1s");
557        opacity:0.85;
558        &:hover {
559                .transform(~"scale(1.1)");
560                color:#B74635;
561                opacity:1;
562        }       
563 }
564 
565 
566 .queryresult {
567        margin-bottom:11px;
568        td.query {
569                padding:6px 11px;
570                border:1px solid #E1E1E1;
571                background-color:#EEEEEE;
572                &:empty {
573                        display:none;
574                }
575        }
576 }
577
578}
579
580
581
582
583
584
585.ui-state-error {
586    background-color: @state-danger-bg;
587    border: 1px solid @state-danger-border;
588    color: @state-danger-text;
589       
590        margin:4px 4px 8px;
591    padding: 6px 10px;
592    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
593       
594        font-size:@baseFontSize;
595}
596
597
598
599.ui-jqdialog .ui-widget-header {
600        #gradient > .vertical(#FFFFFF , #EEEEEE);
601
602        border-image: none;
603        border-bottom:1px solid solid;
604        color: #669FC7;
605        min-height: 38px;
606        position: relative;
607       
608        .ui-jqdialog-title{
609                line-height: 38px;
610                margin: 0;
611                padding: 0;
612                padding-left: 12px;
613                text-align: left;
614        }
615}
616
617
618.widget-header .ui-jqdialog-title{
619        padding-left:0 !important;
620        padding-right:0 !important;
621}
622
623.ui-jqdialog .ui-widget-header .widget-header{
624        border-bottom:none;
625}
626.ui-jqdialog .ui-jqdialog-titlebar {
627        border-bottom:1px solid #DDD !important;
628}
629
630.fm-button {
631        margin:0 4px;
632}
633.fm-button:not(.btn) {
634        background-color: @btn-default;
635        border-radius: 0 ;
636        box-shadow: none;
637        color: #FFFFFF ;
638        cursor: pointer;
639        display: inline-block;
640        font-size: @baseFontSize;
641        line-height: 28px;padding: 0 12px 1px;
642        margin: 0 8px;
643        position: relative;
644        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
645        .transition(~"all 0.15s");
646        vertical-align: middle;
647
648}
649.fm-button.ui-state-default:hover {
650        background-color:@btn-default-hover;
651}
652
653
654
Note: See TracBrowser for help on using the repository browser.