@sbb-esta/lyne-elements-dev 4.0.0-dev.1776072012 → 4.0.0-dev.1776085156
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/core/styles/mixins/table.scss +18 -19
- package/core/styles/theme.scss +3 -1
- package/custom-elements.json +1060 -1060
- package/off-brand-theme.css +32 -37
- package/package.json +2 -2
- package/safety-theme.css +32 -37
- package/standard-theme.css +32 -37
- package/table.css +32 -37
- package/core/styles/table.scss +0 -156
package/off-brand-theme.css
CHANGED
|
@@ -3312,10 +3312,17 @@ sup {
|
|
|
3312
3312
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3313
3313
|
}
|
|
3314
3314
|
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3315
|
+
:root {
|
|
3316
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3317
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3318
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3319
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3320
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3321
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3322
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3323
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3324
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3325
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3319
3326
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3320
3327
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3321
3328
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3323,28 +3330,16 @@ sup {
|
|
|
3323
3330
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3324
3331
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3325
3332
|
}
|
|
3326
|
-
|
|
3327
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3328
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3329
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3330
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3331
|
-
}
|
|
3333
|
+
|
|
3332
3334
|
.sbb-table,
|
|
3333
3335
|
.sbb-table-m,
|
|
3334
3336
|
.sbb-table-s,
|
|
3335
3337
|
.sbb-table-xs {
|
|
3336
3338
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3337
|
-
--sbb-table-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3342
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3343
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3344
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3345
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3346
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3347
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3339
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3340
|
+
--sbb-disable-animation-duration,
|
|
3341
|
+
var(--sbb-animation-duration-6x)
|
|
3342
|
+
);
|
|
3348
3343
|
border-spacing: 0;
|
|
3349
3344
|
caption-side: bottom;
|
|
3350
3345
|
color: var(--sbb-table-color);
|
|
@@ -3388,6 +3383,12 @@ sup {
|
|
|
3388
3383
|
.sbb-table-xs :is(th, td):first-child {
|
|
3389
3384
|
border-inline-start: var(--sbb-table-border);
|
|
3390
3385
|
}
|
|
3386
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3387
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3388
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3389
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3390
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3391
|
+
}
|
|
3391
3392
|
.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3392
3393
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3393
3394
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3408,7 +3409,10 @@ sup {
|
|
|
3408
3409
|
.sbb-table-s caption,
|
|
3409
3410
|
.sbb-table-xs caption {
|
|
3410
3411
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3411
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3412
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3413
|
+
var(--sbb-color-granite),
|
|
3414
|
+
var(--sbb-color-cement)
|
|
3415
|
+
);
|
|
3412
3416
|
font-size: var(--sbb-text-font-size-xs);
|
|
3413
3417
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3414
3418
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3463
3467
|
.sbb-table--theme-iron {
|
|
3464
3468
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3465
3469
|
}
|
|
3470
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3471
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3472
|
+
}
|
|
3466
3473
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3467
3474
|
color: var(--sbb-table-cell-color);
|
|
3468
3475
|
}
|
|
3469
|
-
|
|
3470
|
-
|
|
3476
|
+
|
|
3477
|
+
.sbb-table-header-subtitle {
|
|
3478
|
+
font-weight: normal;
|
|
3471
3479
|
}
|
|
3472
3480
|
|
|
3473
3481
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3551
3559
|
inset-inline-end: unset;
|
|
3552
3560
|
}
|
|
3553
3561
|
|
|
3554
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3555
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3556
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3557
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3558
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3559
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3560
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3561
|
-
}
|
|
3562
|
-
|
|
3563
3562
|
.sbb-table-align-start {
|
|
3564
3563
|
text-align: start;
|
|
3565
3564
|
}
|
|
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3584
3583
|
text-align: right;
|
|
3585
3584
|
}
|
|
3586
3585
|
|
|
3587
|
-
.sbb-table-header-subtitle {
|
|
3588
|
-
font-weight: normal;
|
|
3589
|
-
}
|
|
3590
|
-
|
|
3591
3586
|
.sbb-timetable-form {
|
|
3592
3587
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3593
3588
|
position: relative;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.1776085156",
|
|
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/31ded68565a40fcebdd0234b8bddfd6cfcac1857"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -3312,10 +3312,17 @@ sup {
|
|
|
3312
3312
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3313
3313
|
}
|
|
3314
3314
|
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3315
|
+
:root {
|
|
3316
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3317
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3318
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3319
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3320
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3321
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3322
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3323
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3324
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3325
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3319
3326
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3320
3327
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3321
3328
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3323,28 +3330,16 @@ sup {
|
|
|
3323
3330
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3324
3331
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3325
3332
|
}
|
|
3326
|
-
|
|
3327
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3328
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3329
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3330
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3331
|
-
}
|
|
3333
|
+
|
|
3332
3334
|
.sbb-table,
|
|
3333
3335
|
.sbb-table-m,
|
|
3334
3336
|
.sbb-table-s,
|
|
3335
3337
|
.sbb-table-xs {
|
|
3336
3338
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3337
|
-
--sbb-table-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3342
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3343
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3344
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3345
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3346
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3347
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3339
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3340
|
+
--sbb-disable-animation-duration,
|
|
3341
|
+
var(--sbb-animation-duration-6x)
|
|
3342
|
+
);
|
|
3348
3343
|
border-spacing: 0;
|
|
3349
3344
|
caption-side: bottom;
|
|
3350
3345
|
color: var(--sbb-table-color);
|
|
@@ -3388,6 +3383,12 @@ sup {
|
|
|
3388
3383
|
.sbb-table-xs :is(th, td):first-child {
|
|
3389
3384
|
border-inline-start: var(--sbb-table-border);
|
|
3390
3385
|
}
|
|
3386
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3387
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3388
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3389
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3390
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3391
|
+
}
|
|
3391
3392
|
.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3392
3393
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3393
3394
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3408,7 +3409,10 @@ sup {
|
|
|
3408
3409
|
.sbb-table-s caption,
|
|
3409
3410
|
.sbb-table-xs caption {
|
|
3410
3411
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3411
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3412
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3413
|
+
var(--sbb-color-granite),
|
|
3414
|
+
var(--sbb-color-cement)
|
|
3415
|
+
);
|
|
3412
3416
|
font-size: var(--sbb-text-font-size-xs);
|
|
3413
3417
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3414
3418
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3463
3467
|
.sbb-table--theme-iron {
|
|
3464
3468
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3465
3469
|
}
|
|
3470
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3471
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3472
|
+
}
|
|
3466
3473
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3467
3474
|
color: var(--sbb-table-cell-color);
|
|
3468
3475
|
}
|
|
3469
|
-
|
|
3470
|
-
|
|
3476
|
+
|
|
3477
|
+
.sbb-table-header-subtitle {
|
|
3478
|
+
font-weight: normal;
|
|
3471
3479
|
}
|
|
3472
3480
|
|
|
3473
3481
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3551
3559
|
inset-inline-end: unset;
|
|
3552
3560
|
}
|
|
3553
3561
|
|
|
3554
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3555
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3556
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3557
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3558
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3559
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3560
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3561
|
-
}
|
|
3562
|
-
|
|
3563
3562
|
.sbb-table-align-start {
|
|
3564
3563
|
text-align: start;
|
|
3565
3564
|
}
|
|
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3584
3583
|
text-align: right;
|
|
3585
3584
|
}
|
|
3586
3585
|
|
|
3587
|
-
.sbb-table-header-subtitle {
|
|
3588
|
-
font-weight: normal;
|
|
3589
|
-
}
|
|
3590
|
-
|
|
3591
3586
|
.sbb-timetable-form {
|
|
3592
3587
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3593
3588
|
position: relative;
|
package/standard-theme.css
CHANGED
|
@@ -3312,10 +3312,17 @@ sup {
|
|
|
3312
3312
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3313
3313
|
}
|
|
3314
3314
|
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3315
|
+
:root {
|
|
3316
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3317
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3318
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3319
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3320
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3321
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3322
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3323
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3324
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3325
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3319
3326
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3320
3327
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3321
3328
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3323,28 +3330,16 @@ sup {
|
|
|
3323
3330
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3324
3331
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3325
3332
|
}
|
|
3326
|
-
|
|
3327
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3328
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3329
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3330
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3331
|
-
}
|
|
3333
|
+
|
|
3332
3334
|
.sbb-table,
|
|
3333
3335
|
.sbb-table-m,
|
|
3334
3336
|
.sbb-table-s,
|
|
3335
3337
|
.sbb-table-xs {
|
|
3336
3338
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3337
|
-
--sbb-table-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3342
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3343
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3344
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3345
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3346
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3347
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3339
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3340
|
+
--sbb-disable-animation-duration,
|
|
3341
|
+
var(--sbb-animation-duration-6x)
|
|
3342
|
+
);
|
|
3348
3343
|
border-spacing: 0;
|
|
3349
3344
|
caption-side: bottom;
|
|
3350
3345
|
color: var(--sbb-table-color);
|
|
@@ -3388,6 +3383,12 @@ sup {
|
|
|
3388
3383
|
.sbb-table-xs :is(th, td):first-child {
|
|
3389
3384
|
border-inline-start: var(--sbb-table-border);
|
|
3390
3385
|
}
|
|
3386
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3387
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3388
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3389
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3390
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3391
|
+
}
|
|
3391
3392
|
.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
3392
3393
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3393
3394
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3408,7 +3409,10 @@ sup {
|
|
|
3408
3409
|
.sbb-table-s caption,
|
|
3409
3410
|
.sbb-table-xs caption {
|
|
3410
3411
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3411
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3412
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3413
|
+
var(--sbb-color-granite),
|
|
3414
|
+
var(--sbb-color-cement)
|
|
3415
|
+
);
|
|
3412
3416
|
font-size: var(--sbb-text-font-size-xs);
|
|
3413
3417
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3414
3418
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3463,11 +3467,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3463
3467
|
.sbb-table--theme-iron {
|
|
3464
3468
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3465
3469
|
}
|
|
3470
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3471
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3472
|
+
}
|
|
3466
3473
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3467
3474
|
color: var(--sbb-table-cell-color);
|
|
3468
3475
|
}
|
|
3469
|
-
|
|
3470
|
-
|
|
3476
|
+
|
|
3477
|
+
.sbb-table-header-subtitle {
|
|
3478
|
+
font-weight: normal;
|
|
3471
3479
|
}
|
|
3472
3480
|
|
|
3473
3481
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3551,15 +3559,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3551
3559
|
inset-inline-end: unset;
|
|
3552
3560
|
}
|
|
3553
3561
|
|
|
3554
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3555
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3556
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3557
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3558
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3559
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3560
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3561
|
-
}
|
|
3562
|
-
|
|
3563
3562
|
.sbb-table-align-start {
|
|
3564
3563
|
text-align: start;
|
|
3565
3564
|
}
|
|
@@ -3584,10 +3583,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3584
3583
|
text-align: right;
|
|
3585
3584
|
}
|
|
3586
3585
|
|
|
3587
|
-
.sbb-table-header-subtitle {
|
|
3588
|
-
font-weight: normal;
|
|
3589
|
-
}
|
|
3590
|
-
|
|
3591
3586
|
.sbb-timetable-form {
|
|
3592
3587
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3593
3588
|
position: relative;
|
package/table.css
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
4
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
5
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
6
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
7
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
8
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
9
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
10
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
11
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
5
12
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
6
13
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
7
14
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -9,28 +16,16 @@
|
|
|
9
16
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
10
17
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
11
18
|
}
|
|
12
|
-
|
|
13
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
14
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
15
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
16
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
17
|
-
}
|
|
19
|
+
|
|
18
20
|
.sbb-table,
|
|
19
21
|
.sbb-table-m,
|
|
20
22
|
.sbb-table-s,
|
|
21
23
|
.sbb-table-xs {
|
|
22
24
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
23
|
-
--sbb-table-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
28
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
29
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
30
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
31
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
32
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
33
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
25
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
26
|
+
--sbb-disable-animation-duration,
|
|
27
|
+
var(--sbb-animation-duration-6x)
|
|
28
|
+
);
|
|
34
29
|
border-spacing: 0;
|
|
35
30
|
caption-side: bottom;
|
|
36
31
|
color: var(--sbb-table-color);
|
|
@@ -74,6 +69,12 @@
|
|
|
74
69
|
.sbb-table-xs :is(th, td):first-child {
|
|
75
70
|
border-inline-start: var(--sbb-table-border);
|
|
76
71
|
}
|
|
72
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
73
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
74
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
75
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
76
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
77
|
+
}
|
|
77
78
|
.sbb-table:has(thead tr) thead tr:first-of-type > :is(th, td), .sbb-table:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
78
79
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
79
80
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -94,7 +95,10 @@
|
|
|
94
95
|
.sbb-table-s caption,
|
|
95
96
|
.sbb-table-xs caption {
|
|
96
97
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
97
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
98
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
99
|
+
var(--sbb-color-granite),
|
|
100
|
+
var(--sbb-color-cement)
|
|
101
|
+
);
|
|
98
102
|
font-size: var(--sbb-text-font-size-xs);
|
|
99
103
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
100
104
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -149,11 +153,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
149
153
|
.sbb-table--theme-iron {
|
|
150
154
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
151
155
|
}
|
|
156
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
157
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
158
|
+
}
|
|
152
159
|
.sbb-table--theme-iron tbody > tr > td {
|
|
153
160
|
color: var(--sbb-table-cell-color);
|
|
154
161
|
}
|
|
155
|
-
|
|
156
|
-
|
|
162
|
+
|
|
163
|
+
.sbb-table-header-subtitle {
|
|
164
|
+
font-weight: normal;
|
|
157
165
|
}
|
|
158
166
|
|
|
159
167
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -237,15 +245,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
237
245
|
inset-inline-end: unset;
|
|
238
246
|
}
|
|
239
247
|
|
|
240
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
241
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
242
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
243
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
244
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
245
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
246
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
248
|
.sbb-table-align-start {
|
|
250
249
|
text-align: start;
|
|
251
250
|
}
|
|
@@ -268,8 +267,4 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
268
267
|
|
|
269
268
|
.sbb-table-align-right {
|
|
270
269
|
text-align: right;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.sbb-table-header-subtitle {
|
|
274
|
-
font-weight: normal;
|
|
275
270
|
}
|
package/core/styles/table.scss
DELETED
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
@use './mixins/table';
|
|
2
|
-
|
|
3
|
-
.sbb-table,
|
|
4
|
-
.sbb-table-m,
|
|
5
|
-
.sbb-table-s,
|
|
6
|
-
.sbb-table-xs {
|
|
7
|
-
@include table.table;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.sbb-table-m {
|
|
11
|
-
@include table.table--m;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.sbb-table-s {
|
|
15
|
-
@include table.table--s;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.sbb-table-xs {
|
|
19
|
-
@include table.table--xs;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
sbb-table-wrapper[negative] .sbb-table,
|
|
23
|
-
.sbb-table--negative {
|
|
24
|
-
@include table.table--negative;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.sbb-table--striped {
|
|
28
|
-
@include table.table--striped;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.sbb-table--unstriped {
|
|
32
|
-
@include table.table--unstriped;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.sbb-table--theme-iron {
|
|
36
|
-
@include table.table--theme-iron;
|
|
37
|
-
|
|
38
|
-
&.sbb-table--negative {
|
|
39
|
-
@include table.table--theme-iron-negative;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
// @deprecated
|
|
44
|
-
.sbb-table-header-row {
|
|
45
|
-
@include table.table-header-row;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
// @deprecated
|
|
49
|
-
.sbb-table-header-cell {
|
|
50
|
-
@include table.table-header-cell;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.sbb-table-row--striped {
|
|
54
|
-
@include table.table-row--striped;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// @deprecated
|
|
58
|
-
.sbb-table-data-cell {
|
|
59
|
-
@include table.table-data-cell;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
// @deprecated
|
|
63
|
-
.sbb-table-caption {
|
|
64
|
-
@include table.table-caption;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.sbb-table-filter {
|
|
68
|
-
@include table.table-filter;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.sbb-table-sticky {
|
|
72
|
-
// Note that the table can either set this class or an inline style to make something sticky.
|
|
73
|
-
// We set the style as `!important` so that we get an identical specificity in both cases
|
|
74
|
-
// and to avoid cases where user styles have a higher specificity.
|
|
75
|
-
position: sticky !important;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// The `sbb-table-sticky-*` css classes are used by the Angular wrapper and CDK.
|
|
79
|
-
// Do not rename them, pls.
|
|
80
|
-
:is(.sbb-table-sticky-border-elem-left, .sbb-table-sticky-border-elem-right)::after {
|
|
81
|
-
content: '';
|
|
82
|
-
transition: {
|
|
83
|
-
timing-function: var(--sbb-table-sticky-shadow-transition-easing);
|
|
84
|
-
duration: var(--sbb-table-sticky-shadow-transition-duration);
|
|
85
|
-
property: visibility, opacity;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
visibility: hidden;
|
|
89
|
-
opacity: 0;
|
|
90
|
-
position: absolute;
|
|
91
|
-
width: var(--sbb-table-sticky-shadow-width);
|
|
92
|
-
inset: 0;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.sbb-table-sticky-border-elem-left {
|
|
96
|
-
:is(.sbb-table-wrapper-offset-left, .sbb-table-wrapper-offset-both) & {
|
|
97
|
-
border-inline-end: var(--sbb-table-border);
|
|
98
|
-
|
|
99
|
-
&::after {
|
|
100
|
-
visibility: visible;
|
|
101
|
-
opacity: 1;
|
|
102
|
-
background-image: linear-gradient(-270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
|
|
103
|
-
inset-inline-start: unset;
|
|
104
|
-
inset-inline-end: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.sbb-table-sticky-border-elem-right {
|
|
110
|
-
:is(.sbb-table-wrapper-offset-right, .sbb-table-wrapper-offset-both) & {
|
|
111
|
-
border-inline-start: var(--sbb-table-border);
|
|
112
|
-
|
|
113
|
-
&::after {
|
|
114
|
-
visibility: visible;
|
|
115
|
-
opacity: 1;
|
|
116
|
-
background-image: linear-gradient(270deg, rgb(0 0 0 / 10%) 0%, transparent 100%);
|
|
117
|
-
inset-inline-start: calc(var(--sbb-table-sticky-shadow-width) * -1 - 1px);
|
|
118
|
-
inset-inline-end: unset;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// TODO: In future, move to the 'sbb-lean' theme
|
|
124
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
125
|
-
@include table.table--s;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.sbb-table-align-start {
|
|
129
|
-
text-align: start;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.sbb-table-align-center {
|
|
133
|
-
text-align: center;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.sbb-table-align-end {
|
|
137
|
-
text-align: end;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
.sbb-table-align-justify {
|
|
141
|
-
text-align: justify;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// Backwards compatibility for sbb-angular
|
|
145
|
-
.sbb-table-align-left {
|
|
146
|
-
text-align: left;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
// Backwards compatibility for sbb-angular
|
|
150
|
-
.sbb-table-align-right {
|
|
151
|
-
text-align: right;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.sbb-table-header-subtitle {
|
|
155
|
-
font-weight: normal;
|
|
156
|
-
}
|