@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/lib/input-number/style/index.less

@@ -1,160 +1,160 @@
-@import './token.less';
-@import '../../input/style/token.less';
-
-@input-prefix-cls: ~'@{prefix}-input';
-@input-number-prefix-cls: ~'@{prefix}-input-number';
-
-.@{input-number-prefix-cls} {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: @input-number-border-radius;
-
-  .transition() {
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-  }
-
-  &-step-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0;
-    color: @input-number-step-button-color;
-    background-color: @input-number-step-button-color-bg_default;
-    cursor: pointer;
-    user-select: none;
-    .transition();
-
-    &:hover {
-      background-color: @input-number-step-button-color-bg_default_hover;
-      border-color: $background-color;
-    }
-
-    &:active {
-      background-color: @input-number-step-button-color-bg_default_active;
-      border-color: $background-color;
-    }
-
-    &:disabled {
-      color: @input-number-step-button-color_disabled;
-      background-color: @input-number-step-button-color-bg_disabled;
-      cursor: not-allowed;
-
-      &:hover,
-      &:active {
-        background-color: @input-number-step-button-color-bg_disabled_hover;
-        border-color: @input-number-step-button-color-border;
-      }
-    }
-  }
-
-  .@{input-prefix-cls}-wrapper {
-    position: relative;
-  }
-
-  &-prefix,
-  &-suffix {
-    .transition();
-  }
-
-  // embed mode
-  &-mode-embed {
-    .@{input-number-prefix-cls}-step {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      bottom: 4px;
-      width: 18px;
-      overflow: hidden;
-      border-radius: @input-number-step-layer-border-radius;
-      opacity: 0;
-      .transition();
-
-      .@{input-number-prefix-cls}-step-button {
-        width: 100%;
-        height: 50%;
-        font-size: 10px;
-        border: none;
-        border-color: @input-number-step-button-color-border;
-      }
-    }
-
-    .@{input-prefix-cls}-suffix {
-      justify-content: flex-end;
-      min-width: 6px;
-    }
-
-    .@{input-prefix-cls}-suffix-has-feedback {
-      min-width: 32px;
-
-      .@{input-number-prefix-cls}-step {
-        right: 30px;
-      }
-    }
-
-    &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
-      &:hover,
-      &:focus-within {
-        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
-        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
-          padding-left: @spacing-2;
-        }
-
-        & .@{input-number-prefix-cls}-step {
-          opacity: 1;
-        }
-
-        & .@{input-number-prefix-cls}-suffix {
-          opacity: 0;
-          pointer-events: none;
-        }
-      }
-    }
-
-    // 修正 InputNumber 未激活 hover 时 StepButton 的 hover 背景色
-    &.@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-focus) {
-      .@{input-number-prefix-cls}-step-button:not(.@{input-number-prefix-cls}-step-button-disabled):hover {
-        background-color: @input-number-step-button-color-bg_default_active;
-      }
-    }
-  }
-
-  // button mode
-  &-mode-button {
-    .@{input-prefix-cls} {
-      &-prepend,
-      &-append {
-        padding: 0;
-        border: none;
-      }
-
-      &-prepend .@{input-number-prefix-cls}-step-button {
-        border-right: @input-border-addon-separator-width solid transparent;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-
-        &:not(&:active) {
-          border-right-color: @input-number-step-button-color-border;
-        }
-      }
-
-      &-append .@{input-number-prefix-cls}-step-button {
-        border-left: @input-border-addon-separator-width solid transparent;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-
-        &:not(&:active) {
-          border-left-color: @input-number-step-button-color-border;
-        }
-      }
-    }
-  }
-
-  &-readonly {
-    .@{input-number-prefix-cls}-step-button {
-      color: @input-number-step-button-color_disabled;
-      pointer-events: none;
-    }
-  }
-}
+@import './token.less';
+@import '../../input/style/token.less';
+
+@input-prefix-cls: ~'@{prefix}-input';
+@input-number-prefix-cls: ~'@{prefix}-input-number';
+
+.@{input-number-prefix-cls} {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: @input-number-border-radius;
+
+  .transition() {
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+  }
+
+  &-step-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0;
+    color: @input-number-step-button-color;
+    background-color: @input-number-step-button-color-bg_default;
+    cursor: pointer;
+    user-select: none;
+    .transition();
+
+    &:hover {
+      background-color: @input-number-step-button-color-bg_default_hover;
+      border-color: $background-color;
+    }
+
+    &:active {
+      background-color: @input-number-step-button-color-bg_default_active;
+      border-color: $background-color;
+    }
+
+    &:disabled {
+      color: @input-number-step-button-color_disabled;
+      background-color: @input-number-step-button-color-bg_disabled;
+      cursor: not-allowed;
+
+      &:hover,
+      &:active {
+        background-color: @input-number-step-button-color-bg_disabled_hover;
+        border-color: @input-number-step-button-color-border;
+      }
+    }
+  }
+
+  .@{input-prefix-cls}-wrapper {
+    position: relative;
+  }
+
+  &-prefix,
+  &-suffix {
+    .transition();
+  }
+
+  // embed mode
+  &-mode-embed {
+    .@{input-number-prefix-cls}-step {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      width: 18px;
+      overflow: hidden;
+      border-radius: @input-number-step-layer-border-radius;
+      opacity: 0;
+      .transition();
+
+      .@{input-number-prefix-cls}-step-button {
+        width: 100%;
+        height: 50%;
+        font-size: 10px;
+        border: none;
+        border-color: @input-number-step-button-color-border;
+      }
+    }
+
+    .@{input-prefix-cls}-suffix {
+      justify-content: flex-end;
+      min-width: 6px;
+    }
+
+    .@{input-prefix-cls}-suffix-has-feedback {
+      min-width: 32px;
+
+      .@{input-number-prefix-cls}-step {
+        right: 30px;
+      }
+    }
+
+    &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
+      &:hover,
+      &:focus-within {
+        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
+        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
+          padding-left: @spacing-2;
+        }
+
+        & .@{input-number-prefix-cls}-step {
+          opacity: 1;
+        }
+
+        & .@{input-number-prefix-cls}-suffix {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+    }
+
+    // 修正 InputNumber 未激活 hover 时 StepButton 的 hover 背景色
+    &.@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-focus) {
+      .@{input-number-prefix-cls}-step-button:not(.@{input-number-prefix-cls}-step-button-disabled):hover {
+        background-color: @input-number-step-button-color-bg_default_active;
+      }
+    }
+  }
+
+  // button mode
+  &-mode-button {
+    .@{input-prefix-cls} {
+      &-prepend,
+      &-append {
+        padding: 0;
+        border: none;
+      }
+
+      &-prepend .@{input-number-prefix-cls}-step-button {
+        border-right: @input-border-addon-separator-width solid transparent;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:not(&:active) {
+          border-right-color: @input-number-step-button-color-border;
+        }
+      }
+
+      &-append .@{input-number-prefix-cls}-step-button {
+        border-left: @input-border-addon-separator-width solid transparent;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(&:active) {
+          border-left-color: @input-number-step-button-color-border;
+        }
+      }
+    }
+  }
+
+  &-readonly {
+    .@{input-number-prefix-cls}-step-button {
+      color: @input-number-step-button-color_disabled;
+      pointer-events: none;
+    }
+  }
+}

