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