@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.
@@ -3312,10 +3312,17 @@ sup {
3312
3312
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3313
3313
  }
3314
3314
 
3315
- .sbb-table,
3316
- .sbb-table-m,
3317
- .sbb-table-s,
3318
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3338
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3339
- --sbb-table-background-color: var(--sbb-background-color-1);
3340
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3470
- --sbb-table-cell-color: var(--sbb-color-cloud);
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.1776072012",
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/02d65d2ee3bed82b08e5797352838021772d49bb"
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
- .sbb-table,
3316
- .sbb-table-m,
3317
- .sbb-table-s,
3318
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3338
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3339
- --sbb-table-background-color: var(--sbb-background-color-1);
3340
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3470
- --sbb-table-cell-color: var(--sbb-color-cloud);
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;
@@ -3312,10 +3312,17 @@ sup {
3312
3312
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3313
3313
  }
3314
3314
 
3315
- .sbb-table,
3316
- .sbb-table-m,
3317
- .sbb-table-s,
3318
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3338
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3339
- --sbb-table-background-color: var(--sbb-background-color-1);
3340
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3470
- --sbb-table-cell-color: var(--sbb-color-cloud);
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
- .sbb-table,
2
- .sbb-table-m,
3
- .sbb-table-s,
4
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
24
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
25
- --sbb-table-background-color: var(--sbb-background-color-1);
26
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
156
- --sbb-table-cell-color: var(--sbb-color-cloud);
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
  }
@@ -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
- }