package/lib/input-number/style/token.less

@@ -1,19 +1,19 @@
-@import '../../style/theme/index.less';
-
-@input-number-border-radius: @radius-small;
-@input-number-step-layer-border-radius: 1px;
-
-@input-number-size-mini-step-button-width: @size-mini;
-@input-number-size-small-step-button-width: @size-small;
-@input-number-size-default-step-button-width: @size-default;
-@input-number-size-large-step-button-width: @size-large;
-
-@input-number-step-button-color: var(~'@{arco-cssvars-prefix}-color-text-2');
-@input-number-step-button-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@input-number-step-button-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-number-step-button-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@input-number-step-button-color-bg_default_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
-@input-number-step-button-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-number-step-button-color-bg_disabled_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-number-step-button-color-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@import '../../style/theme/index.less';
+
+@input-number-border-radius: @radius-small;
+@input-number-step-layer-border-radius: 1px;
+
+@input-number-size-mini-step-button-width: @size-mini;
+@input-number-size-small-step-button-width: @size-small;
+@input-number-size-default-step-button-width: @size-default;
+@input-number-size-large-step-button-width: @size-large;
+
+@input-number-step-button-color: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-number-step-button-color_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@input-number-step-button-color-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@input-number-step-button-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-number-step-button-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-number-step-button-color-bg_default_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
+@input-number-step-button-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-number-step-button-color-bg_disabled_hover: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-number-step-button-color-bg_disabled_active: var(~'@{arco-cssvars-prefix}-color-fill-2');

package/lib/input-tag/style/index.less

@@ -1,40 +1,40 @@
-@import './input-tag.less';
-
-@input-tag-prefix-cls: ~'@{prefix}-input-tag';
-
-.@{input-tag-prefix-cls} {
-  .input-tag-style(@input-tag-prefix-cls);
-}
-
-.input-tag-zoom-enter-from {
-  transform: scale(0.5, 0.5);
-  opacity: 0;
-}
-
-.input-tag-zoom-enter-to {
-  transform: scale(1, 1);
-  opacity: 1;
-}
-
-.input-tag-zoom-enter-active {
-  transition: all @transition-duration-3 @transition-timing-function-standard;
-}
-
-.input-tag-zoom-leave-from {
-  transform: scale(1, 1);
-  opacity: 1;
-}
-
-.input-tag-zoom-leave-to {
-  transform: scale(0.5, 0.5);
-  opacity: 0;
-}
-
-.input-tag-zoom-leave-active {
-  position: absolute;
-  transition: all @transition-duration-3 @transition-timing-function-overshoot;
-}
-
-.input-tag-zoom-move {
-  transition: all @transition-duration-3 @transition-timing-function-overshoot;
-}
+@import './input-tag.less';
+
+@input-tag-prefix-cls: ~'@{prefix}-input-tag';
+
+.@{input-tag-prefix-cls} {
+  .input-tag-style(@input-tag-prefix-cls);
+}
+
+.input-tag-zoom-enter-from {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.input-tag-zoom-enter-to {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.input-tag-zoom-enter-active {
+  transition: all @transition-duration-3 @transition-timing-function-standard;
+}
+
+.input-tag-zoom-leave-from {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.input-tag-zoom-leave-to {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.input-tag-zoom-leave-active {
+  position: absolute;
+  transition: all @transition-duration-3 @transition-timing-function-overshoot;
+}
+
+.input-tag-zoom-move {
+  transition: all @transition-duration-3 @transition-timing-function-overshoot;
+}