|
0
|
1 //
|
|
|
2 // Basic Bootstrap table
|
|
|
3 //
|
|
|
4
|
|
|
5 .table {
|
|
|
6 width: 100%;
|
|
|
7 max-width: 100%;
|
|
|
8 margin-bottom: $spacer;
|
|
|
9 background-color: $table-bg; // Reset for nesting within parents with `background-color`.
|
|
|
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 // Condensed table w/ half padding
|
|
|
35 //
|
|
|
36
|
|
|
37 .table-sm {
|
|
|
38 th,
|
|
|
39 td {
|
|
|
40 padding: $table-cell-padding-sm;
|
|
|
41 }
|
|
|
42 }
|
|
|
43
|
|
|
44
|
|
|
45 // Bordered version
|
|
|
46 //
|
|
|
47 // Add borders all around the table and between all the columns.
|
|
|
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
|
|
|
66 // Zebra-striping
|
|
|
67 //
|
|
|
68 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
|
|
69
|
|
|
70 .table-striped {
|
|
|
71 tbody tr:nth-of-type(odd) {
|
|
|
72 background-color: $table-accent-bg;
|
|
|
73 }
|
|
|
74 }
|
|
|
75
|
|
|
76
|
|
|
77 // Hover effect
|
|
|
78 //
|
|
|
79 // Placed here since it has to come after the potential zebra striping
|
|
|
80
|
|
|
81 .table-hover {
|
|
|
82 tbody tr {
|
|
|
83 @include hover {
|
|
|
84 background-color: $table-hover-bg;
|
|
|
85 }
|
|
|
86 }
|
|
|
87 }
|
|
|
88
|
|
|
89
|
|
|
90 // Table backgrounds
|
|
|
91 //
|
|
|
92 // Exact selectors below required to override `.table-striped` and prevent
|
|
|
93 // inheritance to nested tables.
|
|
|
94
|
|
|
95 @each $color, $value in $theme-colors {
|
|
|
96 @include table-row-variant($color, theme-color-level($color, -9));
|
|
|
97 }
|
|
|
98
|
|
|
99 @include table-row-variant(active, $table-active-bg);
|
|
|
100
|
|
|
101
|
|
|
102 // Inverse styles
|
|
|
103 //
|
|
|
104 // Same table markup, but inverted color scheme: dark background and light text.
|
|
|
105
|
|
|
106 .thead-inverse {
|
|
|
107 th {
|
|
|
108 color: $table-inverse-color;
|
|
|
109 background-color: $table-inverse-bg;
|
|
|
110 }
|
|
|
111 }
|
|
|
112
|
|
|
113 .thead-default {
|
|
|
114 th {
|
|
|
115 color: $table-head-color;
|
|
|
116 background-color: $table-head-bg;
|
|
|
117 }
|
|
|
118 }
|
|
|
119
|
|
|
120 .table-inverse {
|
|
|
121 color: $table-inverse-color;
|
|
|
122 background-color: $table-inverse-bg;
|
|
|
123
|
|
|
124 th,
|
|
|
125 td,
|
|
|
126 thead th {
|
|
|
127 border-color: $table-inverse-border-color;
|
|
|
128 }
|
|
|
129
|
|
|
130 &.table-bordered {
|
|
|
131 border: 0;
|
|
|
132 }
|
|
|
133
|
|
|
134 &.table-striped {
|
|
|
135 tbody tr:nth-of-type(odd) {
|
|
|
136 background-color: $table-inverse-accent-bg;
|
|
|
137 }
|
|
|
138 }
|
|
|
139
|
|
|
140 &.table-hover {
|
|
|
141 tbody tr {
|
|
|
142 @include hover {
|
|
|
143 background-color: $table-inverse-hover-bg;
|
|
|
144 }
|
|
|
145 }
|
|
|
146 }
|
|
|
147 }
|
|
|
148
|
|
|
149
|
|
|
150 // Responsive tables
|
|
|
151 //
|
|
|
152 // Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
|
|
|
153 // enabling horizontal scrolling. Only applies <768px. Everything above that
|
|
|
154 // will display normally.
|
|
|
155
|
|
|
156 .table-responsive {
|
|
|
157 @include media-breakpoint-down(md) {
|
|
|
158 display: block;
|
|
|
159 width: 100%;
|
|
|
160 overflow-x: auto;
|
|
|
161 -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
|
|
162
|
|
|
163 // Prevent double border on horizontal scroll due to use of `display: block;`
|
|
|
164 &.table-bordered {
|
|
|
165 border: 0;
|
|
|
166 }
|
|
|
167 }
|
|
|
168 }
|
