@scania/tegel
Version:
Tegel Design System
90 lines (89 loc) • 2.07 kB
CSS
:host {
box-sizing: border-box;
display: block;
position: relative;
}
:host * {
box-sizing: border-box;
}
:host ::slotted(*) {
all: unset;
/* !important is needed here to prevent this from being overwritten by our CSS-reset. */
font: var(--tds-headline-07) ;
letter-spacing: var(--tds-headline-07-ls) ;
color: var(--tds-inline-tabs-tab-color);
text-decoration: none;
display: block;
position: relative;
transition: color 0.15s ease-in-out 0s;
white-space: nowrap;
background-color: transparent;
border: 0;
width: 100%;
padding: 20px 0;
}
:host ::slotted(*:focus-visible)::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 3px;
bottom: 3px;
outline: 2px solid var(--tds-blue-400);
outline: 2px solid var(--tds-focus-outline-color);
box-shadow: 0 0 0 1px var(--tds-white);
outline-offset: 1px;
z-index: 1;
}
:host .inline-tab-item:not(.selected)::after {
width: 0%;
transition: width 0.15s ease-in-out 0s;
}
:host .inline-tab-item {
position: relative;
}
:host .inline-tab-item:hover {
cursor: pointer;
}
:host .inline-tab-item:hover ::slotted(*) {
color: var(--tds-inline-tabs-tab-color-hover);
}
:host .inline-tab-item:hover::after {
width: 100%;
}
:host .inline-tab-item::after {
content: " ";
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin-left: auto;
width: 0%;
margin-right: auto;
height: 2px;
background-color: var(--tds-inline-tabs-tab-indicator-background-hover);
z-index: 1;
}
:host .selected ::slotted(*) {
color: var(--tds-inline-tabs-tab-color-selected);
}
:host .selected::after {
width: 100%;
background-color: var(--tds-inline-tabs-tab-indicator-background-active);
}
:host .disabled ::slotted(*) {
color: var(--tds-inline-tabs-tab-color-disabled);
}
:host .disabled::after {
content: none;
}
:host .disabled ::slotted(*:hover) {
cursor: not-allowed;
color: var(--tds-inline-tabs-tab-color-disabled);
}
:host .disabled ::slotted(*:focus-visible) {
outline: none;
}
:host(.last) {
margin-right: 32px;
}