@zenithui/time-picker/dist/components/popover/popover.css

A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.

.popover-content {
  z-index: 50;
  color: #0f172a;
  background-color: #fff;
  border-radius: .375rem;
  outline: none;
  width: 18rem;
  padding: 1rem;
  position: absolute;
  box-shadow: 0 4px 6px #0000001a;
}

.popover-content[data-side="bottom"] {
  animation: .3s ease-in-out forwards slide-in-from-top;
}

.popover-content[data-side="top"] {
  animation: .3s ease-in-out forwards slide-in-from-bottom;
}

.popover-content[data-side="left"] {
  animation: .3s ease-in-out forwards slide-in-from-right;
}

.popover-content[data-side="right"] {
  animation: .3s ease-in-out forwards slide-in-from-left;
}

@keyframes slide-in-from-top {
  from {
    opacity: 0;
    transform: translateY(-.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-from-bottom {
  from {
    opacity: 0;
    transform: translateY(.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-from-right {
  from {
    opacity: 0;
    transform: translateX(.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-from-left {
  from {
    opacity: 0;
    transform: translateX(-.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fade-in {
  animation: .3s ease-in-out forwards fade-in;
}

.fade-out {
  animation: .3s ease-in-out forwards fade-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.zoom-in {
  animation: .3s ease-in-out forwards zoom-in;
}

.zoom-out {
  animation: .3s ease-in-out forwards zoom-out;
}

@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoom-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.9);
  }
}

.bounce-in {
  animation: .4s ease-in-out forwards bounce-in;
}

.bounce-out {
  animation: .4s ease-in-out forwards bounce-out;
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes bounce-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.flip-in {
  animation: .4s ease-in-out forwards flip-in;
}

.flip-out {
  animation: .4s ease-in-out forwards flip-out;
}

@keyframes flip-in {
  from {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  to {
    opacity: 1;
    transform: rotateY(0);
  }
}

@keyframes flip-out {
  from {
    opacity: 1;
    transform: rotateY(0);
  }

  to {
    opacity: 0;
    transform: rotateY(90deg);
  }
}

.rotate-in {
  animation: .4s ease-in-out forwards rotate-in;
}

.rotate-out {
  animation: .4s ease-in-out forwards rotate-out;
}

@keyframes rotate-in {
  from {
    opacity: 0;
    transform: rotate(-180deg);
  }

  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes rotate-out {
  from {
    opacity: 1;
    transform: rotate(0);
  }

  to {
    opacity: 0;
    transform: rotate(180deg);
  }
}