.main__aside position: fixed box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) top: 0 left: 0 width: var(--asidenav-width-lg, 20%) height: 100% flex: 0 0 0 flex-basis: var(--asidenav-width-lg, 20%) transition: all .2s ease-out z-index: 20 &::after content: '' position: absolute z-index: -2 left: 0 top: 0 width: 100% height: 100% background-color: var(--color-grey-light) @media (max-width: 425px) .main__aside position: fixed top: var(--header-height-collapsed) left: 0 right: 0 bottom: 0 height: 100% !important width: 100% z-index: 5 overflow: hidden transform: translateX(-110%) transition: transform .2s ease-out &.main__aside--expanded transform: translateX(0%) .asidenav__box-subtitle display: inherit .asidenav__box-title font-size: 18px padding-left: 10px .asidenav__box-subtitle display: none @media (min-width: 1200px) .main__aside width: var(--asidenav-width-xl, 250px) .asidenav color: var(--color-font) min-height: calc(100% - var(--header-height)) height: 400px overflow-y: auto overflow-x: hidden &::-webkit-scrollbar width: 0 .asidenav__box transition: opacity .2s ease + .asidenav__box margin-top: 10px .asidenav__box-title padding: 7px 13px margin-top: 30px background-color: transparent transition: all .2s ease padding: 10px 13px margin: 0 border-bottom: 1px solid var(--color-grey) height: 44px .asidenav-term-identifier--long display: inherit .asidenav-term-identifier--short display: none .asidenav__box-subtitle color: var(--color-fontsec) font-size: 0.9rem font-weight: 600 padding: 0 13px margin: 3px 0 // LOGO .asidenav__logo height: var(--header-height) display: flex align-items: center @media (max-width: 768px) .asidenav__logo display: none .asidenav__logo-link flex: 1 top: 10px left: 20px height: 80px padding: 0 20px display: flex flex-basis: var(--asidenav-width-xl, 250px) font-size: 16px align-items: center color: var(--color-dark) transform-origin: left &:hover color: var(--color-primary) .asidenav__logo-lmu width: 80px height: 100% .asidenav__logo-uni2work display: flex align-items: flex-end min-width: 70px margin-left: 12px text-transform: uppercase width: 100% height: 100% padding: 2px 4px border: 1px solid currentColor letter-spacing: 2px background-color: white transition: background-color .3s ease @media (max-width: 1199px) .asidenav__logo-link flex-basis: var(--asidenav-width-lg, 20%) font-size: 16px .asidenav__logo-lmu display: none .asidenav__logo-uni2work margin-left: 0 // SEAL .asidenav__sigillum position: absolute bottom: -40px right: 25px opacity: 0.1 > img width: 350px @media (max-width: 768px) .asidenav__sigillum right: auto left: 50% transform: translateX(-50%) // LIST-ITEM .asidenav__list-item color: var(--color-font) display: flex flex-direction: column justify-content: flex-start align-items: center &:not(.asidenav__list-item--active):hover background-color: var(--color-lightwhite) > .asidenav__link-wrapper color: var(--color-font) &:hover .asidenav__link-shorthand // transform: scale(1.05, 1.0); // transform-origin: right; text-shadow: none .asidenav__nested-list-wrapper display: block // small list-item-padding for medium to large screens @media (min-width: 769px) .asidenav__list-item padding-left: 10px .asidenav__list-item--active background-color: var(--color-lightwhite) .asidenav__link-wrapper color: var(--color-link) .asidenav__link-shorthand transform: scale(1.05, 1) transform-origin: right text-shadow: none .asidenav__link-wrapper position: relative display: flex flex: 1 align-items: center padding: 8px 3px justify-content: flex-start color: var(--color-font) width: 100% z-index: 1 .asidenav__link-shorthand display: none .asidenav__link-label line-height: 1 // hover sub-menus .asidenav__nested-list-wrapper position: absolute z-index: 22 display: none color: var(--color-font) background-color: var(--color-grey-light) box-shadow: 1px 1px 1px 0px var(--color-grey) .asidenav__nested-list min-width: 200px .asidenav__nested-list--unavailable font-size: 0.9rem color: var(--color-fontsec) font-weight: 600 padding: 7px min-width: 200px @media (max-width: 425px) .asidenav__list-item padding-left: 10px .asidenav__nested-list display: none .asidenav__nested-list--unavailable display: none .asidenav__nested-list-item position: relative &:hover background-color: var(--color-lightwhite) .asidenav__link-wrapper padding-left: 13px padding-right: 13px transition: all .2s ease color: var(--color-font) // TABLET @media (min-width: 426px) and (max-width: 768px) .main__aside width: var(--asidenav-width-md, 50px) flex-basis: var(--asidenav-width-md, 50px) overflow: hidden min-height: calc(100% - var(--header-height-collapsed)) top: var(--header-height-collapsed) .navbar__container-radio:checked ~ & min-height: calc(100% - var(--header-height-collapsed) - 30px) top: calc(var(--header-height-collapsed) + 30px) .asidenav__box-title width: var(--asidenav-width-md, 50px) font-size: 18px text-align: center padding: 10px 1px word-break: break-all background-color: var(--color-dark) color: var(--color-lightwhite) border: none &:hover background-color: var(--color-darker) &::before display: none .asidenav-term-identifier--long display: none .asidenav-term-identifier--short display: inherit .asidenav__box-subtitle padding: 0 3px font-size: 0.85rem .asidenav__link-shorthand display: flex position: static height: 50px width: var(--asidenav-width-md, 50px) text-align: center opacity: 1 font-size: 15px line-height: 1em margin-right: 13px flex-shrink: 0 padding: 1px outline: 1px solid white word-break: break-all align-items: center justify-content: center .asidenav__list-item padding-left: 0 + .asidenav__list-item margin: 0 .asidenav__link-wrapper color: var(--color-font) padding: 0 .asidenav__nested-list, .asidenav__link-label, .asidenav__nested-list--unavailable display: none .asidenav__list-item--active .asidenav__link-wrapper background-color: var(--color-lightwhite)