@fesjs/fes-design/es/style/index.css

fes-design for PC

.fes-popup-hidden {
  overflow: hidden;
}
.fes-slide-up-enter-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideUpIn;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.fes-slide-up-leave-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideUpOut;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  pointer-events: none;
}
.fes-slide-down-enter-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideDownIn;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.fes-slide-down-leave-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideDownOut;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  pointer-events: none;
}
.fes-slide-left-enter-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideLeftIn;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.fes-slide-left-leave-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideLeftOut;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  pointer-events: none;
}
.fes-slide-right-enter-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideRightIn;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.fes-slide-right-leave-active {
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-name: slideRightOut;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  pointer-events: none;
}
@keyframes slideUpIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes slideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes slideDownIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes slideDownOut {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}
@keyframes slideLeftIn {
  0% {
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
@keyframes slideLeftOut {
  0% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes slideRightIn {
  0% {
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes slideRightOut {
  0% {
    transform: scaleX(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
    opacity: 0;
  }
}
.fes-fade-enter-from {
  opacity: 0;
}
.fes-fade-enter-active {
  transition: opacity 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-fade-leave-to {
  opacity: 0;
}
.fes-fade-in-height-expand-leave-from,
.fes-fade-in-height-expand-enter-to {
  opacity: 1;
}
.fes-fade-in-height-expand-enter-from,
.fes-fade-in-height-expand-leave-to {
  opacity: 0;
}
.fes-fade-in-height-expand-enter-active {
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), opacity 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), margin-top 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), margin-bottom 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), padding-top 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), padding-bottom 0.2s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.fes-fade-in-height-expand-leave-active {
  overflow: hidden;
  transition: max-height 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), margin-top 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), margin-bottom 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), padding-top 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), padding-bottom 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}
.fes-fade-in-width-expand-enter-to {
  transform: translateX(0) translateY(0);
  opacity: 1;
}
.fes-fade-in-width-expand-enter-from {
  max-width: 0 !important;
  transform: translateY(60%);
  opacity: 0;
}
.fes-fade-in-width-expand-leave-to {
  max-width: 0 !important;
  transform: translateY(60%);
  opacity: 0;
}
.fes-fade-in-width-expand-leave-from {
  transform: translateY(0);
  opacity: 1;
}
.fes-fade-in-width-expand-enter-active {
  overflow: hidden;
  transition: max-width 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), opacity 0.2s cubic-bezier(0.7, 0.3, 0.1, 1), transform 0.2s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.fes-fade-in-width-expand-leave-active {
  overflow: hidden;
  transition: max-width 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), opacity 0.2s cubic-bezier(0.9, 0, 0.3, 0.7), transform 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
}