corrade-http-templates – Blame information for rev 61
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
61 | office | 1 | // |
2 | // Basic Bootstrap table |
||
3 | // |
||
4 | |||
5 | .table { |
||
6 | width: 100%; |
||
7 | margin-bottom: $spacer; |
||
8 | background-color: $table-bg; // Reset for nesting within parents with `background-color`. |
||
9 | |||
10 | th, |
||
11 | td { |
||
12 | padding: $table-cell-padding; |
||
13 | vertical-align: top; |
||
14 | border-top: $table-border-width solid $table-border-color; |
||
15 | } |
||
16 | |||
17 | thead th { |
||
18 | vertical-align: bottom; |
||
19 | border-bottom: (2 * $table-border-width) solid $table-border-color; |
||
20 | } |
||
21 | |||
22 | tbody + tbody { |
||
23 | border-top: (2 * $table-border-width) solid $table-border-color; |
||
24 | } |
||
25 | |||
26 | .table { |
||
27 | background-color: $body-bg; |
||
28 | } |
||
29 | } |
||
30 | |||
31 | |||
32 | // |
||
33 | // Condensed table w/ half padding |
||
34 | // |
||
35 | |||
36 | .table-sm { |
||
37 | th, |
||
38 | td { |
||
39 | padding: $table-cell-padding-sm; |
||
40 | } |
||
41 | } |
||
42 | |||
43 | |||
44 | // Border versions |
||
45 | // |
||
46 | // Add or remove borders all around the table and between all the columns. |
||
47 | |||
48 | .table-bordered { |
||
49 | border: $table-border-width solid $table-border-color; |
||
50 | |||
51 | th, |
||
52 | td { |
||
53 | border: $table-border-width solid $table-border-color; |
||
54 | } |
||
55 | |||
56 | thead { |
||
57 | th, |
||
58 | td { |
||
59 | border-bottom-width: (2 * $table-border-width); |
||
60 | } |
||
61 | } |
||
62 | } |
||
63 | |||
64 | .table-borderless { |
||
65 | th, |
||
66 | td, |
||
67 | thead th, |
||
68 | tbody + tbody { |
||
69 | border: 0; |
||
70 | } |
||
71 | } |
||
72 | |||
73 | // Zebra-striping |
||
74 | // |
||
75 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) |
||
76 | |||
77 | .table-striped { |
||
78 | tbody tr:nth-of-type(#{$table-striped-order}) { |
||
79 | background-color: $table-accent-bg; |
||
80 | } |
||
81 | } |
||
82 | |||
83 | |||
84 | // Hover effect |
||
85 | // |
||
86 | // Placed here since it has to come after the potential zebra striping |
||
87 | |||
88 | .table-hover { |
||
89 | tbody tr { |
||
90 | @include hover { |
||
91 | background-color: $table-hover-bg; |
||
92 | } |
||
93 | } |
||
94 | } |
||
95 | |||
96 | |||
97 | // Table backgrounds |
||
98 | // |
||
99 | // Exact selectors below required to override `.table-striped` and prevent |
||
100 | // inheritance to nested tables. |
||
101 | |||
102 | @each $color, $value in $theme-colors { |
||
103 | @include table-row-variant($color, theme-color-level($color, -9)); |
||
104 | } |
||
105 | |||
106 | @include table-row-variant(active, $table-active-bg); |
||
107 | |||
108 | |||
109 | // Dark styles |
||
110 | // |
||
111 | // Same table markup, but inverted color scheme: dark background and light text. |
||
112 | |||
113 | // stylelint-disable-next-line no-duplicate-selectors |
||
114 | .table { |
||
115 | .thead-dark { |
||
116 | th { |
||
117 | color: $table-dark-color; |
||
118 | background-color: $table-dark-bg; |
||
119 | border-color: $table-dark-border-color; |
||
120 | } |
||
121 | } |
||
122 | |||
123 | .thead-light { |
||
124 | th { |
||
125 | color: $table-head-color; |
||
126 | background-color: $table-head-bg; |
||
127 | border-color: $table-border-color; |
||
128 | } |
||
129 | } |
||
130 | } |
||
131 | |||
132 | .table-dark { |
||
133 | color: $table-dark-color; |
||
134 | background-color: $table-dark-bg; |
||
135 | |||
136 | th, |
||
137 | td, |
||
138 | thead th { |
||
139 | border-color: $table-dark-border-color; |
||
140 | } |
||
141 | |||
142 | &.table-bordered { |
||
143 | border: 0; |
||
144 | } |
||
145 | |||
146 | &.table-striped { |
||
147 | tbody tr:nth-of-type(odd) { |
||
148 | background-color: $table-dark-accent-bg; |
||
149 | } |
||
150 | } |
||
151 | |||
152 | &.table-hover { |
||
153 | tbody tr { |
||
154 | @include hover { |
||
155 | background-color: $table-dark-hover-bg; |
||
156 | } |
||
157 | } |
||
158 | } |
||
159 | } |
||
160 | |||
161 | |||
162 | // Responsive tables |
||
163 | // |
||
164 | // Generate series of `.table-responsive-*` classes for configuring the screen |
||
165 | // size of where your table will overflow. |
||
166 | |||
167 | .table-responsive { |
||
168 | @each $breakpoint in map-keys($grid-breakpoints) { |
||
169 | $next: breakpoint-next($breakpoint, $grid-breakpoints); |
||
170 | $infix: breakpoint-infix($next, $grid-breakpoints); |
||
171 | |||
172 | &#{$infix} { |
||
173 | @include media-breakpoint-down($breakpoint) { |
||
174 | display: block; |
||
175 | width: 100%; |
||
176 | overflow-x: auto; |
||
177 | -webkit-overflow-scrolling: touch; |
||
178 | -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057 |
||
179 | |||
180 | // Prevent double border on horizontal scroll due to use of `display: block;` |
||
181 | > .table-bordered { |
||
182 | border: 0; |
||
183 | } |
||
184 | } |
||
185 | } |
||
186 | } |
||
187 | } |