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

package/src/components/date-picker/assets/styles.scss

@@ -0,0 +1,872 @@
+@import "./animations.scss";
+
+.ma-picker {
+  @apply bg-white border border-gray-300 rounded-lg p-1.5 pl-2 font-euclid relative inline-flex items-center cursor-pointer transition-colors duration-300;
+
+  &:hover {
+    @apply border-primary-dark-blue bg-blue-25;
+    .antd-picker-clear {
+      @apply opacity-100;
+    }
+    .antd-picker-input {
+      input {
+        &::placeholder {
+          @apply font-medium;
+        }
+      }
+    }
+  }
+  &.antd-picker-focused {
+    @apply border-primary-dark-blue bg-white;
+    .antd-picker-input {
+      input {
+        @apply font-medium;
+        &::placeholder {
+          @apply text-gray-900 font-medium;
+        }
+      }
+    }
+  }
+  &--small {
+    @apply h-8;
+    &.ma-default-format {
+      .antd-picker-input {
+        input {
+          @apply w-[90px] min-w-0;
+        }
+      }
+    }
+  }
+  &--medium {
+    @apply h-9 px-2.5;
+  }
+  &--large {
+    @apply h-10 px-3;
+  }
+  &--opened {
+    &::before {
+      @apply content-[''] w-[calc(100%_+_12px)] h-[calc(100%_+_12px)] border-2 border-gray-100 rounded-xl absolute -left-1.5 -top-1.5;
+    }
+  }
+  &--filled {
+    .antd-picker-input {
+      input {
+        @apply font-medium;
+      }
+      .antd-picker-suffix {
+        .ma-suffix-icon {
+          @apply text-gray-500;
+        }
+        .ma-prefix-icon {
+          @apply text-gray-400;
+        }
+      }
+    }
+  }
+
+  .antd-picker-input {
+    @apply relative inline-flex items-center w-full min-h-[1.25rem];
+    input {
+      @apply bg-transparent relative w-full min-w-[102px] text-gray-900 outline-none text-xs leading-5 pointer-events-none;
+      &::placeholder {
+        @apply text-xs text-gray-500;
+      }
+    }
+    .antd-picker-suffix {
+      @apply pl-2;
+      .ma-suffix-icon {
+        @apply w-4 h-4 text-gray-500;
+      }
+      .ma-prefix-icon {
+        @apply absolute left-0 top-0 text-gray-500 w-5 h-5;
+      }
+    }
+  }
+
+  .antd-picker-clear {
+    @apply absolute top-1/2 -right-1 cursor-pointer text-gray-400 -mt-1.5 w-5 h-5 p-0;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition:
+      opacity 0.3s,
+      color 0.3s;
+    svg {
+      @apply bg-white;
+    }
+  }
+
+  // Range Picker
+  &.antd-picker-range {
+    @apply pr-2;
+    .antd-picker-input {
+      @apply pl-0;
+      input {
+        @apply min-w-[95px];
+        &::placeholder {
+          @apply font-normal text-gray-500;
+        }
+      }
+    }
+    .antd-picker-range-separator {
+      @apply px-2;
+      .ma-separator-icon {
+        @apply w-4 h-4 text-gray-500;
+      }
+    }
+    .antd-picker-suffix {
+      @apply pl-1;
+      .ma-suffix-icon {
+        @apply w-5 h-5 text-gray-400;
+      }
+    }
+    .ma-prefix-icon {
+      @apply absolute left-2 w-5 h-5 text-gray-500;
+    }
+    .antd-picker-active-bar {
+      @apply hidden;
+    }
+    .antd-picker-clear {
+      @apply mr-4 mt-0 pt-0.5 pl-0.5 bg-white;
+      > span {
+        @apply absolute;
+      }
+    }
+
+    .antd-picker-suffix {
+      .ma-suffix-icon {
+        &.up {
+          @apply text-gray-900;
+        }
+      }
+    }
+
+    &:hover {
+      @apply bg-blue-25 border-primary-dark-blue;
+      .antd-picker-input {
+        input {
+          &::placeholder {
+            @apply font-medium;
+          }
+        }
+      }
+    }
+    &.antd-picker-focused {
+      @apply bg-white;
+      .antd-picker-input {
+        input {
+          @apply font-medium;
+          &::placeholder {
+            @apply font-medium text-gray-900;
+          }
+        }
+      }
+    }
+    &.ma-picker--small {
+      &.ma-default-format {
+        .antd-picker-input {
+          input {
+            @apply w-[78px] min-w-0;
+          }
+        }
+      }
+    }
+    &.ma-picker--medium {
+      &.ma-default-format {
+        .antd-picker-input {
+          input {
+            @apply w-[82px] min-w-0;
+          }
+        }
+      }
+    }
+    &.ma-picker--large {
+      &.ma-default-format {
+        .antd-picker-input {
+          input {
+            @apply w-[86px] min-w-0;
+          }
+        }
+      }
+    }
+
+    &.ma-picker--has-prefix {
+      @apply pl-[34px];
+    }
+  }
+
+  &.ma-picker--opened,
+  &.ma-picker--filled {
+    .antd-picker-suffix {
+      .ma-suffix-icon {
+        .up {
+          @apply text-gray-900;
+        }
+      }
+    }
+    .antd-picker-range-separator {
+      .ma-separator-icon {
+        @apply text-gray-900;
+      }
+    }
+  }
+
+  &.ma-picker--inline {
+    @apply border-none bg-transparent;
+    &.antd-picker-focused {
+      @apply bg-transparent;
+    }
+    .antd-picker-input {
+      input,
+      input::placeholder {
+        @apply text-gray-600 font-medium transition-colors duration-300 text-sm;
+      }
+      .antd-picker-suffix {
+        .ma-icon {
+          @apply transition-colors duration-300;
+        }
+        .ma-prefix-icon {
+          @apply text-gray-900;
+        }
+        .ma-suffix-icon {
+          @apply text-gray-400;
+        }
+      }
+    }
+    &.ma-picker--small {
+      &.ma-default-format {
+        .antd-picker-input {
+          input {
+            @apply w-[90px];
+          }
+        }
+      }
+    }
+    &.ma-picker--medium,
+    &.ma-picker--large {
+      &.ma-default-format {
+        .antd-picker-input {
+          input {
+            @apply w-[98px];
+          }
+        }
+      }
+    }
+    &::before {
+      @apply hidden;
+    }
+    &:hover {
+      @apply bg-transparent;
+      .antd-picker-input {
+        input,
+        input::placeholder {
+          @apply text-gray-500;
+        }
+        .antd-picker-suffix {
+          .ma-icon {
+            @apply text-gray-500;
+          }
+        }
+      }
+    }
+    &.antd-picker-focused {
+      .antd-picker-input {
+        .antd-picker-suffix {
+          .ma-prefix-icon {
+            @apply text-gray-500;
+          }
+        }
+      }
+    }
+  }
+
+  &--has-prefix {
+    .antd-picker-input {
+      @apply pl-[26px];
+    }
+  }
+
+  &.antd-picker-disabled {
+    @apply bg-gray-50 cursor-not-allowed border-gray-200;
+    .antd-picker-input {
+      input {
+        @apply cursor-not-allowed text-gray-300;
+        &::placeholder {
+          @apply text-gray-300;
+        }
+      }
+    }
+    &:hover {
+      @apply bg-gray-50 border-gray-200;
+      .antd-picker-input {
+        input::placeholder {
+          @apply text-gray-300;
+        }
+      }
+    }
+    .antd-picker-suffix {
+      .ma-suffix-icon,
+      .ma-prefix-icon {
+        @apply text-gray-300;
+      }
+    }
+    &.antd-picker-range {
+      .antd-picker-suffix {
+        .ma-suffix-icon {
+          @apply text-gray-300;
+        }
+      }
+    }
+    .antd-picker-range-separator {
+      .ma-separator-icon {
+        @apply text-gray-300;
+      }
+    }
+    &.ma-picker--inline,
+    &.ma-picker--inline:hover {
+      @apply bg-transparent;
+      .antd-picker-input {
+        .antd-picker-suffix {
+          > .ma-icon {
+            @apply text-gray-300;
+          }
+        }
+      }
+    }
+  }
+}
+
+//Dropdown
+.ma-picker-dropdown {
+  @apply box-border m-0 p-0 absolute z-[1050];
+
+  &.antd-picker-dropdown-hidden {
+    @apply hidden;
+  }
+
+  .antd-picker-panel-container {
+    @apply overflow-hidden rounded-xl align-top bg-white relative z-10;
+    box-shadow:
+      0px 13px 28px 0px rgba(0, 0, 0, 0.1),
+      0px 50px 50px 0px rgba(0, 0, 0, 0.09),
+      0px 113px 68px 0px rgba(0, 0, 0, 0.05),
+      0px 201px 80px 0px rgba(0, 0, 0, 0.01),
+      0px 314px 88px 0px rgba(0, 0, 0, 0);
+    .antd-picker-panels {
+      @apply inline-flex flex-nowrap;
+    }
+
+    .antd-picker-panel {
+      @apply align-top bg-transparent inline-flex flex-col text-center w-full;
+
+      .antd-picker-content,
+      table {
+        @apply text-center;
+      }
+
+      .antd-picker-header {
+        @apply flex items-center px-4 h-10 border-b-gray-100 border-b;
+
+        > * {
+          @apply flex-none;
+        }
+
+        .antd-picker-header-view {
+          @apply flex-[auto] text-gray-900 text-sm font-medium gap-0.5;
+          > * {
+            @apply px-1;
+          }
+        }
+        .antd-picker-header-super-prev-btn {
+          @apply mr-2;
+        }
+        .antd-picker-header-super-next-btn {
+          @apply ml-2;
+        }
+      }
+
+      .antd-picker-body {
+        @apply py-2 px-4;
+        .antd-picker-content {
+          @apply table-fixed border-spacing-x-0 border-spacing-y-1 border-separate min-w-full;
+          th,
+          td {
+            @apply relative min-w-[1.5rem];
+          }
+          th {
+            @apply h-8 w-9 text-sm text-gray-500 font-normal;
+          }
+          tbody {
+            tr {
+              &:not(:last-child) {
+                @apply border-b-4 border-transparent;
+              }
+              &:not(.antd-picker-week-panel-row) {
+                td {
+                  &.antd-picker-cell-selected,
+                  &.antd-picker-cell-range-start,
+                  &.antd-picker-cell-range-end {
+                    &.antd-picker-cell-in-view {
+                      .antd-picker-cell-inner {
+                        @apply text-white bg-primary-dark;
+                      }
+                    }
+                  }
+                  &:hover {
+                    &:not(.antd-picker-cell-selected) {
+                      .antd-picker-cell-inner {
+                        @apply border-gray-300;
+                      }
+                    }
+                  }
+                }
+              }
+              &.antd-picker-week-panel-row {
+                &:hover {
+                  td {
+                    @apply border-b border-t border-gray-200;
+                  }
+                  @apply border-gray-200;
+                }
+                td {
+                  @apply transition-colors duration-300 border-b border-t border-transparent;
+                  &:first-child {
+                    @apply border-l rounded-tl-lg rounded-bl-lg;
+                  }
+                  &:last-child {
+                    @apply border-r rounded-tr-lg rounded-br-lg;
+                  }
+                }
+                &-selected {
+                  :not(:first-of-type) {
+                    &:not(:nth-of-type(2)) {
+                      &:not(:last-of-type) {
+                        @apply bg-gray-100;
+                      }
+                    }
+                  }
+                  :nth-child(2) {
+                    &::before {
+                      @apply bg-gray-100 w-1/2 h-full left-1/2;
+                    }
+                  }
+                  :last-of-type {
+                    &::before {
+                      @apply bg-gray-100 w-1/2 h-full;
+                    }
+                  }
+
+                  td {
+                    .antd-picker-cell-inner {
+                      @apply bg-transparent text-primary-dark;
+                    }
+                    &:nth-of-type(2),
+                    &:last-of-type {
+                      &.antd-picker-cell {
+                        .antd-picker-cell-inner {
+                          @apply bg-primary-dark text-white;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+              td {
+                @apply text-gray-400 text-sm font-normal w-8 h-8 p-0;
+                &.antd-picker-cell {
+                  @apply relative cursor-pointer transition-all duration-200;
+                  &::before {
+                    @apply content-[''] absolute top-1/2 left-0 right-0 z-[1] h-6 transition-all duration-200;
+                    transform: translateY(-50%);
+                  }
+                  .antd-picker-cell-inner {
+                    @apply relative z-[1] inline-flex items-center justify-center w-8 h-8 transition-colors duration-200 rounded-full border border-transparent;
+                  }
+                  &.antd-picker-cell-in-view {
+                    .antd-picker-cell-inner {
+                      @apply text-gray-900;
+                    }
+
+                    &.antd-picker-cell-in-range {
+                      @apply relative bg-gray-100;
+                    }
+                    &.antd-picker-cell-range,
+                    &.antd-picker-cell-range-hover {
+                      &-start:not(.antd-picker-cell-range-start-single)::before,
+                      &-end:not(.antd-picker-cell-range-end-single)::before {
+                        @apply bg-gray-100;
+                      }
+                      &-start::before {
+                        @apply left-1/2;
+                      }
+                      &-end::before {
+                        @apply right-1/2;
+                      }
+                    }
+                  }
+
+                  &.antd-picker-cell-disabled {
+                    @apply pointer-events-none;
+                    .antd-picker-cell-inner {
+                      @apply pointer-events-none text-gray-300 bg-transparent border-transparent;
+                    }
+                  }
+
+                  &.antd-picker-cell-range-hover {
+                    @apply bg-gray-100;
+                  }
+                  &.antd-picker-cell-range-start,
+                  &.antd-picker-cell-range-hover-start,
+                  &.antd-picker-cell-range-hover-end,
+                  &.antd-picker-cell-range-end {
+                    @apply bg-transparent;
+                    &.antd-picker-cell-in-view {
+                      &::before {
+                        @apply bg-gray-100 h-full;
+                      }
+                    }
+                  }
+                  &.antd-picker-cell-range-hover-start,
+                  &.antd-picker-cell-range-hover-end {
+                    > .antd-picker-cell-inner {
+                      @apply bg-white;
+                    }
+                  }
+
+                  &.antd-picker-cell-today {
+                    &:not(.antd-picker-cell-selected) {
+                      .antd-picker-cell-inner {
+                        @apply border border-primary-jordy-blue;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .antd-picker-datetime-panel {
+        @apply flex;
+        .antd-picker-time-panel {
+          @apply border-l border-gray-100 transition-opacity duration-300;
+        }
+        .antd-picker-date-panel {
+          @apply transition-opacity duration-300;
+        }
+        .antd-picker-time-panel-column {
+          &::after {
+            @apply h-48;
+          }
+        }
+      }
+      .antd-picker-datetime-panel-active {
+        .antd-picker-date-panel {
+          @apply opacity-30;
+        }
+        .antd-picker-time-panel {
+          @apply opacity-30;
+        }
+        .antd-picker-date-panel-active {
+          @apply opacity-100;
+        }
+        .antd-picker-time-panel-active {
+          @apply opacity-100;
+        }
+      }
+      .antd-picker-time-panel {
+        @apply w-auto min-w-0;
+        .antd-picker-content {
+          @apply flex flex-auto h-56 mt-2;
+        }
+      }
+
+      .antd-picker-time-panel-column {
+        @apply flex flex-col gap-1 py-2 flex-grow flex-shrink-0 w-14 overflow-y-scroll text-left transition-colors duration-300 m-0 p-0 after:block after:h-48 after:content-[''] hover:overflow-y-auto;
+        &::-webkit-scrollbar {
+          @apply w-1.5;
+        }
+        &::-webkit-scrollbar-track {
+          @apply bg-transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+          @apply outline-none rounded-xl bg-gray-200;
+        }
+        &::after {
+          @apply block h-48 content-[''];
+        }
+        &:not(:first-child) {
+          @apply border-l border-gray-300;
+        }
+        &:hover {
+          @apply overflow-auto;
+        }
+        > li {
+          @apply m-0 p-0;
+        }
+        > li.antd-picker-time-panel-cell {
+          @apply flex flex-col justify-center items-center px-1;
+          .antd-picker-time-panel-cell-inner {
+            @apply w-8 h-8 flex items-center justify-center text-primary-dark text-sm cursor-pointer transition-colors duration-300 rounded-full border border-transparent;
+            &:hover {
+              @apply bg-white border-gray-300 border;
+            }
+          }
+          &-selected {
+            .antd-picker-time-panel-cell-inner {
+              @apply bg-primary-dark text-white;
+            }
+            &:hover {
+              .antd-picker-time-panel-cell-inner {
+                @apply bg-primary-dark;
+              }
+            }
+          }
+          &-disabled {
+            .antd-picker-time-panel-cell-inner {
+              @apply text-gray-300 bg-transparent pointer-events-none;
+            }
+          }
+        }
+      }
+
+      .antd-picker-month-panel,
+      .antd-picker-quarter-panel {
+        .antd-picker-body {
+          .antd-picker-content {
+            @apply h-auto;
+            tbody {
+              tr {
+                td {
+                  .antd-picker-cell-inner {
+                    @apply w-10 h-10;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+      .antd-picker-year-panel {
+        .antd-picker-body {
+          .antd-picker-content {
+            @apply h-auto;
+            tbody {
+              tr {
+                td {
+                  .antd-picker-cell-inner {
+                    @apply w-12 h-12;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .antd-picker-decade-panel {
+        .antd-picker-body {
+          .antd-picker-content {
+            tbody {
+              tr {
+                td,
+                td {
+                  .antd-picker-cell-inner {
+                    @apply w-auto h-auto py-2 px-3 text-xs;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .antd-picker-panel-focused {
+    @apply border-red-500;
+  }
+
+  .antd-picker-footer {
+    @apply max-w-[300px];
+  }
+}
+
+.antd-picker-dropdown-range {
+  @apply py-1.5;
+  .antd-picker-footer {
+    @apply max-w-[600px];
+  }
+}
+.antd-picker-dropdown-range-hidden {
+  @apply hidden;
+}
+.antd-picker-dropdown .antd-picker-panel > .antd-picker-time-panel {
+  @apply pt-1;
+}
+.antd-picker-ranges {
+  @apply mb-0 py-1 px-3 overflow-hidden leading-8 text-left list-none;
+}
+.antd-picker-ranges > li {
+  @apply inline-block;
+}
+
+.antd-picker-range-wrapper {
+  @apply flex;
+
+  // Range Picker Icon Slots don't work
+  .antd-picker-header {
+    .antd-picker-header-super-prev-btn,
+    .antd-picker-header-super-next-btn,
+    .antd-picker-header-prev-btn,
+    .antd-picker-header-next-btn {
+      @apply w-6 h-6 text-white;
+      &::before {
+        @apply absolute w-6 h-6 flex items-center justify-center z-10 p-1 text-gray-500 border border-gray-300 rounded-lg text-xs leading-3;
+      }
+      &:hover {
+        &::before {
+          @apply bg-gray-200 border-gray-300;
+        }
+      }
+    }
+    .antd-picker-header-super-prev-btn {
+      &::before {
+        @apply content-['<<'];
+      }
+    }
+    .antd-picker-header-super-next-btn {
+      &::before {
+        @apply content-['>>'];
+      }
+    }
+    .antd-picker-header-prev-btn {
+      &::before {
+        @apply content-['<'];
+      }
+    }
+    .antd-picker-header-next-btn {
+      &::before {
+        @apply content-['>'];
+      }
+    }
+  }
+}
+.antd-picker-range-arrow {
+  @apply hidden;
+}
+
+.antd-picker-decade-panel,
+.antd-picker-year-panel,
+.antd-picker-quarter-panel,
+.antd-picker-month-panel,
+.antd-picker-week-panel,
+.antd-picker-date-panel,
+.antd-picker-time-panel {
+  @apply flex flex-col;
+}
+.antd-picker-week-panel,
+.antd-picker-date-panel,
+.antd-picker-time-panel {
+  @apply w-[300px];
+}
+
+.antd-picker-decade-panel,
+.antd-picker-year-panel,
+.antd-picker-quarter-panel,
+.antd-picker-month-panel {
+  @apply w-[300px];
+}
+
+.antd-picker-decade-panel .antd-picker-content,
+.antd-picker-year-panel .antd-picker-content,
+.antd-picker-quarter-panel .antd-picker-content,
+.antd-picker-month-panel .antd-picker-content {
+  @apply h-[264px];
+}
+
+.antd-picker-quarter-panel .antd-picker-content {
+  @apply h-14;
+}
+
+.antd-picker-footer {
+  @apply w-full flex flex-col-reverse px-4;
+  .antd-picker-ranges {
+    @apply w-full flex gap-3 overflow-auto flex-1 py-3 border-t border-gray-100;
+    &::-webkit-scrollbar {
+      @apply h-2;
+    }
+    &::-webkit-scrollbar-track {
+      @apply bg-transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      @apply outline-none rounded-xl bg-gray-200;
+    }
+    li {
+      @apply bg-gray-200 rounded-full font-medium text-primary-button-dark text-xs py-1 px-3 cursor-pointer flex-none transition-colors;
+      &:hover {
+        @apply bg-primary-button-dark text-white;
+      }
+      &.antd-picker-ok {
+        @apply ml-auto;
+      }
+    }
+  }
+  .antd-picker-footer-extra {
+    @apply w-full;
+    .ma-footer-wrapper {
+      @apply flex items-start py-2 text-black text-xs gap-2 border-t border-gray-100;
+      .ma-button {
+        @apply ml-auto;
+      }
+    }
+  }
+}
+.antd-picker-now {
+  @apply text-left;
+}
+.antd-picker-today-btn {
+  @apply text-gray-900 hover:text-primary-dark active:text-primary-dark-blue;
+}
+.antd-picker-today-btn.antd-picker-today-btn-disabled {
+  @apply text-gray-300 cursor-not-allowed;
+}
+.antd-picker-decade-panel {
+  .antd-picker-cell-inner {
+    @apply px-1;
+  }
+  .antd-picker-cell {
+    &::before {
+      @apply hidden;
+    }
+  }
+}
+
+.ant-picker-range-arrow {
+  @apply absolute z-[1] hidden w-2.5 h-2.5 ml-4 shadow-sm transition-all duration-300;
+}
+.ant-picker-range-arrow::after {
+  @apply absolute top-0 right-0 w-2.5 h-2.5 border-4 border-gray-100 content-[''];
+}
+
+// Dropdown Animations
+.antd-picker-dropdown.antd-slide-up-enter.antd-slide-up-enter-active.antd-picker-dropdown-placement-topLeft,
+.antd-picker-dropdown.antd-slide-up-enter.antd-slide-up-enter-active.antd-picker-dropdown-placement-topRight,
+.antd-picker-dropdown.antd-slide-up-appear.antd-slide-up-appear-active.antd-picker-dropdown-placement-topLeft,
+.antd-picker-dropdown.antd-slide-up-appear.antd-slide-up-appear-active.antd-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownIn;
+}
+.antd-picker-dropdown.antd-slide-up-enter.antd-slide-up-enter-active.antd-picker-dropdown-placement-bottomLeft,
+.antd-picker-dropdown.antd-slide-up-enter.antd-slide-up-enter-active.antd-picker-dropdown-placement-bottomRight,
+.antd-picker-dropdown.antd-slide-up-appear.antd-slide-up-appear-active.antd-picker-dropdown-placement-bottomLeft,
+.antd-picker-dropdown.antd-slide-up-appear.antd-slide-up-appear-active.antd-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpIn;
+}
+.antd-picker-dropdown.antd-slide-up-leave.antd-slide-up-leave-active.antd-picker-dropdown-placement-topLeft,
+.antd-picker-dropdown.antd-slide-up-leave.antd-slide-up-leave-active.antd-picker-dropdown-placement-topRight {
+  animation-name: antSlideDownOut;
+}
+.antd-picker-dropdown.antd-slide-up-leave.antd-slide-up-leave-active.antd-picker-dropdown-placement-bottomLeft,
+.antd-picker-dropdown.antd-slide-up-leave.antd-slide-up-leave-active.antd-picker-dropdown-placement-bottomRight {
+  animation-name: antSlideUpOut;
+}