@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/lib/_components/auto-tooltip/style/index.less

@@ -1,10 +1,10 @@
-@import '../../../style/theme/index.less';
-
-@auto-tooltip-prefix-cls: ~'@{prefix}-auto-tooltip';
-
-.@{auto-tooltip-prefix-cls} {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
+@import '../../../style/theme/index.less';
+
+@auto-tooltip-prefix-cls: ~'@{prefix}-auto-tooltip';
+
+.@{auto-tooltip-prefix-cls} {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/lib/_components/input-label/style/index.less

@@ -1,7 +1,7 @@
-@import './input-label.less';
-
-@input-label-prefix-cls: ~'@{prefix}-input-label';
-
-.@{input-label-prefix-cls} {
-  .input-label-style(@input-label-prefix-cls);
-}
+@import './input-label.less';
+
+@input-label-prefix-cls: ~'@{prefix}-input-label';
+
+.@{input-label-prefix-cls} {
+  .input-label-style(@input-label-prefix-cls);
+}

package/lib/_components/input-label/style/input-label.less

@@ -1,70 +1,70 @@
-@import '../../../input/style/token.less';
-@import '../../../input/style/input.less';
-
-.input-label-style(@cls) {
-  &.@{cls}-search {
-    cursor: text;
-
-    & .@{cls}-value {
-      pointer-events: none;
-    }
-  }
-
-  .input-wrapper-style(@cls);
-
-  cursor: pointer;
-
-  .hide-input-element() {
-    // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow
-    position: absolute;
-    // Need to hide the input while ensuring that it can be focused by the Tab key
-    // So don't use display: none / visibility: hidden
-    width: 0 !important;
-  }
-
-  .@{cls}-input {
-    .input-style();
-
-    &-hidden {
-      .hide-input-element();
-    }
-  }
-
-  .@{cls}-value {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    .text-ellipsis();
-
-    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.
-    &::after {
-      font-size: 0;
-      line-height: 0;
-      visibility: hidden;
-      content: '.';
-    }
-
-    &-hidden {
-      display: none;
-    }
-  }
-
-  .size(@size) {
-    @height: ~'input-size-@{size}-height';
-
-    &.@{cls}-size-@{size} .@{cls}-input,
-    &.@{cls}-size-@{size} .@{cls}-value {
-      .input-size(@size);
-    }
-
-    &.@{cls}-size-@{size} .@{cls}-value {
-      min-height: round(@@height - @input-border-width * 2);
-    }
-  }
-
-  .size(mini);
-  .size(medium);
-  .size(small);
-  .size(large);
-}
+@import '../../../input/style/token.less';
+@import '../../../input/style/input.less';
+
+.input-label-style(@cls) {
+  &.@{cls}-search {
+    cursor: text;
+
+    & .@{cls}-value {
+      pointer-events: none;
+    }
+  }
+
+  .input-wrapper-style(@cls);
+
+  cursor: pointer;
+
+  .hide-input-element() {
+    // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow
+    position: absolute;
+    // Need to hide the input while ensuring that it can be focused by the Tab key
+    // So don't use display: none / visibility: hidden
+    width: 0 !important;
+  }
+
+  .@{cls}-input {
+    .input-style();
+
+    &-hidden {
+      .hide-input-element();
+    }
+  }
+
+  .@{cls}-value {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    .text-ellipsis();
+
+    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.
+    &::after {
+      font-size: 0;
+      line-height: 0;
+      visibility: hidden;
+      content: '.';
+    }
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  .size(@size) {
+    @height: ~'input-size-@{size}-height';
+
+    &.@{cls}-size-@{size} .@{cls}-input,
+    &.@{cls}-size-@{size} .@{cls}-value {
+      .input-size(@size);
+    }
+
+    &.@{cls}-size-@{size} .@{cls}-value {
+      min-height: round(@@height - @input-border-width * 2);
+    }
+  }
+
+  .size(mini);
+  .size(medium);
+  .size(small);
+  .size(large);
+}

package/lib/_components/picker/style/index.less

@@ -1,191 +1,191 @@
-@import '../../../input/style/input.less';
-@import './token.less';
-
-.@{prefix}-picker {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: @picker-padding-horizontal 11px 4px 4px;
-  line-height: @line-height-base;
-  background-color: @picker-color-bg;
-  border: 1px solid @picker-color-border;
-  border-radius: @picker-input-border-radius;
-  transition: all @transition-duration-1 @transition-timing-function-linear;
-
-  &-input {
-    display: inline-flex;
-    flex: 1;
-  }
-
-  input {
-    width: 100%;
-    padding: 0;
-    padding-left: 8px;
-    color: @picker-color-text;
-    line-height: @line-height-base;
-    text-align: left;
-    background-color: @color-transparent;
-    border: none;
-    outline: none;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-
-    &::placeholder {
-      color: @picker-color-placeholder;
-    }
-
-    // fix color error under disabled status in safari
-    &[disabled] {
-      -webkit-text-fill-color: @input-color-text_disabled;
-    }
-  }
-
-  &-has-prefix {
-    padding-left: @input-padding-horizontal;
-  }
-
-  &-prefix {
-    padding-right: @picker-padding-horizontal;
-    color: @input-color-prefix-text;
-    font-size: @input-size-default-icon-suffix-size;
-  }
-
-  &-suffix {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 4px;
-
-    .input-suffix-feedback-icon-color();
-
-    .@{prefix}-feedback-icon {
-      margin-left: 4px;
-    }
-  }
-
-  &-suffix-icon {
-    color: @picker-color-icon;
-  }
-
-  & &-clear-icon {
-    display: none;
-    color: var(~'@{arco-cssvars-prefix}-color-text-2');
-    font-size: 12px;
-  }
-
-  &:hover {
-    background-color: @picker-color-bg_hover;
-    border-color: @picker-color-border_hover;
-  }
-
-  &:not(&-disabled):hover &-clear-icon {
-    display: inline-block;
-  }
-
-  &:not(&-disabled):hover &-suffix &-clear-icon + span {
-    display: none;
-  }
-
-  input[disabled] {
-    color: @picker-color-text_disabled;
-    cursor: not-allowed;
-
-    &::placeholder {
-      color: @picker-color-placeholder_disabled;
-    }
-  }
-
-  &-error {
-    background-color: @picker-color-bg_error;
-    border-color: @picker-color-border_error;
-
-    &:hover {
-      background-color: @picker-color-bg_error_hover;
-      border-color: @picker-color-border_error_hover;
-    }
-  }
-
-  &-focused {
-    box-shadow: 0 0 0 @picker-size-shadow_focus @picker-color-shadow_focus;
-  }
-
-  &-focused,
-  &-focused:hover {
-    background-color: @picker-color-bg_focus;
-    border-color: @picker-color-border_focus;
-  }
-
-  &-focused&-error {
-    border-color: @picker-color-border_error_focus;
-    box-shadow: 0 0 0 @picker-size-shadow_error_focus
-      @picker-color-shadow_error_focus;
-  }
-
-  &-focused &-input-active input,
-  &-focused:hover &-input-active input {
-    background: @picker-range-color-bg-input_focus;
-  }
-
-  &-disabled,
-  &-disabled:hover {
-    color: @picker-color-text_disabled;
-    background-color: @picker-color-bg_disabled;
-    border-color: @picker-color-border_disabled;
-    cursor: not-allowed;
-
-    input[disabled] {
-      color: @picker-color-text_disabled;
-      cursor: not-allowed;
-
-      &::placeholder {
-        color: @picker-color-placeholder_disabled;
-      }
-    }
-  }
-
-  &-separator {
-    min-width: 10px;
-    padding: 0 8px;
-    color: @picker-color-separator;
-  }
-
-  &-disabled &-separator {
-    color: @picker-color-separator_disabled;
-  }
-
-  &-disabled &-suffix-icon {
-    color: @picker-color-icon_disabled;
-  }
-
-  // Size
-  &-size-mini {
-    height: @picker-size-mini;
-
-    input {
-      font-size: @picker-size-mini-font-size-text;
-    }
-  }
-
-  &-size-small {
-    height: @picker-size-small;
-
-    input {
-      font-size: @picker-size-small-font-size-text;
-    }
-  }
-
-  &-size-medium {
-    height: @picker-size-default;
-
-    input {
-      font-size: @picker-size-default-font-size-text;
-    }
-  }
-
-  &-size-large {
-    height: @picker-size-large;
-
-    input {
-      font-size: @picker-size-large-font-size-text;
-    }
-  }
-}
+@import '../../../input/style/input.less';
+@import './token.less';
+
+.@{prefix}-picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: @picker-padding-horizontal 11px 4px 4px;
+  line-height: @line-height-base;
+  background-color: @picker-color-bg;
+  border: 1px solid @picker-color-border;
+  border-radius: @picker-input-border-radius;
+  transition: all @transition-duration-1 @transition-timing-function-linear;
+
+  &-input {
+    display: inline-flex;
+    flex: 1;
+  }
+
+  input {
+    width: 100%;
+    padding: 0;
+    padding-left: 8px;
+    color: @picker-color-text;
+    line-height: @line-height-base;
+    text-align: left;
+    background-color: @color-transparent;
+    border: none;
+    outline: none;
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+
+    &::placeholder {
+      color: @picker-color-placeholder;
+    }
+
+    // fix color error under disabled status in safari
+    &[disabled] {
+      -webkit-text-fill-color: @input-color-text_disabled;
+    }
+  }
+
+  &-has-prefix {
+    padding-left: @input-padding-horizontal;
+  }
+
+  &-prefix {
+    padding-right: @picker-padding-horizontal;
+    color: @input-color-prefix-text;
+    font-size: @input-size-default-icon-suffix-size;
+  }
+
+  &-suffix {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+
+    .input-suffix-feedback-icon-color();
+
+    .@{prefix}-feedback-icon {
+      margin-left: 4px;
+    }
+  }
+
+  &-suffix-icon {
+    color: @picker-color-icon;
+  }
+
+  & &-clear-icon {
+    display: none;
+    color: var(~'@{arco-cssvars-prefix}-color-text-2');
+    font-size: 12px;
+  }
+
+  &:hover {
+    background-color: @picker-color-bg_hover;
+    border-color: @picker-color-border_hover;
+  }
+
+  &:not(&-disabled):hover &-clear-icon {
+    display: inline-block;
+  }
+
+  &:not(&-disabled):hover &-suffix &-clear-icon + span {
+    display: none;
+  }
+
+  input[disabled] {
+    color: @picker-color-text_disabled;
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: @picker-color-placeholder_disabled;
+    }
+  }
+
+  &-error {
+    background-color: @picker-color-bg_error;
+    border-color: @picker-color-border_error;
+
+    &:hover {
+      background-color: @picker-color-bg_error_hover;
+      border-color: @picker-color-border_error_hover;
+    }
+  }
+
+  &-focused {
+    box-shadow: 0 0 0 @picker-size-shadow_focus @picker-color-shadow_focus;
+  }
+
+  &-focused,
+  &-focused:hover {
+    background-color: @picker-color-bg_focus;
+    border-color: @picker-color-border_focus;
+  }
+
+  &-focused&-error {
+    border-color: @picker-color-border_error_focus;
+    box-shadow: 0 0 0 @picker-size-shadow_error_focus
+      @picker-color-shadow_error_focus;
+  }
+
+  &-focused &-input-active input,
+  &-focused:hover &-input-active input {
+    background: @picker-range-color-bg-input_focus;
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    color: @picker-color-text_disabled;
+    background-color: @picker-color-bg_disabled;
+    border-color: @picker-color-border_disabled;
+    cursor: not-allowed;
+
+    input[disabled] {
+      color: @picker-color-text_disabled;
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: @picker-color-placeholder_disabled;
+      }
+    }
+  }
+
+  &-separator {
+    min-width: 10px;
+    padding: 0 8px;
+    color: @picker-color-separator;
+  }
+
+  &-disabled &-separator {
+    color: @picker-color-separator_disabled;
+  }
+
+  &-disabled &-suffix-icon {
+    color: @picker-color-icon_disabled;
+  }
+
+  // Size
+  &-size-mini {
+    height: @picker-size-mini;
+
+    input {
+      font-size: @picker-size-mini-font-size-text;
+    }
+  }
+
+  &-size-small {
+    height: @picker-size-small;
+
+    input {
+      font-size: @picker-size-small-font-size-text;
+    }
+  }
+
+  &-size-medium {
+    height: @picker-size-default;
+
+    input {
+      font-size: @picker-size-default-font-size-text;
+    }
+  }
+
+  &-size-large {
+    height: @picker-size-large;
+
+    input {
+      font-size: @picker-size-large-font-size-text;
+    }
+  }
+}

