Initial commit
This commit is contained in:
Ammaar Reshi
256
node_modules/vaul/style.css
generated
vendored
Normal file
256
node_modules/vaul/style.css
generated
vendored
Normal file
@ -0,0 +1,256 @@
|
||||
[data-vaul-drawer] {
|
||||
touch-action: none;
|
||||
will-change: transform;
|
||||
transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open'] {
|
||||
animation-name: slideFromBottom;
|
||||
}
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed'] {
|
||||
animation-name: slideToBottom;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open'] {
|
||||
animation-name: slideFromTop;
|
||||
}
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed'] {
|
||||
animation-name: slideToTop;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open'] {
|
||||
animation-name: slideFromLeft;
|
||||
}
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed'] {
|
||||
animation-name: slideToLeft;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open'] {
|
||||
animation-name: slideFromRight;
|
||||
}
|
||||
[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed'] {
|
||||
animation-name: slideToRight;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
|
||||
transform: translate3d(0, var(--initial-transform, 100%), 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
|
||||
transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
|
||||
transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
|
||||
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] {
|
||||
transform: translate3d(0, var(--snap-point-height, 0), 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom'] {
|
||||
transform: translate3d(0, var(--snap-point-height, 0), 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left'] {
|
||||
transform: translate3d(var(--snap-point-height, 0), 0, 0);
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right'] {
|
||||
transform: translate3d(var(--snap-point-height, 0), 0, 0);
|
||||
}
|
||||
|
||||
[data-vaul-overlay][data-vaul-snap-points='false'] {
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
[data-vaul-overlay][data-vaul-snap-points='false'][data-state='open'] {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
[data-vaul-overlay][data-state='closed'] {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
[data-vaul-animate='false'] {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
[data-vaul-overlay][data-vaul-snap-points='true'] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
[data-vaul-overlay][data-vaul-snap-points='true'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-drawer-direction='top']::after {
|
||||
top: initial;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
|
||||
top: 100%;
|
||||
bottom: initial;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-drawer-direction='left']::after {
|
||||
left: initial;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
[data-vaul-drawer][data-vaul-drawer-direction='right']::after {
|
||||
left: 100%;
|
||||
right: initial;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
[data-vaul-overlay][data-vaul-snap-points='true']:not([data-vaul-snap-points-overlay='true']):not(
|
||||
[data-state='closed']
|
||||
) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-vaul-overlay][data-vaul-snap-points-overlay='true'] {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-vaul-handle] {
|
||||
display: block;
|
||||
position: relative;
|
||||
opacity: 0.7;
|
||||
background: #e2e2e4;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 5px;
|
||||
width: 32px;
|
||||
border-radius: 1rem;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
[data-vaul-handle]:hover,
|
||||
[data-vaul-handle]:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-vaul-handle-hitarea] {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: max(100%, 2.75rem); /* 44px */
|
||||
height: max(100%, 2.75rem); /* 44px */
|
||||
touch-action: inherit;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
[data-vaul-drawer] {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: fine) {
|
||||
[data-vaul-handle-hitarea]: {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideFromBottom {
|
||||
from {
|
||||
transform: translate3d(0, var(--initial-transform, 100%), 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideToBottom {
|
||||
to {
|
||||
transform: translate3d(0, var(--initial-transform, 100%), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideFromTop {
|
||||
from {
|
||||
transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideToTop {
|
||||
to {
|
||||
transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideFromLeft {
|
||||
from {
|
||||
transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideToLeft {
|
||||
to {
|
||||
transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideFromRight {
|
||||
from {
|
||||
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideToRight {
|
||||
to {
|
||||
transform: translate3d(var(--initial-transform, 100%), 0, 0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user