@difizen/mana-react/lib/dropdown/styles/index.less

/* stylelint-disable keyframes-name-pattern */

@import '../../styles/variables.less';

@dropdown-prefix-cls: ~'@{mana-prefix}-dropdown';

.@{dropdown-prefix-cls} {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: 9999;
  display: block;
  max-height: 320px;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 20%);

  // &::before {
  //   position: absolute;
  //   top: -7px;
  //   right: 0;
  //   bottom: -7px;
  //   left: -7px;
  //   z-index: -9999;
  //   opacity: 0.0001;
  //   content: ' ';
  // }

  &-hidden {
    display: none;
  }

  &-overlay {
    display: inline-block;
  }

  &.slide-down-enter.slide-down-enter-active&-placement-bottomLeft,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomLeft,
  &.slide-down-enter.slide-down-enter-active&-placement-bottomCenter,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomCenter,
  &.slide-down-enter.slide-down-enter-active&-placement-bottomRight,
  &.slide-down-appear.slide-down-appear-active&-placement-bottomRight {
    animation-name: x6SlideUpIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topCenter,
  &.slide-up-appear.slide-up-appear-active&-placement-topCenter,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: x6SlideDownIn;
  }

  &.slide-down-leave.slide-down-leave-active&-placement-bottomLeft,
  &.slide-down-leave.slide-down-leave-active&-placement-bottomCenter,
  &.slide-down-leave.slide-down-leave-active&-placement-bottomRight {
    animation-name: x6SlideUpOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topCenter,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: x6SlideDownOut;
  }
}

@keyframes x6SlideUpIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes x6SlideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }

  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}

@keyframes x6SlideDownIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }

  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@keyframes x6SlideDownOut {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }

  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}