vdesign-ui 0.3.0 → 0.3.1

package/dist/components/step-item/style.less

@@ -1,399 +1,399 @@
-@prefix: ~"vd-step-item";
-
-.@{prefix} {
-  position: relative;
-
-  &.vd-step-horizontal {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding-block-start: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size) + var(--spacing-steps-horizontal_icon-margin_bottom));
-
-    .vd-step-u-dot {
-      position: absolute;
-      // inset-inline-end: 50%;
-      right: 50%;
-      transform: translateX(50%);
-      z-index: 2;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: inherit;
-      width: var(--icon-steps-size);
-      height: var(--icon-steps-size);
-      top: var(--spacing-steps-horizontal-padding_x);
-
-      .vd-iconfont {
-        color: inherit;
-        font-size: var(--icon-steps-size);
-      }
-
-      &::before {
-        content: "";
-        width: calc(var(--icon-steps-size) * 0.5);
-        height: calc(var(--icon-steps-size) * 0.5);
-        border-radius: 999em;
-        overflow: hidden;
-        background-color: var(--bg-color-1);
-        border: 2px solid var(--text-color-h3);
-        box-sizing: border-box;
-      }
-    }
-
-    .vd-step-u-line {
-      position: absolute;
-      top: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size)/2);
-      // inset-inline-end: 0;
-      right: 0;
-      z-index: 1;
-      width: 100%;
-      height: var(--height-steps-border-default);
-      background: linear-gradient(to left,
-          transparent 0%,
-          transparent 50%,
-          var(--color-steps-border-default) 50%,
-          var(--color-steps-border-default) 100%);
-      background-size: 5px var(--height-steps-border-default);
-      background-repeat: repeat-x;
-    }
-
-    .vd-step-u-text {
-      min-width: 0;
-      word-break: break-word;
-      text-align: center;
-      // not_started
-      color: var(--color-steps-text-not_started);
-      font-size: var(--en-multi-f-c-r-fontSize);
-      font-weight: var(--en-multi-f-c-r-fontWeight);
-      line-height: var(--en-multi-f-c-r-lineHeight);
-
-      &__title {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-      }
-
-      &__description {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        // description_text
-        color: var(--color-steps-description_text);
-        font-size: var(--en-multi-f-b-r-fontSize);
-        font-weight: var(--en-multi-f-b-r-fontWeight);
-        line-height: var(--en-multi-f-b-r-lineHeight);
-      }
-    }
-
-    &.vd-step-active {
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-complete);
-        font-size: var(--en-multi-f-c-r-fontSize);
-        font-weight: var(--en-multi-f-c-r-fontWeight);
-        line-height: var(--en-multi-f-c-r-lineHeight);
-      }
-
-      .vd-step-u-dot {
-        &::before {
-          border: 2px solid var(--primary-color);
-        }
-      }
-
-      .vd-step-u-line {
-        height: var(--height-steps-border-hover);
-        background: var(--color-steps-border-hover);
-      }
-    }
-
-    &.vd-step-afoot {
-
-      .vd-step-u-dot::before {
-        content: none;
-      }
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-afoot);
-        font-size: var(--en-multi-f-c-s-fontSize);
-        font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: var(--en-multi-f-c-s-lineHeight);
-      }
-
-      .vd-step-u-line::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        // inset-inline-start: 0;
-        left: 0;
-        width: 50%;
-        height: var(--height-steps-border-hover);
-        background: var(--color-steps-border-hover);
-      }
-    }
-
-    &.vd-step-warning {
-
-      .vd-step-u-dot::before {
-        content: none;
-      }
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-warning);
-        font-size: var(--en-multi-f-c-s-fontSize);
-        font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: var(--en-multi-f-c-s-lineHeight);
-      }
-
-      .vd-step-u-line::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        // inset-inline-start: 0;
-        left: 0;
-        width: 50%;
-        height: var(--height-steps-border-hover);
-        background: var(--color-steps-border-hover);
-      }
-    }
-  }
-
-  // vertical
-  &.vd-step-vertical {
-    width: 100%;
-    padding-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) + var(--spacing-steps-vertical_icon-margin_right));
-
-    &:not(:last-child) {
-      padding-block-end: var(--spacing-steps-vertical_description_text-margin_bottom);
-    }
-
-    .vd-step-u-dot {
-      position: absolute;
-      top: 0;
-      // inset-inline-start: var(--spacing-steps-vertical-padding_y);
-      left: var(--spacing-steps-vertical-padding_y);
-      z-index: 2;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: inherit;
-      width: var(--icon-steps-size);
-      height: var(--icon-steps-size);
-
-      .vd-iconfont {
-        color: inherit;
-        font-size: var(--icon-steps-size);
-      }
-
-      &::before {
-        content: "";
-        width: calc(var(--icon-steps-size) * 0.5);
-        height: calc(var(--icon-steps-size) * 0.5);
-        border-radius: 999em;
-        overflow: hidden;
-        background-color: var(--bg-color-1);
-        border: 2px solid var(--text-color-h3);
-        box-sizing: border-box;
-      }
-    }
-
-    .vd-step-u-line {
-      position: absolute;
-      z-index: 1;
-      top: calc(var(--icon-steps-size)/2);
-      // inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
-      left: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
-      width: var(--height-steps-border-default);
-      height: 100%;
-      background: linear-gradient(to bottom,
-          transparent 0%,
-          transparent 50%,
-          var(--color-steps-border-default) 50%,
-          var(--color-steps-border-default) 100%);
-      background-size: 1px 5px;
-      background-repeat: repeat-y;
-    }
-
-    .vd-step-u-text {
-      min-width: 0;
-      word-break: break-word;
-      text-align: start;
-      // not_started
-      color: var(--color-steps-text-not_started);
-      font-size: var(--en-multi-f-c-r-fontSize);
-      font-weight: var(--en-multi-f-c-r-fontWeight);
-      line-height: var(--en-multi-f-c-r-lineHeight);
-
-      &__title {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-      }
-
-      &__description {
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 3;
-        // description_text
-        color: var(--color-steps-description_text);
-        font-size: var(--en-multi-f-b-r-fontSize);
-        font-weight: var(--en-multi-f-b-r-fontWeight);
-        line-height: var(--en-multi-f-b-r-lineHeight);
-      }
-    }
-
-
-    &.vd-step-active {
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-complete);
-        font-size: var(--en-multi-f-c-r-fontSize);
-        font-weight: var(--en-multi-f-c-r-fontWeight);
-        line-height: var(--en-multi-f-c-r-lineHeight);
-      }
-
-      .vd-step-u-dot {
-        &::before {
-          border: 2px solid var(--primary-color);
-        }
-      }
-
-      .vd-step-u-line::after {
-        content: "";
-        position: absolute;
-        z-index: 1;
-        top: 0;
-        // inset-inline-start: 0;
-        left: 0;
-        height: 100%;
-        width: var(--height-steps-border-default);
-        background: var(--color-steps-border-hover);
-      }
-
-      // 复杂 css 条件，但:has兼容性不够
-      &:not(:has(+ :is(.vd-step-active, .vd-step-afoot, .vd-step-warning))) {
-        .vd-step-u-line::after {
-          height: 50% !important;
-        }
-      }
-    }
-
-
-    &.vd-step-warning {
-      .vd-step-u-line::after {
-        height: 100%;
-      }
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-warning);
-        font-size: var(--en-multi-f-c-s-fontSize);
-        font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: var(--en-multi-f-c-s-lineHeight);
-      }
-
-      .vd-step-u-dot::before {
-        content: none;
-      }
-
-      &+.vd-step-active {
-        .vd-step-u-line::after {
-          height: 100%;
-        }
-      }
-    }
-
-
-    &.vd-step-afoot {
-      .u-line::after {
-        height: 100%;
-      }
-
-      .vd-step-u-text {
-        color: var(--color-steps-text-afoot);
-        font-size: var(--en-multi-f-c-s-fontSize);
-        font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: var(--en-multi-f-c-s-lineHeight);
-      }
-
-      .vd-step-u-dot::before {
-        content: none;
-      }
-
-      &+.vd-step-active {
-        .vd-step-u-line::after {
-          height: 100%;
-        }
-      }
-    }
-  }
-
-  // basic
-  &.vd-step-basic {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    padding-top: var(--spacing-steps-basic-padding_top);
-    padding-bottom: var(--spacing-steps-basic-padding_bottom);
-    margin-inline-start: var(--spacing-steps-basic-padding_y);
-
-    &:last-child {
-      margin-inline-end: var(--spacing-steps-basic-padding_y);
-    }
-
-    .vd-step-u-line {
-      width: 100%;
-      height: var(--height-steps-basic-default);
-      border-radius: var(--radius-steps-basic);
-      background: var(--color-steps-basic-default);
-    }
-
-    &.vd-step-active {
-      .vd-step-u-line {
-        height: var(--height-steps-basic-hover);
-        background: var(--color-steps-basic-hover);
-      }
-    }
-  }
-}
-
-
-[lang|='ar'] , [dir='rtl']{
-  .vd-step-horizontal .vd-step-u-dot {
-    transform: translateX(-50%);
-    right: inherit;
-    left: 50%;
-  }
-  .vd-step-item.vd-step-horizontal .vd-step-u-line {
-    right: inherit;
-    left: 0;
-  }
-  .vd-step-item.vd-step-horizontal.vd-step-afoot .vd-step-u-line::after {
-    left: inherit;
-    right: 0;
-  }
-  .vd-step-item.vd-step-horizontal.vd-step-warning .vd-step-u-line::after {
-    left: inherit;
-    right: 0;
-  }
-  // vertical
-  .vd-step-item.vd-step-vertical .vd-step-u-dot {
-    left: inherit;
-    right: var(--spacing-steps-vertical-padding_y);
-  }
-  .vd-step-item.vd-step-vertical .vd-step-u-line {
-    left: inherit;
-    right: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) / 2);
-  }
-  .vd-step-item.vd-step-vertical.vd-step-active .vd-step-u-line::after {
-    left: inherit;
-    right: 0;
-  }
-  // .vd-step-u-dot .vd-svg-icon {
-  //   transform: scaleX(1);
-  // } 
-}
+@prefix: ~"vd-step-item";
+
+.@{prefix} {
+  position: relative;
+
+  &.vd-step-horizontal {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-block-start: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size) + var(--spacing-steps-horizontal_icon-margin_bottom));
+
+    .vd-step-u-dot {
+      position: absolute;
+      // inset-inline-end: 50%;
+      right: 50%;
+      transform: translateX(50%);
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+      width: var(--icon-steps-size);
+      height: var(--icon-steps-size);
+      top: var(--spacing-steps-horizontal-padding_x);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: var(--icon-steps-size);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
+        border-radius: 999em;
+        overflow: hidden;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
+        box-sizing: border-box;
+      }
+    }
+
+    .vd-step-u-line {
+      position: absolute;
+      top: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size)/2);
+      // inset-inline-end: 0;
+      right: 0;
+      z-index: 1;
+      width: 100%;
+      height: var(--height-steps-border-default);
+      background: linear-gradient(to left,
+          transparent 0%,
+          transparent 50%,
+          var(--color-steps-border-default) 50%,
+          var(--color-steps-border-default) 100%);
+      background-size: 5px var(--height-steps-border-default);
+      background-repeat: repeat-x;
+    }
+
+    .vd-step-u-text {
+      min-width: 0;
+      word-break: break-word;
+      text-align: center;
+      // not_started
+      color: var(--color-steps-text-not_started);
+      font-size: var(--en-multi-f-c-r-fontSize);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: var(--en-multi-f-c-r-lineHeight);
+
+      &__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      &__description {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        // description_text
+        color: var(--color-steps-description_text);
+        font-size: var(--en-multi-f-b-r-fontSize);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: var(--en-multi-f-b-r-lineHeight);
+      }
+    }
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: var(--en-multi-f-c-r-fontSize);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: var(--en-multi-f-c-r-lineHeight);
+      }
+
+      .vd-step-u-dot {
+        &::before {
+          border: 2px solid var(--primary-color);
+        }
+      }
+
+      .vd-step-u-line {
+        height: var(--height-steps-border-hover);
+        background: var(--color-steps-border-hover);
+      }
+    }
+
+    &.vd-step-afoot {
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-afoot);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        // inset-inline-start: 0;
+        left: 0;
+        width: 50%;
+        height: var(--height-steps-border-hover);
+        background: var(--color-steps-border-hover);
+      }
+    }
+
+    &.vd-step-warning {
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-warning);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        // inset-inline-start: 0;
+        left: 0;
+        width: 50%;
+        height: var(--height-steps-border-hover);
+        background: var(--color-steps-border-hover);
+      }
+    }
+  }
+
+  // vertical
+  &.vd-step-vertical {
+    width: 100%;
+    padding-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) + var(--spacing-steps-vertical_icon-margin_right));
+
+    &:not(:last-child) {
+      padding-block-end: var(--spacing-steps-vertical_description_text-margin_bottom);
+    }
+
+    .vd-step-u-dot {
+      position: absolute;
+      top: 0;
+      // inset-inline-start: var(--spacing-steps-vertical-padding_y);
+      left: var(--spacing-steps-vertical-padding_y);
+      z-index: 2;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+      width: var(--icon-steps-size);
+      height: var(--icon-steps-size);
+
+      .vd-iconfont {
+        color: inherit;
+        font-size: var(--icon-steps-size);
+      }
+
+      &::before {
+        content: "";
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
+        border-radius: 999em;
+        overflow: hidden;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
+        box-sizing: border-box;
+      }
+    }
+
+    .vd-step-u-line {
+      position: absolute;
+      z-index: 1;
+      top: calc(var(--icon-steps-size)/2);
+      // inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
+      left: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
+      width: var(--height-steps-border-default);
+      height: 100%;
+      background: linear-gradient(to bottom,
+          transparent 0%,
+          transparent 50%,
+          var(--color-steps-border-default) 50%,
+          var(--color-steps-border-default) 100%);
+      background-size: 1px 5px;
+      background-repeat: repeat-y;
+    }
+
+    .vd-step-u-text {
+      min-width: 0;
+      word-break: break-word;
+      text-align: start;
+      // not_started
+      color: var(--color-steps-text-not_started);
+      font-size: var(--en-multi-f-c-r-fontSize);
+      font-weight: var(--en-multi-f-c-r-fontWeight);
+      line-height: var(--en-multi-f-c-r-lineHeight);
+
+      &__title {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+      }
+
+      &__description {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;
+        // description_text
+        color: var(--color-steps-description_text);
+        font-size: var(--en-multi-f-b-r-fontSize);
+        font-weight: var(--en-multi-f-b-r-fontWeight);
+        line-height: var(--en-multi-f-b-r-lineHeight);
+      }
+    }
+
+
+    &.vd-step-active {
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-complete);
+        font-size: var(--en-multi-f-c-r-fontSize);
+        font-weight: var(--en-multi-f-c-r-fontWeight);
+        line-height: var(--en-multi-f-c-r-lineHeight);
+      }
+
+      .vd-step-u-dot {
+        &::before {
+          border: 2px solid var(--primary-color);
+        }
+      }
+
+      .vd-step-u-line::after {
+        content: "";
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        // inset-inline-start: 0;
+        left: 0;
+        height: 100%;
+        width: var(--height-steps-border-default);
+        background: var(--color-steps-border-hover);
+      }
+
+      // 复杂 css 条件，但:has兼容性不够
+      &:not(:has(+ :is(.vd-step-active, .vd-step-afoot, .vd-step-warning))) {
+        .vd-step-u-line::after {
+          height: 50% !important;
+        }
+      }
+    }
+
+
+    &.vd-step-warning {
+      .vd-step-u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-warning);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      &+.vd-step-active {
+        .vd-step-u-line::after {
+          height: 100%;
+        }
+      }
+    }
+
+
+    &.vd-step-afoot {
+      .u-line::after {
+        height: 100%;
+      }
+
+      .vd-step-u-text {
+        color: var(--color-steps-text-afoot);
+        font-size: var(--en-multi-f-c-s-fontSize);
+        font-weight: var(--en-multi-f-c-s-fontWeight);
+        line-height: var(--en-multi-f-c-s-lineHeight);
+      }
+
+      .vd-step-u-dot::before {
+        content: none;
+      }
+
+      &+.vd-step-active {
+        .vd-step-u-line::after {
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  // basic
+  &.vd-step-basic {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding-top: var(--spacing-steps-basic-padding_top);
+    padding-bottom: var(--spacing-steps-basic-padding_bottom);
+    margin-inline-start: var(--spacing-steps-basic-padding_y);
+
+    &:last-child {
+      margin-inline-end: var(--spacing-steps-basic-padding_y);
+    }
+
+    .vd-step-u-line {
+      width: 100%;
+      height: var(--height-steps-basic-default);
+      border-radius: var(--radius-steps-basic);
+      background: var(--color-steps-basic-default);
+    }
+
+    &.vd-step-active {
+      .vd-step-u-line {
+        height: var(--height-steps-basic-hover);
+        background: var(--color-steps-basic-hover);
+      }
+    }
+  }
+}
+
+
+[lang|='ar'] , [dir='rtl']{
+  .vd-step-horizontal .vd-step-u-dot {
+    transform: translateX(-50%);
+    right: inherit;
+    left: 50%;
+  }
+  .vd-step-item.vd-step-horizontal .vd-step-u-line {
+    right: inherit;
+    left: 0;
+  }
+  .vd-step-item.vd-step-horizontal.vd-step-afoot .vd-step-u-line::after {
+    left: inherit;
+    right: 0;
+  }
+  .vd-step-item.vd-step-horizontal.vd-step-warning .vd-step-u-line::after {
+    left: inherit;
+    right: 0;
+  }
+  // vertical
+  .vd-step-item.vd-step-vertical .vd-step-u-dot {
+    left: inherit;
+    right: var(--spacing-steps-vertical-padding_y);
+  }
+  .vd-step-item.vd-step-vertical .vd-step-u-line {
+    left: inherit;
+    right: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) / 2);
+  }
+  .vd-step-item.vd-step-vertical.vd-step-active .vd-step-u-line::after {
+    left: inherit;
+    right: 0;
+  }
+  // .vd-step-u-dot .vd-svg-icon {
+  //   transform: scaleX(1);
+  // } 
+}