| | |
| | | overflow: hidden; |
| | | flex-shrink: 0; |
| | | align-self: flex-start; |
| | | margin-top: auto; |
| | | margin-bottom: auto; |
| | | } |
| | | |
| | | button.mobile-explorer { |
| | |
| | | list-style: none; |
| | | margin: 0; |
| | | padding: 0; |
| | | overscroll-behavior: contain; |
| | | |
| | | & li > a { |
| | | color: var(--dark); |
| | |
| | | cursor: pointer; |
| | | transition: transform 0.3s ease; |
| | | backface-visibility: visible; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | li:has(> .folder-outer:not(.open)) > .folder-container > svg { |
| | |
| | | flex: 0 0 34px; |
| | | |
| | | & > .explorer-content { |
| | | transform: translateX(0); |
| | | visibility: visible; |
| | | transform: translateX(-100vw); |
| | | visibility: hidden; |
| | | } |
| | | } |
| | | |
| | |
| | | flex: 0 0 34px; |
| | | |
| | | & > .explorer-content { |
| | | transform: translateX(-100vw); |
| | | visibility: hidden; |
| | | transform: translateX(0); |
| | | visibility: visible; |
| | | } |
| | | } |
| | | |
| | |
| | | margin-top: 0; |
| | | background-color: var(--light); |
| | | max-width: 100vw; |
| | | width: 100%; |
| | | transform: translateX(0); |
| | | width: 100vw; |
| | | transform: translateX(-100vw); |
| | | transition: |
| | | transform 200ms ease, |
| | | visibility 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; |
| | | } |
| | | } |