tdesign-react 0.18.1 → 0.18.2

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

@@ -1,7 +1,9 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
 
 // <name> 替换为组件名
@@ -14,14 +16,18 @@
   // 禁用态颜色处理
   &.@{prefix}-is-disabled {
     color: @tree-disabled-color;
+
     .@{prefix}-icon {
       color: @tree-disabled-color;
     }
+
     .@{prefix}-tree__item {
+
       &.@{prefix}-is-active {
         background-color: @tree-node-bg-color-hover;
         color: @tree-disabled-color;
       }
+
       .@{prefix}-icon {
         color: @tree-icon-color-disabled;
       }
@@ -33,7 +39,6 @@
   }
 
   &__item {
-    --level: 0;
     position: relative;
     display: flex;
     align-items: center;
@@ -50,35 +55,38 @@
       margin-top: @tree-node-item-spacer;
     }
 
-    .@{prefix}-icon,.@{prefix}-loading {
+    .@{prefix}-icon,
+    .@{prefix}-loading {
       display: inline-block;
       position: relative;
       z-index: 2;
       font-size: @font-size-l;
     }
-    
+
     .@{prefix}-icon {
       color: @tree-node-icon-color;
     }
-    
 
     .@{prefix}-checkbox {
       font-size: 0;
     }
 
     .@{prefix}-tree__icon--default {
+
       .@{prefix}-icon {
-        transition: transform @anim-time-fn-easing @anim-duration-base;
+        transition: color, transform @anim-time-fn-easing @anim-duration-base;
         transform: rotate(0);
       }
     }
 
     &--open {
+
       .@{prefix}-icon {
         color: @tree-node-icon-color-active;
       }
 
       .@{prefix}-tree__icon--default {
+
         .@{prefix}-icon {
           transform: rotate(90deg);
         }
@@ -88,6 +96,8 @@
     &--clickable {
       cursor: pointer;
     }
+
+    --level: 0;
   }
 
   &--block-node &__label {
@@ -99,16 +109,17 @@
   }
 
   &__line {
-    --level: 0;
-    --color: @tree-node-icon-line-color;
-    --space: @tree-node-padding-basic;
-    --iconSize: @icon-default;
     position: absolute;
     left: @tree-line-position-left;
     bottom: @tree-line-position-bottom;
     width: @tree-line-width;
     height: 40px;
     pointer-events: none;
+
+    --level: 0;
+    --color: @tree-node-icon-line-color;
+    --space: @tree-node-padding-basic;
+    --iconSize: @icon-default;
   }
 
   &__line::before {
@@ -132,8 +143,9 @@
   }
 
   &--fx {
+
     .@{prefix}-icon-chevron-right {
-      transition: color,transform @tree-node-animation-time;
+      transition: color, transform @tree-node-animation-time;
     }
   }
 
@@ -147,7 +159,7 @@
     user-select: none;
     cursor: pointer;
     border-radius: @border-radius;
-    transition: all @anim-duration-moderate @anim-time-fn-easing;
+    transition: color, transform @anim-duration-moderate @anim-time-fn-easing;
 
     &:not(:empty):hover {
       background-color: @tree-node-bg-color-hover;
@@ -170,7 +182,6 @@
     padding: 0 4px;
     border-radius: @border-radius;
     cursor: pointer;
-    --ripple-color: @bg-color-container-active;
     transition: background-color @anim-duration-moderate @anim-time-fn-easing;
 
     &.@{prefix}-is-checked,
@@ -187,6 +198,8 @@
     &--strictly {
       flex: none;
     }
+
+    --ripple-color: @bg-color-container-active;
   }
 
   &__space {
@@ -209,6 +222,7 @@
   &__item.t-is-disabled {
     color: @tree-disabled-color;
     cursor: default;
+
     .@{prefix}-checkbox {
       cursor: default;
     }
@@ -216,16 +230,17 @@
 }
 
 .@{prefix}-tree--fx {
+
   .@{prefix}-tree-toggle-enter-active {
     animation: t-tree-toggle @tree-node-animation-time linear;
   }
+
   .@{prefix}-tree-toggle-leave-active {
     animation: t-tree-toggle @tree-node-animation-time reverse linear forwards;
   }
 }
 
 @keyframes t-tree-toggle {
-
   0% {
     opacity: 0;
     height: 0;

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

@@ -11,13 +11,12 @@
   }
 
   &-tip {
-    color: rgba(0,0,0,.3);
+    color: rgba(0, 0, 0, 30%);
     font-size: @font-size-s;
     margin-top: 12px;
   }
 }
 
-
 .@{d-prefix}-demo-upload-multiple {
   padding: 30px;
   background-color: @bg-color-container;
@@ -32,7 +31,7 @@
 
     & .t-button {
       margin-right: 10px;
-      color: rgba(0,0,0,.9);
+      color: rgba(0, 0, 0, 90%);
     }
   }
 }
@@ -67,7 +66,6 @@
   }
 
   &-header {
-
     & div {
       display: flex;
       align-items: center;
@@ -85,7 +83,6 @@
   }
 
   &-item {
-
     & div {
       display: flex;
       height: 100%;

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

@@ -1,32 +1,44 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
+// 组件允许单个组件打包，因此默认引入公共基础样式 --
 
 @import "../../base.less";
+
 @import "./_var.less";
+
 @import "./_mixin.less";
+
 @import "../input/_index.less";
+
 @import "../../mixins/_text.less";
+
 @import "../../mixins/_layout.less";
 
 .@{prefix}-upload {
+
   .@{prefix}-icon {
     font-size: @upload-icon-size;
     flex-shrink: 0;
   }
+
   .@{prefix}-icon-check-circle-filled {
     color: @upload-icon-check-circle-filled-color;
   }
+
   .@{prefix}-icon-error-circle-filled {
     color: @upload-icon-error-circle-filled-color;
   }
+
   .@{prefix}-icon-loading {
     color: @upload-icon-loading-color;
   }
+
   .@{prefix}-icon-time-filled {
     color: @upload-icon-time-filled-color;
   }
+
   .@{prefix}-icon-add {
     color: @upload-icon-add-color;
   }
+
   .@{prefix}-upload-icon-delete {
     color: @upload-single-display-text-color;
     cursor: pointer;
@@ -60,9 +72,11 @@
     font-size: @upload-list-item-font-size;
 
     &.@{prefix}-is--error {
+
       .@{prefix}-upload-list__name {
         color: @upload-list-item-error-color;
       }
+
       .@{prefix}-upload-list__file .@{prefix}-icon {
         color: @upload-list-item-error-color;
       }
@@ -98,7 +112,6 @@
     color: @upload-highlight-color;
   }
 
-
   &__single-name {
     margin-right: @upload-single-name-margin-right;
   }
@@ -106,7 +119,6 @@
 
 // 照片墙
 .@{prefix}-upload {
-
   &-card {
     font-size: @upload-card-font-size;
     line-height: @upload-card-line-height;
@@ -114,7 +126,6 @@
     width: 100%;
 
     & .@{prefix}-is-disabled {
-      
       & :hover {
         cursor: not-allowed;
       }
@@ -132,11 +143,12 @@
       }
 
       &:hover .@{prefix}-upload-card__mask {
-        .hover-transition(opacity);
         opacity: 1;
+        .hover-transition(opacity);
       }
 
       &.@{prefix}-is--error {
+
         & .@{prefix}-icon-warning_fill {
           color: @upload-card-item-error-icon-warning-color;
           margin-bottom: @upload-card-item-error-icon-warning-margin-bottom;
@@ -190,7 +202,9 @@
       flex-direction: column;
       background-color: @upload-card-container-bg-color;
       border: @upload-card-contariner-border;
-      > .@{prefix}-icon, .@{prefix}-loading {
+
+      > .@{prefix}-icon,
+      .@{prefix}-loading {
         font-size: @upload-icon-size-large;
         margin-bottom: @upload-card-container-icon-add-margin-bottom;
       }
@@ -203,12 +217,12 @@
     &__status-wrap {
       text-align: center;
 
-
       > svg {
         margin-bottom: @upload-card-status-wrap-svg-margin-bottom;
       }
 
-      .@{prefix}-icon,.@{prefix}-loading {
+      .@{prefix}-icon,
+      .@{prefix}-loading {
         font-size: @upload-icon-size-middle;
       }
     }
@@ -228,13 +242,13 @@
     }
 
     &__mask {
-      .horizontal-vertical-center-with-flex();
-      .fill-with-position-absolute();
       background-color: @upload-card-mask-bg-color;
       color: @upload-card-mask-color;
       transition: opacity .5s ease-in-out;
       will-change: transform;
       opacity: 0;
+      .horizontal-vertical-center-with-flex();
+      .fill-with-position-absolute();
     }
 
     &__mask--disabled {
@@ -243,7 +257,6 @@
     }
 
     &__mask__item {
-
       &-divider {
         margin: @upload-card-mask-divider-margin;
         border-left: 1px @upload-card-mask-color solid;
@@ -258,7 +271,6 @@
   }
 
   &-dialog {
-
     .t-dialog {
       max-width: 80%;
 
@@ -270,7 +282,6 @@
         padding-bottom: 0;
 
         &-img-box {
-
           img {
             display: block;
             max-width: 100%;
@@ -284,7 +295,6 @@
 
 // 拖拽
 .@{prefix}-upload {
-
   &__dragger {
     display: flex;
     width: @upload-dragger-width;
@@ -336,7 +346,6 @@
     margin-bottom: @upload-single-name-margin-bottom;
     .dragger-inner-max-width(@upload-dragger-width, @upload-dragger-padding, 0);
 
-
     .@{prefix}-upload__single-name {
       .text-ellipsis();
     }
@@ -360,7 +369,6 @@
 
 .@{prefix}-display-text--margin {
   margin-top: @upload-display-text-margin-top;
-
 }
 
 .@{prefix}-upload__single-display-text {
@@ -420,12 +428,15 @@
 .@{prefix}-upload__single-file-input {
   display: flex;
   align-items: center;
+
   .@{prefix}-upload__trigger {
     margin-left: @upload-single-file-input-trigger-margin-left;
   }
+
   .@{prefix}-upload__single-progress {
     white-space: nowrap;
   }
+
   .@{prefix}-input__inner {
     display: flex;
     align-items: center;
@@ -436,7 +447,9 @@
 .@{prefix}-upload__dragger-progress {
   width: 100%;
   display: flex;
-  .@{prefix}-icon,.@{prefix}-loading {
+
+  .@{prefix}-icon,
+  .@{prefix}-loading {
     font-size: @upload-icon-size;
     flex-shrink: 0;
   }
@@ -458,18 +471,20 @@
 }
 
 .@{prefix}-upload__dragger {
-
   &-img-wrap + &-progress-info {
-    .dragger-inner-max-width(@upload-dragger-width, @upload-dragger-padding, (@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right));
     margin-left: @upload-dragger-img-wrap-margin-right;
+    .dragger-inner-max-width(@upload-dragger-width,
+    @upload-dragger-padding, (@upload-dragger-img-wrap-width + @upload-dragger-img-wrap-margin-right));
   }
 }
 
 .@{prefix}-upload__dragger-progress-info {
   flex: 1;
+
   .@{prefix}-upload__single-display-text {
     margin-bottom: @upload-dragger-progress-info-single-display-text-margin-bottom;
   }
+
   .@{prefix}-button:hover {
     background-color: @upload-dragger-progress-info-button-bg-color-hover;
   }
@@ -501,6 +516,7 @@
     display: flex;
     justify-content: flex-end;
     margin-top: @upload-flow-bottom-margin-top;
+
     .@{prefix}-button + .@{prefix}-button {
       margin-left: @upload-flow-button-margin-left;
     }
@@ -557,7 +573,8 @@
     display: flex;
     align-items: center;
 
-    .@{prefix}-icon,.@{prefix}-loading {
+    .@{prefix}-icon,
+    .@{prefix}-loading {
       margin-right: @upload-flow-status-icon-margin-right;
       font-size: @upload-icon-size;
     }
@@ -571,7 +588,6 @@
   }
 }
 
-
 small.@{prefix}-upload__tips-error {
   color: @upload-tips-error-color;
 }

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

@@ -4,4 +4,4 @@
 
 .dragger-inner-max-width(@outterWidth, @padding, @margin) {
   max-width: (@outterWidth - @padding * 2 - @margin);
-}
+}

package/esm/_common/style/web/docs.less

@@ -1,3 +1,11 @@
+@import "./_variables.less";
+
+@import "./mixins/_index.less";
+
+@import "./utilities/_index.less";
+
+@import "./components/_docs.less";
+
 @d-prefix: tdesign;
 
 /* 用于重构稿演示相关的样式 公共部分 */
@@ -44,12 +52,12 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex-wrap: wrap;
   min-height: 204px;
   padding: 40px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   overflow: auto;
-  flex-wrap: wrap;
 }
 
 .tdesign-demo-item__body + .tdesign-demo-item__body {
@@ -100,8 +108,3 @@
   align-items: center;
   flex-wrap: wrap;
 }
-
-@import "./_variables.less";
-@import "./mixins/_index.less";
-@import "./utilities/_index.less";
-@import "./components/_docs.less";

package/esm/_common/style/web/mixins/_clearfix.less

@@ -1,8 +1,7 @@
 .clearfix() {
-
   &::after {
     display: table;
     clear: both;
     content: "";
   }
-}
+}

package/esm/_common/style/web/mixins/_index.less

@@ -1,4 +1,7 @@
 @import "./_clearfix.less";
+
 @import "./_text.less";
+
 @import "./_layout.less";
+
 @import "./_scrollbar.less";