@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/modal/assets/effects.scss

@@ -0,0 +1,602 @@
+.antd-zoom-enter,
+.antd-zoom-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-enter.antd-zoom-enter-active,
+.antd-zoom-appear.antd-zoom-appear-active {
+  animation-name: antZoomIn;
+  animation-play-state: running;
+}
+.antd-zoom-leave.antd-zoom-leave-active {
+  animation-name: antZoomOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-enter,
+.antd-zoom-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-enter-prepare,
+.antd-zoom-appear-prepare {
+  transform: none;
+}
+.antd-zoom-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-enter,
+.zoom-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-enter.zoom-enter-active,
+.zoom-appear.zoom-appear-active {
+  animation-name: antZoomIn;
+  animation-play-state: running;
+}
+.zoom-leave.zoom-leave-active {
+  animation-name: antZoomOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-enter,
+.zoom-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-enter-prepare,
+.zoom-appear-prepare {
+  transform: none;
+}
+.zoom-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-big-enter,
+.antd-zoom-big-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-big-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-big-enter.antd-zoom-big-enter-active,
+.antd-zoom-big-appear.antd-zoom-big-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.antd-zoom-big-leave.antd-zoom-big-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-big-enter,
+.antd-zoom-big-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-big-enter-prepare,
+.antd-zoom-big-appear-prepare {
+  transform: none;
+}
+.antd-zoom-big-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-enter,
+.zoom-big-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-enter.zoom-big-enter-active,
+.zoom-big-appear.zoom-big-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.zoom-big-leave.zoom-big-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-big-enter,
+.zoom-big-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-enter-prepare,
+.zoom-big-appear-prepare {
+  transform: none;
+}
+.zoom-big-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-big-fast-enter,
+.antd-zoom-big-fast-appear {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-big-fast-leave {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-big-fast-enter.antd-zoom-big-fast-enter-active,
+.antd-zoom-big-fast-appear.antd-zoom-big-fast-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.antd-zoom-big-fast-leave.antd-zoom-big-fast-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-big-fast-enter,
+.antd-zoom-big-fast-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-big-fast-enter-prepare,
+.antd-zoom-big-fast-appear-prepare {
+  transform: none;
+}
+.antd-zoom-big-fast-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-fast-leave {
+  animation-duration: 0.1s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-big-fast-enter.zoom-big-fast-enter-active,
+.zoom-big-fast-appear.zoom-big-fast-appear-active {
+  animation-name: antZoomBigIn;
+  animation-play-state: running;
+}
+.zoom-big-fast-leave.zoom-big-fast-leave-active {
+  animation-name: antZoomBigOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-big-fast-enter,
+.zoom-big-fast-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-big-fast-enter-prepare,
+.zoom-big-fast-appear-prepare {
+  transform: none;
+}
+.zoom-big-fast-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-up-enter,
+.antd-zoom-up-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-up-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-up-enter.antd-zoom-up-enter-active,
+.antd-zoom-up-appear.antd-zoom-up-appear-active {
+  animation-name: antZoomUpIn;
+  animation-play-state: running;
+}
+.antd-zoom-up-leave.antd-zoom-up-leave-active {
+  animation-name: antZoomUpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-up-enter,
+.antd-zoom-up-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-up-enter-prepare,
+.antd-zoom-up-appear-prepare {
+  transform: none;
+}
+.antd-zoom-up-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-up-enter,
+.zoom-up-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-up-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-up-enter.zoom-up-enter-active,
+.zoom-up-appear.zoom-up-appear-active {
+  animation-name: antZoomUpIn;
+  animation-play-state: running;
+}
+.zoom-up-leave.zoom-up-leave-active {
+  animation-name: antZoomUpOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-up-enter,
+.zoom-up-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-up-enter-prepare,
+.zoom-up-appear-prepare {
+  transform: none;
+}
+.zoom-up-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-down-enter,
+.antd-zoom-down-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-down-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-down-enter.antd-zoom-down-enter-active,
+.antd-zoom-down-appear.antd-zoom-down-appear-active {
+  animation-name: antZoomDownIn;
+  animation-play-state: running;
+}
+.antd-zoom-down-leave.antd-zoom-down-leave-active {
+  animation-name: antZoomDownOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-down-enter,
+.antd-zoom-down-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-down-enter-prepare,
+.antd-zoom-down-appear-prepare {
+  transform: none;
+}
+.antd-zoom-down-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-down-enter,
+.zoom-down-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-down-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-down-enter.zoom-down-enter-active,
+.zoom-down-appear.zoom-down-appear-active {
+  animation-name: antZoomDownIn;
+  animation-play-state: running;
+}
+.zoom-down-leave.zoom-down-leave-active {
+  animation-name: antZoomDownOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-down-enter,
+.zoom-down-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-down-enter-prepare,
+.zoom-down-appear-prepare {
+  transform: none;
+}
+.zoom-down-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-left-enter,
+.antd-zoom-left-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-left-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-left-enter.antd-zoom-left-enter-active,
+.antd-zoom-left-appear.antd-zoom-left-appear-active {
+  animation-name: antZoomLeftIn;
+  animation-play-state: running;
+}
+.antd-zoom-left-leave.antd-zoom-left-leave-active {
+  animation-name: antZoomLeftOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-left-enter,
+.antd-zoom-left-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-left-enter-prepare,
+.antd-zoom-left-appear-prepare {
+  transform: none;
+}
+.antd-zoom-left-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-left-enter,
+.zoom-left-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-left-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-left-enter.zoom-left-enter-active,
+.zoom-left-appear.zoom-left-appear-active {
+  animation-name: antZoomLeftIn;
+  animation-play-state: running;
+}
+.zoom-left-leave.zoom-left-leave-active {
+  animation-name: antZoomLeftOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-left-enter,
+.zoom-left-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-left-enter-prepare,
+.zoom-left-appear-prepare {
+  transform: none;
+}
+.zoom-left-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.antd-zoom-right-enter,
+.antd-zoom-right-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-right-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.antd-zoom-right-enter.antd-zoom-right-enter-active,
+.antd-zoom-right-appear.antd-zoom-right-appear-active {
+  animation-name: antZoomRightIn;
+  animation-play-state: running;
+}
+.antd-zoom-right-leave.antd-zoom-right-leave-active {
+  animation-name: antZoomRightOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.antd-zoom-right-enter,
+.antd-zoom-right-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.antd-zoom-right-enter-prepare,
+.antd-zoom-right-appear-prepare {
+  transform: none;
+}
+.antd-zoom-right-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+.zoom-right-enter,
+.zoom-right-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-right-leave {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-play-state: paused;
+}
+.zoom-right-enter.zoom-right-enter-active,
+.zoom-right-appear.zoom-right-appear-active {
+  animation-name: antZoomRightIn;
+  animation-play-state: running;
+}
+.zoom-right-leave.zoom-right-leave-active {
+  animation-name: antZoomRightOut;
+  animation-play-state: running;
+  pointer-events: none;
+}
+.zoom-right-enter,
+.zoom-right-appear {
+  transform: scale(0);
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
+}
+.zoom-right-enter-prepare,
+.zoom-right-appear-prepare {
+  transform: none;
+}
+.zoom-right-leave {
+  animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+@keyframes antZoomIn {
+  0% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes antZoomOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.2);
+    opacity: 0;
+  }
+}
+@keyframes antZoomBigIn {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes antZoomBigOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+@keyframes antZoomUpIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+}
+@keyframes antZoomUpOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 0%;
+  }
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 0%;
+    opacity: 0;
+  }
+}
+@keyframes antZoomLeftIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+}
+@keyframes antZoomLeftOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 0% 50%;
+  }
+  100% {
+    transform: scale(0.8);
+    transform-origin: 0% 50%;
+    opacity: 0;
+  }
+}
+@keyframes antZoomRightIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+}
+@keyframes antZoomRightOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 100% 50%;
+  }
+  100% {
+    transform: scale(0.8);
+    transform-origin: 100% 50%;
+    opacity: 0;
+  }
+}
+@keyframes antZoomDownIn {
+  0% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+}
+@keyframes antZoomDownOut {
+  0% {
+    transform: scale(1);
+    transform-origin: 50% 100%;
+  }
+  100% {
+    transform: scale(0.8);
+    transform-origin: 50% 100%;
+    opacity: 0;
+  }
+}

package/src/components/modal/assets/styles.scss

@@ -0,0 +1,131 @@
+@import url("./effects.scss");
+
+.antd-modal {
+  @apply box-border pointer-events-none relative text-sm w-auto max-w-[calc(100vw_-_32px)] mx-auto m-0 p-0 pb-6 top-[100px];
+}
+
+.antd-modal.antd-zoom-enter,
+.antd-modal.antzoom-appear {
+  @apply opacity-0 select-none;
+  animation-duration: 0.3s;
+  transform: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.antd-modal-mask {
+  @apply fixed h-full inset-0 z-[1000] bg-[rgba(33,39,42,0.3)];
+}
+
+.antd-modal-mask-hidden {
+  @apply hidden;
+}
+
+.antd-modal-wrap {
+  @apply fixed inset-0 overflow-auto z-[1000];
+  outline: 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.antd-modal-content {
+  @apply bg-white pointer-events-auto relative rounded-xl p-0 overflow-hidden;
+}
+
+.antd-modal-close {
+  @apply hidden;
+}
+
+.antd-modal-body {
+  @apply flex flex-col;
+  word-wrap: break-word;
+}
+.ak-modal__body {
+  @apply p-6;
+}
+
+.antd-modal-open {
+  @apply overflow-hidden;
+}
+
+.antd-modal-centered {
+  @apply text-center before:inline-block before:w-0 before:h-full before:align-middle before:content-[""];
+}
+
+.antd-modal-centered .antd-modal {
+  @apply align-middle inline-block pb-0 text-left top-0;
+}
+
+@media (max-width: 767px) {
+  .antd-modal {
+    @apply max-w-[calc(100vw_-_16px)] mx-auto my-2;
+  }
+  .antd-modal-centered .antd-modal {
+    @apply flex-1;
+  }
+}
+
+.ak-modal {
+  @apply font-euclid;
+
+  &--no-space {
+    .ak-modal__body {
+      @apply p-0;
+    }
+  }
+  &__header {
+    @apply flex justify-between;
+    &__top {
+      @apply flex items-start justify-between px-6 py-3 border-b border-gray-100;
+    }
+    &--center {
+      @apply justify-center;
+    }
+    &--right {
+      @apply justify-end pb-3;
+    }
+    &__title {
+      @apply text-center text-gray-900;
+    }
+    &__close.ma-button.ma-regular-button.color-dark {
+      @apply bg-gray-100 text-gray-900 w-[24px] h-[24px] rounded-full;
+      &:active {
+        &::before {
+          @apply border-0;
+        }
+      }
+    }
+  }
+
+  &__description {
+    @apply text-center text-gray-500;
+  }
+
+  &__header-icon {
+    @apply flex items-center justify-center mx-auto rounded-full mb-6;
+
+    .ma-icon {
+      @apply h-16 w-16;
+    }
+
+    &--info {
+      @apply text-primary-dark-blue;
+    }
+
+    &--error {
+      @apply text-red-500;
+    }
+
+    &--success {
+      @apply text-green-500;
+    }
+
+    &--confirm,
+    &--warning {
+      @apply text-primary-orange;
+    }
+  }
+
+  .ak-modal__footer {
+    @apply flex gap-3 items-center justify-center text-center px-6 py-3 border-t border-gray-100;
+  }
+}