@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/es/steps/style/dot.less

@@ -1,210 +1,210 @@
-@import './token.less';
-
-@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
-  (@steps-dot-size-item-icon / 2);
-@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -
-  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);
-// Dot
-.@{steps-prefix-cls} {
-  &-mode-dot &-item {
-    position: relative;
-    flex: 1;
-    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
-    overflow: visible;
-    white-space: nowrap;
-    text-align: left;
-
-    &:last-child {
-      flex: none;
-      margin-right: 0;
-    }
-  }
-
-  &-mode-dot &-item-active &-item-title {
-    font-weight: @steps-dot-font-weight-item-title_active;
-  }
-
-  &-mode-dot &-item-node {
-    display: inline-block;
-    box-sizing: border-box;
-    width: @steps-dot-size-item-icon;
-    height: @steps-dot-size-item-icon;
-    vertical-align: top;
-    border-radius: @steps-dot-border-radius-item-icon;
-  }
-
-  &-mode-dot &-item-active &-item-node {
-    width: @steps-dot-size-item-icon-active;
-    height: @steps-dot-size-item-icon-active;
-  }
-
-  &-mode-dot &-item-wait &-item-node {
-    background-color: @steps-dot-color-item-bg_wait;
-    border-color: @steps-dot-color-item-border_wait;
-  }
-
-  &-mode-dot &-item-process &-item-node {
-    background-color: @steps-dot-color-item-bg_process;
-    border-color: @steps-dot-color-item-border_process;
-  }
-
-  &-mode-dot &-item-finish &-item-node {
-    background-color: @steps-dot-color-item-bg_finish;
-    border-color: @steps-dot-color-item-border_finish;
-  }
-
-  &-mode-dot &-item-error &-item-node {
-    background-color: @steps-dot-color-item-bg_error;
-    border-color: @steps-dot-color-item-border_error;
-  }
-
-  &-mode-dot&-horizontal &-item-node {
-    margin-left: @steps-dot-item-icon-margin-left;
-  }
-
-  &-mode-dot&-horizontal &-item-active &-item-node {
-    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) /
-          2);
-    margin-left: @steps-dot-item-icon-margin-left -
-      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
-  }
-
-  &-mode-dot &-item-content {
-    display: inline-block;
-  }
-
-  &-mode-dot &-item-title {
-    position: relative;
-    display: inline-block;
-    margin-top: @steps-dot-horizontal-item-title-margin-top;
-    font-size: @steps-size-default-font-size-title;
-  }
-
-  &-mode-dot &-item-wait &-item-title {
-    color: @steps-dot-color-item-title_wait;
-  }
-
-  &-mode-dot &-item-process &-item-title {
-    color: @steps-dot-color-item-title_process;
-  }
-
-  &-mode-dot &-item-finish &-item-title {
-    color: @steps-dot-color-item-title_finish;
-  }
-
-  &-mode-dot &-item-error &-item-title {
-    color: @steps-dot-color-item-title_error;
-  }
-
-  &-mode-dot &-item-description {
-    margin-top: @steps-dot-horizontal-item-description-margin-top;
-    font-size: @steps-size-default-font-size-description;
-    white-space: normal;
-  }
-
-  &-mode-dot &-item-wait &-item-description {
-    color: @steps-dot-color-item-description_wait;
-  }
-
-  &-mode-dot &-item-process &-item-description {
-    color: @steps-dot-color-item-description_process;
-  }
-
-  &-mode-dot &-item-finish &-item-description {
-    color: @steps-dot-color-item-description_finish;
-  }
-
-  &-mode-dot &-item-error &-item-description {
-    color: @steps-dot-color-item-description_error;
-  }
-
-  &-mode-dot &-item:not(:last-child) &-item-tail {
-    position: absolute;
-    top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);
-    left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
-      @steps-dot-size-item-icon-gap;
-    box-sizing: border-box;
-    width: 100%;
-    height: @steps-dot-size-item-tail;
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {
-    background-color: @steps-dot-color-item-tail_process;
-  }
-
-  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {
-    background-color: @steps-dot-color-item-tail_error;
-  }
-
-  // Dot vertical
-  &-mode-dot&-vertical &-item-node {
-    margin-right: @steps-dot-vertical-item-icon-margin-right;
-  }
-
-  &-mode-dot&-vertical &-item-content {
-    overflow: hidden;
-  }
-
-  &-mode-dot&-vertical &-item-title {
-    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) - (@steps-size-default / 2);
-  }
-
-  &-mode-dot&-vertical &-item-description {
-    margin-top: @steps-dot-vertical-item-description-margin-top;
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child) &-item-tail {
-    position: absolute;
-    bottom: 0;
-    left: (@steps-dot-size-item-icon / 2);
-    box-sizing: border-box;
-    width: 1px;
-    height: 100%;
-    padding-top: (
-      @steps-dot-size-item-icon + 4px + @steps-dot-size-item-icon-gap
-    );
-    padding-bottom: 2px;
-    background-color: transparent;
-    transform: translateX(-50%);
-
-    &::after {
-      display: block;
-      width: 100%;
-      height: 100%;
-      background-color: @steps-dot-color-item-tail_wait;
-      content: '';
-    }
-  }
-
-  &-mode-dot&-vertical
-    &-item:not(:last-child)&-item-process
-    &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_wait;
-  }
-
-  &-mode-dot&-vertical &-item:not(:last-child)&-item-finish &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_process;
-  }
-
-  &-mode-dot&-vertical
-    &-item:not(:last-child)&-item-next-error
-    &-item-tail::after {
-    background-color: @steps-dot-color-item-tail_error;
-  }
-
-  &-mode-dot&-vertical &-item &-item-node {
-    margin-top: @steps-dot-vertical-item-dot-margin-top;
-  }
-
-  &-mode-dot&-vertical &-item-active &-item-node {
-    margin-top: @steps-dot-vertical-item-dot-margin-top-active;
-    margin-left: -((
-            @steps-dot-size-item-icon-active - @steps-dot-size-item-icon
-          ) / 2);
-  }
-}
+@import './token.less';
+
+@steps-dot-item-icon-margin-left: (@steps-label-vertical-content-width / 2) -
+  (@steps-dot-size-item-icon / 2);
+@steps-dot-vertical-item-dot-margin-top-active: @steps-dot-vertical-item-dot-margin-top -
+  (@steps-dot-size-item-icon-active - @steps-dot-size-item-icon);
+// Dot
+.@{steps-prefix-cls} {
+  &-mode-dot &-item {
+    position: relative;
+    flex: 1;
+    margin-right: @steps-dot-size-item-icon + @steps-dot-size-item-icon-gap * 2;
+    overflow: visible;
+    white-space: nowrap;
+    text-align: left;
+
+    &:last-child {
+      flex: none;
+      margin-right: 0;
+    }
+  }
+
+  &-mode-dot &-item-active &-item-title {
+    font-weight: @steps-dot-font-weight-item-title_active;
+  }
+
+  &-mode-dot &-item-node {
+    display: inline-block;
+    box-sizing: border-box;
+    width: @steps-dot-size-item-icon;
+    height: @steps-dot-size-item-icon;
+    vertical-align: top;
+    border-radius: @steps-dot-border-radius-item-icon;
+  }
+
+  &-mode-dot &-item-active &-item-node {
+    width: @steps-dot-size-item-icon-active;
+    height: @steps-dot-size-item-icon-active;
+  }
+
+  &-mode-dot &-item-wait &-item-node {
+    background-color: @steps-dot-color-item-bg_wait;
+    border-color: @steps-dot-color-item-border_wait;
+  }
+
+  &-mode-dot &-item-process &-item-node {
+    background-color: @steps-dot-color-item-bg_process;
+    border-color: @steps-dot-color-item-border_process;
+  }
+
+  &-mode-dot &-item-finish &-item-node {
+    background-color: @steps-dot-color-item-bg_finish;
+    border-color: @steps-dot-color-item-border_finish;
+  }
+
+  &-mode-dot &-item-error &-item-node {
+    background-color: @steps-dot-color-item-bg_error;
+    border-color: @steps-dot-color-item-border_error;
+  }
+
+  &-mode-dot&-horizontal &-item-node {
+    margin-left: @steps-dot-item-icon-margin-left;
+  }
+
+  &-mode-dot&-horizontal &-item-active &-item-node {
+    margin-top: -((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) /
+          2);
+    margin-left: @steps-dot-item-icon-margin-left -
+      ((@steps-dot-size-item-icon-active - @steps-dot-size-item-icon) / 2);
+  }
+
+  &-mode-dot &-item-content {
+    display: inline-block;
+  }
+
+  &-mode-dot &-item-title {
+    position: relative;
+    display: inline-block;
+    margin-top: @steps-dot-horizontal-item-title-margin-top;
+    font-size: @steps-size-default-font-size-title;
+  }
+
+  &-mode-dot &-item-wait &-item-title {
+    color: @steps-dot-color-item-title_wait;
+  }
+
+  &-mode-dot &-item-process &-item-title {
+    color: @steps-dot-color-item-title_process;
+  }
+
+  &-mode-dot &-item-finish &-item-title {
+    color: @steps-dot-color-item-title_finish;
+  }
+
+  &-mode-dot &-item-error &-item-title {
+    color: @steps-dot-color-item-title_error;
+  }
+
+  &-mode-dot &-item-description {
+    margin-top: @steps-dot-horizontal-item-description-margin-top;
+    font-size: @steps-size-default-font-size-description;
+    white-space: normal;
+  }
+
+  &-mode-dot &-item-wait &-item-description {
+    color: @steps-dot-color-item-description_wait;
+  }
+
+  &-mode-dot &-item-process &-item-description {
+    color: @steps-dot-color-item-description_process;
+  }
+
+  &-mode-dot &-item-finish &-item-description {
+    color: @steps-dot-color-item-description_finish;
+  }
+
+  &-mode-dot &-item-error &-item-description {
+    color: @steps-dot-color-item-description_error;
+  }
+
+  &-mode-dot &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    top: ((@steps-dot-size-item-icon - @steps-dot-size-item-tail) / 2);
+    left: @steps-dot-item-icon-margin-left + @steps-dot-size-item-icon +
+      @steps-dot-size-item-icon-gap;
+    box-sizing: border-box;
+    width: 100%;
+    height: @steps-dot-size-item-tail;
+    background-color: @steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot &-item:not(:last-child)&-item-process &-item-tail {
+    background-color: @steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot &-item:not(:last-child)&-item-finish &-item-tail {
+    background-color: @steps-dot-color-item-tail_process;
+  }
+
+  &-mode-dot &-item:not(:last-child)&-item-next-error &-item-tail {
+    background-color: @steps-dot-color-item-tail_error;
+  }
+
+  // Dot vertical
+  &-mode-dot&-vertical &-item-node {
+    margin-right: @steps-dot-vertical-item-icon-margin-right;
+  }
+
+  &-mode-dot&-vertical &-item-content {
+    overflow: hidden;
+  }
+
+  &-mode-dot&-vertical &-item-title {
+    margin-top: @steps-dot-vertical-item-dot-margin-top + (@steps-dot-size-item-icon / 2) - (@steps-size-default / 2);
+  }
+
+  &-mode-dot&-vertical &-item-description {
+    margin-top: @steps-dot-vertical-item-description-margin-top;
+  }
+
+  &-mode-dot&-vertical &-item:not(:last-child) &-item-tail {
+    position: absolute;
+    bottom: 0;
+    left: (@steps-dot-size-item-icon / 2);
+    box-sizing: border-box;
+    width: 1px;
+    height: 100%;
+    padding-top: (
+      @steps-dot-size-item-icon + 4px + @steps-dot-size-item-icon-gap
+    );
+    padding-bottom: 2px;
+    background-color: transparent;
+    transform: translateX(-50%);
+
+    &::after {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background-color: @steps-dot-color-item-tail_wait;
+      content: '';
+    }
+  }
+
+  &-mode-dot&-vertical
+    &-item:not(:last-child)&-item-process
+    &-item-tail::after {
+    background-color: @steps-dot-color-item-tail_wait;
+  }
+
+  &-mode-dot&-vertical &-item:not(:last-child)&-item-finish &-item-tail::after {
+    background-color: @steps-dot-color-item-tail_process;
+  }
+
+  &-mode-dot&-vertical
+    &-item:not(:last-child)&-item-next-error
+    &-item-tail::after {
+    background-color: @steps-dot-color-item-tail_error;
+  }
+
+  &-mode-dot&-vertical &-item &-item-node {
+    margin-top: @steps-dot-vertical-item-dot-margin-top;
+  }
+
+  &-mode-dot&-vertical &-item-active &-item-node {
+    margin-top: @steps-dot-vertical-item-dot-margin-top-active;
+    margin-left: -((
+            @steps-dot-size-item-icon-active - @steps-dot-size-item-icon
+          ) / 2);
+  }
+}

package/es/steps/style/index.less

@@ -1,74 +1,74 @@
-@import './token.less';
-@import './circle.less';
-@import './dot.less';
-@import './arrow.less';
-@import './navigation.less';
-
-@steps-prefix-cls: ~'@{prefix}-steps';
-
-.@{steps-prefix-cls} {
-  display: flex;
-
-  &-changeable {
-    .@{steps-prefix-cls}-item-title,
-    .@{steps-prefix-cls}-item-description {
-      transition: all @transition-duration-1 @transition-timing-function-linear;
-    }
-  }
-
-  &-changeable &-item:not(&-item-active):not(&-item-disabled) {
-    cursor: pointer;
-
-    &:hover {
-      .@{steps-prefix-cls}-item-content {
-        .@{steps-prefix-cls}-item-title,
-        .@{steps-prefix-cls}-item-description {
-          color: @color-primary-6;
-        }
-      }
-    }
-  }
-}
-
-// Line Less
-.@{steps-prefix-cls} {
-  &-line-less &-item-title::after {
-    display: none !important;
-  }
-}
-
-// Direction
-.@{steps-prefix-cls} {
-  &-vertical {
-    flex-direction: column;
-  }
-
-  &-vertical &-item {
-    &:not(:last-child) {
-      min-height: 90px;
-    }
-
-    &-title::after {
-      display: none !important;
-    }
-
-    &-description {
-      max-width: none;
-    }
-  }
-}
-
-// Label vertical
-.@{steps-prefix-cls} {
-  &-label-vertical &-item {
-    &-content {
-      display: block;
-      width: @steps-label-vertical-content-width;
-      text-align: center;
-    }
-
-    &-description {
-      max-width: none;
-    }
-  }
-}
+@import './token.less';
+@import './circle.less';
+@import './dot.less';
+@import './arrow.less';
+@import './navigation.less';
+
+@steps-prefix-cls: ~'@{prefix}-steps';
+
+.@{steps-prefix-cls} {
+  display: flex;
+
+  &-changeable {
+    .@{steps-prefix-cls}-item-title,
+    .@{steps-prefix-cls}-item-description {
+      transition: all @transition-duration-1 @transition-timing-function-linear;
+    }
+  }
+
+  &-changeable &-item:not(&-item-active):not(&-item-disabled) {
+    cursor: pointer;
+
+    &:hover {
+      .@{steps-prefix-cls}-item-content {
+        .@{steps-prefix-cls}-item-title,
+        .@{steps-prefix-cls}-item-description {
+          color: @color-primary-6;
+        }
+      }
+    }
+  }
+}
+
+// Line Less
+.@{steps-prefix-cls} {
+  &-line-less &-item-title::after {
+    display: none !important;
+  }
+}
+
+// Direction
+.@{steps-prefix-cls} {
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-vertical &-item {
+    &:not(:last-child) {
+      min-height: 90px;
+    }
+
+    &-title::after {
+      display: none !important;
+    }
+
+    &-description {
+      max-width: none;
+    }
+  }
+}
+
+// Label vertical
+.@{steps-prefix-cls} {
+  &-label-vertical &-item {
+    &-content {
+      display: block;
+      width: @steps-label-vertical-content-width;
+      text-align: center;
+    }
+
+    &-description {
+      max-width: none;
+    }
+  }
+}