1 |
|
2 |
|
3 |
|
4 |
|
5 | .table {
|
6 | width: 100%;
|
7 | max-width: 100%;
|
8 | margin-bottom: $spacer;
|
9 | background-color: $table-bg;
|
10 |
|
11 | th,
|
12 | td {
|
13 | padding: $table-cell-padding;
|
14 | vertical-align: top;
|
15 | border-top: $table-border-width solid $table-border-color;
|
16 | }
|
17 |
|
18 | thead th {
|
19 | vertical-align: bottom;
|
20 | border-bottom: (2 * $table-border-width) solid $table-border-color;
|
21 | }
|
22 |
|
23 | tbody + tbody {
|
24 | border-top: (2 * $table-border-width) solid $table-border-color;
|
25 | }
|
26 |
|
27 | .table {
|
28 | background-color: $body-bg;
|
29 | }
|
30 | }
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | .table-sm {
|
38 | th,
|
39 | td {
|
40 | padding: $table-cell-padding-sm;
|
41 | }
|
42 | }
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | .table-bordered {
|
50 | border: $table-border-width solid $table-border-color;
|
51 |
|
52 | th,
|
53 | td {
|
54 | border: $table-border-width solid $table-border-color;
|
55 | }
|
56 |
|
57 | thead {
|
58 | th,
|
59 | td {
|
60 | border-bottom-width: (2 * $table-border-width);
|
61 | }
|
62 | }
|
63 | }
|
64 |
|
65 | .table-borderless {
|
66 | th,
|
67 | td,
|
68 | thead th,
|
69 | tbody + tbody {
|
70 | border: 0;
|
71 | }
|
72 | }
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 | .table-striped {
|
79 | tbody tr:nth-of-type(#{$table-striped-order}) {
|
80 | background-color: $table-accent-bg;
|
81 | }
|
82 | }
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 | .table-hover {
|
90 | tbody tr {
|
91 | @include hover {
|
92 | background-color: $table-hover-bg;
|
93 | }
|
94 | }
|
95 | }
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 | @each $color, $value in $theme-colors {
|
104 | @include table-row-variant($color, theme-color-level($color, -9));
|
105 | }
|
106 |
|
107 | @include table-row-variant(active, $table-active-bg);
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 | .table {
|
116 | .thead-dark {
|
117 | th {
|
118 | color: $table-dark-color;
|
119 | background-color: $table-dark-bg;
|
120 | border-color: $table-dark-border-color;
|
121 | }
|
122 | }
|
123 |
|
124 | .thead-light {
|
125 | th {
|
126 | color: $table-head-color;
|
127 | background-color: $table-head-bg;
|
128 | border-color: $table-border-color;
|
129 | }
|
130 | }
|
131 | }
|
132 |
|
133 | .table-dark {
|
134 | color: $table-dark-color;
|
135 | background-color: $table-dark-bg;
|
136 |
|
137 | th,
|
138 | td,
|
139 | thead th {
|
140 | border-color: $table-dark-border-color;
|
141 | }
|
142 |
|
143 | &.table-bordered {
|
144 | border: 0;
|
145 | }
|
146 |
|
147 | &.table-striped {
|
148 | tbody tr:nth-of-type(odd) {
|
149 | background-color: $table-dark-accent-bg;
|
150 | }
|
151 | }
|
152 |
|
153 | &.table-hover {
|
154 | tbody tr {
|
155 | @include hover {
|
156 | background-color: $table-dark-hover-bg;
|
157 | }
|
158 | }
|
159 | }
|
160 | }
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | .table-responsive {
|
169 | @each $breakpoint in map-keys($grid-breakpoints) {
|
170 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
|
171 | $infix: breakpoint-infix($next, $grid-breakpoints);
|
172 |
|
173 | &#{$infix} {
|
174 | @include media-breakpoint-down($breakpoint) {
|
175 | display: block;
|
176 | width: 100%;
|
177 | overflow-x: auto;
|
178 | -webkit-overflow-scrolling: touch;
|
179 | -ms-overflow-style: -ms-autohiding-scrollbar;
|
180 |
|
181 |
|
182 | > .table-bordered {
|
183 | border: 0;
|
184 | }
|
185 | }
|
186 | }
|
187 | }
|
188 | }
|