@julingbase/jly-arco-design 0.0.2 → 0.0.3

package/lib/tabs/style/vertical.less

@@ -1,156 +1,156 @@
-@tabs-prefix-cls: ~'@{prefix}-tabs';
-
-@tabs-prefix-cls-vertical: ~'@{tabs-prefix-cls}-vertical';
-
-/* Vertical */
-.@{tabs-prefix-cls} {
-  &-vertical {
-    // overflow: hidden;
-  }
-
-  &-nav-vertical {
-    float: left;
-    height: 100%;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: initial;
-      clear: both;
-      width: @tabs-line-size-header-border;
-      height: 100%;
-    }
-
-    .@{tabs-prefix-cls}-nav-add-btn {
-      height: auto;
-      margin-top: @tabs-margin-add-icon-left;
-      margin-left: 0;
-      padding: 0 @tabs-card-padding-title-horizontal;
-    }
-  }
-
-  &-nav-right {
-    float: right;
-  }
-
-  &-nav-vertical {
-    flex-direction: column;
-  }
-
-  &-nav-vertical &-nav-tab {
-    flex-direction: column;
-    height: 100%;
-  }
-
-  &-nav-vertical &-nav-ink {
-    position: absolute;
-    right: 0;
-    bottom: initial;
-    left: initial;
-    width: @tabs-line-size-ink-stroke;
-    transition: top @transition-duration-2 @transition-timing-function-standard,
-      height @transition-duration-2 @transition-timing-function-standard;
-  }
-
-  &-nav-vertical &-nav-tab-list {
-    height: auto;
-
-    &-overflow-scroll {
-      padding: @tabs-padding-header-wrapper-vertical 0;
-    }
-  }
-
-  &-nav-vertical &-tab {
-    display: block;
-    margin: 0;
-    margin-top: @tabs-line-margin-title-vertical;
-    white-space: nowrap;
-
-    &:first-of-type {
-      margin-top: 0;
-    }
-  }
-
-  &-nav-right::before {
-    right: unset;
-    left: 0;
-  }
-
-  &-nav-right &-nav-ink {
-    right: unset;
-    left: 0;
-  }
-
-  &-nav-vertical {
-    position: relative;
-    box-sizing: border-box;
-    height: 100%;
-  }
-
-  &-nav-vertical&-nav-type-line &-tab {
-    padding: 0 @tabs-line-padding-title-horizontal_vertical;
-  }
-
-  &-nav-vertical&-nav-type-card &-tab {
-    position: relative;
-    margin: 0;
-    border: @tabs-card-border-width solid @tabs-card-color-title-border;
-    border-bottom-color: @color-transparent;
-
-    &:first-child {
-      border-top-left-radius: @tabs-card-border-radius;
-    }
-
-    &-active,
-    &-active:hover {
-      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
-      border-bottom-color: @color-transparent;
-    }
-
-    &:last-child {
-      border-bottom: @tabs-card-border-width solid @tabs-card-color-title-border;
-      border-bottom-left-radius: @tabs-card-border-radius;
-    }
-  }
-
-  &-nav-vertical&-nav-type-card-gutter &-tab {
-    position: relative;
-    margin-left: 0;
-    border-radius: @tabs-card-border-radius 0 0 @tabs-card-border-radius;
-
-    &:not(:first-of-type) {
-      margin-top: 4px;
-    }
-
-    &-active,
-    &-active:hover {
-      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
-      border-bottom-color: @tabs-card-color-title-border;
-    }
-  }
-
-  &-vertical &-content {
-    width: auto;
-    height: 100%;
-    padding: 0;
-  }
-
-  &-right&-vertical &-content {
-    padding-right: @tabs-content-padding;
-  }
-
-  &-left&-vertical &-content {
-    padding-left: @tabs-content-padding;
-  }
-
-  &-vertical&-type-card,
-  &-vertical&-type-card-gutter {
-    > .@{tabs-prefix-cls}-content {
-      border: @tabs-card-border-content-width solid
-        @tabs-line-color-header-border;
-      border-left: none;
-    }
-  }
-}
+@tabs-prefix-cls: ~'@{prefix}-tabs';
+
+@tabs-prefix-cls-vertical: ~'@{tabs-prefix-cls}-vertical';
+
+/* Vertical */
+.@{tabs-prefix-cls} {
+  &-vertical {
+    // overflow: hidden;
+  }
+
+  &-nav-vertical {
+    float: left;
+    height: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: initial;
+      clear: both;
+      width: @tabs-line-size-header-border;
+      height: 100%;
+    }
+
+    .@{tabs-prefix-cls}-nav-add-btn {
+      height: auto;
+      margin-top: @tabs-margin-add-icon-left;
+      margin-left: 0;
+      padding: 0 @tabs-card-padding-title-horizontal;
+    }
+  }
+
+  &-nav-right {
+    float: right;
+  }
+
+  &-nav-vertical {
+    flex-direction: column;
+  }
+
+  &-nav-vertical &-nav-tab {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &-nav-vertical &-nav-ink {
+    position: absolute;
+    right: 0;
+    bottom: initial;
+    left: initial;
+    width: @tabs-line-size-ink-stroke;
+    transition: top @transition-duration-2 @transition-timing-function-standard,
+      height @transition-duration-2 @transition-timing-function-standard;
+  }
+
+  &-nav-vertical &-nav-tab-list {
+    height: auto;
+
+    &-overflow-scroll {
+      padding: @tabs-padding-header-wrapper-vertical 0;
+    }
+  }
+
+  &-nav-vertical &-tab {
+    display: block;
+    margin: 0;
+    margin-top: @tabs-line-margin-title-vertical;
+    white-space: nowrap;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  &-nav-right::before {
+    right: unset;
+    left: 0;
+  }
+
+  &-nav-right &-nav-ink {
+    right: unset;
+    left: 0;
+  }
+
+  &-nav-vertical {
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  &-nav-vertical&-nav-type-line &-tab {
+    padding: 0 @tabs-line-padding-title-horizontal_vertical;
+  }
+
+  &-nav-vertical&-nav-type-card &-tab {
+    position: relative;
+    margin: 0;
+    border: @tabs-card-border-width solid @tabs-card-color-title-border;
+    border-bottom-color: @color-transparent;
+
+    &:first-child {
+      border-top-left-radius: @tabs-card-border-radius;
+    }
+
+    &-active,
+    &-active:hover {
+      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
+      border-bottom-color: @color-transparent;
+    }
+
+    &:last-child {
+      border-bottom: @tabs-card-border-width solid @tabs-card-color-title-border;
+      border-bottom-left-radius: @tabs-card-border-radius;
+    }
+  }
+
+  &-nav-vertical&-nav-type-card-gutter &-tab {
+    position: relative;
+    margin-left: 0;
+    border-radius: @tabs-card-border-radius 0 0 @tabs-card-border-radius;
+
+    &:not(:first-of-type) {
+      margin-top: 4px;
+    }
+
+    &-active,
+    &-active:hover {
+      border-right-color: var(~'@{arco-cssvars-prefix}-color-bg-2');
+      border-bottom-color: @tabs-card-color-title-border;
+    }
+  }
+
+  &-vertical &-content {
+    width: auto;
+    height: 100%;
+    padding: 0;
+  }
+
+  &-right&-vertical &-content {
+    padding-right: @tabs-content-padding;
+  }
+
+  &-left&-vertical &-content {
+    padding-left: @tabs-content-padding;
+  }
+
+  &-vertical&-type-card,
+  &-vertical&-type-card-gutter {
+    > .@{tabs-prefix-cls}-content {
+      border: @tabs-card-border-content-width solid
+        @tabs-line-color-header-border;
+      border-left: none;
+    }
+  }
+}

package/lib/tag/style/index.less

@@ -1,171 +1,171 @@
-@import '../../style/mixins/index.less';
-@import './token.less';
-
-@tag-prefix-cls: ~'@{prefix}-tag';
-
-@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple,
-  pinkpurple, magenta, gray;
-
-.@{tag-prefix-cls} {
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
-  height: @tag-size-default;
-  padding: @tag-padding-vertical @tag-padding-horizontal;
-  color: @tag-default-color-text;
-  font-weight: @tag-text-font-weight;
-  font-size: @tag-size-default-font-size;
-  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical *
-    2;
-  vertical-align: middle;
-  border: @tag-border-width @tag-border-type transparent;
-  border-radius: @tag-border-radius;
-  .text-ellipsis();
-
-  .icon-hover(@tag-prefix-cls, 12px, 16px);
-  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);
-
-  &-checkable {
-    cursor: pointer;
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-  }
-
-  &-checkable:hover {
-    background-color: @tag-color-bg-not-checked_hover;
-  }
-
-  &-checked {
-    background-color: @tag-default-color-bg;
-    border-color: @tag-default-color-border;
-  }
-
-  &-checkable&-checked:hover {
-    background-color: @tag-default-color-bg_hover;
-    border-color: @tag-default-color-border_hover;
-  }
-
-  &-bordered,
-  &-checkable&-checked&-bordered:hover {
-    border-color: @tag-default-bordered-color-border;
-  }
-
-  // Size
-  &-size-small {
-    height: @tag-size-small;
-    font-size: @tag-size-small-font-size;
-    line-height: @tag-size-small - @tag-border-width * 2;
-  }
-
-  &-size-medium {
-    height: @tag-size-medium;
-    font-size: @tag-size-medium-font-size;
-    line-height: @tag-size-medium - @tag-border-width * 2;
-  }
-
-  &-size-large {
-    height: @tag-size-large;
-    font-size: @tag-size-large-font-size;
-    line-height: @tag-size-large - @tag-border-width * 2;
-  }
-
-  &-hide {
-    display: none;
-  }
-
-  &-loading {
-    cursor: default;
-    opacity: 0.8;
-  }
-
-  &-icon {
-    margin-right: @tag-icon-margin-right;
-    color: @tag-default-color-icon;
-  }
-
-  &-text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  each(@colors, {
-    &&-checked&-@{value} {
-      color: ~'@{tag-@{value}-color-text}';
-      background-color: ~'@{tag-@{value}-color-bg}';
-      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';
-
-      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');
-    }
-
-    &&-checkable&-checked&-@{value}&:hover {
-      background-color: ~'@{tag-@{value}-color-bg_hover}';
-      border-color: ~'@{tag-@{value}-color-border_hover}';
-    }
-
-    &-checked&-@{value}&-bordered,
-    &-checked&-@{value}&-bordered:hover {
-      border-color: ~'@{tag-@{value}-bordered-color-border}';
-    }
-
-    &&-checked&-@{value} &-icon,
-    &&-checked&-@{value} &-close-btn,
-    &&-checked&-@{value} &-loading-icon {
-      color: ~'@{tag-@{value}-color-icon}';
-    }
-  });
-
-  &&-custom-color {
-    color: @tag-custom-color-text;
-
-    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
-  }
-
-  & &-close-btn {
-    margin-left: 4px;
-    font-size: 12px;
-
-    > svg {
-      position: relative;
-    }
-  }
-
-  & &-loading-icon {
-    margin-left: 4px;
-    font-size: 12px;
-  }
-}
-
-@{arco-theme-tag}[arco-theme='dark'] {
-  .@{tag-prefix-cls}-checked {
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  each(@colors, {
-    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {
-      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.2)';
-
-      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)');
-    }
-
-    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {
-      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)';
-    }
-  });
-}
-
-.@{tag-prefix-cls}-rtl {
-  direction: rtl;
-
-  .@{tag-prefix-cls} {
-    &-icon {
-      margin-right: 0;
-      margin-left: @tag-icon-margin-right;
-    }
-
-    &-close-btn,
-    &-loading-icon {
-      margin-right: 4px;
-      margin-left: 0;
-    }
-  }
-}
+@import '../../style/mixins/index.less';
+@import './token.less';
+
+@tag-prefix-cls: ~'@{prefix}-tag';
+
+@colors: red, orangered, orange, gold, lime, green, cyan, blue, arcoblue, purple,
+  pinkpurple, magenta, gray;
+
+.@{tag-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: @tag-size-default;
+  padding: @tag-padding-vertical @tag-padding-horizontal;
+  color: @tag-default-color-text;
+  font-weight: @tag-text-font-weight;
+  font-size: @tag-size-default-font-size;
+  line-height: @tag-size-default - @tag-border-width * 2 - @tag-padding-vertical *
+    2;
+  vertical-align: middle;
+  border: @tag-border-width @tag-border-type transparent;
+  border-radius: @tag-border-radius;
+  .text-ellipsis();
+
+  .icon-hover(@tag-prefix-cls, 12px, 16px);
+  .icon-hover-bg(@tag-prefix-cls, @tag-default-color-bg_hover);
+
+  &-checkable {
+    cursor: pointer;
+    transition: all @transition-duration-1 @transition-timing-function-linear;
+  }
+
+  &-checkable:hover {
+    background-color: @tag-color-bg-not-checked_hover;
+  }
+
+  &-checked {
+    background-color: @tag-default-color-bg;
+    border-color: @tag-default-color-border;
+  }
+
+  &-checkable&-checked:hover {
+    background-color: @tag-default-color-bg_hover;
+    border-color: @tag-default-color-border_hover;
+  }
+
+  &-bordered,
+  &-checkable&-checked&-bordered:hover {
+    border-color: @tag-default-bordered-color-border;
+  }
+
+  // Size
+  &-size-small {
+    height: @tag-size-small;
+    font-size: @tag-size-small-font-size;
+    line-height: @tag-size-small - @tag-border-width * 2;
+  }
+
+  &-size-medium {
+    height: @tag-size-medium;
+    font-size: @tag-size-medium-font-size;
+    line-height: @tag-size-medium - @tag-border-width * 2;
+  }
+
+  &-size-large {
+    height: @tag-size-large;
+    font-size: @tag-size-large-font-size;
+    line-height: @tag-size-large - @tag-border-width * 2;
+  }
+
+  &-hide {
+    display: none;
+  }
+
+  &-loading {
+    cursor: default;
+    opacity: 0.8;
+  }
+
+  &-icon {
+    margin-right: @tag-icon-margin-right;
+    color: @tag-default-color-icon;
+  }
+
+  &-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  each(@colors, {
+    &&-checked&-@{value} {
+      color: ~'@{tag-@{value}-color-text}';
+      background-color: ~'@{tag-@{value}-color-bg}';
+      border: @tag-border-width @tag-border-type ~'@{tag-@{value}-color-border}';
+
+      .icon-hover-bg(@tag-prefix-cls, ~'@{tag-@{value}-color-icon-bg_hover}');
+    }
+
+    &&-checkable&-checked&-@{value}&:hover {
+      background-color: ~'@{tag-@{value}-color-bg_hover}';
+      border-color: ~'@{tag-@{value}-color-border_hover}';
+    }
+
+    &-checked&-@{value}&-bordered,
+    &-checked&-@{value}&-bordered:hover {
+      border-color: ~'@{tag-@{value}-bordered-color-border}';
+    }
+
+    &&-checked&-@{value} &-icon,
+    &&-checked&-@{value} &-close-btn,
+    &&-checked&-@{value} &-loading-icon {
+      color: ~'@{tag-@{value}-color-icon}';
+    }
+  });
+
+  &&-custom-color {
+    color: @tag-custom-color-text;
+
+    .icon-hover-bg(@tag-prefix-cls, @tag-custom-color-icon-bg_hover);
+  }
+
+  & &-close-btn {
+    margin-left: 4px;
+    font-size: 12px;
+
+    > svg {
+      position: relative;
+    }
+  }
+
+  & &-loading-icon {
+    margin-left: 4px;
+    font-size: 12px;
+  }
+}
+
+@{arco-theme-tag}[arco-theme='dark'] {
+  .@{tag-prefix-cls}-checked {
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  each(@colors, {
+    .@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value} {
+      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.2)';
+
+      .icon-hover-bg(@tag-prefix-cls, ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)');
+    }
+
+    .@{tag-prefix-cls}-checkable.@{tag-prefix-cls}-checked.@{tag-prefix-cls}-@{value}:hover {
+      background-color: ~'rgba(var(@{arco-cssvars-prefix}-@{value}-6), 0.35)';
+    }
+  });
+}
+
+.@{tag-prefix-cls}-rtl {
+  direction: rtl;
+
+  .@{tag-prefix-cls} {
+    &-icon {
+      margin-right: 0;
+      margin-left: @tag-icon-margin-right;
+    }
+
+    &-close-btn,
+    &-loading-icon {
+      margin-right: 4px;
+      margin-left: 0;
+    }
+  }
+}