@sbb-esta/lyne-elements-dev 5.1.0-dev.1782305772 → 5.1.0-dev.1782307952
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lean-off-brand-theme.css +32 -1
- package/lean-safety-theme.css +32 -1
- package/lean-theme.css +32 -1
- package/off-brand-theme.css +32 -1
- package/package.json +2 -2
- package/safety-theme.css +32 -1
- package/standard-theme.css +32 -1
- package/table/_table.global.scss +46 -1
package/lean-off-brand-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/lean-safety-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/lean-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/off-brand-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.1.0-dev.
|
|
3
|
+
"version": "5.1.0-dev.1782307952",
|
|
4
4
|
"description": "Lyne Design System",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design system",
|
|
7
7
|
"web components",
|
|
8
8
|
"lit",
|
|
9
|
-
"https://github.com/sbb-design-systems/lyne-components/commit/
|
|
9
|
+
"https://github.com/sbb-design-systems/lyne-components/commit/e05787f487cd8c128a4483f3d9f6d77726d6f873"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/standard-theme.css
CHANGED
|
@@ -1720,7 +1720,15 @@ summary {
|
|
|
1720
1720
|
--sbb-stepper-marker-color: var(--sbb-color-3);
|
|
1721
1721
|
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
1722
1722
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
1723
|
+
--sbb-table-border-color-hover: var(--sbb-color-aluminium);
|
|
1724
|
+
--sbb-table-border-color-hover: light-dark(
|
|
1725
|
+
var(--sbb-color-aluminium),
|
|
1726
|
+
var(--sbb-table-border-color)
|
|
1727
|
+
);
|
|
1728
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
1729
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
1723
1730
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
1731
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
1724
1732
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
1725
1733
|
--sbb-table-color: var(--sbb-color-1);
|
|
1726
1734
|
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
@@ -2546,7 +2554,7 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2546
2554
|
}
|
|
2547
2555
|
|
|
2548
2556
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
2549
|
-
--sbb-table-border: var(--sbb-border-width
|
|
2557
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
2550
2558
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
2551
2559
|
--sbb-disable-animation-duration,
|
|
2552
2560
|
var(--sbb-animation-duration-6x)
|
|
@@ -2630,7 +2638,10 @@ sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(st
|
|
|
2630
2638
|
sbb-table-wrapper[negative] .sbb-table,
|
|
2631
2639
|
.sbb-table--negative {
|
|
2632
2640
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
2641
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
2642
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
2633
2643
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
2644
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
2634
2645
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
2635
2646
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
2636
2647
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -2644,6 +2655,26 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
2644
2655
|
background-color: var(--sbb-table-background-color);
|
|
2645
2656
|
}
|
|
2646
2657
|
|
|
2658
|
+
.sbb-table--hover tbody tr:hover :is(th, td) {
|
|
2659
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
2660
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
2661
|
+
}
|
|
2662
|
+
.sbb-table--hover :is(thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
2663
|
+
tbody tr:has(+ tr:hover) :is(th, td)) {
|
|
2664
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
2665
|
+
}
|
|
2666
|
+
|
|
2667
|
+
tr.sbb-table--selected :is(th, td) {
|
|
2668
|
+
position: relative;
|
|
2669
|
+
}
|
|
2670
|
+
tr.sbb-table--selected :is(th, td)::after {
|
|
2671
|
+
content: "";
|
|
2672
|
+
position: absolute;
|
|
2673
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
2674
|
+
pointer-events: none;
|
|
2675
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
2676
|
+
}
|
|
2677
|
+
|
|
2647
2678
|
.sbb-table--theme-iron {
|
|
2648
2679
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
2649
2680
|
}
|
package/table/_table.global.scss
CHANGED
|
@@ -4,7 +4,16 @@ $theme: 'standard' !default;
|
|
|
4
4
|
|
|
5
5
|
@mixin base {
|
|
6
6
|
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
7
|
+
|
|
8
|
+
// In light mode and non negative we need to adjust the border color
|
|
9
|
+
--sbb-table-border-color-hover: light-dark(
|
|
10
|
+
var(--sbb-color-aluminium),
|
|
11
|
+
var(--sbb-table-border-color)
|
|
12
|
+
);
|
|
13
|
+
--sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
|
|
14
|
+
--sbb-table-border-width: var(--sbb-border-width-1x);
|
|
7
15
|
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
16
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4);
|
|
8
17
|
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
9
18
|
--sbb-table-color: var(--sbb-color-1);
|
|
10
19
|
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
@@ -54,7 +63,7 @@ $theme: 'standard' !default;
|
|
|
54
63
|
// We cannot use `border-collapse` because in sticky variants it gets visually broken.
|
|
55
64
|
// Therefore, we have to build the grid avoiding double borders.
|
|
56
65
|
:is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
|
|
57
|
-
--sbb-table-border: var(--sbb-border-width
|
|
66
|
+
--sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
|
|
58
67
|
--sbb-table-sticky-shadow-transition-duration: var(
|
|
59
68
|
--sbb-disable-animation-duration,
|
|
60
69
|
var(--sbb-animation-duration-6x)
|
|
@@ -156,7 +165,10 @@ $theme: 'standard' !default;
|
|
|
156
165
|
sbb-table-wrapper[negative] .sbb-table,
|
|
157
166
|
.sbb-table--negative {
|
|
158
167
|
--sbb-table-border-color: var(--sbb-color-anthracite);
|
|
168
|
+
--sbb-table-border-color-hover: var(--sbb-table-border-color);
|
|
169
|
+
--sbb-table-border-color-selected: var(--sbb-color-cloud);
|
|
159
170
|
--sbb-table-background-color: var(--sbb-background-color-1-negative);
|
|
171
|
+
--sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
|
|
160
172
|
--sbb-table-color: var(--sbb-color-1-negative);
|
|
161
173
|
--sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
|
|
162
174
|
--sbb-table-caption-color: var(--sbb-color-cement);
|
|
@@ -174,6 +186,39 @@ $theme: 'standard' !default;
|
|
|
174
186
|
}
|
|
175
187
|
}
|
|
176
188
|
|
|
189
|
+
.sbb-table--hover {
|
|
190
|
+
tbody tr:hover :is(th, td) {
|
|
191
|
+
background-color: var(--sbb-table-background-color-hover);
|
|
192
|
+
border-color: var(--sbb-table-border-color-hover);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
:is(
|
|
196
|
+
// Address last row of thead if hover is on first row of tbody
|
|
197
|
+
thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
|
|
198
|
+
|
|
199
|
+
// Address row before hovered row
|
|
200
|
+
tbody tr:has(+ tr:hover) :is(th, td)
|
|
201
|
+
) {
|
|
202
|
+
border-block-end-color: var(--sbb-table-border-color-hover);
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
tr.sbb-table--selected {
|
|
207
|
+
:is(th, td) {
|
|
208
|
+
position: relative;
|
|
209
|
+
|
|
210
|
+
&::after {
|
|
211
|
+
content: '';
|
|
212
|
+
position: absolute;
|
|
213
|
+
|
|
214
|
+
// Lay the border over the cell border
|
|
215
|
+
inset: 0 0 calc(-1 * var(--sbb-table-border-width));
|
|
216
|
+
pointer-events: none;
|
|
217
|
+
border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
177
222
|
.sbb-table--theme-iron {
|
|
178
223
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
179
224
|
|