@scania/tegel
Version:
Tegel Design System
59 lines (57 loc) • 1.6 kB
CSS
:host {
--tds-scrollbar-width-standard: thin;
--tds-scrollbar-width: 10px;
--tds-scrollbar-height: 10px;
--tds-scrollbar-thumb-border-width: 3px;
--tds-scrollbar-thumb-border-hover-width: 2px;
}
body {
scrollbar-width: thin;
}
:host {
height: var(--tds-header-height);
position: relative;
}
:host .menu {
flex-direction: column;
overflow-y: auto;
max-height: calc(100vh - var(--tds-header-height));
box-shadow: var(--tds-nav-dropdown-menu-box);
background-color: var(--tds-header-app-launcher-menu-background);
border-top-right-radius: 0;
border-top-left-radius: 0;
}
:host .menu:hover::-webkit-scrollbar-thumb {
border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
background: var(--tds-scrollbar-hover-thumb-color);
background-clip: padding-box;
}
:host .menu::-webkit-scrollbar {
width: var(--tds-scrollbar-width);
}
:host .menu::-webkit-scrollbar-track {
background: var(--tds-scrollbar-track-color);
}
:host .menu::-webkit-scrollbar-thumb {
border-radius: 40px;
background: var(--tds-scrollbar-thumb-color);
border: var(--tds-scrollbar-thumb-border-width) solid transparent;
background-clip: padding-box;
}
:host .menu::-webkit-scrollbar-button {
height: 0;
width: 0;
}
@supports not selector(::-webkit-scrollbar) {
:host .menu {
scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
scrollbar-width: var(--tds-scrollbar-width-standard);
}
}
:host .state-open .dropdown-icon {
transform: rotate(180deg);
}
:host .state-open .button {
position: relative;
z-index: 901;
}