| | |
| | | } |
| | | |
| | | .folder-outer { |
| | | visibility: collapse; |
| | | display: grid; |
| | | grid-template-rows: 0fr; |
| | | transition: grid-template-rows 0.3s ease-in-out; |
| | | transition-property: grid-template-rows, visibility; |
| | | transition-duration: 0.3s; |
| | | transition-timing-function: ease-in-out; |
| | | } |
| | | |
| | | .folder-outer.open { |
| | | visibility: visible; |
| | | grid-template-rows: 1fr; |
| | | } |
| | | |
| | |
| | | margin-top: 0; |
| | | background-color: var(--light); |
| | | max-width: 100vw; |
| | | width: 100%; |
| | | width: 100vw; |
| | | transform: translateX(-100vw); |
| | | transition: |
| | | transform 200ms ease, |
| | |
| | | } |
| | | } |
| | | |
| | | .no-scroll { |
| | | opacity: 0; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | html:has(.no-scroll) { |
| | | overflow: hidden; |
| | | } |
| | | |
| | | @media all and not ($mobile) { |
| | | .no-scroll { |
| | | opacity: 1 !important; |
| | | overflow: auto !important; |
| | | } |
| | | |
| | | html:has(.no-scroll) { |
| | | overflow: auto !important; |
| | | .mobile-no-scroll { |
| | | @media all and ($mobile) { |
| | | overscroll-behavior: none; |
| | | } |
| | | } |