vaul-base/style.css

An unstyled drawer component for React.

[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-open] {
  animation-name: slideFromBottom;
}
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"]:not(
    [data-open]
  ) {
  animation-name: slideToBottom;
}

[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-open] {
  animation-name: slideFromTop;
}
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"]:not(
    [data-open]
  ) {
  animation-name: slideToTop;
}

[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-open] {
  animation-name: slideFromLeft;
}
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"]:not(
    [data-open]
  ) {
  animation-name: slideToLeft;
}

[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-open] {
  animation-name: slideFromRight;
}
[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"]:not(
    [data-open]
  ) {
  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-open] {
  animation-name: fadeIn;
}
[data-vaul-overlay]:not([data-open]) {
  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(:not([data-open])) {
  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);
  }
}