@julingbase/jly-arco-design 0.0.2 → 0.0.4

package/lib/steps/style/arrow.less

@@ -1,212 +1,212 @@
-@import './token.less';
-
-// Arrow
-.@{steps-prefix-cls} {
-  &-mode-arrow &-item {
-    position: relative;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    height: @steps-size-default-arrow;
-    overflow: visible;
-    white-space: nowrap;
-
-    &:not(:last-child) {
-      margin-right: @steps-arrow-size-item-gap;
-    }
-  }
-
-  &-mode-arrow &-item-wait {
-    background-color: @steps-arrow-color-item-bg_wait;
-  }
-
-  &-mode-arrow &-item-process {
-    background-color: @steps-arrow-color-item-bg_process;
-  }
-
-  &-mode-arrow &-item-finish {
-    background-color: @steps-arrow-color-item-bg_finish;
-  }
-
-  &-mode-arrow &-item-error {
-    background-color: @steps-arrow-color-item-bg_error;
-  }
-
-  &-mode-arrow &-item-content {
-    display: inline-block;
-    box-sizing: border-box;
-  }
-
-  &-mode-arrow &-item:first-child &-item-content {
-    padding-left: @steps-arrow-size-default-title-padding-left;
-  }
-
-  &-mode-arrow &-item:not(:first-child) &-item-content {
-    padding-left: @steps-arrow-size-default-title-padding-left +
-      (@steps-size-default-arrow / 2);
-  }
-
-  &-mode-arrow &-item-title {
-    position: relative;
-    display: inline-block;
-    font-size: @steps-size-default-font-size-title;
-    white-space: nowrap;
-
-    &::after {
-      display: none !important;
-    }
-  }
-
-  &-mode-arrow &-item-wait &-item-title {
-    color: @steps-arrow-color-item-title_wait;
-  }
-
-  &-mode-arrow &-item-process &-item-title {
-    color: @steps-arrow-color-item-title_process;
-  }
-
-  &-mode-arrow &-item-finish &-item-title {
-    color: @steps-arrow-color-item-title_finish;
-  }
-
-  &-mode-arrow &-item-error &-item-title {
-    color: @steps-arrow-color-item-title_error;
-  }
-
-  &-mode-arrow &-item-active &-item-title {
-    font-weight: @steps-arrow-font-weight-item-title_active;
-  }
-
-  &-mode-arrow &-item-description {
-    max-width: none;
-    margin-top: @steps-arrow-item-description-margin-top;
-    font-size: @steps-size-default-font-size-description;
-    white-space: nowrap;
-  }
-
-  &-mode-arrow &-item-wait &-item-description {
-    color: @steps-arrow-color-item-description_wait;
-  }
-
-  &-mode-arrow &-item-process &-item-description {
-    color: @steps-arrow-color-item-description_process;
-  }
-
-  &-mode-arrow &-item-finish &-item-description {
-    color: @steps-arrow-color-item-description_finish;
-  }
-
-  &-mode-arrow &-item-error &-item-description {
-    color: @steps-arrow-color-item-description_error;
-  }
-
-  // 前箭头
-  &-mode-arrow &-item:not(:first-child)::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    display: block;
-    width: 0;
-    height: 0;
-    border-top: (@steps-size-default-arrow / 2) solid transparent;
-    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
-    border-left: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
-    content: '';
-  }
-
-  // 后箭头
-  &-mode-arrow &-item:not(:last-child)::after {
-    position: absolute;
-    top: 0;
-    right: -(@steps-size-default-arrow / 2);
-    z-index: 2;
-    display: block;
-    clear: both;
-    width: 0;
-    height: 0;
-    border-top: (@steps-size-default-arrow / 2) solid transparent;
-    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
-    content: '';
-  }
-
-  &-mode-arrow &-item:not(:last-child)&-item-wait::after {
-    border-left: (@steps-size-default-arrow / 2) solid
-      @steps-arrow-color-item-bg_wait;
-  }
-
-  &-mode-arrow &-item:not(:last-child)&-item-process::after {
-    border-left: (@steps-size-default-arrow / 2) solid
-      @steps-arrow-color-item-bg_process;
-  }
-
-  &-mode-arrow &-item:not(:last-child)&-item-error::after {
-    border-left: (@steps-size-default-arrow / 2) solid
-      @steps-arrow-color-item-bg_error;
-  }
-
-  &-mode-arrow &-item:not(:last-child)&-item-finish::after {
-    border-left: (@steps-size-default-arrow / 2) solid
-      @steps-arrow-color-item-bg_finish;
-  }
-
-  // Small
-  &-mode-arrow&-size-small &-item {
-    height: @steps-size-small-arrow;
-
-    &-title {
-      font-size: @steps-size-small-font-size-title;
-    }
-
-    &-description {
-      display: none;
-    }
-
-    &:not(:first-child) {
-      &::before {
-        border-top: (@steps-size-small-arrow / 2) solid transparent;
-        border-bottom: (@steps-size-small-arrow / 2) solid transparent;
-        border-left: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
-      }
-    }
-
-    &:not(:last-child)::after {
-      right: -(@steps-size-small-arrow / 2);
-      border-top: (@steps-size-small-arrow / 2) solid transparent;
-      border-bottom: (@steps-size-small-arrow / 2) solid transparent;
-      border-left: (@steps-size-small-arrow / 2) solid
-        @steps-arrow-color-item-bg_wait;
-    }
-  }
-
-  &-mode-arrow&-size-small &-item:first-child &-item-content {
-    padding-left: @steps-arrow-size-small-title-padding-left;
-  }
-
-  &-mode-arrow&-size-small &-item:not(:first-child) &-item-content {
-    padding-left: @steps-arrow-size-small-title-padding-left +
-      (@steps-size-small-arrow / 2);
-  }
-
-  &-mode-arrow&-size-small &-item-error {
-    &:not(:last-child)::after {
-      border-left: (@steps-size-small-arrow / 2) solid
-        @steps-arrow-color-item-bg_error;
-    }
-  }
-
-  &-mode-arrow&-size-small &-item:not(:last-child)&-item-wait::after {
-    border-left: (@steps-size-small-arrow / 2) solid
-      @steps-arrow-color-item-bg_wait;
-  }
-
-  &-mode-arrow&-size-small &-item:not(:last-child)&-item-process::after {
-    border-left: (@steps-size-small-arrow / 2) solid
-      @steps-arrow-color-item-bg_process;
-  }
-
-  &-mode-arrow&-size-small &-item:not(:last-child)&-item-finish::after {
-    border-left: (@steps-size-small-arrow / 2) solid
-      @steps-arrow-color-item-bg_finish;
-  }
-}
+@import './token.less';
+
+// Arrow
+.@{steps-prefix-cls} {
+  &-mode-arrow &-item {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    height: @steps-size-default-arrow;
+    overflow: visible;
+    white-space: nowrap;
+
+    &:not(:last-child) {
+      margin-right: @steps-arrow-size-item-gap;
+    }
+  }
+
+  &-mode-arrow &-item-wait {
+    background-color: @steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow &-item-process {
+    background-color: @steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow &-item-finish {
+    background-color: @steps-arrow-color-item-bg_finish;
+  }
+
+  &-mode-arrow &-item-error {
+    background-color: @steps-arrow-color-item-bg_error;
+  }
+
+  &-mode-arrow &-item-content {
+    display: inline-block;
+    box-sizing: border-box;
+  }
+
+  &-mode-arrow &-item:first-child &-item-content {
+    padding-left: @steps-arrow-size-default-title-padding-left;
+  }
+
+  &-mode-arrow &-item:not(:first-child) &-item-content {
+    padding-left: @steps-arrow-size-default-title-padding-left +
+      (@steps-size-default-arrow / 2);
+  }
+
+  &-mode-arrow &-item-title {
+    position: relative;
+    display: inline-block;
+    font-size: @steps-size-default-font-size-title;
+    white-space: nowrap;
+
+    &::after {
+      display: none !important;
+    }
+  }
+
+  &-mode-arrow &-item-wait &-item-title {
+    color: @steps-arrow-color-item-title_wait;
+  }
+
+  &-mode-arrow &-item-process &-item-title {
+    color: @steps-arrow-color-item-title_process;
+  }
+
+  &-mode-arrow &-item-finish &-item-title {
+    color: @steps-arrow-color-item-title_finish;
+  }
+
+  &-mode-arrow &-item-error &-item-title {
+    color: @steps-arrow-color-item-title_error;
+  }
+
+  &-mode-arrow &-item-active &-item-title {
+    font-weight: @steps-arrow-font-weight-item-title_active;
+  }
+
+  &-mode-arrow &-item-description {
+    max-width: none;
+    margin-top: @steps-arrow-item-description-margin-top;
+    font-size: @steps-size-default-font-size-description;
+    white-space: nowrap;
+  }
+
+  &-mode-arrow &-item-wait &-item-description {
+    color: @steps-arrow-color-item-description_wait;
+  }
+
+  &-mode-arrow &-item-process &-item-description {
+    color: @steps-arrow-color-item-description_process;
+  }
+
+  &-mode-arrow &-item-finish &-item-description {
+    color: @steps-arrow-color-item-description_finish;
+  }
+
+  &-mode-arrow &-item-error &-item-description {
+    color: @steps-arrow-color-item-description_error;
+  }
+
+  // 前箭头
+  &-mode-arrow &-item:not(:first-child)::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    display: block;
+    width: 0;
+    height: 0;
+    border-top: (@steps-size-default-arrow / 2) solid transparent;
+    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
+    border-left: (@steps-size-default-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
+    content: '';
+  }
+
+  // 后箭头
+  &-mode-arrow &-item:not(:last-child)::after {
+    position: absolute;
+    top: 0;
+    right: -(@steps-size-default-arrow / 2);
+    z-index: 2;
+    display: block;
+    clear: both;
+    width: 0;
+    height: 0;
+    border-top: (@steps-size-default-arrow / 2) solid transparent;
+    border-bottom: (@steps-size-default-arrow / 2) solid transparent;
+    content: '';
+  }
+
+  &-mode-arrow &-item:not(:last-child)&-item-wait::after {
+    border-left: (@steps-size-default-arrow / 2) solid
+      @steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow &-item:not(:last-child)&-item-process::after {
+    border-left: (@steps-size-default-arrow / 2) solid
+      @steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow &-item:not(:last-child)&-item-error::after {
+    border-left: (@steps-size-default-arrow / 2) solid
+      @steps-arrow-color-item-bg_error;
+  }
+
+  &-mode-arrow &-item:not(:last-child)&-item-finish::after {
+    border-left: (@steps-size-default-arrow / 2) solid
+      @steps-arrow-color-item-bg_finish;
+  }
+
+  // Small
+  &-mode-arrow&-size-small &-item {
+    height: @steps-size-small-arrow;
+
+    &-title {
+      font-size: @steps-size-small-font-size-title;
+    }
+
+    &-description {
+      display: none;
+    }
+
+    &:not(:first-child) {
+      &::before {
+        border-top: (@steps-size-small-arrow / 2) solid transparent;
+        border-bottom: (@steps-size-small-arrow / 2) solid transparent;
+        border-left: (@steps-size-small-arrow / 2) solid var(~'@{arco-cssvars-prefix}-color-bg-2');
+      }
+    }
+
+    &:not(:last-child)::after {
+      right: -(@steps-size-small-arrow / 2);
+      border-top: (@steps-size-small-arrow / 2) solid transparent;
+      border-bottom: (@steps-size-small-arrow / 2) solid transparent;
+      border-left: (@steps-size-small-arrow / 2) solid
+        @steps-arrow-color-item-bg_wait;
+    }
+  }
+
+  &-mode-arrow&-size-small &-item:first-child &-item-content {
+    padding-left: @steps-arrow-size-small-title-padding-left;
+  }
+
+  &-mode-arrow&-size-small &-item:not(:first-child) &-item-content {
+    padding-left: @steps-arrow-size-small-title-padding-left +
+      (@steps-size-small-arrow / 2);
+  }
+
+  &-mode-arrow&-size-small &-item-error {
+    &:not(:last-child)::after {
+      border-left: (@steps-size-small-arrow / 2) solid
+        @steps-arrow-color-item-bg_error;
+    }
+  }
+
+  &-mode-arrow&-size-small &-item:not(:last-child)&-item-wait::after {
+    border-left: (@steps-size-small-arrow / 2) solid
+      @steps-arrow-color-item-bg_wait;
+  }
+
+  &-mode-arrow&-size-small &-item:not(:last-child)&-item-process::after {
+    border-left: (@steps-size-small-arrow / 2) solid
+      @steps-arrow-color-item-bg_process;
+  }
+
+  &-mode-arrow&-size-small &-item:not(:last-child)&-item-finish::after {
+    border-left: (@steps-size-small-arrow / 2) solid
+      @steps-arrow-color-item-bg_finish;
+  }
+}