Mercurial > nebulaweb3

comparison default/assets/scss/components/_table.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }