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

package/src/components/input-number/assets/styles.scss

@@ -0,0 +1,622 @@
+$color_1: rgba(0, 0, 0, 0.85);
+$color_2: rgba(0, 0, 0, 0.25);
+$color_3: rgba(0, 0, 0, 0.45);
+.ak-input-number {
+  @apply bg-white rounded-md font-euclid w-[120px];
+  .antd-input-number-handler-wrap {
+    @apply rounded-md ;
+  }
+  &--disabled {
+    @apply text-gray-400 bg-gray-200 border-gray-300 shadow-none cursor-not-allowed opacity-100;
+    &:hover {
+      @apply border-gray-300 border-r #{!important};
+    }
+    input {
+      @apply cursor-not-allowed;
+    }
+    .antd-input-number-handler-wrap {
+      @apply hidden;
+    }
+  }
+  &--x-small {
+    @apply w-[120px] h-6;
+    .antd-input-number-input-wrap {
+      input {
+        @apply text-xs w-[calc(100%_-_10px)] translate-y-[-5px] h-6 p-0 py-1 rounded-none ;
+      }
+    }
+    &:hover {
+      @apply border-primary-jordy-blue;
+    }
+    .ma-select {
+      @apply h-3;
+      .antd-select-open {
+        &::before {
+          @apply hidden;
+        }
+      }
+
+    }
+  }
+  &--small {
+    @apply w-[120px]  h-8;
+    .antd-input-number-input-wrap {
+      input {
+        @apply text-sm p-0  w-[calc(100%_-_10px)] h-6 py-1 rounded-none;
+      }
+    }
+    &:hover {
+      @apply border-primary-jordy-blue;
+    }
+  }
+  &--medium {
+    @apply w-[120px]  h-10 ;
+    .antd-input-number-input-wrap {
+      input {
+        @apply text-sm p-0  w-[calc(100%_-_10px)] h-6 pt-1 rounded-none;
+      }
+    }
+    &:hover {
+      @apply border-primary-jordy-blue;
+    }
+  }
+  &--large {
+    @apply w-[120px]  h-12;
+    .antd-input-number-input-wrap {
+      input {
+        @apply text-sm p-0  w-[calc(100%_-_10px)] h-8 pt-1 rounded-none;
+      }
+    }
+    &:hover {
+      @apply border-primary-jordy-blue;
+    }
+  }
+  &--before {
+    .antd-input-number-group-addon {
+      @apply rounded-l-md bg-gray-25;
+      span {
+        @apply font-euclid text-xs font-medium text-gray-500;
+      }
+    }
+    .ak-input-number--x-small {
+      @apply w-[184px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-xs  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--small {
+      @apply w-[180px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--medium {
+      @apply w-[176px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--large {
+      @apply w-[172px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+  }
+  &--after {
+    .antd-input-number-group-addon {
+      @apply rounded-r-md bg-gray-25;
+      span {
+        @apply font-euclid text-xs font-medium text-gray-500;
+      }
+    }
+    .ak-input-number--x-small {
+      @apply w-[184px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-xs  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--small {
+      @apply w-[180px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--medium {
+      @apply w-[176px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--large {
+      @apply w-[172px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+  }
+  &--before-list {
+    .antd-input-number-group-addon {
+      @apply rounded-l-md bg-gray-25;
+      span {
+        @apply font-euclid text-xs font-medium text-gray-500;
+      }
+    }
+    .ak-input-number--x-small {
+      @apply w-[184px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--small {
+      @apply w-[180px] rounded-l-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--medium {
+      @apply w-[176px] rounded-l-none;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--large {
+      @apply w-[172px] rounded-l-none;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+  }
+  &--after-list {
+    .antd-input-number-group-addon {
+      @apply rounded-r-md bg-gray-25;
+      span {
+        @apply font-euclid text-xs font-medium text-gray-500;
+      }
+    }
+    .ak-input-number--x-small {
+      @apply w-[184px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--small {
+      @apply w-[180px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--medium {
+      @apply w-[176px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+    .ak-input-number--large {
+      @apply w-[172px] rounded-r-none ;
+      .antd-input-number-input-wrap {
+        input {
+          @apply text-sm  w-[calc(100%_-_10px)] rounded-none;
+        }
+      }
+    }
+  }
+}
+
+.antd-input-number-group-wrapper {
+  @apply inline-block text-start align-top;
+}
+.antd-input-number {
+  @apply rounded-md box-border relative min-w-0 text-[$color_1] leading-[1.5715] transition-all duration-[0.3s] inline-block border m-0 px-[11px] py-1 p-0 border-solid border-gray-300;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  &::-moz-placeholder {
+    @apply opacity-100;
+  }
+  &::placeholder {
+    @apply text-gray-400 select-none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  &:-moz-placeholder-shown {
+    @apply text-ellipsis;
+  }
+  &:placeholder-shown {
+    @apply text-ellipsis;
+  }
+  &:hover {
+    @apply border-r;
+    .antd-input-number-handler-wrap {
+      @apply opacity-100;
+      .antd-input-number-handler-up-inner {
+        background: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12.5L10 7.5L5 12.5" stroke="%2392BAFB" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+      }
+      .antd-input-number-handler-down-inner {
+        background: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="%2392BAFB" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+      }
+    }
+  }
+  &:focus {
+    @apply border-primary-jordy-blue;
+  }
+}
+.antd-input-number-focused {
+  @apply border-primary-jordy-blue border-r;
+  outline: 0;
+  .antd-input-number-handler-wrap {
+    @apply opacity-100;
+  }
+}
+textarea.antd-input-number {
+  @apply max-w-full h-auto min-h-[32px] leading-[1.5715] align-bottom transition-all duration-[0.3s,height] delay-[0s];
+}
+.antd-input-number-group {
+  @apply box-border text-[$color_1] text-sm leading-[1.5715] relative table w-full border-spacing-0 m-0 p-0 border-separate;
+  font-variant: tabular-nums;
+  list-style: none;
+  font-feature-settings: "tnum";
+  > [class*="col-"] {
+    @apply pr-2;
+    &:last-child {
+      @apply pr-0;
+    }
+  }
+  > .antd-input-number {
+    @apply table-cell;
+    &:not(:first-child) {
+      &:not(:last-child) {
+        @apply rounded-none;
+      }
+    }
+    &:first-child {
+      @apply rounded-tr-none rounded-br-none;
+    }
+    &:last-child {
+      @apply rounded-tl-none rounded-bl-none;
+    }
+  }
+  .antd-input-number {
+    @apply float-left mb-0;
+    text-align: inherit;
+    &:focus {
+      @apply z-[1] border-r;
+    }
+    &:hover {
+      @apply z-[1] border-r;
+    }
+  }
+}
+.antd-input-number-group[class*="col-"] {
+  @apply float-none px-0;
+}
+.antd-input-number-group-addon {
+  @apply table-cell w-px whitespace-nowrap align-middle relative text-[$color_1] font-euclid text-sm text-center bg-primary-purple-25 border transition-all duration-[0.3s] px-[11px] py-0 rounded-sm border-solid border-gray-300;
+  &:not(:first-child) {
+    &:not(:last-child) {
+      @apply rounded-none;
+    }
+  }
+  &:first-child {
+    @apply rounded-tr-none rounded-br-none border-r-0;
+  }
+  &:last-child {
+    @apply rounded-tl-none rounded-bl-none border-l-0;
+  }
+  .ma-select.antd-select-open {
+    &::before {
+      @apply hidden;
+    }
+  }
+  .ma-select {
+    @apply border-none min-h-0 p-0;
+    .antd-select-selector {
+      .antd-select-selection-item {
+        @apply text-[#667085]
+      }
+    }
+  }
+}
+.antd-input-number-group-wrap {
+  @apply table-cell w-px whitespace-nowrap align-middle;
+  &:not(:first-child) {
+    &:not(:last-child) {
+      @apply rounded-none;
+    }
+  }
+  > * {
+    @apply block;
+  }
+}
+.antd-input-search-with-button {
+  .antd-input-number-group {
+    .antd-input-number {
+      &:hover {
+        @apply z-0;
+      }
+    }
+  }
+}
+.antd-input-number-group-lg {
+  .antd-input-number {
+    @apply text-base px-[11px] py-[6.5px];
+  }
+  > .antd-input-number-group-addon {
+    @apply text-base px-[11px] py-[6.5px];
+  }
+}
+.antd-input-number-group-sm {
+  .antd-input-number {
+    @apply px-[7px] py-0;
+  }
+  > .antd-input-number-group-addon {
+    @apply px-[7px] py-0;
+  }
+}
+.antd-input-search {
+  .antd-input-number-group {
+  }
+}
+.antd-input-number-group.antd-input-number-group-compact {
+  @apply block;
+  &::before {
+    @apply table content-[''];
+  }
+  &::after {
+    @apply table clear-both content-[''];
+  }
+  > .antd-input-number {
+    &:not(:first-child) {
+      &:not(:last-child) {
+        @apply border-r;
+        &:hover {
+          @apply z-[1];
+        }
+        &:focus {
+          @apply z-[1];
+        }
+      }
+    }
+  }
+  > * {
+    @apply inline-block float-none align-top rounded-none;
+    &:not(:last-child) {
+      @apply -mr-px border-r;
+    }
+    &:first-child {
+      @apply rounded-tl-sm rounded-bl-sm;
+    }
+    &:last-child {
+      @apply rounded-tr-sm rounded-br-sm border-r;
+    }
+  }
+  .antd-input-number {
+    @apply float-none;
+  }
+  > .antd-input-group-wrapper {
+    .antd-input {
+      @apply rounded-none border-r;
+      &:hover {
+        @apply z-[1];
+      }
+      &:focus {
+        @apply z-[1];
+      }
+    }
+  }
+  .antd-input-group-wrapper {
+    + {
+      .antd-input-group-wrapper {
+        @apply -ml-px;
+        .antd-input-affix-wrapper {
+          @apply rounded-none;
+        }
+      }
+    }
+    &:not(:last-child).antd-input-search {
+      > .antd-input-group {
+        > .antd-input-group-addon {
+          > .antd-input-search-button {
+            @apply rounded-none;
+          }
+        }
+        > .antd-input {
+          @apply rounded-[2px_0_0_2px];
+        }
+      }
+    }
+  }
+}
+.antd-input-number-group.antd-input-number-group-compact-addon {
+  &:not(:first-child) {
+    &:not(:last-child) {
+      @apply border-r;
+      &:hover {
+        @apply z-[1];
+      }
+      &:focus {
+        @apply z-[1];
+      }
+    }
+  }
+}
+.antd-input-number-group.antd-input-number-group-compact-wrap {
+  &:not(:first-child) {
+    &:not(:last-child) {
+      @apply border-r;
+      &:hover {
+        @apply z-[1];
+      }
+      &:focus {
+        @apply z-[1];
+      }
+    }
+  }
+}
+.antd-input-number-handler {
+  @apply relative block w-full h-3/6 overflow-hidden text-[$color_3] font-[bold] leading-[0] text-center transition-all duration-[0.1s] ease-linear border-l-[$color_7] border-l border-solid;
+  &:active {
+      @apply bg-white;
+  }
+  &:hover {
+    .antd-input-number-handler-up-inner {
+      @apply text-primary-jordy-blue;
+    }
+    .antd-input-number-handler-down-inner {
+      @apply text-primary-jordy-blue;
+    }
+  }
+}
+.antd-input-number-handler-up-inner {
+  @apply inline-block not-italic leading-[0] text-center normal-case absolute w-3 h-3 text-[$color_3] leading-3 transition-all duration-[0.1s] ease-linear select-none mt-[-5px] right-1 top-2/4 bg-red-500;
+  vertical-align: -0.125em;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  background: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12.5L10 7.5L5 12.5" stroke="%2398A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  > * {
+    @apply leading-none;
+  }
+  svg {
+    @apply hidden;
+  }
+  &::before {
+    @apply hidden;
+  }
+  .antd-input-number-handler-up-inner-icon {
+    @apply block;
+  }
+  .antd-input-number-handler-down-inner-icon {
+    @apply block;
+  }
+}
+.antd-input-number-handler-down-inner {
+  @apply inline-block not-italic leading-[0] text-center normal-case absolute w-3 h-3 text-[$color_3]  transition-all duration-[0.1s] ease-linear select-none  -translate-y-2/4 right-1 top-2/4;
+  vertical-align: -0.125em;
+  text-rendering: optimizelegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  background: url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="%2398A2B3" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+  > * {
+    @apply leading-none;
+  }
+  svg {
+    @apply hidden;
+  }
+  &::before {
+    @apply hidden;
+  }
+  .antd-input-number-handler-up-inner-icon {
+    @apply block;
+  }
+  .antd-input-number-handler-down-inner-icon {
+    @apply block;
+  }
+}
+.antd-input-number-readonly {
+  .antd-input-number-handler-wrap {
+    @apply hidden;
+  }
+}
+.antd-input-number-input {
+  @apply w-full h-[30px] text-left bg-[transparent] transition-all duration-[0.3s] ease-linear px-[11px] py-0 rounded-sm border-0;
+  outline: 0;
+  -webkit-appearance: textfield !important;
+  -moz-appearance: textfield !important;
+  appearance: textfield !important;
+  &::-moz-placeholder {
+    @apply opacity-100;
+  }
+  &::placeholder {
+    @apply text-gray-400 select-none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+  &:-moz-placeholder-shown {
+    text-overflow: ellipsis;
+  }
+  &:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+}
+.antd-input-number-input[type="number"] {
+  &::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  &::-webkit-outer-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+.antd-input-number-handler-wrap {
+  @apply absolute w-[22px] h-full opacity-0 transition-opacity duration-[0.24s] ease-linear delay-[0.1s] rounded-[0_2px_2px_0] right-0 top-0 bg-white;
+  .antd-input-number-handler {
+    .antd-input-number-handler-up-inner {
+      @apply flex items-center justify-center min-w-[auto] text-[7px] mr-0;
+    }
+    .antd-input-number-handler-down-inner {
+      @apply flex items-center justify-center min-w-[auto] text-[7px] mr-0;
+    }
+  }
+  &:hover {
+    .antd-input-number-handler {
+      height: 40%;
+    }
+  }
+}
+.antd-input-number-handler-up {
+  @apply cursor-pointer rounded-tr-sm;
+  &:hover {
+    height: 60% !important;
+  }
+}
+.antd-input-number-handler-down {
+  @apply cursor-pointer rounded-br-sm border-t-gray-300 border-t border-solid top-0;
+  &:hover {
+    height: 60% !important;
+  }
+}
+
+.antd-input-number-out-of-range {
+  input {
+    @apply text-red-500;
+  }
+}
+