@scania/tegel
Version:
Tegel Design System
85 lines (84 loc) • 1.93 kB
CSS
:host {
box-sizing: border-box;
display: block;
}
: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-navigation-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: 26px 4px;
}
:host ::slotted(*:focus-visible)::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 26px;
bottom: 26px;
outline: 2px solid var(--tds-blue-400);
}
:host .navigation-tab-item:not(.selected)::after {
width: 0%;
transition: width 0.15s ease-in-out 0s;
}
:host .navigation-tab-item {
position: relative;
margin-right: 32px;
}
:host .navigation-tab-item:hover {
cursor: pointer;
}
:host .navigation-tab-item:hover::after {
width: 100%;
}
:host .navigation-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-navigation-tabs-tab-indicator-background-hover);
z-index: 1;
}
:host .selected ::slotted(*) {
color: var(--tds-navigation-tabs-tab-color-selected);
}
:host .selected::after {
width: 100%;
background-color: var(--tds-navigation-tabs-tab-indicator-background-active);
}
:host .disabled {
color: var(--tds-navigation-tabs-tab-color-disabled);
}
:host .disabled ::slotted(*) {
opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
}
:host .disabled::after {
content: none;
}
:host .disabled ::slotted(*:hover) {
cursor: not-allowed;
}
:host .disabled ::slotted(*:focus-visible) {
outline: none;
}
:host(.last) {
margin-right: 32px;
}