@julingbase/jly-arco-design 0.0.2 → 0.0.3

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

@@ -1,129 +1,129 @@
-@import '../../style/mixins/index.less';
-@import '../../input/style/token.less';
-@import '../../input/style/input.less';
-@import '../../tag/style/index.less';
-@import './token.less';
-
-.input-tag-style(@cls) {
-  .input-wrapper-style(@cls);
-
-  &.@{cls}-has-tag {
-    padding-right: @input-tag-padding-horizontal;
-    padding-left: @input-tag-padding-horizontal;
-  }
-
-  &.@{cls}-has-prefix {
-    padding-left: @input-padding-horizontal;
-  }
-
-  &.@{cls}-has-suffix {
-    padding-right: @input-padding-horizontal;
-  }
-
-  .@{cls}-inner {
-    flex: 1;
-    overflow: hidden;
-    line-height: 0;
-
-    &.@{cls}-nowrap {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .@{cls}-tag {
-      display: inline-flex;
-      align-items: center;
-      margin-right: @input-tag-tag-margin-right;
-      color: @input-tag-color-text_default;
-      font-size: @input-tag-tag-font-size;
-      white-space: pre-wrap;
-      word-break: break-word;
-      background-color: @input-tag-tag-color-bg;
-      border-color: @input-tag-tag-color-border;
-
-      .@{prefix}-icon-hover:hover::before {
-        background-color: @input-tag-tag-remove-icon-color-bg;
-      }
-
-      &.@{prefix}-tag-custom-color {
-        color: @tag-custom-color-text;
-
-        .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
-      }
-    }
-
-    .@{cls}-input {
-      .input-style();
-
-      box-sizing: border-box;
-    }
-  }
-
-  .@{cls}-mirror {
-    position: absolute;
-    top: 0;
-    left: 0;
-    white-space: pre;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &.@{cls}-focus {
-    .@{cls}-tag {
-      background-color: @input-tag-tag-color-bg_focus;
-      border-color: @input-tag-tag-color-border_focus;
-
-      .@{prefix}-icon-hover:hover::before {
-        background-color: @input-tag-tag-remove-icon-color-bg_focus;
-      }
-    }
-  }
-
-  &.@{cls}-disabled {
-    .@{cls}-tag {
-      color: @input-tag-color-text_disabled;
-      background-color: @input-tag-tag-color-bg_disabled;
-      border-color: @input-tag-tag-color-border_disabled;
-    }
-  }
-
-  &.@{cls}-readonly,
-  &.@{cls}-disabled-input {
-    cursor: default;
-  }
-
-  .size(@size) {
-    &.@{cls}-size-@{size} {
-      @font-size: ~'input-tag-size-@{size}-font-size';
-      @height: ~'input-tag-size-@{size}-height';
-      @tag-height: ~'input-tag-size-@{size}-tag-height';
-
-      font-size: @@font-size;
-
-      .@{cls}-inner {
-        padding-top: (@@height / 2) - (@@tag-height / 2) -
-          @input-tag-border-width - (@input-tag-tag-margin-vertical / 2);
-        padding-bottom: $padding-top;
-      }
-
-      .@{cls}-tag,
-      .@{cls}-input {
-        margin-top: (@input-tag-tag-margin-vertical / 2);
-        margin-bottom: $margin-top;
-        line-height: @@tag-height - 2;
-        vertical-align: middle;
-      }
-
-      .@{cls}-tag,
-      .@{cls}-input {
-        height: auto;
-        min-height: @@tag-height;
-      }
-    }
-  }
-
-  .size(mini);
-  .size(medium);
-  .size(small);
-  .size(large);
-}
+@import '../../style/mixins/index.less';
+@import '../../input/style/token.less';
+@import '../../input/style/input.less';
+@import '../../tag/style/index.less';
+@import './token.less';
+
+.input-tag-style(@cls) {
+  .input-wrapper-style(@cls);
+
+  &.@{cls}-has-tag {
+    padding-right: @input-tag-padding-horizontal;
+    padding-left: @input-tag-padding-horizontal;
+  }
+
+  &.@{cls}-has-prefix {
+    padding-left: @input-padding-horizontal;
+  }
+
+  &.@{cls}-has-suffix {
+    padding-right: @input-padding-horizontal;
+  }
+
+  .@{cls}-inner {
+    flex: 1;
+    overflow: hidden;
+    line-height: 0;
+
+    &.@{cls}-nowrap {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .@{cls}-tag {
+      display: inline-flex;
+      align-items: center;
+      margin-right: @input-tag-tag-margin-right;
+      color: @input-tag-color-text_default;
+      font-size: @input-tag-tag-font-size;
+      white-space: pre-wrap;
+      word-break: break-word;
+      background-color: @input-tag-tag-color-bg;
+      border-color: @input-tag-tag-color-border;
+
+      .@{prefix}-icon-hover:hover::before {
+        background-color: @input-tag-tag-remove-icon-color-bg;
+      }
+
+      &.@{prefix}-tag-custom-color {
+        color: @tag-custom-color-text;
+
+        .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
+      }
+    }
+
+    .@{cls}-input {
+      .input-style();
+
+      box-sizing: border-box;
+    }
+  }
+
+  .@{cls}-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: pre;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.@{cls}-focus {
+    .@{cls}-tag {
+      background-color: @input-tag-tag-color-bg_focus;
+      border-color: @input-tag-tag-color-border_focus;
+
+      .@{prefix}-icon-hover:hover::before {
+        background-color: @input-tag-tag-remove-icon-color-bg_focus;
+      }
+    }
+  }
+
+  &.@{cls}-disabled {
+    .@{cls}-tag {
+      color: @input-tag-color-text_disabled;
+      background-color: @input-tag-tag-color-bg_disabled;
+      border-color: @input-tag-tag-color-border_disabled;
+    }
+  }
+
+  &.@{cls}-readonly,
+  &.@{cls}-disabled-input {
+    cursor: default;
+  }
+
+  .size(@size) {
+    &.@{cls}-size-@{size} {
+      @font-size: ~'input-tag-size-@{size}-font-size';
+      @height: ~'input-tag-size-@{size}-height';
+      @tag-height: ~'input-tag-size-@{size}-tag-height';
+
+      font-size: @@font-size;
+
+      .@{cls}-inner {
+        padding-top: (@@height / 2) - (@@tag-height / 2) -
+          @input-tag-border-width - (@input-tag-tag-margin-vertical / 2);
+        padding-bottom: $padding-top;
+      }
+
+      .@{cls}-tag,
+      .@{cls}-input {
+        margin-top: (@input-tag-tag-margin-vertical / 2);
+        margin-bottom: $margin-top;
+        line-height: @@tag-height - 2;
+        vertical-align: middle;
+      }
+
+      .@{cls}-tag,
+      .@{cls}-input {
+        height: auto;
+        min-height: @@tag-height;
+      }
+    }
+  }
+
+  .size(mini);
+  .size(medium);
+  .size(small);
+  .size(large);
+}

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

@@ -1,83 +1,83 @@
-@import '../../style/theme/index.less';
-
-/**********************************************
- * size: mini / small / default / large
- **********************************************/
-@input-tag-size-mini-height: @size-mini;
-@input-tag-size-small-height: @size-small;
-@input-tag-size-default-height: @size-default;
-@input-tag-size-large-height: @size-large;
-
-@input-tag-size-mini-tag-height: @size-5;
-@input-tag-size-small-tag-height: @size-5;
-@input-tag-size-default-tag-height: @size-6;
-@input-tag-size-large-tag-height: @size-7;
-
-@input-tag-size-mini-font-size: @font-size-body-1;
-@input-tag-size-small-font-size: @font-size-body-3;
-@input-tag-size-default-font-size: @font-size-body-3;
-@input-tag-size-large-font-size: @font-size-body-3;
-
-/****************************************************
- * status: default / error / disabled _ (hover / focus)
- ****************************************************/
-// text color
-@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
-@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
-@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
-
-// icon color
-@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
-@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
-@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
-
-// border color with focus & hover
-@input-tag-color-border_default: @color-transparent;
-@input-tag-color-border_default_hover: @color-transparent;
-@input-tag-color-border_default_focus: @color-primary-6;
-@input-tag-color-border_error: @color-transparent;
-@input-tag-color-border_error_hover: @color-transparent;
-@input-tag-color-border_error_focus: @color-danger-6;
-@input-tag-color-border_disabled: @color-transparent;
-@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
-@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;
-
-// bg color with focus & hover
-@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@input-tag-color-bg_error: @color-danger-1;
-@input-tag-color-bg_error_hover: @color-danger-2;
-@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;
-
-@input-tag-color-shadow_default_focus: @color-primary-2;
-@input-tag-color-shadow_error_focus: @color-danger-2;
-@input-tag-size-shadow_error_focus: @shadow-distance-none;
-@input-tag-size-shadow_default_focus: @shadow-distance-none;
-
-// input box
-@input-tag-tag-margin-right: @spacing-2;
-@input-tag-tag-margin-vertical: @spacing-1;
-@input-tag-padding-horizontal: @spacing-2;
-@input-tag-border-radius: @radius-small;
-@input-tag-border-width: @border-1;
-@input-tag-size-icon-clear: @size-3;
-@input-tag-size-icon-clear_hover: @size-5;
-
-// tags
-@input-tag-tag-font-size: @font-size-body-1;
-@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
-@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
-@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
-@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');
-
-// vue overwrite token
-@input-tag-size-medium-height: @input-tag-size-default-height;
-@input-tag-size-medium-tag-height: @input-tag-size-default-tag-height;
-@input-tag-size-medium-font-size: @input-tag-size-default-font-size;
+@import '../../style/theme/index.less';
+
+/**********************************************
+ * size: mini / small / default / large
+ **********************************************/
+@input-tag-size-mini-height: @size-mini;
+@input-tag-size-small-height: @size-small;
+@input-tag-size-default-height: @size-default;
+@input-tag-size-large-height: @size-large;
+
+@input-tag-size-mini-tag-height: @size-5;
+@input-tag-size-small-tag-height: @size-5;
+@input-tag-size-default-tag-height: @size-6;
+@input-tag-size-large-tag-height: @size-7;
+
+@input-tag-size-mini-font-size: @font-size-body-1;
+@input-tag-size-small-font-size: @font-size-body-3;
+@input-tag-size-default-font-size: @font-size-body-3;
+@input-tag-size-large-font-size: @font-size-body-3;
+
+/****************************************************
+ * status: default / error / disabled _ (hover / focus)
+ ****************************************************/
+// text color
+@input-tag-color-text_default: var(~'@{arco-cssvars-prefix}-color-text-1');
+@input-tag-color-text_error: var(~'@{arco-cssvars-prefix}-color-text-1');
+@input-tag-color-text_disabled: var(~'@{arco-cssvars-prefix}-color-text-4');
+
+// icon color
+@input-tag-color-placeholder: var(~'@{arco-cssvars-prefix}-color-text-3');
+@input-tag-color-icon-clear: var(~'@{arco-cssvars-prefix}-color-text-2');
+@input-tag-color-icon-clear-bg_hover: var(~'@{arco-cssvars-prefix}-color-fill-4');
+
+// border color with focus & hover
+@input-tag-color-border_default: @color-transparent;
+@input-tag-color-border_default_hover: @color-transparent;
+@input-tag-color-border_default_focus: @color-primary-6;
+@input-tag-color-border_error: @color-transparent;
+@input-tag-color-border_error_hover: @color-transparent;
+@input-tag-color-border_error_focus: @color-danger-6;
+@input-tag-color-border_disabled: @color-transparent;
+@input-tag-color-border_disabled_hover: @input-tag-color-border_disabled;
+@input-tag-color-border_disabled_focus: @input-tag-color-border_disabled;
+
+// bg color with focus & hover
+@input-tag-color-bg_default: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-color-bg_default_hover: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-tag-color-bg_default_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-tag-color-bg_error: @color-danger-1;
+@input-tag-color-bg_error_hover: @color-danger-2;
+@input-tag-color-bg_error_focus: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-color-bg_disabled_hover: @input-tag-color-bg_disabled;
+
+@input-tag-color-shadow_default_focus: @color-primary-2;
+@input-tag-color-shadow_error_focus: @color-danger-2;
+@input-tag-size-shadow_error_focus: @shadow-distance-none;
+@input-tag-size-shadow_default_focus: @shadow-distance-none;
+
+// input box
+@input-tag-tag-margin-right: @spacing-2;
+@input-tag-tag-margin-vertical: @spacing-1;
+@input-tag-padding-horizontal: @spacing-2;
+@input-tag-border-radius: @radius-small;
+@input-tag-border-width: @border-1;
+@input-tag-size-icon-clear: @size-3;
+@input-tag-size-icon-clear_hover: @size-5;
+
+// tags
+@input-tag-tag-font-size: @font-size-body-1;
+@input-tag-tag-color-bg: var(~'@{arco-cssvars-prefix}-color-bg-2');
+@input-tag-tag-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-tag-color-bg_disabled: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-tag-color-border: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-tag-tag-color-border_disabled: var(~'@{arco-cssvars-prefix}-color-fill-3');
+@input-tag-tag-color-border_focus: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-tag-remove-icon-color-bg: var(~'@{arco-cssvars-prefix}-color-fill-2');
+@input-tag-tag-remove-icon-color-bg_focus: var(~'@{arco-cssvars-prefix}-color-fill-3');
+
+// vue overwrite token
+@input-tag-size-medium-height: @input-tag-size-default-height;
+@input-tag-size-medium-tag-height: @input-tag-size-default-tag-height;
+@input-tag-size-medium-font-size: @input-tag-size-default-font-size;

package/lib/layout/style/index.less

@@ -1,104 +1,104 @@
-@import './token.less';
-
-@layout-prefix-cls: ~'@{prefix}-layout';
-
-.@{layout-prefix-cls} {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-
-  &-sider {
-    position: relative;
-    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
-    width: auto;
-    margin: 0;
-    padding: 0;
-    background: @layout-sider-background;
-    transition: width @transition-duration-2
-      @transition-timing-function-standard;
-
-    &-children {
-      height: 100%;
-      overflow: auto;
-    }
-
-    &-collapsed &-children {
-      /* width */
-      &::-webkit-scrollbar {
-        width: 0;
-      }
-
-      // /* Track */
-      // &::-webkit-scrollbar-track {
-      //   background: #f1f1f1;
-      // }
-
-      // /* Handle */
-      // &::-webkit-scrollbar-thumb {
-      //   background: #888;
-      // }
-
-      // /* Handle on hover */
-      // &::-webkit-scrollbar-thumb:hover {
-      //   background: #555;
-      // }
-    }
-
-    &-has-trigger {
-      box-sizing: border-box;
-      padding-bottom: @layout-trigger-height;
-    }
-
-    &-trigger {
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      width: 100%;
-      height: @layout-trigger-height;
-      color: var(~'@{arco-cssvars-prefix}-color-white');
-      background: @layout-trigger-dark-color;
-      cursor: pointer;
-      transition: width @transition-duration-2
-        @transition-timing-function-standard;
-
-      &-light {
-        color: @layout-font-color;
-        background: @layout-sider-background-light;
-        border-top: 1px solid @layout-trigger-light-color-border;
-      }
-    }
-  }
-
-  &-sider-light {
-    background: @layout-sider-background-light;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
-  }
-
-  &-header {
-    flex: 0 0 auto;
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  &-content {
-    flex: 1;
-  }
-
-  &-footer {
-    flex: 0 0 auto;
-    margin: 0;
-  }
-}
-
-.@{layout-prefix-cls}-has-sider {
-  flex-direction: row;
-
-  > .@{layout-prefix-cls},
-  > .@{layout-prefix-cls}-content {
-    overflow-x: hidden;
-  }
-}
+@import './token.less';
+
+@layout-prefix-cls: ~'@{prefix}-layout';
+
+.@{layout-prefix-cls} {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  &-sider {
+    position: relative;
+    flex: none; // flex: 0 0 auto; 当右侧文字过长的时候不会被压缩。
+    width: auto;
+    margin: 0;
+    padding: 0;
+    background: @layout-sider-background;
+    transition: width @transition-duration-2
+      @transition-timing-function-standard;
+
+    &-children {
+      height: 100%;
+      overflow: auto;
+    }
+
+    &-collapsed &-children {
+      /* width */
+      &::-webkit-scrollbar {
+        width: 0;
+      }
+
+      // /* Track */
+      // &::-webkit-scrollbar-track {
+      //   background: #f1f1f1;
+      // }
+
+      // /* Handle */
+      // &::-webkit-scrollbar-thumb {
+      //   background: #888;
+      // }
+
+      // /* Handle on hover */
+      // &::-webkit-scrollbar-thumb:hover {
+      //   background: #555;
+      // }
+    }
+
+    &-has-trigger {
+      box-sizing: border-box;
+      padding-bottom: @layout-trigger-height;
+    }
+
+    &-trigger {
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: @layout-trigger-height;
+      color: var(~'@{arco-cssvars-prefix}-color-white');
+      background: @layout-trigger-dark-color;
+      cursor: pointer;
+      transition: width @transition-duration-2
+        @transition-timing-function-standard;
+
+      &-light {
+        color: @layout-font-color;
+        background: @layout-sider-background-light;
+        border-top: 1px solid @layout-trigger-light-color-border;
+      }
+    }
+  }
+
+  &-sider-light {
+    background: @layout-sider-background-light;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
+  }
+
+  &-header {
+    flex: 0 0 auto;
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  &-content {
+    flex: 1;
+  }
+
+  &-footer {
+    flex: 0 0 auto;
+    margin: 0;
+  }
+}
+
+.@{layout-prefix-cls}-has-sider {
+  flex-direction: row;
+
+  > .@{layout-prefix-cls},
+  > .@{layout-prefix-cls}-content {
+    overflow-x: hidden;
+  }
+}

package/lib/layout/style/token.less

@@ -1,13 +1,13 @@
-@import '../../style/theme/index.less';
-
-@layout-trigger-height: 48px;
-
-// Layout Theme Dark(Default)
-@layout-sider-background: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
-@layout-font-color-dark: var(~'@{arco-cssvars-prefix}-color-white');
-@layout-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
-@layout-trigger-dark-color: rgba(255, 255, 255, 0.2);
-
-// Layout Theme Light
-@layout-sider-background-light: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
-@layout-trigger-light-color-border: var(~'@{arco-cssvars-prefix}-color-bg-5');
+@import '../../style/theme/index.less';
+
+@layout-trigger-height: 48px;
+
+// Layout Theme Dark(Default)
+@layout-sider-background: var(~'@{arco-cssvars-prefix}-color-menu-dark-bg');
+@layout-font-color-dark: var(~'@{arco-cssvars-prefix}-color-white');
+@layout-font-color: var(~'@{arco-cssvars-prefix}-color-text-1');
+@layout-trigger-dark-color: rgba(255, 255, 255, 0.2);
+
+// Layout Theme Light
+@layout-sider-background-light: var(~'@{arco-cssvars-prefix}-color-menu-light-bg');
+@layout-trigger-light-color-border: var(~'@{arco-cssvars-prefix}-color-bg-5');