@sbb-esta/lyne-elements-dev 4.10.0-dev.1776065581 → 4.10.0-dev.1776085193
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 +1313 -1313
- 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
|
@@ -3282,10 +3282,17 @@ sup {
|
|
|
3282
3282
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3283
3283
|
}
|
|
3284
3284
|
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3285
|
+
:root {
|
|
3286
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3287
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3288
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3289
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3290
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3291
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3292
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3293
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3294
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3295
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3289
3296
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3290
3297
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3291
3298
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3293,28 +3300,16 @@ sup {
|
|
|
3293
3300
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3294
3301
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3295
3302
|
}
|
|
3296
|
-
|
|
3297
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3298
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3299
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3300
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3301
|
-
}
|
|
3303
|
+
|
|
3302
3304
|
.sbb-table,
|
|
3303
3305
|
.sbb-table-m,
|
|
3304
3306
|
.sbb-table-s,
|
|
3305
3307
|
.sbb-table-xs {
|
|
3306
3308
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3307
|
-
--sbb-table-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3312
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3313
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3314
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3315
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3316
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3317
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3309
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3310
|
+
--sbb-disable-animation-duration,
|
|
3311
|
+
var(--sbb-animation-duration-6x)
|
|
3312
|
+
);
|
|
3318
3313
|
border-spacing: 0;
|
|
3319
3314
|
caption-side: bottom;
|
|
3320
3315
|
color: var(--sbb-table-color);
|
|
@@ -3358,6 +3353,12 @@ sup {
|
|
|
3358
3353
|
.sbb-table-xs :is(th, td):first-child {
|
|
3359
3354
|
border-inline-start: var(--sbb-table-border);
|
|
3360
3355
|
}
|
|
3356
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3357
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3358
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3359
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3360
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3361
|
+
}
|
|
3361
3362
|
.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),
|
|
3362
3363
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3363
3364
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3378,7 +3379,10 @@ sup {
|
|
|
3378
3379
|
.sbb-table-s caption,
|
|
3379
3380
|
.sbb-table-xs caption {
|
|
3380
3381
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3381
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3382
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3383
|
+
var(--sbb-color-granite),
|
|
3384
|
+
var(--sbb-color-cement)
|
|
3385
|
+
);
|
|
3382
3386
|
font-size: var(--sbb-text-font-size-xs);
|
|
3383
3387
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3384
3388
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3433
3437
|
.sbb-table--theme-iron {
|
|
3434
3438
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3435
3439
|
}
|
|
3440
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3441
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3442
|
+
}
|
|
3436
3443
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3437
3444
|
color: var(--sbb-table-cell-color);
|
|
3438
3445
|
}
|
|
3439
|
-
|
|
3440
|
-
|
|
3446
|
+
|
|
3447
|
+
.sbb-table-header-subtitle {
|
|
3448
|
+
font-weight: normal;
|
|
3441
3449
|
}
|
|
3442
3450
|
|
|
3443
3451
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3521
3529
|
inset-inline-end: unset;
|
|
3522
3530
|
}
|
|
3523
3531
|
|
|
3524
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3525
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3526
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3527
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3528
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3529
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3530
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3531
|
-
}
|
|
3532
|
-
|
|
3533
3532
|
.sbb-table-align-start {
|
|
3534
3533
|
text-align: start;
|
|
3535
3534
|
}
|
|
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3554
3553
|
text-align: right;
|
|
3555
3554
|
}
|
|
3556
3555
|
|
|
3557
|
-
.sbb-table-header-subtitle {
|
|
3558
|
-
font-weight: normal;
|
|
3559
|
-
}
|
|
3560
|
-
|
|
3561
3556
|
.sbb-timetable-form {
|
|
3562
3557
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3563
3558
|
position: relative;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "4.10.0-dev.
|
|
3
|
+
"version": "4.10.0-dev.1776085193",
|
|
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/e742832dd9934a74961d64af573e0bcab0875381"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|
package/safety-theme.css
CHANGED
|
@@ -3282,10 +3282,17 @@ sup {
|
|
|
3282
3282
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3283
3283
|
}
|
|
3284
3284
|
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3285
|
+
:root {
|
|
3286
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3287
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3288
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3289
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3290
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3291
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3292
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3293
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3294
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3295
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3289
3296
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3290
3297
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3291
3298
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3293,28 +3300,16 @@ sup {
|
|
|
3293
3300
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3294
3301
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3295
3302
|
}
|
|
3296
|
-
|
|
3297
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3298
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3299
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3300
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3301
|
-
}
|
|
3303
|
+
|
|
3302
3304
|
.sbb-table,
|
|
3303
3305
|
.sbb-table-m,
|
|
3304
3306
|
.sbb-table-s,
|
|
3305
3307
|
.sbb-table-xs {
|
|
3306
3308
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3307
|
-
--sbb-table-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3312
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3313
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3314
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3315
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3316
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3317
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3309
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3310
|
+
--sbb-disable-animation-duration,
|
|
3311
|
+
var(--sbb-animation-duration-6x)
|
|
3312
|
+
);
|
|
3318
3313
|
border-spacing: 0;
|
|
3319
3314
|
caption-side: bottom;
|
|
3320
3315
|
color: var(--sbb-table-color);
|
|
@@ -3358,6 +3353,12 @@ sup {
|
|
|
3358
3353
|
.sbb-table-xs :is(th, td):first-child {
|
|
3359
3354
|
border-inline-start: var(--sbb-table-border);
|
|
3360
3355
|
}
|
|
3356
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3357
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3358
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3359
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3360
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3361
|
+
}
|
|
3361
3362
|
.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),
|
|
3362
3363
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3363
3364
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3378,7 +3379,10 @@ sup {
|
|
|
3378
3379
|
.sbb-table-s caption,
|
|
3379
3380
|
.sbb-table-xs caption {
|
|
3380
3381
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3381
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3382
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3383
|
+
var(--sbb-color-granite),
|
|
3384
|
+
var(--sbb-color-cement)
|
|
3385
|
+
);
|
|
3382
3386
|
font-size: var(--sbb-text-font-size-xs);
|
|
3383
3387
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3384
3388
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3433
3437
|
.sbb-table--theme-iron {
|
|
3434
3438
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3435
3439
|
}
|
|
3440
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3441
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3442
|
+
}
|
|
3436
3443
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3437
3444
|
color: var(--sbb-table-cell-color);
|
|
3438
3445
|
}
|
|
3439
|
-
|
|
3440
|
-
|
|
3446
|
+
|
|
3447
|
+
.sbb-table-header-subtitle {
|
|
3448
|
+
font-weight: normal;
|
|
3441
3449
|
}
|
|
3442
3450
|
|
|
3443
3451
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3521
3529
|
inset-inline-end: unset;
|
|
3522
3530
|
}
|
|
3523
3531
|
|
|
3524
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3525
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3526
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3527
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3528
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3529
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3530
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3531
|
-
}
|
|
3532
|
-
|
|
3533
3532
|
.sbb-table-align-start {
|
|
3534
3533
|
text-align: start;
|
|
3535
3534
|
}
|
|
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3554
3553
|
text-align: right;
|
|
3555
3554
|
}
|
|
3556
3555
|
|
|
3557
|
-
.sbb-table-header-subtitle {
|
|
3558
|
-
font-weight: normal;
|
|
3559
|
-
}
|
|
3560
|
-
|
|
3561
3556
|
.sbb-timetable-form {
|
|
3562
3557
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3563
3558
|
position: relative;
|
package/standard-theme.css
CHANGED
|
@@ -3282,10 +3282,17 @@ sup {
|
|
|
3282
3282
|
--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
|
|
3283
3283
|
}
|
|
3284
3284
|
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3285
|
+
:root {
|
|
3286
|
+
--sbb-table-border-color: var(--sbb-color-cloud);
|
|
3287
|
+
--sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
|
|
3288
|
+
--sbb-table-background-color: var(--sbb-background-color-1);
|
|
3289
|
+
--sbb-table-row-striped-color: var(--sbb-background-color-3);
|
|
3290
|
+
--sbb-table-color: var(--sbb-color-1);
|
|
3291
|
+
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3292
|
+
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3293
|
+
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3294
|
+
--sbb-table-sticky-shadow-width: 3rem;
|
|
3295
|
+
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3289
3296
|
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3290
3297
|
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
|
|
3291
3298
|
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
|
|
@@ -3293,28 +3300,16 @@ sup {
|
|
|
3293
3300
|
--sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
|
|
3294
3301
|
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
|
|
3295
3302
|
}
|
|
3296
|
-
|
|
3297
|
-
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3298
|
-
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3299
|
-
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3300
|
-
background-color: var(--sbb-table-row-striped-color);
|
|
3301
|
-
}
|
|
3303
|
+
|
|
3302
3304
|
.sbb-table,
|
|
3303
3305
|
.sbb-table-m,
|
|
3304
3306
|
.sbb-table-s,
|
|
3305
3307
|
.sbb-table-xs {
|
|
3306
3308
|
--sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
|
|
3307
|
-
--sbb-table-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
--sbb-table-color: var(--sbb-color-1);
|
|
3312
|
-
--sbb-table-caption-color: var(--sbb-color-granite);
|
|
3313
|
-
--sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
|
|
3314
|
-
--sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
|
|
3315
|
-
--sbb-table-sticky-shadow-width: 3rem;
|
|
3316
|
-
--sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
|
|
3317
|
-
--sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);
|
|
3309
|
+
--sbb-table-sticky-shadow-transition-duration: var(
|
|
3310
|
+
--sbb-disable-animation-duration,
|
|
3311
|
+
var(--sbb-animation-duration-6x)
|
|
3312
|
+
);
|
|
3318
3313
|
border-spacing: 0;
|
|
3319
3314
|
caption-side: bottom;
|
|
3320
3315
|
color: var(--sbb-table-color);
|
|
@@ -3358,6 +3353,12 @@ sup {
|
|
|
3358
3353
|
.sbb-table-xs :is(th, td):first-child {
|
|
3359
3354
|
border-inline-start: var(--sbb-table-border);
|
|
3360
3355
|
}
|
|
3356
|
+
.sbb-table tbody tr:nth-child(odd) :is(th, td),
|
|
3357
|
+
.sbb-table-m tbody tr:nth-child(odd) :is(th, td),
|
|
3358
|
+
.sbb-table-s tbody tr:nth-child(odd) :is(th, td),
|
|
3359
|
+
.sbb-table-xs tbody tr:nth-child(odd) :is(th, td) {
|
|
3360
|
+
background-color: var(--sbb-table-row-striped-color);
|
|
3361
|
+
}
|
|
3361
3362
|
.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),
|
|
3362
3363
|
.sbb-table-m:has(thead tr) thead tr:first-of-type > :is(th, td),
|
|
3363
3364
|
.sbb-table-m:not(:has(thead tr)) tbody tr:first-of-type > :is(th, td),
|
|
@@ -3378,7 +3379,10 @@ sup {
|
|
|
3378
3379
|
.sbb-table-s caption,
|
|
3379
3380
|
.sbb-table-xs caption {
|
|
3380
3381
|
--sbb-table-caption-color-fallback: var(--sbb-color-granite);
|
|
3381
|
-
--sbb-table-caption-color-fallback: light-dark(
|
|
3382
|
+
--sbb-table-caption-color-fallback: light-dark(
|
|
3383
|
+
var(--sbb-color-granite),
|
|
3384
|
+
var(--sbb-color-cement)
|
|
3385
|
+
);
|
|
3382
3386
|
font-size: var(--sbb-text-font-size-xs);
|
|
3383
3387
|
letter-spacing: var(--sbb-typo-letter-spacing-text);
|
|
3384
3388
|
color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
|
|
@@ -3433,11 +3437,15 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3433
3437
|
.sbb-table--theme-iron {
|
|
3434
3438
|
--sbb-table-cell-color: var(--sbb-color-4);
|
|
3435
3439
|
}
|
|
3440
|
+
sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-table--negative {
|
|
3441
|
+
--sbb-table-cell-color: var(--sbb-color-cloud);
|
|
3442
|
+
}
|
|
3436
3443
|
.sbb-table--theme-iron tbody > tr > td {
|
|
3437
3444
|
color: var(--sbb-table-cell-color);
|
|
3438
3445
|
}
|
|
3439
|
-
|
|
3440
|
-
|
|
3446
|
+
|
|
3447
|
+
.sbb-table-header-subtitle {
|
|
3448
|
+
font-weight: normal;
|
|
3441
3449
|
}
|
|
3442
3450
|
|
|
3443
3451
|
.sbb-table-header-row:last-of-type > th {
|
|
@@ -3521,15 +3529,6 @@ sbb-table-wrapper[negative] .sbb-table,
|
|
|
3521
3529
|
inset-inline-end: unset;
|
|
3522
3530
|
}
|
|
3523
3531
|
|
|
3524
|
-
html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
3525
|
-
--sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3526
|
-
--sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
|
|
3527
|
-
--sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3528
|
-
--sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3529
|
-
--sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
|
|
3530
|
-
--sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
|
|
3531
|
-
}
|
|
3532
|
-
|
|
3533
3532
|
.sbb-table-align-start {
|
|
3534
3533
|
text-align: start;
|
|
3535
3534
|
}
|
|
@@ -3554,10 +3553,6 @@ html.sbb-lean .sbb-table:not(.sbb-table-xs, .sbb-table-m) {
|
|
|
3554
3553
|
text-align: right;
|
|
3555
3554
|
}
|
|
3556
3555
|
|
|
3557
|
-
.sbb-table-header-subtitle {
|
|
3558
|
-
font-weight: normal;
|
|
3559
|
-
}
|
|
3560
|
-
|
|
3561
3556
|
.sbb-timetable-form {
|
|
3562
3557
|
--sbb-timetable-form-content-max-width: 46.25rem;
|
|
3563
3558
|
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
|
-
}
|