@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.
@@ -3282,10 +3282,17 @@ sup {
3282
3282
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3283
3283
  }
3284
3284
 
3285
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
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.1776065581",
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/465260468c2dab049660636d4f945d48e708f0ac"
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
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
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;
@@ -3282,10 +3282,17 @@ sup {
3282
3282
  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);
3283
3283
  }
3284
3284
 
3285
- .sbb-table,
3286
- .sbb-table-m,
3287
- .sbb-table-s,
3288
- .sbb-table-xs {
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
- .sbb-table tbody tr:nth-child(odd) :is(th, td),
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-border-color: var(--sbb-color-cloud);
3308
- --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
3309
- --sbb-table-background-color: var(--sbb-background-color-1);
3310
- --sbb-table-row-striped-color: var(--sbb-background-color-3);
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(var(--sbb-color-granite), var(--sbb-color-cement));
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
- .sbb-table--theme-iron.sbb-table--negative {
3440
- --sbb-table-cell-color: var(--sbb-color-cloud);
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
- .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
- }