@scania/tegel-lite 0.0.1 → 0.0.2
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/dist/components.css +223 -0
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -8318,6 +8318,69 @@ body {
|
|
|
8318
8318
|
fill: var(--folder-tabs-scroll-button-text);
|
|
8319
8319
|
}
|
|
8320
8320
|
|
|
8321
|
+
/* tl-folder-tabs.scss (overlay buttons, no JS) */
|
|
8322
|
+
.tl-folder-tabs__tab {
|
|
8323
|
+
all: unset;
|
|
8324
|
+
font-family: var(--headline-07-font-family);
|
|
8325
|
+
font-size: var(--headline-07-font-size);
|
|
8326
|
+
line-height: var(--headline-07-line-height);
|
|
8327
|
+
font-weight: var(--headline-07-font-weight);
|
|
8328
|
+
letter-spacing: var(--headline-07-letter-spacing);
|
|
8329
|
+
text-transform: var(--headline-07-text-transform);
|
|
8330
|
+
box-sizing: border-box;
|
|
8331
|
+
position: relative;
|
|
8332
|
+
display: inline-flex;
|
|
8333
|
+
align-items: center;
|
|
8334
|
+
min-inline-size: 142px;
|
|
8335
|
+
inline-size: auto;
|
|
8336
|
+
flex: 0 0 auto;
|
|
8337
|
+
white-space: nowrap;
|
|
8338
|
+
padding: 16px;
|
|
8339
|
+
text-align: left;
|
|
8340
|
+
cursor: pointer;
|
|
8341
|
+
border-left: 1px solid transparent;
|
|
8342
|
+
border-top: 2px solid var(--folder-tab-surface);
|
|
8343
|
+
background-color: var(--folder-tab-surface);
|
|
8344
|
+
color: var(--folder-tab-text);
|
|
8345
|
+
}
|
|
8346
|
+
.tl-folder-tabs__tab + .tl-folder-tabs__tab {
|
|
8347
|
+
border-left-color: var(--folder-tab-divider);
|
|
8348
|
+
}
|
|
8349
|
+
.tl-folder-tabs__tab:focus-visible {
|
|
8350
|
+
outline: 2px solid currentcolor;
|
|
8351
|
+
outline-offset: -4px;
|
|
8352
|
+
box-shadow: none;
|
|
8353
|
+
}
|
|
8354
|
+
.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
|
|
8355
|
+
background-color: var(--folder-tab-surface-hover);
|
|
8356
|
+
border-top-color: var(--folder-tab-surface-hover);
|
|
8357
|
+
color: var(--folder-tab-text);
|
|
8358
|
+
}
|
|
8359
|
+
.tl-folder-tabs__tab--selected {
|
|
8360
|
+
background-color: var(--folder-tab-surface-selected);
|
|
8361
|
+
border-top-color: var(--folder-tab-border-selected);
|
|
8362
|
+
color: var(--folder-tab-text);
|
|
8363
|
+
}
|
|
8364
|
+
.tl-folder-tabs__tab--selected::after {
|
|
8365
|
+
content: "";
|
|
8366
|
+
position: absolute;
|
|
8367
|
+
top: 0;
|
|
8368
|
+
right: -1px;
|
|
8369
|
+
bottom: 0;
|
|
8370
|
+
width: 1px;
|
|
8371
|
+
background-color: var(--folder-tab-surface-selected);
|
|
8372
|
+
z-index: 1;
|
|
8373
|
+
}
|
|
8374
|
+
.tl-folder-tabs__tab--disabled {
|
|
8375
|
+
color: var(--folder-tab-text-disabled);
|
|
8376
|
+
cursor: not-allowed;
|
|
8377
|
+
user-select: none;
|
|
8378
|
+
}
|
|
8379
|
+
.tl-folder-tabs__tab--disabled:focus-visible {
|
|
8380
|
+
outline: none;
|
|
8381
|
+
box-shadow: none;
|
|
8382
|
+
}
|
|
8383
|
+
|
|
8321
8384
|
.tl-inline-tabs {
|
|
8322
8385
|
/* Horizontal divider */
|
|
8323
8386
|
--inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
|
|
@@ -8411,6 +8474,86 @@ body {
|
|
|
8411
8474
|
fill: var(--inline-tabs-scroll-button-text);
|
|
8412
8475
|
}
|
|
8413
8476
|
|
|
8477
|
+
.tl-inline-tabs__tab {
|
|
8478
|
+
all: unset;
|
|
8479
|
+
margin-right: 32px;
|
|
8480
|
+
box-sizing: border-box;
|
|
8481
|
+
}
|
|
8482
|
+
.tl-inline-tabs__tab * {
|
|
8483
|
+
box-sizing: border-box;
|
|
8484
|
+
}
|
|
8485
|
+
.tl-inline-tabs__tab {
|
|
8486
|
+
font-family: var(--headline-07-font-family);
|
|
8487
|
+
font-size: var(--headline-07-font-size);
|
|
8488
|
+
line-height: var(--headline-07-line-height);
|
|
8489
|
+
font-weight: var(--headline-07-font-weight);
|
|
8490
|
+
letter-spacing: var(--headline-07-letter-spacing);
|
|
8491
|
+
text-transform: var(--headline-07-text-transform);
|
|
8492
|
+
color: var(--inline-tabs-tab);
|
|
8493
|
+
text-decoration: none;
|
|
8494
|
+
display: block;
|
|
8495
|
+
position: relative;
|
|
8496
|
+
transition: color 0.15s ease-in-out 0s;
|
|
8497
|
+
white-space: nowrap;
|
|
8498
|
+
background-color: transparent;
|
|
8499
|
+
border: 0;
|
|
8500
|
+
padding: 20px 4px;
|
|
8501
|
+
}
|
|
8502
|
+
.tl-inline-tabs__tab:focus-visible {
|
|
8503
|
+
outline: none;
|
|
8504
|
+
}
|
|
8505
|
+
.tl-inline-tabs__tab:focus-visible::before {
|
|
8506
|
+
content: "";
|
|
8507
|
+
position: absolute;
|
|
8508
|
+
inset: 18px 0;
|
|
8509
|
+
border-radius: 2px;
|
|
8510
|
+
box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
|
|
8511
|
+
z-index: 2;
|
|
8512
|
+
pointer-events: none;
|
|
8513
|
+
}
|
|
8514
|
+
.tl-inline-tabs__tab::after {
|
|
8515
|
+
background-color: var(--inline-tabs-tab-indicator-hover);
|
|
8516
|
+
content: " ";
|
|
8517
|
+
position: absolute;
|
|
8518
|
+
bottom: 0;
|
|
8519
|
+
right: 0;
|
|
8520
|
+
left: 0;
|
|
8521
|
+
margin-left: auto;
|
|
8522
|
+
width: 0%;
|
|
8523
|
+
margin-right: auto;
|
|
8524
|
+
height: 2px;
|
|
8525
|
+
z-index: 1;
|
|
8526
|
+
transition: width 0.15s ease-in-out 0s;
|
|
8527
|
+
}
|
|
8528
|
+
.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
|
|
8529
|
+
width: 0%;
|
|
8530
|
+
}
|
|
8531
|
+
.tl-inline-tabs__tab:hover {
|
|
8532
|
+
cursor: pointer;
|
|
8533
|
+
color: var(--inline-tabs-tab-hover);
|
|
8534
|
+
}
|
|
8535
|
+
.tl-inline-tabs__tab:hover::after {
|
|
8536
|
+
width: 100%;
|
|
8537
|
+
}
|
|
8538
|
+
.tl-inline-tabs__tab--selected {
|
|
8539
|
+
color: var(--inline-tabs-tab-selected);
|
|
8540
|
+
}
|
|
8541
|
+
.tl-inline-tabs__tab--selected::after {
|
|
8542
|
+
background-color: var(--inline-tabs-tab-indicator-active);
|
|
8543
|
+
width: 100%;
|
|
8544
|
+
}
|
|
8545
|
+
.tl-inline-tabs__tab--disabled {
|
|
8546
|
+
color: var(--inline-tabs-tab-disabled);
|
|
8547
|
+
pointer-events: none;
|
|
8548
|
+
cursor: not-allowed;
|
|
8549
|
+
}
|
|
8550
|
+
.tl-inline-tabs__tab--disabled::after {
|
|
8551
|
+
content: none;
|
|
8552
|
+
}
|
|
8553
|
+
.tl-inline-tabs__tab--disabled:focus-visible::before {
|
|
8554
|
+
box-shadow: none;
|
|
8555
|
+
}
|
|
8556
|
+
|
|
8414
8557
|
.tl-navigation-tabs__tab {
|
|
8415
8558
|
/* tds-navigation-tab variables */
|
|
8416
8559
|
--navigation-tabs-tab: var(--color-foreground-text-soft);
|
|
@@ -8502,6 +8645,86 @@ body {
|
|
|
8502
8645
|
fill: var(--navigation-tabs-scroll-button-color);
|
|
8503
8646
|
}
|
|
8504
8647
|
|
|
8648
|
+
.tl-navigation-tabs__tab {
|
|
8649
|
+
all: unset;
|
|
8650
|
+
margin-right: 32px;
|
|
8651
|
+
box-sizing: border-box;
|
|
8652
|
+
}
|
|
8653
|
+
.tl-navigation-tabs__tab * {
|
|
8654
|
+
box-sizing: border-box;
|
|
8655
|
+
}
|
|
8656
|
+
.tl-navigation-tabs__tab {
|
|
8657
|
+
font-family: var(--headline-07-font-family);
|
|
8658
|
+
font-size: var(--headline-07-font-size);
|
|
8659
|
+
line-height: var(--headline-07-line-height);
|
|
8660
|
+
font-weight: var(--headline-07-font-weight);
|
|
8661
|
+
letter-spacing: var(--headline-07-letter-spacing);
|
|
8662
|
+
text-transform: var(--headline-07-text-transform);
|
|
8663
|
+
color: var(--navigation-tabs-tab);
|
|
8664
|
+
text-decoration: none;
|
|
8665
|
+
display: block;
|
|
8666
|
+
position: relative;
|
|
8667
|
+
transition: color 0.15s ease-in-out 0s;
|
|
8668
|
+
white-space: nowrap;
|
|
8669
|
+
background-color: transparent;
|
|
8670
|
+
border: 0;
|
|
8671
|
+
padding: 26px 4px;
|
|
8672
|
+
}
|
|
8673
|
+
.tl-navigation-tabs__tab:focus-visible {
|
|
8674
|
+
outline: none;
|
|
8675
|
+
}
|
|
8676
|
+
.tl-navigation-tabs__tab:focus-visible::before {
|
|
8677
|
+
content: "";
|
|
8678
|
+
position: absolute;
|
|
8679
|
+
inset: 18px 0;
|
|
8680
|
+
border-radius: 2px;
|
|
8681
|
+
box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
|
|
8682
|
+
z-index: 2;
|
|
8683
|
+
pointer-events: none;
|
|
8684
|
+
}
|
|
8685
|
+
.tl-navigation-tabs__tab::after {
|
|
8686
|
+
background-color: var(--navigation-tabs-tab-indicator-hover);
|
|
8687
|
+
content: " ";
|
|
8688
|
+
position: absolute;
|
|
8689
|
+
bottom: 0;
|
|
8690
|
+
right: 0;
|
|
8691
|
+
left: 0;
|
|
8692
|
+
margin-left: auto;
|
|
8693
|
+
width: 0%;
|
|
8694
|
+
margin-right: auto;
|
|
8695
|
+
height: 2px;
|
|
8696
|
+
z-index: 1;
|
|
8697
|
+
transition: width 0.15s ease-in-out 0s;
|
|
8698
|
+
}
|
|
8699
|
+
.tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
|
|
8700
|
+
width: 0%;
|
|
8701
|
+
}
|
|
8702
|
+
.tl-navigation-tabs__tab:hover {
|
|
8703
|
+
cursor: pointer;
|
|
8704
|
+
color: var(--navigation-tabs-tab-hover);
|
|
8705
|
+
}
|
|
8706
|
+
.tl-navigation-tabs__tab:hover::after {
|
|
8707
|
+
width: 100%;
|
|
8708
|
+
}
|
|
8709
|
+
.tl-navigation-tabs__tab--selected {
|
|
8710
|
+
color: var(--navigation-tabs-tab-selected);
|
|
8711
|
+
}
|
|
8712
|
+
.tl-navigation-tabs__tab--selected::after {
|
|
8713
|
+
background-color: var(--navigation-tabs-tab-indicator-active);
|
|
8714
|
+
width: 100%;
|
|
8715
|
+
}
|
|
8716
|
+
.tl-navigation-tabs__tab--disabled {
|
|
8717
|
+
color: var(--navigation-tabs-tab-disabled);
|
|
8718
|
+
pointer-events: none;
|
|
8719
|
+
cursor: not-allowed;
|
|
8720
|
+
}
|
|
8721
|
+
.tl-navigation-tabs__tab--disabled::after {
|
|
8722
|
+
content: none;
|
|
8723
|
+
}
|
|
8724
|
+
.tl-navigation-tabs__tab--disabled:focus-visible::before {
|
|
8725
|
+
box-shadow: none;
|
|
8726
|
+
}
|
|
8727
|
+
|
|
8505
8728
|
.tl-textarea {
|
|
8506
8729
|
--textarea-background-primary: var(--color-background-layer-01);
|
|
8507
8730
|
--textarea-background-secondary: var(--color-background-layer-02);
|