package/lib/_components/picker/style/token.less

@@ -1,58 +1,58 @@
-@import '../../../style/theme/index.less';
-@import '../../../input/style/token.less';
-
-@picker-size-mini: @size-mini;
-@picker-size-small: @size-small;
-@picker-size-default: @size-default;
-@picker-size-large: @size-large;
-
-@picker-size-mini-font-size-text: @font-size-body-1;
-@picker-size-small-font-size-text: @font-size-body-3;
-@picker-size-default-font-size-text: @font-size-body-3;
-@picker-size-large-font-size-text: @font-size-body-3;
-
-@picker-input-border-radius: @radius-small;
-
-@picker-color-shadow_focus: var(
-  ~'@{arco-cssvars-prefix}-color-primary-light-2'
-);
-@picker-size-shadow_focus: @shadow-distance-none;
-@picker-color-shadow_error_focus: var(
-  ~'@{arco-cssvars-prefix}-color-danger-light-2'
-);
-@picker-size-shadow_error_focus: @shadow-distance-none;
-
-@picker-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@picker-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@picker-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@picker-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@picker-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
-@picker-color-bg_error_hover: var(
-  ~'@{arco-cssvars-prefix}-color-danger-light-2'
-);
-@picker-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-
-@picker-color-border: @color-transparent;
-@picker-color-border_hover: @color-transparent;
-@picker-color-border_focus: @color-primary-6;
-@picker-color-border_disabled: @color-transparent;
-@picker-color-border_error: @color-transparent;
-@picker-color-border_error_hover: @color-transparent;
-@picker-color-border_error_focus: @color-danger-6;
-
-@picker-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
-@picker-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@picker-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
-@picker-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@picker-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
-@picker-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-@picker-color-separator: var(~'@{arco-cssvars-prefix}-color-text-3');
-@picker-color-separator_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-@picker-range-color-bg-input_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-// not in design lab
-@picker-padding-horizontal: @spacing-2; // 4px
-@picker-input-padding-horizontal: @input-padding-horizontal -
-  @picker-padding-horizontal; // 8px
+@import '../../../style/theme/index.less';
+@import '../../../input/style/token.less';
+
+@picker-size-mini: @size-mini;
+@picker-size-small: @size-small;
+@picker-size-default: @size-default;
+@picker-size-large: @size-large;
+
+@picker-size-mini-font-size-text: @font-size-body-1;
+@picker-size-small-font-size-text: @font-size-body-3;
+@picker-size-default-font-size-text: @font-size-body-3;
+@picker-size-large-font-size-text: @font-size-body-3;
+
+@picker-input-border-radius: @radius-small;
+
+@picker-color-shadow_focus: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-2'
+);
+@picker-size-shadow_focus: @shadow-distance-none;
+@picker-color-shadow_error_focus: var(
+  ~'@{arco-cssvars-prefix}-color-danger-light-2'
+);
+@picker-size-shadow_error_focus: @shadow-distance-none;
+
+@picker-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@picker-color-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@picker-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@picker-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@picker-color-bg_error: var(~'@{arco-cssvars-prefix}-color-danger-light-1');
+@picker-color-bg_error_hover: var(
+  ~'@{arco-cssvars-prefix}-color-danger-light-2'
+);
+@picker-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+
+@picker-color-border: @color-transparent;
+@picker-color-border_hover: @color-transparent;
+@picker-color-border_focus: @color-primary-6;
+@picker-color-border_disabled: @color-transparent;
+@picker-color-border_error: @color-transparent;
+@picker-color-border_error_hover: @color-transparent;
+@picker-color-border_error_focus: @color-danger-6;
+
+@picker-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
+@picker-color-placeholder_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@picker-color-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@picker-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@picker-color-icon: var(~'@{arco-cssvars-prefix}-color-text-2');
+@picker-color-icon_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+@picker-color-separator: var(~'@{arco-cssvars-prefix}-color-text-3');
+@picker-color-separator_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+@picker-range-color-bg-input_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+// not in design lab
+@picker-padding-horizontal: @spacing-2; // 4px
+@picker-input-padding-horizontal: @input-padding-horizontal -
+  @picker-padding-horizontal; // 8px