:root {
--drawer-width: 480px;
}
@keyframes drawer--shine {
0% {
background-position: right;
}
}
.supernova-drawer--left-toggle,
.supernova-drawer--right-toggle {
display: inline-block;
padding: 24px 18px;
background-color: #000000;
background: linear-gradient(
90deg,
#000000 20%,
rgba(255, 255, 255, 0.25) 50%,
#000000 80%
)
#000000;
background-size: 300% 100%;
animation: drawer--shine 2s infinite;
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
text-transform: uppercase;
letter-spacing: 0.24em;
font-size: 13px;
font-weight: 700;
color: #eeeeee;
position: fixed;
top: auto;
z-index: 32;
writing-mode: vertical-lr;
text-orientation: mixed;
}
.supernova-drawer--left-toggle:hover,
.supernova-drawer--right-toggle:hover {
color: #ffffff;
}
.supernova-drawer--left-toggle {
left: 0;
right: auto;
top: 50%;
transform: translateX(0%) translateY(-50%) rotateZ(180deg);
}
#supernova-drawer--toggle-left,
#supernova-drawer--toggle-right {
display: none;
}
.supernova-drawer--left.open,
.supernova-drawer--right.open {
transform: translateX(0%);
}
.supernova-drawer--left-toggle.open {
transform: translateX(var(--drawer-width)) rotateZ(180deg);
}
.supernova-drawer--right-toggle.open {
transform: translateX(calc(var(--drawer-width) * -1)) translateY(-50%);
}
.supernova-drawer--right-toggle {
left: auto;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.supernova-drawer--left,
.supernova-drawer--right {
position: fixed;
top: 0;
bottom: 0;
transition: all 0.2s cubic-bezier(0, 0.55, 0.45, 1);
height: auto;
width: var(--drawer-width);
background: #ffffff;
box-shadow: 0 0 32px rgba(0, 0, 0, 0.15);
padding: 2em;
z-index: 32;
overflow-y: auto;
overscroll-behavior: contain;
}
.drawer-close--left,
.drawer-close--right {
font-size: 24px;
cursor: pointer;
display: flex;
justify-content: flex-end;
margin: 0 0 1em 0;
}
.supernova-drawer--left {
left: 0;
transform: translateX(-100%);
transform-origin: center center;
}
.supernova-drawer--right {
right: 0;
transform: translateX(var(--drawer-width));
}
.supernova-drawer--left::-webkit-scrollbar,
.supernova-drawer--right::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.supernova-drawer--left::-webkit-scrollbar-button,
.supernova-drawer--right::-webkit-scrollbar-button {
width: 0;
height: 0;
}
.supernova-drawer--left::-webkit-scrollbar-thumb,
.supernova-drawer--right::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border: 0 none #ffffff;
border-radius: 48px;
}
.supernova-drawer--left::-webkit-scrollbar-thumb:hover,
.supernova-drawer--right::-webkit-scrollbar-thumb:hover,
.supernova-drawer--left::-webkit-scrollbar-thumb:active,
.supernova-drawer--right::-webkit-scrollbar-thumb:active {
background-color: rgba(0, 0, 0, 1);
}
.supernova-drawer--left::-webkit-scrollbar-track,
.supernova-drawer--right::-webkit-scrollbar-track {
border-radius: 48px;
}
.supernova-drawer--left::-webkit-scrollbar-corner,
.supernova-drawer--right::-webkit-scrollbar-corner {
background: transparent;
}
@media all and (max-width: 768px) {
.supernova-drawer--left-toggle,
.supernova-drawer--right-toggle {
padding: 24px 4px;
}
.supernova-drawer--left.open,
.supernova-drawer--right.open {
width: 100%;
}
}