@chaoswise/ui 2.4.0 → 2.5.0

package/lib/Steps/Steps.less

@@ -0,0 +1,502 @@
+@steps-prefix-cls: ~'@{ant-prefix}-steps';
+@process-icon-color: @primary-color;
+@process-title-color: @heading-color;
+@process-description-color: @text-color-secondary;
+@process-icon-text-color: @text-color-inverse;
+@wait-icon-color: @disabled-color;
+@wait-title-color: @text-color-secondary;
+@wait-description-color: @wait-title-color;
+@wait-tail-color: @process-tail-color;
+@finish-icon-color: @process-icon-color;
+@finish-title-color: @text-color;
+@finish-description-color: @text-color-secondary;
+@error-icon-color: @error-color;
+@error-title-color: @error-color;
+@error-description-color: @error-color;
+@error-tail-color: @wait-tail-color;
+@steps-background: @component-background;
+@steps-nav-arrow-color: fade(@black, 25%);
+@steps-nav-active-color: @primary-color;
+
+@steps-small-icon-size: 24px;
+@steps-dot-size: 8px;
+@steps-current-dot-size: 10px;
+@steps-desciption-max-width: 140px;
+@steps-nav-content-max-width: auto;
+
+.@{steps-prefix-cls} {
+  // Fixed 冲突纵向步骤条样式
+  // display: flex;
+  // width: 100%;
+  // font-size: 0;
+}
+
+.@{steps-prefix-cls}-item {
+  position: relative;
+  display: inline-block;
+  flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+
+  &-container {
+    outline: none;
+  }
+
+  &:last-child {
+    flex: none;
+  }
+
+  &:last-child>&-container>&-tail,
+  &:last-child>&-container>&-content>&-title::after {
+    display: none;
+  }
+
+  &-icon,
+  &-content {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &-icon {
+    width: @steps-icon-size;
+    height: @steps-icon-size;
+    margin-right: 8px;
+    font-size: @font-size-lg;
+    font-family: @font-family;
+    line-height: @steps-icon-size;
+    text-align: center;
+    border: @border-width-base @border-style-base @wait-icon-color;
+    border-radius: @steps-icon-size;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    >.@{steps-prefix-cls}-icon {
+      position: relative;
+      top: -1px;
+      color: @primary-color;
+      line-height: 1;
+    }
+  }
+
+  &-tail {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 100%;
+    padding: 0 10px;
+
+    &::after {
+      display: inline-block;
+      width: 100%;
+      height: 1px;
+      background: @border-color-split;
+      border-radius: 1px;
+      transition: background 0.3s;
+      content: '';
+    }
+  }
+
+  &-title {
+    position: relative;
+    display: inline-block;
+    padding-right: 8px; // ui规范
+    color: @text-color;
+    // font-size: @font-size-lg;
+    font-size: 14px;
+    line-height: @steps-icon-size;
+    // line-height: 22px; // 符合UI规范（不调整，@steps-icon-size原因，布局会有变化）
+    &::after {
+      position: absolute;
+      top: @steps-icon-size / 2;
+      left: 100%;
+      display: block;
+      width: 9999px;
+      height: 1px;
+      background: @wait-tail-color;
+      content: '';
+    }
+  }
+
+  &-subtitle {
+    display: inline;
+    margin-left: 8px;
+    color: @text-color-secondary;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
+
+  &-description {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    margin-top: @vertical-margin; // ui新规范
+    font-weight: 400;
+    line-height: 20px; // ui规范
+  }
+
+  .step-item-status(wait);
+  .step-item-status(process);
+
+  &-process &-icon {
+    background: @process-icon-color;
+
+    >.@{steps-prefix-cls}-icon {
+      color: @process-icon-text-color;
+    }
+  }
+
+  &-process,
+  &-finish &-title {
+    font-weight: 500; // ui规范
+  }
+
+  .step-item-status(finish);
+  .step-item-status(error);
+
+  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
+    background: @error-icon-color;
+  }
+}
+
+// ===================== Clickable =====================
+.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
+  &:not(.@{steps-prefix-cls}-item-active) {
+    &>.@{steps-prefix-cls}-item-container[role='button'] {
+      cursor: pointer;
+
+      .@{steps-prefix-cls}-item {
+
+        &-title,
+        &-description,
+        &-icon .@{steps-prefix-cls}-icon {
+          transition: color 0.3s;
+        }
+      }
+
+      &:hover {
+        .@{steps-prefix-cls}-item {
+
+          &-title,
+          &-subtitle,
+          &-description {
+            color: @primary-color;
+          }
+        }
+      }
+    }
+
+    &:not(.@{steps-prefix-cls}-item-process) {
+      &>.@{steps-prefix-cls}-item-container[role='button']:hover {
+        .@{steps-prefix-cls}-item {
+          &-icon {
+            border-color: @primary-color;
+
+            .@{steps-prefix-cls}-icon {
+              color: @primary-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
+  .@{steps-prefix-cls}-item {
+    margin-right: 8px; // ui规范
+    white-space: nowrap;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:last-child .@{steps-prefix-cls}-item-title {
+      padding-right: 0;
+    }
+
+    &-tail {
+      display: none;
+    }
+
+    &-description {
+      max-width: @steps-desciption-max-width;
+      white-space: normal;
+    }
+  }
+}
+
+.step-item-status(@status) {
+  @icon-color: '@{status}-icon-color';
+  @title-color: '@{status}-title-color';
+  @description-color: '@{status}-description-color';
+  @tail-color: '@{status}-tail-color';
+
+  &-@{status} &-icon {
+    background-color: @steps-background;
+    border-color: @@icon-color;
+
+    >.@{steps-prefix-cls}-icon {
+      color: @@icon-color;
+
+      .@{steps-prefix-cls}-icon-dot {
+        background: @@icon-color;
+      }
+    }
+  }
+
+  &-@{status}>&-container>&-content>&-title {
+    color: @@title-color;
+
+    &::after {
+      background-color: @@tail-color;
+    }
+  }
+
+  &-@{status}>&-container>&-content>&-description {
+    color: @@description-color;
+  }
+
+  &-@{status}>&-container>&-tail::after {
+    background-color: @@tail-color;
+  }
+}
+
+
+
+.steps-vertical() {
+  display: block;
+
+  .@{steps-prefix-cls}-item {
+    display: block;
+    overflow: visible;
+
+    &-icon {
+      float: left;
+      margin-right: 8px;
+    }
+
+    &-content {
+      display: block;
+      min-height: 96px; // 设置步骤条线最小高度为60px，后期调整为固定高度
+      overflow: hidden;
+    }
+
+    &-title {
+      line-height: @steps-icon-size;
+    }
+
+    &-description {
+      padding-bottom: 12px;
+    }
+  }
+
+  >.@{steps-prefix-cls}-item>.@{steps-prefix-cls}-item-container>.@{steps-prefix-cls}-item-tail {
+    position: absolute;
+    top: 0;
+    left: @steps-icon-size / 2;
+    width: 1px;
+    height: 100%;
+    padding: @steps-icon-size + 6px 0 6px;
+
+    &::after {
+      width: 1px;
+      height: 100%;
+    }
+  }
+
+  >.@{steps-prefix-cls}-item:not(:last-child)>.@{steps-prefix-cls}-item-container>.@{steps-prefix-cls}-item-tail {
+    display: block;
+  }
+
+  >.@{steps-prefix-cls}-item>.@{steps-prefix-cls}-item-container>.@{steps-prefix-cls}-item-content>.@{steps-prefix-cls}-item-title {
+    &::after {
+      display: none;
+    }
+  }
+
+  &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
+    .@{steps-prefix-cls}-item-tail {
+      position: absolute;
+      top: 0;
+      left: 12px;
+      padding: @steps-small-icon-size + 6px 0 6px;
+    }
+
+    .@{steps-prefix-cls}-item-title {
+      line-height: @steps-small-icon-size;
+    }
+  }
+}
+
+.@{steps-prefix-cls}-vertical {
+  .steps-vertical;
+}
+
+@media (max-width: @screen-xs) {
+  .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
+    .steps-vertical;
+  }
+}
+
+// dot样式
+.@{steps-prefix-cls}-dot,
+.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
+  .@{steps-prefix-cls}-item {
+    &-title {
+      line-height: 22px; // ui规范
+    }
+    &-description {
+      margin-top: 4px;
+    }
+    &-tail {
+      top: 2px;
+      width: 100%;
+      margin: 0 0 0 @steps-desciption-max-width / 2;
+      padding: 0;
+
+      &::after {
+        width: ~'calc(100% - 20px)';
+        height: 3px;
+        margin-left: 12px;
+      }
+    }
+
+    &:first-child .@{steps-prefix-cls}-icon-dot {
+      left: 2px;
+    }
+
+    &-icon {
+      width: @steps-dot-size;
+      height: @steps-dot-size;
+      margin-left: 67px;
+      padding-right: 0;
+      line-height: @steps-dot-size;
+      background: transparent;
+      border: 0;
+
+      .@{steps-prefix-cls}-icon-dot {
+        position: relative;
+        float: left;
+        width: 100%;
+        height: 100%;
+        border-radius: 100px;
+        transition: all 0.3s;
+
+        /* expand hover area */
+        &::after {
+          position: absolute;
+          top: -12px;
+          left: -26px;
+          width: 60px;
+          height: 32px;
+          background: fade(@black, 0.1%);
+          content: '';
+        }
+      }
+    }
+
+    &-content {
+      width: @steps-desciption-max-width;
+    }
+
+    &-process .@{steps-prefix-cls}-item-icon {
+      width: @steps-current-dot-size;
+      height: @steps-current-dot-size;
+      line-height: @steps-current-dot-size;
+
+      .@{steps-prefix-cls}-icon-dot {
+        top: -1px;
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
+  .@{steps-prefix-cls}-item-icon {
+    margin-top: 8px;
+    margin-left: 0;
+  }
+
+  // https://github.com/ant-design/ant-design/issues/18354
+  .@{steps-prefix-cls}-item>.@{steps-prefix-cls}-item-container>.@{steps-prefix-cls}-item-tail {
+    top: 2px;
+    left: -9px;
+    margin: 0;
+    padding: 22px 0 4px;
+  }
+
+  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
+    left: 0;
+  }
+
+  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
+    left: -2px;
+  }
+
+  .@{steps-prefix-cls}-item {
+    &-content {
+      min-height: 86px; // 设置步骤条线最小高度为60px，后期调整为固定高度
+    }
+  }
+}
+
+.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-dot {
+  .@{steps-prefix-cls}-item {
+    flex-grow: 0;
+    flex-basis: auto;
+
+    &-container {
+      .@{steps-prefix-cls}-item-tail {
+        margin: 0;
+
+        &:after {
+          margin-left: 16px;
+          width: 100px;
+        }
+      }
+
+      .@{steps-prefix-cls}-item-icon {
+        margin-left: 0;
+      }
+
+      .@{steps-prefix-cls}-item-content {
+        width: 124px;
+        text-align: left;
+
+        .@{steps-prefix-cls}-item-title {
+          width: 98px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .@{steps-prefix-cls}-item-description {
+          width: 108px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          /*设置对齐模式*/
+          -webkit-line-clamp: 2;
+          /*设置多行的行数*/
+        }
+      }
+    }
+  }
+}
+
+.@{steps-prefix-cls}:not(.@{steps-prefix-cls}-dot):not(.@{steps-prefix-cls}-vertical) {
+  .@{steps-prefix-cls}-item {
+    flex-grow: 0;
+    flex-basis: auto;
+
+    &-title {
+      display: flex;
+
+      &::after {
+        position: relative;
+        width: 100px;
+        left: auto;
+        right: -8px;
+      }
+    }
+  }
+}

package/lib/Steps/index.js

@@ -0,0 +1,4 @@
+import "antd/es/steps/style";
+import _Steps from "antd/es/steps";
+import './Steps.less';
+export default _Steps;

package/lib/Switch/Switch.less

@@ -0,0 +1,62 @@
+@switch-prefix-cls: ~'@{ant-prefix}-switch';
+
+.@{switch-prefix-cls} {
+  min-width: 40px;
+
+  &-loading {
+
+    &-icon,
+    &::after {
+      width: 14px;
+      height: 14px;
+      border-radius: 14px;
+      top: 2px;
+    }
+  }
+
+  &-checked &-loading-icon {
+    margin-left: -15px;
+  }
+
+  &::after {
+    box-shadow: none;
+    background-color: @white;
+  }
+
+  &:not(&-disabled):active::before,
+  &:not(&-disabled):active::after {
+    width: 20px;
+  }
+
+  &-inner {
+    margin-right: 5px;
+    margin-left: 21px;
+    font-weight: 500;
+  }
+
+  &-checked {
+    .@{switch-prefix-cls}-inner {
+      margin-right: 21px;
+      margin-left: 5px;
+    }
+  }
+
+  &-disabled:not(&-checked):not(&-loading) {
+    background-color: @switch-disabled-bg;
+    opacity: 1;
+
+    &:after {
+      opacity: 0.75;
+    }
+  }
+
+  &:not(&-disabled):not(&-loading) {
+    &[aria-checked="true"]:hover {
+      background-color: @primary-5; // 符合UI规范
+    }
+
+    &[aria-checked="false"]:hover {
+      background-color: @switch-unchekcked-hover-bg; // 符合UI规范
+    }
+  }
+}

package/lib/Switch/index.js

@@ -0,0 +1,4 @@
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import './Switch.less';
+export default _Switch;