1 | @use '../internal' as *;
|
2 |
|
3 | $generate-utility: should-generate-classes($TABLE);
|
4 |
|
5 | @if $generate-utility {
|
6 |
|
7 |
|
8 | .table-container {
|
9 | overflow: auto;
|
10 | overflow-y: hidden;
|
11 | max-width: 100%;
|
12 | }
|
13 |
|
14 | .table {
|
15 | margin-bottom: 1.5rem;
|
16 | width: 100%;
|
17 | border-collapse: collapse;
|
18 | border-spacing: 0;
|
19 | text-align: center;
|
20 |
|
21 | td,
|
22 | th {
|
23 | border: 1px solid transparentize(fill('gray', '300'), 0.5);
|
24 | border-width: 0 0 1px;
|
25 | padding: 0.75rem;
|
26 | vertical-align: top;
|
27 | text-align: inherit;
|
28 | margin: 0;
|
29 | }
|
30 |
|
31 | tr {
|
32 | transition: all 0.3s;
|
33 |
|
34 | &.selected {
|
35 |
|
36 | background-color: $cirrus-primary;
|
37 | color: #fff;
|
38 | }
|
39 | }
|
40 |
|
41 | .table caption {
|
42 | padding-top: 0.75rem;
|
43 | padding-bottom: 0.75rem;
|
44 | color: fill('gray', '300');
|
45 | text-align: left;
|
46 | caption-side: bottom;
|
47 | }
|
48 |
|
49 | tr:not(.selected):hover,
|
50 | &.striped tbody tr:not(.selected):nth-child(even):hover {
|
51 | background-color: transparentize(fill('gray', '300'), 0.85);
|
52 | }
|
53 |
|
54 |
|
55 | thead th,
|
56 | thead {
|
57 | border-bottom: 2px solid transparentize(fill('gray', '300'), 0.5);
|
58 | }
|
59 |
|
60 | thead th,
|
61 | tfoot th {
|
62 | padding: 1rem;
|
63 | }
|
64 |
|
65 | tfoot th {
|
66 | border-top: 2px solid transparentize(fill('gray', '300'), 0.5);
|
67 | border-bottom: none;
|
68 | }
|
69 |
|
70 |
|
71 |
|
72 | &.bordered {
|
73 | thead th,
|
74 | thead {
|
75 | border-bottom: 1px solid transparentize(fill('gray', '300'), 0.5);
|
76 | }
|
77 |
|
78 | td,
|
79 | th {
|
80 | border: 1px solid rgba(219, 219, 219, 0.5);
|
81 | }
|
82 |
|
83 | thead td,
|
84 | thead {
|
85 | border-width: 1px;
|
86 | }
|
87 | }
|
88 |
|
89 |
|
90 | &.striped tbody tr:nth-child(even) {
|
91 | background-color: rgba(0, 0, 0, 0.05);
|
92 | }
|
93 |
|
94 |
|
95 | &.small td,
|
96 | &.small th {
|
97 | padding: 0.25rem 0.75rem;
|
98 | }
|
99 |
|
100 |
|
101 | &.fixed-head thead {
|
102 | position: relative;
|
103 | display: block;
|
104 | }
|
105 |
|
106 | &.fixed-head tbody {
|
107 | min-height: 200px;
|
108 | display: block;
|
109 | overflow: auto;
|
110 | }
|
111 |
|
112 | &.fixed-head tr {
|
113 | display: table;
|
114 | width: 100%;
|
115 | }
|
116 |
|
117 |
|
118 | &.borderless thead th,
|
119 | &.borderless th,
|
120 | &.borderless td {
|
121 | border: none;
|
122 | }
|
123 | }
|
124 | }
|