185 185 186 186
// --- Header sort styling ---
187 187 188 +
// Bootstrap v4.4 will include this variable as `$escaped-characters`
189 +
// But if we want to preserve backwards compatibility with v4.3, we leave this in
190 +
$bv-escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"));
191 + 192 +
// Bootstrap v4.4 will include this method as `escape-svg`
193 +
// But if we want to preserve backwards compatibility with v4.3, we leave this in
194 +
// See https://codepen.io/kevinweber/pen/dXWoRw
195 +
@function bv-escape-svg($string) {
196 +
@if str-index($string, "data:image/svg+xml") {
197 +
@each $char, $encoded in $bv-escaped-characters {
198 +
$string: str-replace($string, $char, $encoded);
199 +
}
200 +
}
201 + 202 +
@return $string;
203 +
}
204 + 188 205
.table.b-table {
189 206
> thead,
190 207
> tfoot {
191 208
> tr {
192 -
> th {
193 -
&[aria-sort] {
194 -
// `&.sorting`
195 -
cursor: pointer;
196 - 197 -
// Up/down `sort=null` indicator
198 -
&::before {
199 -
float: right;
200 -
margin-left: $b-table-sort-icon-margin-left;
201 -
width: $b-table-sort-icon-width;
202 -
font-size: inherit;
203 -
line-height: inherit;
204 -
opacity: 0.4;
205 -
content: $b-table-sort-icon-null; // Up/down arrow
206 -
speak: none;
207 -
}
209 +
> [aria-sort] {
210 +
cursor: pointer;
211 +
background-image: none;
212 +
background-repeat: no-repeat;
213 +
background-size: $b-table-sort-icon-bg-width $b-table-sort-icon-bg-height;
214 + 215 +
&:not(.b-table-sort-icon-left) {
216 +
// Default is icon on the right
217 +
background-position: right calc(#{$table-cell-padding} / 2) center;
218 +
padding-right: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width});
219 +
}
208 220 209 -
// Ascending indicator
210 -
&[aria-sort="ascending"]::before {
211 -
// `&.sorting_asc::after.sorting_asc`
212 -
opacity: 1;
213 -
content: $b-table-sort-icon-ascending; // Down arrow
214 -
}
221 +
&.b-table-sort-icon-left {
222 +
// Left aligned sort icon
223 +
background-position: left calc(#{$table-cell-padding} / 2) center;
224 +
padding-left: calc(#{$table-cell-padding} + #{$b-table-sort-icon-bg-width});
225 +
}
226 +
}
215 227 216 -
// Descending indicator
217 -
&[aria-sort="descending"]::before {
218 -
// `&.sorting_desc::after`
219 -
opacity: 1;
220 -
content: $b-table-sort-icon-descending; // Up arrow
221 -
}
228 +
> [aria-sort="none"] {
229 +
background-image: bv-escape-svg($b-table-sort-icon-bg-not-sorted);
230 +
}
231 + 232 +
> [aria-sort="ascending"] {
233 +
background-image: bv-escape-svg($b-table-sort-icon-bg-ascending);
234 +
}
235 + 236 +
> [aria-sort="descending"] {
237 +
background-image: bv-escape-svg($b-table-sort-icon-bg-descending);
238 +
}
239 +
}
240 +
}
241 + 242 +
// Sort icons for dark tables, headers, footers
243 +
&.table-dark > thead > tr,
244 +
&.table-dark > tfoot > tr,
245 +
> .thead-dark > tr {
246 +
> [aria-sort="none"] {
247 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted);
248 +
}
249 + 250 +
> [aria-sort="ascending"] {
251 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending);
252 +
}
253 + 254 +
> [aria-sort="descending"] {
255 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending);
256 +
}
257 +
}
258 + 259 +
// Sort icons when header cell has `table-dark` class
260 +
> thead > tr > .table-dark,
261 +
> tfoot > tr > .table-dark {
262 +
&[aria-sort="none"] {
263 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-not-sorted);
264 +
}
265 + 266 +
&[aria-sort="ascending"] {
267 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-ascending);
268 +
}
269 + 270 +
&[aria-sort="descending"] {
271 +
background-image: bv-escape-svg($b-table-sort-icon-bg-dark-descending);
272 +
}
273 +
}
274 + 275 +
// Padding and position adjustment for small tables
276 +
&.table-sm {
277 +
> thead,
278 +
> tfoot {
279 +
> tr > [aria-sort] {
280 +
&:not(.b-table-sort-icon-left) {
281 +
// Default is icon on the right
282 +
background-position: right calc(#{$table-cell-padding-sm} / 2) center;
283 +
padding-right: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width});
284 +
}
285 + 286 +
&.b-table-sort-icon-left {
287 +
// Left aligned sort icon
288 +
background-position: left calc(#{$table-cell-padding-sm} / 2) center;
289 +
padding-left: calc(#{$table-cell-padding-sm} + #{$b-table-sort-icon-bg-width});
222 290
}
223 291
}
224 292
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4