0
|
1 // main: ../style.scss
|
|
2 /********************************
|
|
3 *********************************
|
|
4 Tables
|
|
5 *********************************
|
|
6 *********************************/
|
|
7 .table {
|
|
8
|
|
9 thead tr.thead-inverse th {
|
|
10 background: inherit;
|
|
11 }
|
|
12
|
|
13 &.table-inverse thead th {
|
|
14 border-width: 0;
|
|
15 }
|
|
16
|
|
17 > tbody > tr:first-child > td {
|
|
18 border-top: none;
|
|
19 }
|
|
20
|
|
21 &.table-borderless {
|
|
22 td, th {
|
|
23 border: none;
|
|
24 }
|
|
25 }
|
|
26
|
|
27 > tbody > tr[class*="bg-"] > td {
|
|
28 color: #fff;
|
|
29 }
|
|
30
|
|
31 > thead > tr > th {
|
|
32 border-bottom-width: 1px;
|
|
33 border-top-width: 0px;
|
|
34 }
|
|
35
|
|
36 &.color-table > thead > tr > th {
|
|
37 border: 0;
|
|
38 }
|
|
39
|
|
40 .progress {
|
|
41 margin: 0;
|
|
42 margin-bottom: 0 !important;
|
|
43 position: relative;
|
|
44 top: em(8,12);
|
|
45 }
|
|
46
|
|
47 }
|
|
48
|
|
49 td.footable-sortable>span.fooicon,
|
|
50 th.footable-sortable>span.fooicon {
|
|
51 top: em(13,12);
|
|
52 font-size: em(12,14);
|
|
53 }
|
|
54
|
|
55 .table, .table-bordered {
|
|
56 &,
|
|
57 > tbody > tr > td,
|
|
58 > thead > tr > th,
|
|
59 > tbody > tr > th {
|
|
60 border-color: $theme-border-color;
|
|
61 }
|
|
62 }
|
|
63
|
|
64 /* DataTables
|
|
65 ========================*/
|
|
66 .dataTables_wrapper {
|
|
67 label { font-weight: normal }
|
|
68
|
|
69 .dataTables_filter input {
|
|
70 padding: em(5) em(10);
|
|
71 border: rem(1) solid #eee;
|
|
72 border-radius: rem(2);
|
|
73 transition: all 0.3s ease;
|
|
74
|
|
75 &:focus {
|
|
76 border-color: $info;
|
|
77 }
|
|
78 }
|
|
79
|
|
80 .dataTables_length {
|
|
81 margin: em(15) auto;
|
|
82 select {
|
|
83 padding: em(3) em(7);
|
|
84 }
|
|
85 }
|
|
86
|
|
87 table.dataTable {
|
|
88 border: rem(1) solid #eee;
|
|
89 margin-top: em(20);
|
|
90
|
|
91 thead th {
|
|
92 border-color: $theme-border-color;
|
|
93 }
|
|
94 th, td {
|
|
95 padding: em(15) em(20);
|
|
96 }
|
|
97
|
|
98 tfoot {
|
|
99 th {
|
|
100 border-top: rem(1) solid #eee;
|
|
101 }
|
|
102 }
|
|
103
|
|
104 thead {
|
|
105 th {
|
|
106 border-top: 0
|
|
107 }
|
|
108 .sorting,
|
|
109 .sorting_asc,
|
|
110 .sorting_desc {
|
|
111 background: none;
|
|
112 position: relative;
|
|
113
|
|
114 &:before {
|
|
115 @include position(absolute, 50% em(10) null null );
|
|
116 transform: translateY(-50%);
|
|
117 font-family: "Material Icons";
|
|
118 font-feature-settings: 'liga';
|
|
119 font-size: em(18);
|
|
120 }
|
|
121 }
|
|
122
|
|
123 .sorting_asc::before { content: 'expand_less' }
|
|
124 .sorting_desc::before { content: 'expand_more' }
|
|
125 .sorting::before { content: 'sort'; opacity: 0.1; }
|
|
126 }
|
|
127
|
|
128 }
|
|
129
|
|
130 .dataTables_info {
|
|
131 margin-top: em(20);
|
|
132 }
|
|
133
|
|
134 .dataTables_paginate {
|
|
135 margin-top: em(30);
|
|
136 padding: 0;
|
|
137 border: rem(1) solid #eee;
|
|
138
|
|
139 .paginate_button {
|
|
140 transition: all 0.3s ease;
|
|
141 border: 0;
|
|
142
|
|
143 &:hover {
|
|
144 background: none;
|
|
145 border: 0;
|
|
146 color: $body-color !important;
|
|
147 }
|
|
148
|
|
149 &:focus { box-shadow:none }
|
|
150
|
|
151 &.current {
|
|
152 background: $primary;
|
|
153 border: 0;
|
|
154 border-radius: 0;
|
|
155 color: #fff !important;
|
|
156
|
|
157 &:hover {
|
|
158 background: darken( $primary, 10%);
|
|
159 border: 0;
|
|
160 color: #fff !important;
|
|
161 }
|
|
162 }
|
|
163
|
|
164 &.next,
|
|
165 &.previous {
|
|
166 border: 0;
|
|
167 }
|
|
168 }
|
|
169 }
|
|
170 }
|
|
171
|
|
172 /* Bootstrap Tables
|
|
173 ========================*/
|
|
174 .bootstrap-table {
|
|
175 position: relative;
|
|
176
|
|
177 .btn {
|
|
178 cursor: pointer;
|
|
179 i {
|
|
180 &:before {
|
|
181 font-family: "Material Icons";
|
|
182 display: block;
|
|
183 line-height: 1;
|
|
184 font-style: normal;
|
|
185 font-size: em(20,15);
|
|
186 }
|
|
187 }
|
|
188
|
|
189 &[name="refresh"] {
|
|
190 i:before {
|
|
191 content: "refresh";
|
|
192 }
|
|
193 }
|
|
194
|
|
195 &[name="toggle"] {
|
|
196 i:before {
|
|
197 content: "dehaze";
|
|
198 }
|
|
199 }
|
|
200
|
|
201 i.glyphicon-th:before {
|
|
202 content: "apps";
|
|
203 display: inline;
|
|
204 vertical-align: middle;
|
|
205 }
|
|
206 }
|
|
207 }
|
|
208
|
|
209 .fixed-table-toolbar {
|
|
210 display: inline-flex;
|
|
211 @include position(absolute, 0 em(15) null null);
|
|
212 z-index: 1;
|
|
213 transform: translateY(-100%);
|
|
214 margin-top: em(-10);
|
|
215
|
|
216 .search {
|
|
217 order: -1;
|
|
218 }
|
|
219
|
|
220 .btn-group {
|
|
221 &, & > .btn-group {
|
|
222 display: flex;
|
|
223 }
|
|
224 .btn {
|
|
225 display: inline-flex;
|
|
226 }
|
|
227 }
|
|
228
|
|
229 .search, .columns {
|
|
230 margin-top: 0;
|
|
231 margin-bottom: 0;
|
|
232 // line-height: em(20);
|
|
233
|
|
234 .btn {
|
|
235 padding: 0 em(10);
|
|
236 }
|
|
237
|
|
238 .dropdown-menu {
|
|
239 input {
|
|
240 display: none;
|
|
241 }
|
|
242 label {
|
|
243 cursor:pointer;
|
|
244
|
|
245 &:before {
|
|
246 display: inline-block;
|
|
247 line-height: 1;
|
|
248 vertical-align: middle;
|
|
249 text-align: center;
|
|
250 @include size( em(20) );
|
|
251 content: "";
|
|
252 font-family: "feather";
|
|
253 font-feature-settings: 'liga';
|
|
254 background: none;
|
|
255 border: rem(2) solid #eee;
|
|
256 margin-right: em(10);
|
|
257 transition: all 0.3s ease;
|
|
258 color: #fff;
|
|
259 }
|
|
260
|
|
261 &.checkbox-checked::before {
|
|
262 content: "\e925";
|
|
263 background: $primary;
|
|
264 color: #fff;
|
|
265 border-color: $primary;
|
|
266 }
|
|
267 }
|
|
268 }
|
|
269 }
|
|
270
|
|
271 @include mobile {
|
|
272 display: none;
|
|
273 }
|
|
274
|
|
275 body.rtl & {
|
|
276 left: 0;
|
|
277 right: auto;
|
|
278 }
|
|
279 }
|
|
280 .fixed-table-container {
|
|
281 border: 0;
|
|
282 border-bottom: rem(1) solid #eee;
|
|
283
|
|
284 thead th {
|
|
285 .both {
|
|
286 background: none;
|
|
287 position: relative;
|
|
288 &:before {
|
|
289 content: '';
|
|
290 @include position(absolute, 50% em(10) null null );
|
|
291 transform: translateY(-50%);
|
|
292 font-family: "Material Icons";
|
|
293 font-feature-settings: 'liga';
|
|
294 font-size: em(18);
|
|
295 }
|
|
296 }
|
|
297
|
|
298 .both.asc::before { content: 'expand_less'; opacity: 1 }
|
|
299 .both.desc::before { content: 'expand_more'; opacity: 1 }
|
|
300 .both::before { content: 'sort'; opacity: 0.1 }
|
|
301 }
|
|
302 }
|
|
303
|
|
304 .bootstrap-table .table {
|
|
305 border: rem(1) solid #eee;
|
|
306
|
|
307 > thead > tr > th {
|
|
308 border-bottom: rem(1) solid #eee;
|
|
309 }
|
|
310 }
|
|
311
|
|
312 /* Responsive Tables
|
|
313 ========================*/
|
|
314 .responsive-utilities .is-hidden {
|
|
315 color: #ccc;
|
|
316 background-color: #f9f9f9 !important;
|
|
317 }
|
|
318
|
|
319 .responsive-utilities .is-visible {
|
|
320 color: #468847;
|
|
321 background-color: #dff0d8 !important;
|
|
322 }
|
|
323
|
|
324 .tablesaw {
|
|
325 .tablesaw-sortable-head {
|
|
326 &:before {
|
|
327 content:'';
|
|
328 @include position(absolute, 50% em(10) null null );
|
|
329 transform: translateY(-50%);
|
|
330 font-family: "Material Icons";
|
|
331 font-feature-settings: 'liga';
|
|
332 font-size: em(18);
|
|
333 }
|
|
334 }
|
|
335
|
|
336
|
|
337 .tablesaw-sortable-ascending:before { content: 'expand_less'; }
|
|
338 .tablesaw-sortable-descending:before { content: 'expand_more'; }
|
|
339 }
|
|
340
|
|
341 // .tablesaw-toolbar {
|
|
342 // margin-right: 20px;
|
|
343 // margin-bottom: 10px;
|
|
344 // }
|
|
345
|
|
346 .tablesaw-bar {
|
|
347 .tablesaw-columntoggle-popup {
|
|
348 .btn-group {
|
|
349 display: inline-block;
|
|
350 margin: em(10) 0 em(5) 0;
|
|
351 label {
|
|
352 height: auto;
|
|
353 line-height: 2rem;
|
|
354 input {
|
|
355 height: auto;
|
|
356 position: relative;
|
|
357 top: em(2);
|
|
358 }
|
|
359 }
|
|
360 }
|
|
361 }
|
|
362 }
|
|
363
|
|
364 .tablesaw-bar .tablesaw-bar-section .btn-select {
|
|
365 padding: em(5, 12.25) em(10, 12.25);
|
|
366 padding-right: em(50, 12.25);
|
|
367 font-weight: normal;
|
|
368 position: relative;
|
|
369 font-family: $font-family-base;
|
|
370 background: #eee;
|
|
371 text-transform: none;
|
|
372
|
|
373 span {
|
|
374 line-height: em(20, 12.25);
|
|
375 height: em(20, 12.25);
|
|
376 display: block;
|
|
377 }
|
|
378
|
|
379 select {
|
|
380 cursor: pointer;
|
|
381 }
|
|
382
|
|
383 &:after { display: none; }
|
|
384
|
|
385 &:before {
|
|
386 content: 'expand_more';
|
|
387 font-family: "Material Icons";
|
|
388 font-feature-settings: 'liga';
|
|
389 font-size: em(18, 12.25);
|
|
390 text-transform: lowercase;
|
|
391 @include position(absolute, 50% em(10, 12.25) null null);
|
|
392 transform: translateY(-50%);
|
|
393 line-height: 1;
|
|
394 }
|
|
395 }
|
|
396
|
|
397 .tablesaw-sortable-arrow {
|
|
398 display: none;
|
|
399 }
|
|
400
|
|
401 .tablesaw-swipe .tablesaw-cell-persist {
|
|
402 border-right: rem(1) solid #eee;
|
|
403 }
|
|
404
|
|
405
|
|
406 /* Editable
|
|
407 ========================*/
|
|
408 .table-editable,
|
|
409 .table-editable-inline {
|
|
410 .tabledit-toolbar {
|
|
411 display: inline !important;
|
|
412 .tabledit-save-button, .tabledit-confirm-button, .tabledit-restore-button { margin-left: em(8,12); }
|
|
413
|
|
414 .btn-group {
|
|
415 .btn {
|
|
416 cursor: pointer;
|
|
417 span.glyphicon {
|
|
418 &::before {
|
|
419 font-family: "feather";
|
|
420 display: inline-block;
|
|
421 line-height: 1;
|
|
422 font-style: normal;
|
|
423 font-size: em(16,12);
|
|
424 font-weight: 300;
|
|
425 position: relative;
|
|
426 top: 3px;
|
|
427 }
|
|
428 }
|
|
429
|
|
430 .glyphicon-pencil::before {
|
|
431 content: "\e950";
|
|
432 }
|
|
433
|
|
434 .glyphicon-trash::before {
|
|
435 content: "\e9cd";
|
|
436 }
|
|
437
|
|
438 }
|
|
439 }
|
|
440 }
|
|
441 tr.tabledit-deleted-row {
|
|
442 display: none;
|
|
443 }
|
|
444 }
|
|
445
|
|
446
|
|
447 /* Footable
|
|
448 ========================*/
|
|
449 .footable {
|
|
450 .footable-sortable {
|
|
451 .fooicon {
|
|
452 display: none;
|
|
453 }
|
|
454
|
|
455 &:before {
|
|
456 content: 'sort';
|
|
457 opacity: 0;
|
|
458 font-family: 'Material Icons';
|
|
459 font-feature-settings: 'liga';
|
|
460 @include position(absolute, 50% em(10) null null);
|
|
461 transform: translateY(-50%);
|
|
462 font-size: em(18);
|
|
463 transition: all 0.3s ease;
|
|
464 }
|
|
465
|
|
466 &:hover::before {
|
|
467 opacity: 1;
|
|
468 }
|
|
469
|
|
470 &.footable-asc::before { content: 'expand_more'; opacity: 1; }
|
|
471 &.footable-desc::before { content: 'expand_less'; opacity: 1; }
|
|
472 }
|
|
473
|
|
474 .footable-filtering {
|
|
475 th { border-top: none; }
|
|
476 form.form-inline {
|
|
477 margin-top: 0;
|
|
478 margin-bottom: em(15);
|
|
479 float: right;
|
|
480 }
|
|
481 }
|
|
482
|
|
483 .checkbox {
|
|
484 input[type="checkbox"] {
|
|
485 opacity: 1;
|
|
486 }
|
|
487 }
|
|
488
|
|
489 .footable-first-visible {
|
|
490 span{
|
|
491 &::before{
|
|
492 display: none;
|
|
493 }
|
|
494
|
|
495 &::after {
|
|
496 font-family: "FontAwesome";
|
|
497 display: block;
|
|
498 font-style: normal;
|
|
499 font-size: em(18);
|
|
500 font-weight: 300;
|
|
501 }
|
|
502 }
|
|
503
|
|
504 .fooicon-plus::after {
|
|
505 content: "\f067";
|
|
506 }
|
|
507
|
|
508 .fooicon-minus::after {
|
|
509 content: "\f068";
|
|
510 }
|
|
511 }
|
|
512
|
|
513 .input-group-btn {
|
|
514 display: inline-block;
|
|
515 .btn {
|
|
516 span.fooicon {
|
|
517 &::before { display: none; }
|
|
518 &::after {
|
|
519 font-family: "FontAwesome";
|
|
520 display: block;
|
|
521 font-style: normal;
|
|
522 font-size: em(16, 15);
|
|
523 font-weight: 300;
|
|
524 }
|
|
525 }
|
|
526
|
|
527 .fooicon-search::after {
|
|
528 content: "\f002";
|
|
529 }
|
|
530
|
|
531 }
|
|
532 }
|
|
533
|
|
534 .footable-paging {
|
|
535 span.label {
|
|
536 font-size: em(11);
|
|
537 background: rgba(0,0,0,.7);
|
|
538 color: #fff;
|
|
539 }
|
|
540 .pagination {
|
|
541 margin: auto;
|
|
542 display: inline-block;
|
|
543
|
|
544 > li.active > a {
|
|
545 background: #51d2b7;
|
|
546 border-color: #51d2b7;
|
|
547 color: #fff;
|
|
548 }
|
|
549
|
|
550 li {
|
|
551 a {
|
|
552 position: relative;
|
|
553 display: block;
|
|
554 padding: 0.5rem 0.75rem;
|
|
555 margin-left: em(-1);
|
|
556 line-height: 1.25;
|
|
557 color: #51d2b7;
|
|
558 background-color: #fff;
|
|
559 border: rem(1) solid #ddd;
|
|
560
|
|
561 &:hover {
|
|
562 background: #51d2b7;
|
|
563 border-color: #51d2b7;
|
|
564 color: #fff;
|
|
565 }
|
|
566 }
|
|
567
|
|
568 &.footable-page-nav[data-page="first"] {
|
|
569 a {
|
|
570 border-top-left-radius: 0.25rem;
|
|
571 border-bottom-left-radius: 0.25rem;
|
|
572 }
|
|
573 }
|
|
574
|
|
575 &.footable-page-nav[data-page="last"] {
|
|
576 a {
|
|
577 border-top-right-radius: 0.25rem;
|
|
578 border-bottom-right-radius: 0.25rem;
|
|
579 }
|
|
580 }
|
|
581
|
|
582 }
|
|
583 }
|
|
584 }
|
|
585 }
|
|
586
|
|
587 table.footable > thead > tr.footable-filtering > th ul.dropdown-menu > li > a.checkbox input[type="checkbox"] {
|
|
588 line-height: 1em;
|
|
589 height: 1em;
|
|
590 top: 50%;
|
|
591 transform: translateY(-50%);
|
|
592 }
|
|
593
|
|
594 .footable-filtering {
|
|
595 .footable-filtering-search {
|
|
596 .dropdown-menu {
|
|
597 li {
|
|
598 a {
|
|
599 display: block;
|
|
600 width: 100%;
|
|
601 padding: em(3) 1.42857em;
|
|
602 padding-top: 0.35714em;
|
|
603 padding-bottom: 0.35714em;
|
|
604 clear: both;
|
|
605 font-weight: normal;
|
|
606 color: #888;
|
|
607 text-align: inherit;
|
|
608 white-space: nowrap;
|
|
609 background: none;
|
|
610 border: 0;
|
|
611
|
|
612 &:hover {
|
|
613 color: #555;
|
|
614 text-decoration: none;
|
|
615 background-color: #f7fafc;
|
|
616 }
|
|
617
|
|
618 label {
|
|
619 cursor: pointer;
|
|
620 }
|
|
621 }
|
|
622 }
|
|
623 }
|
|
624 }
|
|
625 }
|