tdesign-react 0.17.0 → 0.18.2

package/esm/_common/style/web/components/steps/_mixin.less

@@ -1,4 +1,5 @@
 .step-item-basic() {
+
   .@{prefix}-steps-item {
     flex: 1;
     overflow: hidden;
@@ -39,23 +40,22 @@
       color: @steps-item-icon-color;
 
       &__number {
-        .default-step-icon;
         color: @steps-item-icon-number-color-default;
         border: @step-stroke-width solid @steps-item-icon-border-color-default;
+        .default-step-icon;
       }
 
       &__finish {
-        .default-step-icon;
         border: @step-stroke-width solid @steps-item-icon-border-color-finish;
+        .default-step-icon;
       }
 
       &__error {
-        .default-step-icon;
         border: @step-stroke-width solid @steps-item-icon-border-color-error;
         color: @steps-item-icon-number-color-error;
+        .default-step-icon;
       }
 
-
       & > .t-icon {
         font-size: @steps-item-t-icon-font-size-default;
       }
@@ -94,8 +94,8 @@
 @anchor-status: wait;
 .default-anchor-status(@anchor-status) {
   & when(@anchor-status = finish) {
-    .@{prefix}-steps-item-icon {
 
+    .@{prefix}-steps-item-icon {
       .t-icon {
         color: @steps-item-icon-anchor-color;
       }
@@ -115,8 +115,8 @@
     }
   };
   & when(@anchor-status = process) {
-    .@{prefix}-steps-item-icon {
 
+    .@{prefix}-steps-item-icon {
       .t-icon {
         color: @steps-item-icon-anchor-color;
       }
@@ -139,8 +139,8 @@
     }
   };
   & when(@anchor-status = error) {
-    .@{prefix}-steps-item-icon {
 
+    .@{prefix}-steps-item-icon {
       .t-icon {
         color: @steps-item-icon-anchor-color-error;
       }
@@ -163,17 +163,20 @@
 
 .dot-anchor-status(@anchor-status) {
   & when(@anchor-status = finish) {
+
     .@{prefix}-steps-item-icon {
       border-color: @steps-item-icon-dot-border-color-finish;
     }
   };
   & when(@anchor-status = process) {
+
     .@{prefix}-steps-item-icon {
       background: @steps-item-icon-dot-bg-color-process;
       border-color: @steps-item-icon-dot-border-color-process;
     }
   };
   & when(@anchor-status = error) {
+
     .@{prefix}-steps-item-icon {
       background: @steps-item-icon-dot-bg-color-error;
       border-color: @steps-item-icon-dot-border-color-error;
@@ -184,6 +187,7 @@
 // icon 和 内容
 @item-direction: horizontal;
 .dot-icon(@item-direction) {
+
   .@{prefix}-steps-item-icon {
     display: block;
     width: @steps-dot-item-icon-width;
@@ -196,6 +200,7 @@
       top: @steps-dot-anchor-position-top;
     }
   }
+
   .@{prefix}-steps-item-content {
     & when(@item-direction = horizontal) {
       text-align: @steps-item-conten-text-align-horizontal;
@@ -207,7 +212,9 @@
 // 连接线
 .connector-default(@direction; @isReverse:false) {
   & when (@direction = horizontal) {
+
     .@{prefix}-steps-item:not(:last-child) {
+
       .@{prefix}-steps-item-title:after {
         content: "";
         display: block;
@@ -222,6 +229,7 @@
     }
 
     .@{prefix}-steps-item--finish:not(:last-child) {
+
       .@{prefix}-steps-item-title:after {
         background: @steps-line-bg-color-horizontal-finish;
         height: @steps-line-height;
@@ -230,13 +238,13 @@
   }
 
   & when (@direction = vertical) {
+
     .@{prefix}-steps-item {
       padding-bottom: @steps-item-padding-bottom-vertical;
       margin-bottom: @steps-item-margin-bottom-vertical;
 
       & when(@isReverse = false) {
-
-        &:not(:last-child):before {
+        &:not(:last-child)::before {
           content: "";
           display: block;
           height: 100%;
@@ -248,16 +256,14 @@
         }
 
         &--finish {
-
-          &:not(:last-child):before {
+          &:not(:last-child)::before {
             background: @steps-line-bg-color-vertical-finish;
             width: @steps-line-width;
           }
         }
       }
       & when(@isReverse = true) {
-
-        &:not(:first-child):before {
+        &:not(:first-child)::before {
           content: "";
           display: block;
           height: 100%;
@@ -270,8 +276,7 @@
 
         &--process,
         &--finish {
-
-          &:not(:first-child):before {
+          &:not(:first-child)::before {
             width: @steps-line-width;
             background: @steps-line-bg-color-vertical-process;
           }
@@ -283,9 +288,9 @@
 
 .connector-dot(@direction; @isReverse:false) {
   & when(@direction = horizontal) {
-    .@{prefix}-steps-item:not(:last-child) {
 
-      &:after {
+    .@{prefix}-steps-item:not(:last-child) {
+      &::after {
         content: "";
         display: block;
         width: @steps-item-connector-line-width;
@@ -298,19 +303,18 @@
     }
 
     .@{prefix}-steps-item--finish:not(:last-child) {
-
-      &:after {
+      &::after {
         background: @steps-line-dot-bg-color-vertical-finish;
         height: @steps-line-height;
       }
     }
   }
   & when(@direction = vertical) {
+
     .@{prefix}-steps-item {
 
       & when(@isReverse = false) {
-
-        &:not(:last-child):before {
+        &:not(:last-child)::before {
           content: "";
           display: block;
           height: 100%;
@@ -322,8 +326,7 @@
         }
 
         &--finish {
-
-          &:not(:last-child):before {
+          &:not(:last-child)::before {
             background: @steps-line-dot-bg-color-vertical-finish;
             width: @steps-line-width;
           }
@@ -332,7 +335,7 @@
       & when(@isReverse = true) {
         margin-bottom: 0;
 
-        &:not(:first-child):before {
+        &:not(:first-child)::before {
           content: "";
           display: block;
           height: 100%;
@@ -343,14 +346,13 @@
           top: @steps-dot-connector-position-top-vertical;
         }
 
-        &:fist-child:before {
+        &:first-child::before {
           display: none;
         }
 
         &--process,
         &--finish {
-
-          &:not(:first-child):before {
+          &:not(:first-child)::before {
             width: @steps-line-width;
             background: @steps-line-dot-bg-color-vertical-process;
           }
@@ -358,4 +360,4 @@
       }
     }
   }
-}
+}

package/esm/_common/style/web/components/steps/_var.less

@@ -14,15 +14,15 @@
 // 点状步骤条相关
 @steps-circle-height: 24px;
 @steps-circle-width: 24px;
-@steps-item-title-margin-bottom: 3px;
-@steps-item-description-margin: @spacer;
+@steps-item-title-margin-bottom: 4px;
+@steps-item-description-margin: 4px;
 @steps-item-content-margin-top: 4px;
 @steps-item-content-margin-top-vertical: 2px;
 @steps-item-margin-right: @spacer;
 @steps-item-icon-margin-right: @spacer;
 @steps-item-default-icon-margin-top: 3px;
 @steps-title-padding-right: @spacer;
-@steps-dot-item-icon-margin-bottom: 8px;
+@steps-dot-item-icon-margin-bottom: 4px;
 @steps-item-content-margin-left-vertical: 0px;
 @steps-item-padding-bottom-vertical: @spacer-3;
 @steps-item-margin-bottom-vertical: 5px;
@@ -76,8 +76,8 @@
 @steps-title-color-error: @error-color;
 
 // icon
-@steps-item-icon-color: @border-level-2-color;
-@steps-item-icon-border-color-default: @border-level-2-color;
+@steps-item-icon-color: @text-color-placeholder;
+@steps-item-icon-border-color-default: @text-color-placeholder;
 @steps-item-icon-border-color-finish: @brand-color;
 @steps-item-icon-border-color-error: @error-color-6;
 
@@ -93,25 +93,24 @@
 @steps-item-icon-dot-border-color-process: @brand-color;
 @steps-item-icon-dot-bg-color-error: @error-color;
 @steps-item-icon-dot-border-color-error: @error-color;
-@steps-item-icon-dot-border-color-default: @component-border;
+@steps-item-icon-dot-border-color-default: @text-color-placeholder;
 
 // number 颜色
-@steps-item-icon-number-color-default: @border-level-2-color;
+@steps-item-icon-number-color-default: @text-color-placeholder;
 @steps-item-icon-number-color-process: @text-color-anti;
 @steps-item-icon-number-bg-color-process: @brand-color;
 @steps-item-icon-number-border-color-process: @brand-color;
 @steps-item-icon-number-color-error: #000;
 
 //line 锚点连接线  horizontal
-@steps-line-bg-color-horizontal-default: @border-level-2-color;
+@steps-line-bg-color-horizontal-default: @text-color-placeholder;
 @steps-line-bg-color-horizontal-finish: @brand-color;
 //line 锚点连接线 vertical
-@steps-line-bg-color-vertical-default: @border-level-2-color;
+@steps-line-bg-color-vertical-default: @text-color-placeholder;
 @steps-line-bg-color-vertical-finish: @brand-color;
 @steps-line-bg-color-vertical-process: @brand-color;
 
 //点状连接线 vertical
-@steps-line-dot-bg-color-vertical-default: @border-level-2-color;
+@steps-line-dot-bg-color-vertical-default: @text-color-placeholder;
 @steps-line-dot-bg-color-vertical-finish: @brand-color;
 @steps-line-dot-bg-color-vertical-process: @brand-color;
-

package/esm/_common/style/web/components/swiper/_docs.less

@@ -1,3 +1,3 @@
 .tdesign-demo-block--swiper > .t-swiper + .t-swiper {
   margin-top: 16px;
-}
+}

package/esm/_common/style/web/components/swiper/_index.less

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 /* Swiper */
@@ -83,7 +85,7 @@
     list-style-type: none;
     cursor: pointer;
 
-    &:before {
+    &::before {
       content: "\2022";
     }
   }

package/esm/_common/style/web/components/swiper/_var.less

@@ -25,4 +25,4 @@
 @swiper-content-height: @spacer-6;
 @swiper-close-width: @spacer-4;
 @swiper-trigger-wrap-padding: @spacer-2 @spacer-1;
-@swiper-close-padding: @spacer-2 @spacer-3 @spacer-2 4px;
+@swiper-close-padding: @spacer-2 @spacer-3 @spacer-2 4px;

package/esm/_common/style/web/components/switch/_docs.less

@@ -1,4 +1,5 @@
 .@{d-prefix}-demo-item--switch {
+
   .@{prefix}-switch + .@{prefix}-switch {
     margin-left: 8px;
   }

package/esm/_common/style/web/components/switch/_index.less

@@ -1,5 +1,7 @@
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 .@{prefix}-switch {
@@ -51,16 +53,20 @@
   }
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -6px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -6px;
       }
     }
+
     .@{prefix}-switch__content {
       opacity: 0;
     }
@@ -70,11 +76,13 @@
     display: inline-flex;
     align-items: center;
     color: @switch-content-color-unchecked;
-    padding: 0 @switch-content-margin-right-default 0
+    padding:
+      0 @switch-content-margin-right-default 0
       @switch-content-margin-left-default;
     font-size: @switch-content-font-size-default;
     min-width: @switch-min-width-default;
     transition: @switch-content-transition;
+
     .@{prefix}-icon {
       font-size: @switch-content-font-size-l;
     }
@@ -87,8 +95,10 @@
       left: calc(100% - @switch-width-border-default);
       transform: translate(-100%, 0);
     }
+
     .@{prefix}-switch__content {
-      padding: 0 @switch-content-margin-left-default 0
+      padding:
+        0 @switch-content-margin-left-default 0
         @switch-content-margin-right-default;
       color: @switch-content-color-checked;
     }
@@ -103,6 +113,7 @@
     }
 
     .@{prefix}-switch__handle {
+
       .@{prefix}-icon {
         color: @switch-unchecked-bg-color-loading;
       }
@@ -112,6 +123,7 @@
       background-color: @switch-checked-bg-color-loading;
 
       .@{prefix}-switch__handle {
+
         .@{prefix}-icon {
           color: @switch-checked-bg-color-loading;
         }
@@ -127,6 +139,7 @@
       background-color: @switch-checked-bg-color-disabled;
 
       .@{prefix}-switch__handle {
+
         .@{prefix}-icon {
           color: @switch-checked-bg-color-disabled;
         }
@@ -142,11 +155,14 @@
   border-radius: (@switch-height-l / 2);
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -8px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -8px;
@@ -159,6 +175,7 @@
     left: @switch-width-border-l;
     width: (@switch-height-l - 2px * @switch-width-border-l);
     height: (@switch-height-l - 2px * @switch-width-border-l);
+
     .@{prefix}-icon {
       font-size: (@switch-height-l - 4px);
     }
@@ -175,9 +192,11 @@
   }
 
   &.@{prefix}-is-checked {
+
     .@{prefix}-switch__handle {
       left: calc(100% - @switch-width-border-l);
     }
+
     .@{prefix}-switch__content {
       padding: 0 @switch-content-margin-left-l 0 @switch-content-margin-right-l;
     }
@@ -191,11 +210,14 @@
   border-radius: (@switch-height-s / 2);
 
   &:active:not(.@{prefix}-is-disabled):not(.@{prefix}-is-loading) {
+
     .@{prefix}-switch__handle::before {
       left: 0;
       right: -4px;
     }
+
     &.@{prefix}-is-checked {
+
       .@{prefix}-switch__handle::before {
         right: 0;
         left: -4px;
@@ -225,9 +247,11 @@
   }
 
   &.@{prefix}-is-checked {
+
     .@{prefix}-switch__handle {
       left: calc(100% - @switch-width-border-s);
     }
+
     .@{prefix}-switch__content {
       padding: 0 @switch-content-margin-left-s 0 @switch-content-margin-right-s;
     }

package/esm/_common/style/web/components/switch/_var.less

@@ -56,4 +56,3 @@
 @switch-transition: all @anim-duration-base @anim-time-fn-ease-out;
 @switch-handle-transition: all @anim-duration-base @anim-time-fn-easing;
 @switch-content-transition: padding @anim-duration-base @anim-time-fn-easing, opacity @anim-duration-base linear;
-

package/esm/_common/style/web/components/table/_docs.less

@@ -4,21 +4,24 @@
       font-size: 14px;
       line-height: 28px;
       display: block;
-      margin: 10px 0px;
+      margin: 10px 0;
+
       i {
         font-style: normal;
       }
     }
+
     .status {
       position: relative;
       color: #00a870;
       margin-left: 10px;
+
       &::before {
         position: absolute;
         top: 50%;
-        left: 0px;
+        left: 0;
         transform: translateY(-50%);
-        content: '';
+        content: "";
         background-color: #00a870;
         width: 6px;
         height: 6px;
@@ -26,14 +29,18 @@
         border-radius: 50%;
       }
     }
+
     .status.unhealth {
       color: #e34d59;
+
       &::before {
         background-color: #e34d59;
       }
     }
+
     .status.warning {
       color: #ed7b2f;
+
       &::before {
         background-color: #ed7b2f;
       }
@@ -45,16 +52,18 @@
       cursor: pointer;
       margin-right: 15px;
     }
+
     .status {
       position: relative;
       color: #00a870;
       margin-left: 10px;
+
       &::before {
         position: absolute;
         top: 50%;
-        left: 0px;
+        left: 0;
         transform: translateY(-50%);
-        content: '';
+        content: "";
         background-color: #00a870;
         width: 6px;
         height: 6px;
@@ -62,11 +71,13 @@
         border-radius: 50%;
       }
     }
+
     .status.unhealth {
       color: #e34d59;
+
       &::before {
         background-color: #e34d59;
       }
     }
   }
-}
+}