@sbb-esta/lyne-elements-dev 5.10.0-dev.1791284739 → 5.10.0-dev.1791362600
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/calendar.pure.js +1 -1
- package/core/styles/features/form-field.scss +19 -33
- package/development/calendar.pure.js +1 -1
- package/development/form-field.pure.js +2 -2
- package/form-field/_form-field.global.scss +162 -43
- package/form-field.pure.js +2 -2
- package/lean-off-brand-theme.css +182 -83
- package/lean-safety-theme.css +182 -83
- package/lean-theme.css +182 -83
- package/off-brand-theme.css +182 -83
- package/package.json +2 -2
- package/safety-theme.css +182 -83
- package/standard-theme.css +182 -83
- package/table/_table.global.scss +2 -2
package/off-brand-theme.css
CHANGED
|
@@ -1362,28 +1362,136 @@ summary {
|
|
|
1362
1362
|
--sbb-error-icon-size: 1.0625rem;
|
|
1363
1363
|
--sbb-error-font-size: var(--sbb-text-font-size-xs);
|
|
1364
1364
|
--sbb-form-field-background-color: var(--sbb-background-color-1);
|
|
1365
|
+
--sbb-form-field-background-color-disabled: var(--sbb-background-color-3);
|
|
1366
|
+
--sbb-form-field-background-color-negative: var(--sbb-background-color-1-negative);
|
|
1367
|
+
--sbb-form-field-background-color-disabled-negative: var(--sbb-background-color-3-negative);
|
|
1368
|
+
--sbb-form-field-background-color-required-highlight: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
|
|
1369
|
+
--sbb-form-field-background-color-required-highlight: light-dark(
|
|
1370
|
+
color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
|
|
1371
|
+
color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
|
|
1372
|
+
);
|
|
1373
|
+
--sbb-form-field-background-color-required-highlight-negative: color-mix(
|
|
1374
|
+
in srgb,
|
|
1375
|
+
var(--sbb-color-peach) 10%,
|
|
1376
|
+
var(--sbb-background-color-1-negative)
|
|
1377
|
+
);
|
|
1365
1378
|
--sbb-form-field-border-color: var(--sbb-border-color-5);
|
|
1366
|
-
--sbb-form-field-border-
|
|
1367
|
-
--sbb-form-field-border-
|
|
1368
|
-
|
|
1369
|
-
|
|
1379
|
+
--sbb-form-field-border-color-disabled: var(--sbb-color-graphite);
|
|
1380
|
+
--sbb-form-field-border-color-disabled: light-dark(
|
|
1381
|
+
var(--sbb-color-graphite),
|
|
1382
|
+
var(--sbb-color-smoke)
|
|
1383
|
+
);
|
|
1384
|
+
--sbb-form-field-border-color-negative: var(--sbb-border-color-5);
|
|
1385
|
+
--sbb-form-field-border-color-disabled-negative: var(--sbb-border-color-5);
|
|
1386
|
+
--sbb-form-field-border-color-focus: var(--sbb-border-color-3);
|
|
1387
|
+
--sbb-form-field-border-color-focus-negative: var(--sbb-border-color-3-negative);
|
|
1388
|
+
--sbb-form-field-border-color-error: var(--sbb-color-error);
|
|
1389
|
+
--sbb-form-field-border-color-error-negative: var(--sbb-color-red85);
|
|
1390
|
+
--sbb-form-field-border-color-readonly: var(--sbb-color-graphite);
|
|
1391
|
+
--sbb-form-field-border-color-readonly: light-dark(
|
|
1392
|
+
var(--sbb-color-graphite),
|
|
1393
|
+
var(--sbb-color-smoke)
|
|
1394
|
+
);
|
|
1395
|
+
--sbb-form-field-border-color-readonly-negative: var(--sbb-border-color-5);
|
|
1370
1396
|
--sbb-form-field-label-color: var(--sbb-color-metal);
|
|
1371
1397
|
--sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1398
|
+
--sbb-form-field-label-color-disabled: var(--sbb-color-granite);
|
|
1399
|
+
--sbb-form-field-label-color-disabled: light-dark(
|
|
1400
|
+
var(--sbb-color-granite),
|
|
1401
|
+
var(--sbb-color-smoke)
|
|
1402
|
+
);
|
|
1403
|
+
--sbb-form-field-label-color-negative: var(--sbb-color-5);
|
|
1404
|
+
--sbb-form-field-label-color-disabled-negative: var(--sbb-color-5);
|
|
1405
|
+
--sbb-form-field-label-color-readonly: var(--sbb-color-granite);
|
|
1406
|
+
--sbb-form-field-label-color-readonly: light-dark(
|
|
1407
|
+
var(--sbb-color-granite),
|
|
1408
|
+
var(--sbb-color-smoke)
|
|
1409
|
+
);
|
|
1410
|
+
--sbb-form-field-label-color-readonly-negative: var(--sbb-color-5);
|
|
1372
1411
|
--sbb-form-field-prefix-color: var(--sbb-color-metal);
|
|
1373
1412
|
--sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
|
|
1413
|
+
--sbb-form-field-prefix-color-disabled: var(--sbb-color-granite);
|
|
1414
|
+
--sbb-form-field-prefix-color-disabled: light-dark(
|
|
1415
|
+
var(--sbb-color-granite),
|
|
1416
|
+
var(--sbb-color-storm)
|
|
1417
|
+
);
|
|
1418
|
+
--sbb-form-field-prefix-color-negative: var(--sbb-color-5);
|
|
1419
|
+
--sbb-form-field-prefix-color-disabled-negative: var(--sbb-color-5);
|
|
1420
|
+
--sbb-form-field-prefix-color-focus: var(--sbb-color-3);
|
|
1421
|
+
--sbb-form-field-prefix-color-focus-negative: var(--sbb-color-3-negative);
|
|
1422
|
+
--sbb-form-field-prefix-color-readonly: var(--sbb-color-granite);
|
|
1423
|
+
--sbb-form-field-prefix-color-readonly: light-dark(
|
|
1424
|
+
var(--sbb-color-granite),
|
|
1425
|
+
var(--sbb-color-storm)
|
|
1426
|
+
);
|
|
1427
|
+
--sbb-form-field-prefix-color-readonly-negative: var(--sbb-color-5);
|
|
1428
|
+
--sbb-form-field-border-style: solid;
|
|
1429
|
+
--sbb-form-field-border-style-disabled: dashed;
|
|
1430
|
+
--sbb-form-field-border-radius: var(--sbb-border-radius-4x);
|
|
1431
|
+
--sbb-form-field-border-width: var(--sbb-border-width-1x);
|
|
1432
|
+
--sbb-form-field-border-width-focus: var(--sbb-border-width-2x);
|
|
1433
|
+
--sbb-form-field-color: var(--sbb-color-3);
|
|
1434
|
+
--sbb-form-field-color-negative: var(--sbb-color-3-negative);
|
|
1435
|
+
--sbb-form-field-min-width: 9.375rem;
|
|
1436
|
+
--sbb-form-field-max-width: 18.75rem;
|
|
1374
1437
|
--sbb-form-field-text-color: var(--sbb-color-3);
|
|
1438
|
+
--sbb-form-field-text-color-disabled: var(--sbb-color-3);
|
|
1439
|
+
--sbb-form-field-text-color-negative: var(--sbb-color-3-negative);
|
|
1440
|
+
--sbb-form-field-text-color-disabled-negative: var(--sbb-color-5);
|
|
1441
|
+
--sbb-form-field-text-color-error: var(--sbb-color-error);
|
|
1442
|
+
--sbb-form-field-text-color-error-negative: var(--sbb-color-red85);
|
|
1375
1443
|
--sbb-form-field-arrow-color: var(--sbb-color-3);
|
|
1444
|
+
--sbb-form-field-arrow-color-disabled: var(--sbb-color-granite);
|
|
1445
|
+
--sbb-form-field-arrow-color-disabled: light-dark(
|
|
1446
|
+
var(--sbb-color-granite),
|
|
1447
|
+
var(--sbb-color-storm)
|
|
1448
|
+
);
|
|
1449
|
+
--sbb-form-field-arrow-color-negative: var(--sbb-color-3-negative);
|
|
1450
|
+
--sbb-form-field-arrow-color-disabled-negative: var(--sbb-border-color-5);
|
|
1451
|
+
--sbb-form-field-placeholder-color-disabled: var(--sbb-color-granite);
|
|
1452
|
+
--sbb-form-field-placeholder-color-disabled: light-dark(
|
|
1453
|
+
var(--sbb-color-granite),
|
|
1454
|
+
var(--sbb-color-smoke)
|
|
1455
|
+
);
|
|
1376
1456
|
--sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
|
|
1377
1457
|
--sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
|
|
1378
1458
|
--sbb-form-field-textarea-s-spacer: var(--sbb-spacing-fixed-1x);
|
|
1379
|
-
--sbb-form-field-min-height: var(--sbb-size-element-
|
|
1380
|
-
--sbb-form-field-
|
|
1381
|
-
--sbb-form-field-
|
|
1382
|
-
--sbb-form-field-
|
|
1383
|
-
--
|
|
1384
|
-
--
|
|
1385
|
-
--
|
|
1386
|
-
--
|
|
1459
|
+
--sbb-form-field-min-height-s: var(--sbb-size-element-xs);
|
|
1460
|
+
--sbb-form-field-min-height-m: var(--sbb-size-element-m);
|
|
1461
|
+
--sbb-form-field-min-height-l: var(--sbb-size-element-l);
|
|
1462
|
+
--sbb-form-field-min-height: var(--sbb-form-field-min-height-m);
|
|
1463
|
+
--sbb-form-field-padding-inline-s: var(--sbb-spacing-fixed-2x);
|
|
1464
|
+
--sbb-form-field-padding-inline-m: var(--sbb-spacing-fixed-3x);
|
|
1465
|
+
--sbb-form-field-padding-inline-l: var(--sbb-spacing-responsive-xxxs);
|
|
1466
|
+
--sbb-form-field-padding-inline: var(--sbb-form-field-padding-inline-m);
|
|
1467
|
+
--sbb-form-field-input-text-size-s: var(--sbb-text-font-size-s);
|
|
1468
|
+
--sbb-form-field-input-text-size-m: var(--sbb-text-font-size-m);
|
|
1469
|
+
--sbb-form-field-input-text-size-l: var(--sbb-text-font-size-m);
|
|
1470
|
+
--sbb-form-field-input-text-size: var(--sbb-form-field-input-text-size-m);
|
|
1471
|
+
--sbb-form-field-label-text-size-s: var(--sbb-text-font-size-xxs);
|
|
1472
|
+
--sbb-form-field-label-text-size-m: var(--sbb-text-font-size-xs);
|
|
1473
|
+
--sbb-form-field-label-text-size-l: var(--sbb-text-font-size-xs);
|
|
1474
|
+
--sbb-form-field-label-text-size: var(--sbb-form-field-label-text-size-m);
|
|
1475
|
+
--_sbb-form-field-label-to-input-overlapping-s: 0.625rem;
|
|
1476
|
+
--_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
|
|
1477
|
+
--_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
|
|
1478
|
+
--_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);
|
|
1479
|
+
--_sbb-form-field-floating-label-transform-s: 0.34375rem;
|
|
1480
|
+
--_sbb-form-field-floating-label-transform-m: 0.53125rem;
|
|
1481
|
+
--_sbb-form-field-floating-label-transform-l: 0.53125rem;
|
|
1482
|
+
--_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);
|
|
1483
|
+
--_sbb-form-field-spacer-margin-block-end-s: -0.53125rem;
|
|
1484
|
+
--_sbb-form-field-spacer-margin-block-end-m: calc(
|
|
1485
|
+
-1 * var(--_sbb-form-field-label-to-input-overlapping-m)
|
|
1486
|
+
);
|
|
1487
|
+
--_sbb-form-field-spacer-margin-block-end-l: calc(
|
|
1488
|
+
-1 * var(--_sbb-form-field-label-to-input-overlapping-l)
|
|
1489
|
+
);
|
|
1490
|
+
--_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);
|
|
1491
|
+
--_sbb-form-field-input-margin-block-end-s: -0.125rem;
|
|
1492
|
+
--_sbb-form-field-input-margin-block-end-m: 0;
|
|
1493
|
+
--_sbb-form-field-input-margin-block-end-l: 0;
|
|
1494
|
+
--_sbb-form-field-input-margin-block-end: var(--_sbb-form-field-input-margin-block-end-m);
|
|
1387
1495
|
--sbb-header-action-color: var(--sbb-color-1);
|
|
1388
1496
|
--sbb-header-action-background-color: transparent;
|
|
1389
1497
|
--sbb-header-action-min-height-s: var(--sbb-size-element-xs);
|
|
@@ -2021,6 +2129,23 @@ summary {
|
|
|
2021
2129
|
--sbb-download-info-color: CanvasText;
|
|
2022
2130
|
--sbb-expansion-panel-header-text-color: ButtonText;
|
|
2023
2131
|
--sbb-form-field-border-color: ButtonBorder;
|
|
2132
|
+
--sbb-form-field-border-color-disabled: GrayText;
|
|
2133
|
+
--sbb-form-field-border-color-disabled-negative: GrayText;
|
|
2134
|
+
--sbb-form-field-border-color-negative: ButtonBorder;
|
|
2135
|
+
--sbb-form-field-border-color-focus: Highlight;
|
|
2136
|
+
--sbb-form-field-border-color-focus-negative: Highlight;
|
|
2137
|
+
--sbb-form-field-border-color-error: LinkText;
|
|
2138
|
+
--sbb-form-field-border-color-error-negative: LinkText;
|
|
2139
|
+
--sbb-form-field-label-color-disabled: GrayText;
|
|
2140
|
+
--sbb-form-field-label-color-disabled-negative: GrayText;
|
|
2141
|
+
--sbb-form-field-prefix-color-disabled: GrayText;
|
|
2142
|
+
--sbb-form-field-prefix-color-disabled-negative: GrayText;
|
|
2143
|
+
--sbb-form-field-prefix-color-focus: Highlight;
|
|
2144
|
+
--sbb-form-field-prefix-color-focus-negative: Highlight;
|
|
2145
|
+
--sbb-form-field-text-color-disabled: GrayText;
|
|
2146
|
+
--sbb-form-field-text-color-disabled-negative: GrayText;
|
|
2147
|
+
--sbb-form-field-text-color-error: LinkText;
|
|
2148
|
+
--sbb-form-field-text-color-error-negative: LinkText;
|
|
2024
2149
|
--sbb-header-action-border-color: CanvasText;
|
|
2025
2150
|
--sbb-header-action-color: LinkText;
|
|
2026
2151
|
--sbb-header-action-active-border-width: 0;
|
|
@@ -2143,9 +2268,22 @@ summary {
|
|
|
2143
2268
|
)
|
|
2144
2269
|
var(--_sbb-chip-group-margin-block-start-default-large);
|
|
2145
2270
|
--sbb-flip-card-min-height: 20rem;
|
|
2146
|
-
--_sbb-form-field-label-to-input-overlapping:
|
|
2147
|
-
--_sbb-form-field-
|
|
2148
|
-
--_sbb-form-field-
|
|
2271
|
+
--_sbb-form-field-label-to-input-overlapping-s: 0.6875rem;
|
|
2272
|
+
--_sbb-form-field-label-to-input-overlapping-m: var(--sbb-spacing-fixed-1x);
|
|
2273
|
+
--_sbb-form-field-label-to-input-overlapping-l: var(--sbb-spacing-fixed-1x);
|
|
2274
|
+
--_sbb-form-field-label-to-input-overlapping: var(--_sbb-form-field-label-to-input-overlapping-m);
|
|
2275
|
+
--_sbb-form-field-floating-label-transform-s: 0.3125rem;
|
|
2276
|
+
--_sbb-form-field-floating-label-transform-m: 0.65625rem;
|
|
2277
|
+
--_sbb-form-field-floating-label-transform-l: 0.65625rem;
|
|
2278
|
+
--_sbb-form-field-floating-label-transform: var(--_sbb-form-field-floating-label-transform-m);
|
|
2279
|
+
--_sbb-form-field-spacer-margin-block-end-s: -0.5rem;
|
|
2280
|
+
--_sbb-form-field-spacer-margin-block-end-m: calc(
|
|
2281
|
+
-1 * var(--_sbb-form-field-label-to-input-overlapping-m)
|
|
2282
|
+
);
|
|
2283
|
+
--_sbb-form-field-spacer-margin-block-end-l: calc(
|
|
2284
|
+
-1 * var(--_sbb-form-field-label-to-input-overlapping-l)
|
|
2285
|
+
);
|
|
2286
|
+
--_sbb-form-field-spacer-margin-block-end: var(--_sbb-form-field-spacer-margin-block-end-m);
|
|
2149
2287
|
--sbb-header-height-s: var(--sbb-spacing-fixed-14x);
|
|
2150
2288
|
--sbb-header-height-m: var(--sbb-spacing-fixed-24x);
|
|
2151
2289
|
--sbb-menu-max-width: 20rem;
|
|
@@ -3041,10 +3179,8 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
3041
3179
|
}
|
|
3042
3180
|
}
|
|
3043
3181
|
:is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
|
|
3044
|
-
color: var(--sbb-color-
|
|
3045
|
-
color:
|
|
3046
|
-
-webkit-text-fill-color: var(--sbb-color-granite);
|
|
3047
|
-
-webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
3182
|
+
color: var(--sbb-form-field-placeholder-color-disabled);
|
|
3183
|
+
-webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
|
|
3048
3184
|
}
|
|
3049
3185
|
:is(sbb-form-field, sbb-timetable-form-field) :where(select) {
|
|
3050
3186
|
vertical-align: middle;
|
|
@@ -3123,42 +3259,27 @@ sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap
|
|
|
3123
3259
|
:is(:state(interacted),[state--interacted]):invalid,
|
|
3124
3260
|
.ng-touched.ng-invalid,
|
|
3125
3261
|
.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
|
|
3126
|
-
--sbb-form-field-border-color: var(--sbb-color-error);
|
|
3127
|
-
--sbb-form-field-text-color: var(--sbb-color-error);
|
|
3262
|
+
--sbb-form-field-border-color: var(--sbb-form-field-border-color-error);
|
|
3263
|
+
--sbb-form-field-text-color: var(--sbb-form-field-text-color-error);
|
|
3128
3264
|
}
|
|
3129
3265
|
:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
|
|
3130
3266
|
:is(:state(interacted),[state--interacted]):invalid,
|
|
3131
3267
|
.ng-touched.ng-invalid,
|
|
3132
3268
|
.sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid])[negative] {
|
|
3133
|
-
--sbb-form-field-border-color: var(--sbb-color-
|
|
3134
|
-
--sbb-form-field-text-color: var(--sbb-color-
|
|
3135
|
-
}
|
|
3136
|
-
@media (forced-colors: active) {
|
|
3137
|
-
:is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
|
|
3138
|
-
:is(:state(interacted),[state--interacted]):invalid,
|
|
3139
|
-
.ng-touched.ng-invalid,
|
|
3140
|
-
.sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)), :is(sbb-form-field, sbb-timetable-form-field):is(:state(interacted),[state--interacted]):is(:state(invalid),[state--invalid]) {
|
|
3141
|
-
--sbb-form-field-border-color: LinkText !important;
|
|
3142
|
-
--sbb-form-field-text-color: LinkText !important;
|
|
3143
|
-
}
|
|
3269
|
+
--sbb-form-field-border-color: var(--sbb-form-field-border-color-error-negative);
|
|
3270
|
+
--sbb-form-field-text-color: var(--sbb-form-field-text-color-error-negative);
|
|
3144
3271
|
}
|
|
3145
3272
|
|
|
3146
3273
|
:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
|
|
3147
3274
|
:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
|
|
3148
3275
|
:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
|
|
3149
|
-
--sbb-form-field-background-color:
|
|
3150
|
-
--sbb-form-field-background-color: light-dark(
|
|
3151
|
-
color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
|
|
3152
|
-
color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
|
|
3153
|
-
);
|
|
3276
|
+
--sbb-form-field-background-color: var(--sbb-form-field-background-color-required-highlight);
|
|
3154
3277
|
}
|
|
3155
3278
|
:root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
|
|
3156
3279
|
:is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
|
|
3157
3280
|
:is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
|
|
3158
|
-
--sbb-form-field-background-color:
|
|
3159
|
-
|
|
3160
|
-
var(--sbb-color-peach) 10%,
|
|
3161
|
-
var(--sbb-background-color-1-negative)
|
|
3281
|
+
--sbb-form-field-background-color: var(
|
|
3282
|
+
--sbb-form-field-background-color-required-highlight-negative
|
|
3162
3283
|
);
|
|
3163
3284
|
}
|
|
3164
3285
|
|
|
@@ -3493,7 +3614,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
|
|
|
3493
3614
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
3494
3615
|
}
|
|
3495
3616
|
.sbb-sort-header:not(.sbb-sort-header-disabled) {
|
|
3496
|
-
cursor: pointer;
|
|
3617
|
+
cursor: var(--sbb-cursor-pointer);
|
|
3497
3618
|
}
|
|
3498
3619
|
.sbb-sort-header:not(.sbb-sort-header-disabled):hover .sbb-sort-header-container {
|
|
3499
3620
|
color: var(--sbb-table-sort-header-hover-color);
|
|
@@ -3511,7 +3632,7 @@ sbb-table-wrapper[negative] .sbb-table--theme-iron, .sbb-table--theme-iron.sbb-t
|
|
|
3511
3632
|
outline: 0;
|
|
3512
3633
|
}
|
|
3513
3634
|
.sbb-sort-header-disabled .sbb-sort-header-container {
|
|
3514
|
-
cursor: default;
|
|
3635
|
+
cursor: var(--sbb-cursor-default);
|
|
3515
3636
|
}
|
|
3516
3637
|
.sbb-table-align-center .sbb-sort-header-container {
|
|
3517
3638
|
text-align: center;
|
|
@@ -3823,9 +3944,10 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3823
3944
|
}
|
|
3824
3945
|
|
|
3825
3946
|
.sbb-input {
|
|
3947
|
+
--_sbb-input-border-width: var(--sbb-form-field-border-width);
|
|
3826
3948
|
display: inline-block;
|
|
3827
|
-
min-width:
|
|
3828
|
-
width: min(
|
|
3949
|
+
min-width: var(--sbb-form-field-min-width);
|
|
3950
|
+
width: min(var(--sbb-form-field-max-width), 100%);
|
|
3829
3951
|
min-height: var(--sbb-form-field-min-height);
|
|
3830
3952
|
max-height: var(--sbb-form-field-max-height);
|
|
3831
3953
|
appearance: none;
|
|
@@ -3838,9 +3960,9 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3838
3960
|
color: var(--sbb-form-field-text-color);
|
|
3839
3961
|
-webkit-text-fill-color: var(--sbb-form-field-text-color);
|
|
3840
3962
|
opacity: 1;
|
|
3841
|
-
border: var(--
|
|
3963
|
+
border: var(--_sbb-input-border-width) var(--sbb-form-field-border-style) var(--sbb-form-field-border-color);
|
|
3842
3964
|
border-radius: var(--sbb-form-field-border-radius);
|
|
3843
|
-
padding-inline: var(--sbb-form-field-padding-inline);
|
|
3965
|
+
padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--_sbb-input-border-width));
|
|
3844
3966
|
font-size: var(--sbb-form-field-input-text-size) !important;
|
|
3845
3967
|
font-weight: normal;
|
|
3846
3968
|
letter-spacing: var(--sbb-letter-spacing-text) !important;
|
|
@@ -3854,62 +3976,39 @@ sbb-toggle:has(:focus-visible) {
|
|
|
3854
3976
|
}
|
|
3855
3977
|
|
|
3856
3978
|
.sbb-input:read-only, .sbb-input:disabled {
|
|
3857
|
-
|
|
3858
|
-
--sbb-form-field-border-color: var(--sbb-color-graphite);
|
|
3859
|
-
--sbb-form-field-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
|
|
3979
|
+
background-color: var(--sbb-form-field-background-color-disabled);
|
|
3860
3980
|
}
|
|
3861
3981
|
|
|
3862
|
-
@media (forced-colors: active) {
|
|
3863
|
-
.sbb-input:read-only, .sbb-input:disabled {
|
|
3864
|
-
--sbb-form-field-border-color: ButtonBorder;
|
|
3865
|
-
}
|
|
3866
|
-
}
|
|
3867
3982
|
.sbb-input:disabled {
|
|
3868
|
-
--sbb-form-field-border-style
|
|
3983
|
+
border-style: var(--sbb-form-field-border-style-disabled);
|
|
3984
|
+
color: var(--sbb-form-field-text-color-disabled);
|
|
3985
|
+
border-color: var(--sbb-form-field-border-color-disabled);
|
|
3869
3986
|
}
|
|
3870
3987
|
|
|
3871
3988
|
.sbb-input:disabled::placeholder {
|
|
3872
|
-
color: var(--sbb-color-
|
|
3873
|
-
color:
|
|
3874
|
-
-webkit-text-fill-color: var(--sbb-color-granite);
|
|
3875
|
-
-webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
|
|
3989
|
+
color: var(--sbb-form-field-placeholder-color-disabled);
|
|
3990
|
+
-webkit-text-fill-color: var(--sbb-form-field-placeholder-color-disabled);
|
|
3876
3991
|
}
|
|
3877
3992
|
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
--sbb-form-field-label-color: GrayText !important;
|
|
3881
|
-
--sbb-form-field-prefix-color: GrayText !important;
|
|
3882
|
-
--sbb-form-field-text-color: GrayText !important;
|
|
3883
|
-
--sbb-form-field-border-color: GrayText !important;
|
|
3884
|
-
}
|
|
3993
|
+
.sbb-input:read-only {
|
|
3994
|
+
border-color: var(--sbb-form-field-border-color-readonly);
|
|
3885
3995
|
}
|
|
3996
|
+
|
|
3886
3997
|
.sbb-input:focus-visible {
|
|
3887
3998
|
outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
|
|
3888
3999
|
outline-offset: var(--sbb-form-field-outline-offset, var(--sbb-focus-outline-offset));
|
|
3889
4000
|
}
|
|
3890
4001
|
|
|
3891
4002
|
.sbb-input:focus {
|
|
3892
|
-
--
|
|
3893
|
-
|
|
4003
|
+
--_sbb-input-border-width: var(--sbb-form-field-border-width-focus);
|
|
4004
|
+
border-color: var(--sbb-form-field-border-color-focus);
|
|
3894
4005
|
}
|
|
3895
4006
|
|
|
3896
|
-
@media (forced-colors: active) {
|
|
3897
|
-
.sbb-input:focus {
|
|
3898
|
-
--sbb-form-field-border-color: Highlight;
|
|
3899
|
-
--sbb-form-field-prefix-color: Highlight;
|
|
3900
|
-
}
|
|
3901
|
-
}
|
|
3902
4007
|
.sbb-input:user-invalid {
|
|
3903
|
-
|
|
3904
|
-
--sbb-form-field-text-color
|
|
4008
|
+
border-color: var(--sbb-form-field-border-color-error);
|
|
4009
|
+
color: var(--sbb-form-field-text-color-error);
|
|
3905
4010
|
}
|
|
3906
4011
|
|
|
3907
|
-
@media (forced-colors: active) {
|
|
3908
|
-
.sbb-input:user-invalid {
|
|
3909
|
-
--sbb-form-field-border-color: LinkText !important;
|
|
3910
|
-
--sbb-form-field-text-color: LinkText !important;
|
|
3911
|
-
}
|
|
3912
|
-
}
|
|
3913
4012
|
.sbb-figure {
|
|
3914
4013
|
display: grid;
|
|
3915
4014
|
grid-template-rows: auto;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sbb-esta/lyne-elements-dev",
|
|
3
|
-
"version": "5.10.0-dev.
|
|
3
|
+
"version": "5.10.0-dev.1791362600",
|
|
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/a15a819a6cfdcaec0f808abd24d471b90dc19f7f"
|
|
10
10
|
],
|
|
11
11
|
"type": "module",
|
|
12
12
|
"exports": {
|