hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 .enable_plugin_jqgrid() when(@enable-plugin-jqgrid = true) {
A 2
3 .ui-jqgrid {
4  .ui-jqgrid-view {
5     z-index: auto;
6  }
7  
8  .ui-jqgrid-view,
9  .ui-paging-info,
10  .ui-pg-table,
11  .ui-pg-selbox {
12     font-size: @base-font-size;
13  }
14
15  .ui-jqgrid-title {
16     float: left;
17     margin: 8px;
18  }
19  .ui-jqgrid-title-rtl {
20     float: right;
21     margin: 8px;
22  }
23 }
24
25
26 .ui-jqgrid-view > .ui-jqgrid-titlebar { 
27     height: 40px;
28     line-height: 24px;
29     color: #FFF;
30     background: @table-header-bg; 
31     padding:0;
32     font-size: floor(@base-font-size * 1.2);
33 }
34
35
36 .ui-jqgrid tr.jqgrow.ui-row-rtl td:last-child {
37     border-right:none;
38     border-left:1px solid #E1E1E1;
39 }
40
41 .ui-jqgrid .ui-jqgrid-hdiv {
42     background-color:@modal-footer-bg;
43     border: 1px solid #D3D3D3;
44     border-width:1px 0 0 1px;
45
46     line-height: 15px;
47     font-weight: bold;
48     color: #777;
49     text-shadow: none;
50 }
51
52
53 .ui-jqgrid .ui-jqgrid-htable {
54     thead {
55         background-color:@modal-footer-bg;
56     }
57     th span.ui-jqgrid-resize {
58         height: 45px !important;
59     }
60     th div {
61         padding-top: 12px;
62         padding-bottom: 12px;
63     }
64 }
65
66
67 .ui-jqgrid-hdiv .ui-jqgrid-htable {
68   border-top:none;
69 }
70 //when titlebar is hidden
71 .ui-jqgrid-hdiv .ui-jqgrid-htable {
72   border-top: 1px solid #E1E1E1;
73 }
74
75 .ui-jqgrid-titlebar {
76  position:relative;
77  top:1px;//so it will cover the .ui-jqgrid-htable border if it's visible
78  z-index:1;
79 }
80
81
82 .ui-jqgrid {
83  tr.jqgrow , tr.ui-row-ltr , tr.ui-row-rtl{
84     border:none;
85  }
86  tr.ui-row-ltr td, tr.ui-row-rtl td {
87     border-bottom: 1px solid #E1E1E1;
88     padding:6px 4px;
89     border-color:#E1E1E1;
90  }
91
92  tr.ui-state-highlight.ui-row-ltr td {    
93     border-right-color:#C7D3A9;
94  }
95  tr.ui-state-highlight.ui-row-rtl td {    
96     border-left-color:#C7D3A9;
97  }
98 }
99
100 .ui-jqgrid-btable .ui-widget-content {
101     &.ui-priority-secondary{
102         background-image:none;
103         background-color: #F9F9F9;
104         opacity: 1;
105     }
106     &.ui-state-hover {
107         background-image:none;
108         background-color: #EFF4F7;
109         opacity: 1;
110     }
111     &.ui-state-highlight {
112         background-color:#E4EFC9;
113     }
114 }
115
116
117
118 .ui-jqgrid {
119     .ui-jqgrid-pager {
120         line-height: 15px;
121         height: 55px;
122         
123         padding-top:10px !important;
124         padding-bottom:10px !important;
125         
126         background-color:@modal-footer-bg !important;
127         
128         border-bottom: 1px solid #E1E1E1 !important;
129         border-top: 1px solid #E1E1E1 !important;
130         //border:1px solid #E1E1E1 !important;
131     }
132     
133
134     .ui-pg-input {
135         font-size: inherit;
136         width:24px;
137         
138         height:20px;
139         line-height:16px;
140         .box-sizing(content-box);
141         
142         text-align:center;
143         padding-top:1px; padding-bottom:1px;
144     }
145
146     .ui-pg-selbox {
147         display: block;
148         height:24px;
149         width:60px;
150         margin: 0;
151         padding: 1px;
152         line-height: normal;
153     }
154     
155     .ui-jqgrid-htable th div{
156         overflow:visible;
157     }
158     
159     .ui-pager-control {
160         height: 50px;
161         position: relative;
162         padding-left:9px;
163         padding-right:9px;
164     }
165     
166     
167     .ui-jqgrid-toppager {
168         height:auto !important;
169         background-color:@modal-footer-bg;
170         border-bottom:1px solid #E1E1E1 !important;
171     }
172
173     .jqgrow .editable {
174         max-width: 90%;
175         max-width: calc(98% - 6px) !important;
176     }
177 }
178
179
180
181 .ui-pg-table .navtable .ui-corner-all{
182     border-radius: 0;
183 }
184
185
186 //.ui-jqgrid .ui-pg-button:hover {
187     //padding: 1px;
188 //}
189
190 .ui-jqgrid .ui-pg-button .ui-separator {
191     margin-left:4px;
192     margin-right:4px;
193     border-color:#C9D4DB;
194 }
195
196 .ui-jqgrid .ui-jqgrid-btable {
197  border-left:1px solid #E1E1E1;
198 }
199 .ui-jqgrid .ui-jqgrid-bdiv {
200     border-top:1px solid #E1E1E1;
201     //.box-sizing(content-box);
202     overflow-x: hidden;
203 }
204
205
206
207
208 .ui-jqgrid .loading {
209     position: absolute; 
210     top: 45%;
211     left: 45%;
212     width: auto;
213     height: auto;
214     z-index: 101;
215     
216     padding: 6px; 
217     margin: 5px;
218     
219     text-align: center;
220     //display: none;
221     font-weight: bold;
222
223     font-size: @base-font-size - 1;
224     
225     background-color: #FFF;
226     border: 2px solid #8EB8D1;
227     color: #E2B018;
228 }
229
230
231
232
233
234
235 .ui-jqgrid .ui-search-toolbar {
236      border-top: 1px solid #E1E1E1;
237 }
238 .ui-jqgrid .ui-jqgrid-labels {
239     border-bottom:none;
240     background:#F2F2F2;
241     #gradient > .vertical(@table-labels-grad-color1 , @table-labels-grad-color2);
242     
243     padding:0 !important;
244     border-left:1px solid #E1E1E1 !important;
245     
246     th {
247         border-right:1px solid #E1E1E1 !important;
248         text-align:left !important;
249     }
250 }
251
252
253 /* checkbox container */
254 .ui-jqgrid-labels th[id*="_cb"]:first-child > div {
255  padding-top:0;
256  text-align:center !important;
257 }
258
259
260
261
262 .ui-jqgrid-sortable {
263   padding-left:4px;
264   font-size:@base-font-size;
265   color:#777;
266   font-weight:bold;
267
268   &:hover {
269     color:@table-sort-hover;
270   }
271 }
272
273 th[aria-selected=true] {
274  #gradient > .vertical(#EFF3F8 , #E3E7ED);
275  .ui-jqgrid-sortable {
276     color:@table-sort-active;
277  }
278 }
279
280
281
282 .ui-jqgrid .ui-icon {
283   text-indent: 0;
284   color: @table-sort-active;
285   float: none;
286   right: 2px;
287   //position: absolute;
288   
289   .rtl & {
290     right: auto;
291     left: 2px;
292   }
293   
294   &.ui-state-disabled {
295     color: #BBB;
296     &:hover {
297         padding: 0;
298     }
299   }
300 }
301
302
303 .ui-grid-ico-sort:before {
304  display: inline;
305  content: "\f0d7";
306  font-family: FontAwesome;
307  font-size: @base-font-size - 1;
308 }
309 .ui-icon-asc:before {
310  content:"\f0d8";
311 }
312
313
314
315
316 .ui-pg-table > tbody > tr > .ui-pg-button > .ui-icon {
317   display:inline-block;
318   padding:0;
319   width:24px; height:24px; line-height:22px;
320   text-align:center;
321   
322   position:static;
323   float:none;
324   margin:0 2px !important;
325   
326
327   color:#808080;
328   border:1px solid #CCC;
329   background-color:#FFF;
330   border-radius:100%;
331
332   &:hover {
333         color:#699AB5;
334         border-color:#699AB5;
335   }
336   &:before {
337     width:20px;
338     text-align:center;
339     display:inline-block;
340   }
341 }
342
343 .ui-pg-table > tbody > tr > .ui-pg-button.ui-state-disabled .ui-icon{
344   color:#B0B0B0;
345   background-color:#F7F7F7;
346   border-color:#DDD;
347  
348   .transform(~"scale(0.9)");
349 }
350
351
352
353
354
355
356 .ui-jqgrid-btable {
357     input , textarea, select{
358         padding:2px;
359         width:auto;
360         max-width:100%;
361         margin-bottom:0;
362     }
363     select  {
364         padding: 1px;
365         height: 25px;
366         line-height: 25px;
367     }
368 }
369
370 .ui-jqgrid select.inline-edit-cell {
371  padding: 1px;
372 }
373
374 .ui-pg-div .ui-icon{
375   display: inline-block;
376   width: 18px;
377   float: none;
378   
379   position: static;
380   text-align: center;
381   opacity: 0.85;
382   
383   .transition(~"all 0.12s");
384   margin: 0 1px;
385   
386   vertical-align: middle;
387   cursor: pointer;
388   
389   font-size: @font-size-grid-pager;
390   
391   &:hover{
392     .transform(~"scale(1.2)");
393     opacity: 1;
394     position: static;
395     margin: 0 1px;
396   }
397   &:before {
398     font-family:FontAwesome;
399     display:inline;
400   }
401 }
402
403 .ui-jqgrid {
404  .ui-icon-pencil { color:#478FCA; }
405  .ui-icon-pencil:before { content:"\f040"; }
406  .ui-icon-trash { color:#DD5A43; }
407  .ui-icon-trash:before { content:"\f014"; }
408  .ui-icon-disk { color:#69AA46; }
409  .ui-icon-disk:before { content:"\f00c"; }
410  .ui-icon-cancel { color:#DD5A43; }
411  .ui-icon-cancel:before { content:"\f00d"; }
412 }
413
414
415 .ui-jqdialog-content, .ui-jqdialog .ui-jqdialog-content {
416     font-size:@base-font-size;
417     padding:4px 0 0;
418
419     .formdata {
420         font-size:@base-font-size;
421         padding:6px 12px;
422     }
423
424     .form-view-data {
425         vertical-align:middle;
426         font-size:@base-font-size;
427     }
428     
429     
430     &[id*="alertcnt_"]{
431         padding: 8px 11px;
432     }
433 }
434
435 .ui-jqdialog-content {
436     .CaptionTD {
437         font-size: @base-font-size - 1;
438         text-align: right;
439         color: #666;
440     }
441     .FormData {
442         border-bottom:1px dotted #E8E8E8;
443         &:last-child {
444             border-bottom:none;
445         }
446         
447         > td {
448             padding-top:6px;
449             padding-bottom:6px;
450         }
451     }
452     input.FormElement {
453         width:auto;
454     }
455     select.FormElement {
456         padding:1px;
457         height:25px;
458         line-height:25px;
459         width:auto;
460     }
461     td.EditButton {
462         padding:8px;
463     }
464 }
465
466
467 .EditTable {
468   background-color:@modal-footer-bg;
469   border-top:1px solid #D6E1EA !important;
470   padding:8px;
471   
472   tr:first-child{
473     display:none;
474   }
475
476   
477   .navButton .fm-button {
478     float:none !important;
479     width:auto !important;
480     margin:1px 1px 2px !important;
481     background-color:transparent;
482     border-radius:100%;
483     
484     &:hover {
485         background-color:transparent;
486     }
487     &:focus {
488         outline:none;
489     }
490     
491     .@{icon} {
492         display:inline-block;
493         color:#999;
494         border:1px solid #AAA;
495         width:26px;
496         height:26px; line-height:26px;
497         text-align:center;
498         border-radius:100%;
499
500         background-color:#FFF;
501     }
502     
503     &:hover .@{icon} {
504         color:#699AB5;
505         border-color:#699AB5;
506     }
507     
508     &.ui-state-disabled , &.ui-state-disabled:hover {
509         .@{icon} {
510             color:#BBB;
511             border-color:#CCC;
512             .transform(~"scale(0.88)");
513         }
514     }
515
516   }
517 }
518
519
520 .FormGrid  .EditTable {
521   background-color:#FFF;
522   border-top:none !important;
523   padding:0;
524
525   tr:first-child{
526     display:none;
527   }
528 }
529
530
531  .ui-jqgrid .ui-jqgrid-view {
532     input, select, textarea, button {
533         font-size: @base-font-size;
534     }
535  }
536
537
538 .ui-jqdialog-content .searchFilter {
539  select {
540     padding:1px;
541     height:26px;
542     line-height:26px;
543     width:auto;  max-width:95%;
544     margin-bottom:0;
545  }
546  .input-elm {
547     margin-bottom:0;
548     height:18px;
549     line-height:18px;
550     width:95% !important;
551     padding-left:1px;
552     padding-right:1px;
553     
554     .box-sizing(content-box);
555  }
556  
557  table {
558     margin-left:4px;
559  }
560  tr td {
561     padding:5px 0;
562  }
563  
564  .add-group , .add-rule , .delete-group {
565     margin-left: 4px !important;
566     font-size: @base-font-size + 2 !important;
567  }
568
569  .delete-rule {
570     border:none;
571     background-color:#FFF;
572     color: #D15B47;
573     font-size: 20px;
574     width: 22px;
575     line-height: 10px;
576     padding: 0;
577     text-shadow: none !important;
578     
579     display:inline-block;
580     .transition(~"all 0.1s");
581     opacity:0.85;
582     &:hover {
583         .transform(~"scale(1.1)");
584         color:#B74635;
585         opacity:1;
586     }    
587  }
588  
589  
590  .queryresult {
591     margin-bottom:11px;
592     td.query {
593         padding:6px 11px;
594         border:1px solid #E1E1E1;
595         background-color:#EEEEEE;
596         &:empty {
597             display:none;
598         }
599     }
600  }
601
602 }
603
604
605
606
607
608
609 .ui-state-error {
610     background-color: @state-danger-bg;
611     border: 1px solid @state-danger-border;
612     color: @state-danger-text;
613     
614     margin:4px 4px 8px;
615     padding: 6px 10px;
616     text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
617     
618     font-size:@base-font-size;
619 }
620
621
622
623 .ui-jqdialog .ui-widget-header {
624     #gradient > .vertical(#FFFFFF , #EEEEEE);
625
626     border-image: none;
627     border-bottom:1px solid solid;
628     color: #669FC7;
629     min-height: 38px;
630     position: relative;
631     
632     .ui-jqdialog-title{
633         line-height: 38px;
634         margin: 0;
635         padding: 0;
636         padding-left: 12px;
637         text-align: left;
638     }
639 }
640
641
642 .widget-header .ui-jqdialog-title{
643     padding-left:0 !important;
644     padding-right:0 !important;
645 }
646
647 .ui-jqdialog .ui-widget-header .widget-header{
648     border-bottom:none;
649 }
650 .ui-jqdialog .ui-jqdialog-titlebar {
651     border-bottom:1px solid #DDD !important;
652 }
653
654 .fm-button {
655     margin:0 4px;
656     height: auto;
657 }
658 .fm-button:not(.btn) {
659     background-color: @btn-default;
660     border-radius: 0 ;
661     box-shadow: none;
662     color: #FFFFFF ;
663     cursor: pointer;
664     display: inline-block;
665     font-size: @base-font-size;
666     line-height: 28px;padding: 0 12px 1px;
667     margin: 0 8px;
668     position: relative;
669     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
670     .transition(~"all 0.15s");
671     vertical-align: middle;
672
673 }
674 .fm-button.ui-state-default:hover {
675     background-color:@btn-default-hover;
676 }
677
678
679 //search toolbar
680 .ui-jqgrid .ui-jqgrid-htable .ui-search-toolbar th {
681     height: 30px;
682     padding-top:2px;
683     white-space: normal;
684     div {
685         padding-top: 0;
686         padding-bottom: 0;
687         height: 30px;
688         line-height: 26px;
689     }
690 }
691
692
693 //titlebar close/open button
694 .ui-jqgrid .ui-jqgrid-titlebar-close {
695    top: 10%;
696    height: auto;
697    padding: 0;
698    margin: 2px 8px 0 0;
699    text-align: center;
700    border-radius: 4px;
701    
702    &:hover {
703     background-color: rgba(255,255,255,0.2);
704    }
705
706   .ui-icon:before {
707     display: inline-block;
708     font-family: FontAwesome;
709     content: "\f077";
710     color: #FFF;
711   }
712   .ui-icon-circle-triangle-s:before {
713     content: "\f078";
714   }
715 }
716
717
718
719 .ui-jqgrid .tree-wrap-ltr {
720     margin: 0 4px;
721     float: none;
722     display: inline;
723 }
724 .ui-jqgrid .tree-wrap-rtl {
725     margin: 2px 4px 0;
726 }
727
728 ///
729 //subgrid
730 .ui-jqgrid .ui-subgrid {
731  border-bottom: 1px solid #E1E1E1;
732  background-color: #F6FAFF;
733
734  .ui-jqgrid-btable {
735     background-color: #FFF;
736  }
737
738  .ui-jqgrid .ui-jqgrid-hdiv {
739     background-color: transparent;
740     margin-top: 4px;
741     .ui-jqgrid-htable {
742         
743         .ui-jqgrid-labels {
744             border-bottom: 1px solid #E1E1E1;
745             background: #F1F1F1;
746         }
747         
748         th[aria-selected="true"] {
749             background: #E5E9EF;
750         }
751         th .ui-jqgrid-sortable {
752             font-size: 12px;
753         }
754         th div {
755             padding-top: 8px;
756             padding-bottom: 8px;
757         }
758         th span.ui-jqgrid-resize {
759             height: 36px !important;
760         }
761     }
762  }
763  .ui-jqgrid .ui-jqgrid-bdiv {
764     height: auto !important;
765     max-height: 150px;
766     margin-bottom: 4px;
767
768     border-top-width: 0;    
769     border-bottom: 1px solid #E1E1E1;
770  } 
771 }
772
773 .ui-jqgrid  {
774  .ui-sgcollapsed > a:hover {
775     text-decoration: none;
776  }
777 }
778
779
780
781 //override ui.jqgrid.css
782 .ui-jqgrid .ui-pg-button:hover { padding: 0 1px;}
783 .ui-jqgrid .ui-state-disabled:hover {padding: 0 1px;}
784 .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover > .ui-separator {
785     margin-left: 4px;
786     margin-right: 4px;
787 }
788 .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-disabled:hover > .ui-pg-div > .ui-icon {
789     margin-left: 4px;
790     margin-right: 4px;
791 }
792
793
794
795
796 @media only screen and (max-width: @screen-xs-max) {
797
798  .ui-jqgrid .ui-jqgrid-pager {
799     height: 90px;
800     > .ui-pager-control {
801         height: 85px;
802         padding-top: 10px !important;
803         
804         > .ui-pg-table {
805             > tbody > tr > td { 
806                 vertical-align: top; 
807                 
808                 //move the center one a bit down
809                 &#grid-pager_center {
810                     width: 0 !important;
811                     position: static;
812                     
813                     > .ui-pg-table {
814                         margin: 36px auto 0;
815                         position: absolute;
816                         right: 0;
817                         left: 0;
818                         text-align: center;
819                     }
820                 }
821             }
822         }
823     }
824  }
825  .ui-jqgrid .ui-jqgrid-pager .navtable {
826     height: auto;
827  }
828 }
829
830 @media only screen and (max-width: @screen-xs-max) and (-webkit-min-device-pixel-ratio:0) {
831  .ui-jqgrid .ui-jqgrid-pager > .ui-pager-control > .ui-pg-table > tbody > tr > td#grid-pager_center > .ui-pg-table {
832     width: 300px;//required by chrome to put the table at center
833  }
834 }
835
836
837 }
838 .enable_plugin_jqgrid();