@scania/tegel
Version:
Tegel Design System
42 lines • 1 kB
CSS
:host {
display: block;
}
:host .wrapper {
display: flex;
flex-direction: column;
}
:host .dropdown-icon {
margin-left: auto;
transition: all 0.2s ease-in-out;
}
:host .state-open .dropdown-icon {
transform: rotateZ(180deg);
}
:host .state-open .menu {
display: block;
}
:host .state-collapsed .menu {
--side-menu-width: 69px;
position: absolute;
left: var(--side-menu-width);
box-shadow: var(--tds-nav-dropdown-menu-box);
background-color: var(--tds-sidebar-side-menu-subnav-background);
}
:host .state-collapsed .menu .heading-collapsed {
all: unset;
box-sizing: border-box;
padding: 16px 24px 15px;
min-height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
font: var(--tds-headline-07);
letter-spacing: var(--tds-headline-07-ls);
}
:host :not(.state-collapsed) .menu ::slotted(tds-side-menu-dropdown-list) {
width: 100%;
}
:host .menu {
display: none;
flex-direction: column;
}