+45
-4
lines changedFilter options
+45
-4
lines changed Original file line number Diff line number Diff line change
@@ -1532,10 +1532,12 @@ example).
1532 1532 1533 1533
The `selected-variant` can be any of the
1534 1534
[standard (or custom) bootstrap base color variants](/docs/reference/color-variants), or the special
1535 -
[table `active` variant](/docs/reference/color-variants#table-variants).
1535 +
[table `active` variant](/docs/reference/color-variants#table-variants) which takes precedence over
1536 +
any specific row or cell variants.
1536 1537 1537 -
For accessibility reasons (specifically for color blind users), it is highly recommended to always
1538 -
provide some other visual means of conveying that a row is selected, as shown in the example below.
1538 +
For accessibility reasons (specifically for color blind users, or users with color contrast issues),
1539 +
it is highly recommended to always provide some other visual means of conveying that a row is
1540 +
selected, such as shown in the example below.
1539 1541 1540 1542
```html
1541 1543
<template>
@@ -35,14 +35,53 @@
35 35
}
36 36
}
37 37 38 +
// Re-declare `table-active` class here so that it can take
39 +
// precedence over row variants when used on selectable rows
40 +
// Class can only be applied to rows and not individual cells
41 +
> tbody > .table-active {
42 +
&,
43 +
> th,
44 +
> td {
45 +
background-color: $table-active-bg;
46 +
}
47 +
}
48 + 49 +
// Add special hover styling for `table-active` row variant
50 +
&.table-hover > tbody > tr.table-active:hover {
51 +
td,
52 +
th {
53 +
color: $table-hover-color;
54 +
// `$table-hover-bg` default is a very transparent black
55 +
// We overlay it over the background color to achieve the
56 +
// same color effect while keeping the background solid
57 +
background-image: linear-gradient($table-hover-bg, $table-hover-bg);
58 +
background-repeat: no-repeat;
59 +
}
60 +
}
61 + 38 62
// Add in missing `bg-active` class for table tbody rows
39 63
// Bootstrap v4.3 is missing this for dark tables
40 64
// `bg-active` class cannot be applied to individual cells
41 65
> tbody > .bg-active {
42 66
&,
43 67
> th,
44 68
> td {
45 -
background-color: $table-dark-active-bg;
69 +
// Important is needed to override the standard `bg-variants`
70 +
// as the also use `!important`
71 +
background-color: $table-dark-active-bg !important;
72 +
}
73 +
}
74 + 75 +
// Add special hover styling for `bg-active` row variant (dark tables)
76 +
&.table-hover.table-dark > tbody > tr.bg-active:hover {
77 +
td,
78 +
th {
79 +
color: $table-dark-hover-color;
80 +
// `$table-dark-hover-bg` default is a very transparent white
81 +
// We overlay it over the background color to achieve the
82 +
// same color effect while keeping the background solid
83 +
background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
84 +
background-repeat: no-repeat;
46 85
}
47 86
}
48 87
}
You can’t perform that action at this time.
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