@konstructio/ui/dist/ui/utilities.css

A set of reusable and customizable React components built for konstruct.io

@theme {
  --animate-enter: enter;
  --animate-exit: exit;
  --animate-hide: hide;
  --animate-slide-in: slideIn;
  --animate-swipe-out: swipeOut;
  --animate-duration-time: 1s;

  @keyframes hide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateX(calc(100% + var(--viewport-padding)));
    }
    to {
      transform: translateX(0);
    }
  }

  @keyframes swipeOut {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(100% + var(--viewport-padding)));
    }
  }

  @keyframes enter {
    from {
      opacity: var(--tw-enter-opacity, 1);
      transform: translate3d(
          var(--tw-enter-translate-x, 0),
          var(--tw-enter-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1),
          var(--tw-enter-scale, 1)
        )
        rotate(var(--tw-enter-rotate, 0));
    }
  }

  @keyframes exit {
    to {
      opacity: var(--tw-exit-opacity, 1);
      transform: translate3d(
          var(--tw-exit-translate-x, 0),
          var(--tw-exit-translate-y, 0),
          0
        )
        scale3d(
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1),
          var(--tw-exit-scale, 1)
        )
        rotate(var(--tw-exit-rotate, 0));
    }
  }
}

@utility fade-in-* {
  --tw-enter-opacity: calc(--value(integer) / 100);
}

@utility fade-out-* {
  --tw-exit-opacity: calc(--value(integer) / 100);
}

@utility zoom-in-* {
  --tw-enter-scale: calc(--value(integer) / 100);
}

@utility zoom-out-* {
  --tw-exit-scale: calc(--value(integer) / 100);
}

@utility spin-in-* {
  --tw-enter-rotate: calc(--value(integer) * 1deg);
}

@utility spin-out-* {
  --tw-exit-rotate: calc(--value(integer) * 1deg);
}

@utility slide-in-from-top-* {
  --tw-enter-translate-y: calc(--value(integer) * 1%);
}

@utility -slide-in-from-top-* {
  --tw-enter-translate-y: calc(--value(integer) * -1%);
}

@utility slide-in-from-bottom-* {
  --tw-enter-translate-y: calc(--value(integer) * 1%);
}

@utility slide-in-from-left-* {
  --tw-enter-translate-x: calc(--value(integer) * 1%);
}

@utility slide-in-from-right-* {
  --tw-enter-translate-x: calc(--value(integer) * 1%);
}

@utility slide-out-to-top-* {
  --tw-exit-translate-y: calc(--value(integer) * 1%);
}

@utility slide-out-to-bottom-* {
  --tw-exit-translate-y: calc(--value(integer) * 1%);
}

@utility slide-out-to-left-* {
  --tw-exit-translate-x: calc(--value(integer) * 1%);
}

@utility slide-out-to-right-* {
  --tw-exit-translate-x: calc(--value(integer) * 1%);
}

@utility animate-in {
  animation-name: var(--animate-enter);
  animation-duration: var(--tw-duration, 300ms);
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

@utility animate-out {
  animation-name: var(--animate-exit);
  animation-duration: var(--tw-duration, 300ms);
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

@utility animate-slide-in {
  animation-name: var(--animate-slide-in);
  animation-duration: 0.15s;
}

@utility animate-swipe-out {
  animation-name: var(--animate-swipe-out);
  animation-duration: 0.15s;
}

@utility animate-hide {
  animation-name: var(--animate-hide);
  animation-duration: 0.15s;
}

@utility animate-duration-time-* {
  --animate-duration-time: calc(--value(number) * 1s);
}

@utility animate-spin {
  animation-name: spin;
  animation-duration: var(--animate-duration-time, 1s);
  animation-iteration-count: infinite;
}