feat: Change active state for table

Use box-shadow on pseudo-element to compensate for replaced elements like img, canvas, video, object or iframe.
This commit is contained in:
sthag 2026-04-05 12:27:32 +02:00
parent 848754c615
commit 80a0deedd5
2 changed files with 20 additions and 2 deletions

View file

@ -161,8 +161,25 @@ tfoot {
// -----------------------------------------------------------------------------
tr {
&.active {
color: config.$color_highlight_basic;
background-color: config.$color_action_basic;
position: relative;
& > * {
//color: config.$color_highlight_basic;
//background-color: config.$color_action_basic;
//box-shadow: inset 0 0 0 9999px config.$color_action_basic;
}
& > *::before {
content: '';
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: config.$overlay_focus;
pointer-events: none;
}
}
}

View file

@ -210,6 +210,7 @@ $border_io_dotted: $width_border_io dotted $color_border_io;
$shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);
$overlay_focus: inset 0 0 9999px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.5);
// ANIMATIONS