#21934 allow highlight override table stripping (#22018)

This commit is contained in:
Arthur Hanson 2026-05-07 11:33:03 -07:00 committed by GitHub
parent c20e6dd2ee
commit c45482c4af
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 7 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,23 +1,41 @@
@use 'sass:map';
// Interface row coloring
// Use --tblr-table-bg-state so type highlights take precedence over striping
// (which sets --tblr-table-bg-type via the box-shadow cascade).
tr[data-cable-status=connected] {
background-color: rgba(map.get($theme-colors, "green"), 0.15);
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "green"), 0.15)};
}
tr[data-cable-status=planned] {
background-color: rgba(map.get($theme-colors, "blue"), 0.15);
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "blue"), 0.15)};
}
tr[data-cable-status=decommissioning] {
background-color: rgba(map.get($theme-colors, "yellow"), 0.15);
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "yellow"), 0.15)};
}
tr[data-mark-connected=true] {
background-color: rgba(map.get($theme-colors, "success"), 0.15);
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "success"), 0.15)};
}
tr[data-virtual=true] {
background-color: rgba(map.get($theme-colors, "primary"), 0.15);
--tblr-table-bg-state: #{rgba(map.get($theme-colors, "primary"), 0.15)};
}
tr[data-enabled=disabled] {
background-color: rgba($gray-400, 0.15);
--tblr-table-bg-state: #{rgba($gray-400, 0.15)};
}
// Bootstrap paints --tblr-table-bg-state via an inset box-shadow on each cell.
// In Chrome with border-collapse: collapse, that shadow covers the cell's
// bottom border and the row separator vanishes (Safari paints them in a
// different order, which is why it's not visible there). Repaint the highlight
// via background-color and clear the inset shadow so the border stays on top.
// Also use the opaque border color, since the default translucent value blends
// nearly invisibly against a tinted background.
tr[data-cable-status] > *,
tr[data-mark-connected=true] > *,
tr[data-virtual=true] > *,
tr[data-enabled=disabled] > * {
background-color: var(--tblr-table-bg-state);
border-bottom-color: var(--tblr-gray-300);
box-shadow: none;
}
// Only show the correct button depending on the cable status