@julingbase/jly-arco-design 0.0.1 → 0.0.3

package/lib/input/style/size.less

@@ -1,149 +1,149 @@
-@import './token.less';
-
-// 前置后置标签
-.addon(@position, @size-height, @size-font-size) {
-  .item-style() {
-    width: auto;
-    height: 100%;
-    margin-top: -1px;
-    margin-bottom: -1px;
-
-    & when (@position = before) {
-      margin-right: -@input-padding-horizontal;
-      margin-left: -@input-padding-horizontal - 1px;
-    }
-
-    & when (@position = after) {
-      margin-right: -@input-padding-horizontal - 1px;
-      margin-left: -@input-padding-horizontal;
-    }
-  }
-
-  // select,input 的边角和边框
-  .border-radius() {
-    & when (@position = before) {
-      border-color: transparent;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    & when (@position = after) {
-      border-color: transparent;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  .@{prefix}-input {
-    .item-style();
-    .border-radius();
-  }
-
-  // 作为前置/后置标签时，重写一些select的样式
-  .@{prefix}-select {
-    .item-style();
-
-    .@{prefix}-select-view {
-      background-color: inherit;
-      border-color: transparent;
-      border-radius: 0;
-    }
-
-    &.@{prefix}-select-single {
-      .@{prefix}-select-view {
-        height: 100%;
-      }
-    }
-  }
-}
-
-// 不同尺寸的高度
-.size-height {
-  .height (@size-height, @size-font-size) {
-    .get-padding(@size-height, @size-font-size);
-
-    font-size: @size-font-size;
-  }
-
-  &-size-mini {
-    /* prettier-ignore */
-    padding-top: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
-
-    /* prettier-ignore */
-    padding-bottom: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
-    font-size: @input-size-mini-font-size;
-    line-height: 1.667;
-  }
-
-  &-size-small {
-    .height(@input-size-small-height, @input-size-small-font-size);
-  }
-
-  &-size-large {
-    .height(@input-size-large-height, @input-size-large-font-size);
-  }
-}
-
-// 不同尺寸的带有前置后置标签的高度
-.outer-size() {
-  .size-font-size(@size-input-height, @size-font-size, @suffix-icon-size, @addon-icon-size) {
-    .@{input-prefix-cls}-outer {
-      font-size: @size-font-size;
-    }
-
-    .@{input-prefix-cls}-wrapper {
-      .@{input-prefix-cls}-prefix,
-      .@{input-prefix-cls}-suffix {
-        font-size: @size-font-size;
-
-        > svg {
-          font-size: @suffix-icon-size;
-        }
-      }
-    }
-
-    .@{input-prefix-cls}-prepend,
-    .@{input-prefix-cls}-append {
-      font-size: @size-font-size;
-
-      > svg {
-        font-size: @addon-icon-size;
-      }
-    }
-
-    .@{input-prefix-cls}-prepend {
-      .addon(after, @size-input-height, @size-font-size);
-    }
-
-    .@{input-prefix-cls}-append {
-      .addon(before, @size-input-height, @size-font-size);
-    }
-  }
-
-  &&-size-mini {
-    .size-font-size(
-      @input-size-mini-height,
-      @input-size-mini-font-size,
-      @input-size-mini-icon-suffix-size,
-      @input-size-mini-icon-addon-size
-    );
-  }
-
-  &&-size-small {
-    .size-font-size(
-      @input-size-small-height,
-      @input-size-small-font-size,
-      @input-size-small-icon-suffix-size,
-      @input-size-small-icon-addon-size
-    );
-  }
-
-  &&-size-large {
-    .size-font-size(
-      @input-size-large-height,
-      @input-size-large-font-size,
-      @input-size-large-icon-suffix-size,
-      @input-size-large-icon-addon-size
-    );
-  }
-}
+@import './token.less';
+
+// 前置后置标签
+.addon(@position, @size-height, @size-font-size) {
+  .item-style() {
+    width: auto;
+    height: 100%;
+    margin-top: -1px;
+    margin-bottom: -1px;
+
+    & when (@position = before) {
+      margin-right: -@input-padding-horizontal;
+      margin-left: -@input-padding-horizontal - 1px;
+    }
+
+    & when (@position = after) {
+      margin-right: -@input-padding-horizontal - 1px;
+      margin-left: -@input-padding-horizontal;
+    }
+  }
+
+  // select,input 的边角和边框
+  .border-radius() {
+    & when (@position = before) {
+      border-color: transparent;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    & when (@position = after) {
+      border-color: transparent;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  .@{prefix}-input {
+    .item-style();
+    .border-radius();
+  }
+
+  // 作为前置/后置标签时，重写一些select的样式
+  .@{prefix}-select {
+    .item-style();
+
+    .@{prefix}-select-view {
+      background-color: inherit;
+      border-color: transparent;
+      border-radius: 0;
+    }
+
+    &.@{prefix}-select-single {
+      .@{prefix}-select-view {
+        height: 100%;
+      }
+    }
+  }
+}
+
+// 不同尺寸的高度
+.size-height {
+  .height (@size-height, @size-font-size) {
+    .get-padding(@size-height, @size-font-size);
+
+    font-size: @size-font-size;
+  }
+
+  &-size-mini {
+    /* prettier-ignore */
+    padding-top: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
+
+    /* prettier-ignore */
+    padding-bottom: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
+    font-size: @input-size-mini-font-size;
+    line-height: 1.667;
+  }
+
+  &-size-small {
+    .height(@input-size-small-height, @input-size-small-font-size);
+  }
+
+  &-size-large {
+    .height(@input-size-large-height, @input-size-large-font-size);
+  }
+}
+
+// 不同尺寸的带有前置后置标签的高度
+.outer-size() {
+  .size-font-size(@size-input-height, @size-font-size, @suffix-icon-size, @addon-icon-size) {
+    .@{input-prefix-cls}-outer {
+      font-size: @size-font-size;
+    }
+
+    .@{input-prefix-cls}-wrapper {
+      .@{input-prefix-cls}-prefix,
+      .@{input-prefix-cls}-suffix {
+        font-size: @size-font-size;
+
+        > svg {
+          font-size: @suffix-icon-size;
+        }
+      }
+    }
+
+    .@{input-prefix-cls}-prepend,
+    .@{input-prefix-cls}-append {
+      font-size: @size-font-size;
+
+      > svg {
+        font-size: @addon-icon-size;
+      }
+    }
+
+    .@{input-prefix-cls}-prepend {
+      .addon(after, @size-input-height, @size-font-size);
+    }
+
+    .@{input-prefix-cls}-append {
+      .addon(before, @size-input-height, @size-font-size);
+    }
+  }
+
+  &&-size-mini {
+    .size-font-size(
+      @input-size-mini-height,
+      @input-size-mini-font-size,
+      @input-size-mini-icon-suffix-size,
+      @input-size-mini-icon-addon-size
+    );
+  }
+
+  &&-size-small {
+    .size-font-size(
+      @input-size-small-height,
+      @input-size-small-font-size,
+      @input-size-small-icon-suffix-size,
+      @input-size-small-icon-addon-size
+    );
+  }
+
+  &&-size-large {
+    .size-font-size(
+      @input-size-large-height,
+      @input-size-large-font-size,
+      @input-size-large-icon-suffix-size,
+      @input-size-large-icon-addon-size
+    );
+  }
+}

package/lib/input/style/textarea.less

@@ -1,37 +1,37 @@
-@textarea-prefix-cls: ~'@{prefix}-textarea';
-
-.@{textarea-prefix-cls}-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
-.@{textarea-prefix-cls}-clear-wrapper {
-  &:hover {
-    .@{textarea-prefix-cls}-clear-icon {
-      display: inline-block;
-    }
-  }
-  .@{textarea-prefix-cls} {
-    padding-right: @icon-hover-size-default-height;
-  }
-}
-
-.@{textarea-prefix-cls} {
-  &-word-limit {
-    position: absolute;
-    right: @textarea-layout-tip-right;
-    bottom: @textarea-layout-tip-bottom;
-    color: @textarea-color-tip-text;
-    font-size: @textarea-font-tip-size;
-    user-select: none;
-  }
-
-  &-clear-icon {
-    position: absolute;
-    top: @textarea-layout-top-icon-clear;
-    right: @textarea-layout-tip-right;
-    display: none;
-    font-size: @textarea-size-icon-clear;
-  }
-}
+@textarea-prefix-cls: ~'@{prefix}-textarea';
+
+.@{textarea-prefix-cls}-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.@{textarea-prefix-cls}-clear-wrapper {
+  &:hover {
+    .@{textarea-prefix-cls}-clear-icon {
+      display: inline-block;
+    }
+  }
+  .@{textarea-prefix-cls} {
+    padding-right: @icon-hover-size-default-height;
+  }
+}
+
+.@{textarea-prefix-cls} {
+  &-word-limit {
+    position: absolute;
+    right: @textarea-layout-tip-right;
+    bottom: @textarea-layout-tip-bottom;
+    color: @textarea-color-tip-text;
+    font-size: @textarea-font-tip-size;
+    user-select: none;
+  }
+
+  &-clear-icon {
+    position: absolute;
+    top: @textarea-layout-top-icon-clear;
+    right: @textarea-layout-tip-right;
+    display: none;
+    font-size: @textarea-size-icon-clear;
+  }
+}

package/lib/input/style/token.less

@@ -1,131 +1,131 @@
-@import '../../style/theme/index.less';
-
-/******** 基础配置项 end *******/
-
-// 背景色
-@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-color-addon-bg: @input-color-bg;
-
-// 边框色
-@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
-@input-border-addon-separator-width: @border-1;
-@input-color-border_focus: @color-primary-6;
-@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
-@input-size-shadow_focus: @shadow-distance-none;
-@input-color-addon-border_default: @color-transparent;
-
-// 文本色
-@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
-@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
-@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-// textarea  color
-@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
-
-/******** 基础配置项 end *******/
-
-/******** 高级配置项 *******/
-
-// 错误状态
-@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
-@input-color-bg_error_hover: var(
-  ~'@{arco-cssvars-prefix}-color-danger-light-2'
-);
-@input-color-bg_error_focus: @input-color-bg_focus;
-@input-color-border_error_focus: @color-danger-6;
-@input-color-shadow_error_focus: var(
-  ~'@{arco-cssvars-prefix}-color-danger-light-2'
-);
-@input-size-shadow_error_focus: @shadow-distance-none;
-
-// 圆角
-@input-border-radius: @radius-small;
-
-// 不同尺寸
-@input-size-default-height: @size-default;
-@input-size-mini-height: @size-mini;
-@input-size-small-height: @size-small;
-@input-size-large-height: @size-large;
-
-// 边框尺寸以及边框色
-@input-border-width: @border-1;
-@input-color-border: @color-transparent;
-@input-color-border_disabled: @color-transparent;
-@input-color-border_hover: @color-transparent;
-@input-color-border_error: @color-transparent;
-@input-color-border_error_hover: @color-transparent;
-
-// 不同尺寸文字大小
-@input-size-default-font-size: @font-size-body-3;
-@input-size-small-font-size: @font-size-body-3;
-@input-size-large-font-size: @font-size-body-3;
-@input-size-mini-font-size: @font-size-body-1;
-@input-font-tip-size: @font-size-body-1; // show limit word 文字色
-
-// 不同尺寸的 suffix，addon 尺寸。
-@input-size-mini-icon-suffix-size: @size-3;
-@input-size-small-icon-suffix-size: 14px;
-@input-size-default-icon-suffix-size: 14px;
-@input-size-large-icon-suffix-size: 14px;
-
-@input-size-mini-icon-addon-size: @size-3;
-@input-size-small-icon-addon-size: 14px;
-@input-size-default-icon-addon-size: 14px;
-@input-size-large-icon-addon-size: 14px;
-
-@input-size-icon-clear: @size-3;
-@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
-@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
-@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
-@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
-@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
-
-// input search
-@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@search-size-icon: 14px;
-
-// 布局
-@input-padding-horizontal: @spacing-6;
-@input-margin-left-clear-btn: @spacing-6;
-@input-spacing-clear-icon-right: @spacing-4;
-@input-padding-word-limit-left: @spacing-4;
-
-// textarea
-@textarea-padding-horizontal: @spacing-6;
-@textarea-padding-vertical: @spacing-2;
-@textarea-font-size: @font-size-body-3;
-@textarea-font-tip-size: @font-size-body-1;
-@textarea-layout-tip-right: @spacing-5;
-@textarea-layout-tip-bottom: @spacing-3;
-@textarea-size-min-height: @size-default;
-@textarea-size-icon-clear: @font-size-body-1;
-@textarea-layout-top-icon-clear: @spacing-5;
-
-// password
-@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@password-size-eye-icon: @size-3;
-
-// input.group
-@input-group-border-radius_compact: @radius-small;
-@input-group-border-separator-width: @border-1;
-@input-group-color-separator-border: var(
-  ~'@{arco-cssvars-prefix}-color-neutral-3'
-);
-
-/******** 高级配置项 end *******/
-
-// vue覆盖变量
-@input-size-medium-height: @input-size-default-height;
-@input-size-medium-font-size: @input-size-default-font-size;
-@input-size-mini-line-height: 1.667;
-@input-size-small-line-height: @line-height-base;
-@input-size-medium-line-height: @line-height-base;
-@input-size-large-line-height: @line-height-base;
-
-@input-feedback-icon-color_success: @color-success-6;
-@input-feedback-icon-color_error: @color-danger-6;
-@input-feedback-icon-color_warning: @color-warning-6;
-@input-feedback-icon-color_validating: @color-primary-6;
+@import '../../style/theme/index.less';
+
+/******** 基础配置项 end *******/
+
+// 背景色
+@input-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-color-addon-bg: @input-color-bg;
+
+// 边框色
+@input-color-addon-border: var(~'@{arco-cssvars-prefix}-color-neutral-3');
+@input-border-addon-separator-width: @border-1;
+@input-color-border_focus: @color-primary-6;
+@input-color-shadow_focus: var(~'@{arco-cssvars-prefix}-color-primary-light-2');
+@input-size-shadow_focus: @shadow-distance-none;
+@input-color-addon-border_default: @color-transparent;
+
+// 文本色
+@input-color-text: var(~'@{arco-cssvars-prefix}-color-text-1');
+@input-color-placeholder-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+// textarea  color
+@textarea-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+
+/******** 基础配置项 end *******/
+
+/******** 高级配置项 *******/
+
+// 错误状态
+@input-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
+@input-color-bg_error_hover: var(
+  ~'@{arco-cssvars-prefix}-color-danger-light-2'
+);
+@input-color-bg_error_focus: @input-color-bg_focus;
+@input-color-border_error_focus: @color-danger-6;
+@input-color-shadow_error_focus: var(
+  ~'@{arco-cssvars-prefix}-color-danger-light-2'
+);
+@input-size-shadow_error_focus: @shadow-distance-none;
+
+// 圆角
+@input-border-radius: @radius-small;
+
+// 不同尺寸
+@input-size-default-height: @size-default;
+@input-size-mini-height: @size-mini;
+@input-size-small-height: @size-small;
+@input-size-large-height: @size-large;
+
+// 边框尺寸以及边框色
+@input-border-width: @border-1;
+@input-color-border: @color-transparent;
+@input-color-border_disabled: @color-transparent;
+@input-color-border_hover: @color-transparent;
+@input-color-border_error: @color-transparent;
+@input-color-border_error_hover: @color-transparent;
+
+// 不同尺寸文字大小
+@input-size-default-font-size: @font-size-body-3;
+@input-size-small-font-size: @font-size-body-3;
+@input-size-large-font-size: @font-size-body-3;
+@input-size-mini-font-size: @font-size-body-1;
+@input-font-tip-size: @font-size-body-1; // show limit word 文字色
+
+// 不同尺寸的 suffix，addon 尺寸。
+@input-size-mini-icon-suffix-size: @size-3;
+@input-size-small-icon-suffix-size: 14px;
+@input-size-default-icon-suffix-size: 14px;
+@input-size-large-icon-suffix-size: 14px;
+
+@input-size-mini-icon-addon-size: @size-3;
+@input-size-small-icon-addon-size: 14px;
+@input-size-default-icon-addon-size: 14px;
+@input-size-large-icon-addon-size: 14px;
+
+@input-size-icon-clear: @size-3;
+@input-color-prefix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-suffix-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-tip-text: var(~'@{arco-cssvars-prefix}-color-text-3');
+@input-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
+
+// input search
+@search-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@search-size-icon: 14px;
+
+// 布局
+@input-padding-horizontal: @spacing-6;
+@input-margin-left-clear-btn: @spacing-6;
+@input-spacing-clear-icon-right: @spacing-4;
+@input-padding-word-limit-left: @spacing-4;
+
+// textarea
+@textarea-padding-horizontal: @spacing-6;
+@textarea-padding-vertical: @spacing-2;
+@textarea-font-size: @font-size-body-3;
+@textarea-font-tip-size: @font-size-body-1;
+@textarea-layout-tip-right: @spacing-5;
+@textarea-layout-tip-bottom: @spacing-3;
+@textarea-size-min-height: @size-default;
+@textarea-size-icon-clear: @font-size-body-1;
+@textarea-layout-top-icon-clear: @spacing-5;
+
+// password
+@password-color-eye-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@password-size-eye-icon: @size-3;
+
+// input.group
+@input-group-border-radius_compact: @radius-small;
+@input-group-border-separator-width: @border-1;
+@input-group-color-separator-border: var(
+  ~'@{arco-cssvars-prefix}-color-neutral-3'
+);
+
+/******** 高级配置项 end *******/
+
+// vue覆盖变量
+@input-size-medium-height: @input-size-default-height;
+@input-size-medium-font-size: @input-size-default-font-size;
+@input-size-mini-line-height: 1.667;
+@input-size-small-line-height: @line-height-base;
+@input-size-medium-line-height: @line-height-base;
+@input-size-large-line-height: @line-height-base;
+
+@input-feedback-icon-color_success: @color-success-6;
+@input-feedback-icon-color_error: @color-danger-6;
+@input-feedback-icon-color_warning: @color-warning-6;
+@input-feedback-icon-color_validating: @color-primary-6;