tdesign-react 0.22.1 → 0.23.0

package/dist/tdesign.css

@@ -2125,6 +2125,26 @@
             transform: rotate(360deg);
   }
 }
+@-webkit-keyframes t-zoom-out {
+  from {
+    -webkit-transform: scale(0.2);
+            transform: scale(0.2);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes t-zoom-out {
+  from {
+    -webkit-transform: scale(0.2);
+            transform: scale(0.2);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
 .t-loading {
   position: relative;
   color: var(--td-brand-color);
@@ -2448,8 +2468,8 @@
   transition: opacity 0.2s linear, visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
 .t-popup--animation-leave-active {
-  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.32, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.32, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9), max-height 0.2s cubic-bezier(0.38, 0, 0.24, 1);
 }
 
 .narrow-scrollbar::-webkit-scrollbar {
@@ -3283,11 +3303,11 @@
   font-size: 16px;
 }
 .t-button--shape-circle.t-size-s {
-  width: 32px;
+  width: 24px;
   border-radius: 12px;
 }
 .t-button--shape-circle.t-size-l {
-  width: 32px;
+  width: 40px;
   border-radius: 20px;
 }
 .t-button--ghost {
@@ -3548,18 +3568,18 @@
 .t-input.t-size-s.t-input__inner {
   height: 24px;
 }
-.t-input .t-input__prefix .t-icon,
-.t-input .t-input__suffix .t-icon {
+.t-input .t-input__prefix > .t-icon,
+.t-input .t-input__suffix > .t-icon {
   font-size: inherit;
 }
-.t-input .t-input__prefix .t-icon {
+.t-input .t-input__prefix > .t-icon {
   color: var(--td-text-color-placeholder);
 }
-.t-input .t-input__suffix .t-icon {
+.t-input .t-input__suffix > .t-icon {
   color: var(--td-text-color-placeholder);
 }
-.t-input.t-is-focused .t-input__prefix .t-icon,
-.t-input.t-is-focused .t-input__suffix:not(.t-input__clear) .t-icon {
+.t-input.t-is-focused .t-input__prefix > .t-icon,
+.t-input.t-is-focused .t-input__suffix:not(.t-input__clear) > .t-icon {
   color: var(--td-brand-color);
 }
 .t-input-group {
@@ -3684,6 +3704,24 @@
 .t-addon--prepend.t-addon--append > .t-input .t-input__inner {
   border-radius: 0;
 }
+.t-input__wrap {
+  width: 100%;
+}
+.t-input__tips {
+  line-height: 24px;
+}
+.t-input__tips--normal {
+  color: var(--td-text-color-secondary);
+}
+.t-input__tips--success {
+  color: var(--td-success-color);
+}
+.t-input__tips--warning {
+  color: var(--td-warning-color);
+}
+.t-input__tips--error {
+  color: var(--td-error-color);
+}
 
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
@@ -3810,6 +3848,8 @@
   -webkit-box-flex: 0;
       -ms-flex: 0 1 auto;
           flex: 0 1 auto;
+  -webkit-transition: height 0.2s;
+  transition: height 0.2s;
 }
 .t-alert__operation {
   -webkit-box-flex: 0;
@@ -4092,8 +4132,8 @@
   width: 1px;
   height: calc(100% - 16px);
   background-color: var(--td-component-border);
-  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
 }
 .t-radio-group.t-radio-group--filled .t-radio-button:first-child::before {
   opacity: 0;
@@ -4171,8 +4211,8 @@
   border-color: var(--td-border-level-2-color);
   border-right: 0;
   line-height: 22px;
-  -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: color 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: color 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: color 0.2s cubic-bezier(0, 0, 0.15, 1);
   color: var(--td-text-color-primary);
   white-space: nowrap;
 }
@@ -4195,8 +4235,8 @@
 .t-radio-group .t-radio-button.t-is-checked {
   border-right: 1px solid;
   border-color: var(--td-brand-color);
-  -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: border-color 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: border-color 0.2s cubic-bezier(0, 0, 0.15, 1);
 }
 .t-radio-group .t-radio-button.t-is-checked + .t-radio-button {
   border-left: 0;
@@ -4236,8 +4276,8 @@
   border-radius: 50%;
   border: 1px solid var(--td-border-level-2-color);
   background-color: var(--td-bg-color-container);
-  -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: border 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: border 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: border 0.2s cubic-bezier(0, 0, 0.15, 1);
 }
 .t-radio__input::after {
   content: "";
@@ -4249,8 +4289,8 @@
   height: 8px;
   border-radius: 50%;
   background-color: var(--td-brand-color);
-  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: all 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
 }
 .t-radio__label {
   display: inline-block;
@@ -4487,6 +4527,26 @@
             transform: rotate(360deg);
   }
 }
+@-webkit-keyframes t-zoom-out {
+  from {
+    -webkit-transform: scale(0.2);
+            transform: scale(0.2);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+@keyframes t-zoom-out {
+  from {
+    -webkit-transform: scale(0.2);
+            transform: scale(0.2);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
 .t-input-number {
   display: inline-block;
   position: relative;
@@ -5503,13 +5563,13 @@ a .t-tag:active {
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
-.t-select:hover,
-.t-select :active {
+.t-select:hover:not(.t-is-disabled),
+.t-select :active:not(.t-is-disabled) {
   cursor: pointer;
   border-color: var(--td-brand-color);
 }
-.t-select:hover > .t-select__right-icon:not(.t-select__right-icon-clear),
-.t-select :active > .t-select__right-icon:not(.t-select__right-icon-clear) {
+.t-select:hover:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear),
+.t-select :active:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear) {
   color: var(--td-brand-color);
   opacity: 1;
 }
@@ -5949,8 +6009,6 @@ ul.t-select-option-group__header,
   border-radius: 3px;
   cursor: pointer;
   background-color: var(--td-bg-color-container);
-  -webkit-transition: border 0.2s linear, background-color 0.2s linear;
-  transition: border 0.2s linear, background-color 0.2s linear;
   height: 32px;
   min-width: 32px;
   line-height: 30px;
@@ -5966,15 +6024,11 @@ ul.t-select-option-group__header,
   background-color: var(--td-brand-color-8);
   color: var(--td-text-color-anti);
   border-color: var(--td-brand-color-8);
-  -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-pagination__number.t-is-current {
   background-color: var(--td-brand-color);
   color: var(--td-text-color-anti);
   border-color: var(--td-brand-color);
-  -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-pagination__number.t-is-current.t-is-disabled,
 .t-pagination__number.t-is-current.t-is-disabled:hover,
@@ -5982,8 +6036,6 @@ ul.t-select-option-group__header,
   background-color: var(--td-brand-color-2);
   color: var(--td-text-color-anti);
   border-color: var(--td-brand-color-2);
-  -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-pagination__number.t-is-disabled {
   cursor: auto;
@@ -6071,8 +6123,6 @@ ul.t-select-option-group__header,
   background-color: var(--td-brand-color-2);
   color: var(--td-text-color-anti);
   border-color: var(--td-brand-color-2);
-  -webkit-transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
-  transition: all 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-pagination.t-size-s .t-pagination__btn {
   border: 0 none;
@@ -6579,7 +6629,7 @@ ul.t-select-option-group__header,
   display: -ms-flexbox;
   display: flex;
 }
-.t-table.t-table__row--draggable tbody.dragging tr {
+.t-table.t-table__row--draggable tbody.t-table__body--dragging tr {
   -webkit-transition: -webkit-transform 0.2s;
   transition: -webkit-transform 0.2s;
   transition: transform 0.2s;
@@ -6749,14 +6799,10 @@ ul.t-select-option-group__header,
 .t-table__filter--bottom-buttons > .t-button + .t-button {
   margin-left: 8px;
 }
-.t-table td.t-table__row--full {
-  padding: 0;
-}
 .t-table__row-filter-inner {
   position: -webkit-sticky;
   position: sticky;
   left: 0;
-  padding: 13px 24px 12px 24px;
   text-align: center;
 }
 .t-table__filter-result {
@@ -8819,8 +8865,8 @@ a.t-menu__item:active {
   line-height: 20px;
   border-radius: 10px;
   min-width: 36px;
-  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.32, 1);
-  transition: all 0.2s cubic-bezier(0, 0, 0.32, 1);
+  -webkit-transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
+  transition: all 0.2s cubic-bezier(0, 0, 0.15, 1);
   background-color: var(--td-bg-color-component);
   cursor: pointer;
   -webkit-user-select: none;
@@ -9760,18 +9806,18 @@ a.t-menu__item:active {
 .t-input.t-size-s.t-input__inner {
   height: 24px;
 }
-.t-input .t-input__prefix .t-icon,
-.t-input .t-input__suffix .t-icon {
+.t-input .t-input__prefix > .t-icon,
+.t-input .t-input__suffix > .t-icon {
   font-size: inherit;
 }
-.t-input .t-input__prefix .t-icon {
+.t-input .t-input__prefix > .t-icon {
   color: var(--td-text-color-placeholder);
 }
-.t-input .t-input__suffix .t-icon {
+.t-input .t-input__suffix > .t-icon {
   color: var(--td-text-color-placeholder);
 }
-.t-input.t-is-focused .t-input__prefix .t-icon,
-.t-input.t-is-focused .t-input__suffix:not(.t-input__clear) .t-icon {
+.t-input.t-is-focused .t-input__prefix > .t-icon,
+.t-input.t-is-focused .t-input__suffix:not(.t-input__clear) > .t-icon {
   color: var(--td-brand-color);
 }
 .t-input-group {
@@ -9896,6 +9942,24 @@ a.t-menu__item:active {
 .t-addon--prepend.t-addon--append > .t-input .t-input__inner {
   border-radius: 0;
 }
+.t-input__wrap {
+  width: 100%;
+}
+.t-input__tips {
+  line-height: 24px;
+}
+.t-input__tips--normal {
+  color: var(--td-text-color-secondary);
+}
+.t-input__tips--success {
+  color: var(--td-success-color);
+}
+.t-input__tips--warning {
+  color: var(--td-warning-color);
+}
+.t-input__tips--error {
+  color: var(--td-error-color);
+}
 .t-upload .t-size-s {
   display: block;
   color: var(--td-text-color-placeholder);
@@ -10316,6 +10380,9 @@ a.t-menu__item:active {
 .t-upload__single-file-input .t-upload__trigger {
   margin-left: 16px;
 }
+.t-upload__single-file-input .t-upload__trigger .t-button {
+  margin-left: 8px;
+}
 .t-upload__single-file-input .t-upload__single-progress {
   white-space: nowrap;
 }
@@ -12029,13 +12096,13 @@ small.t-upload__tips-error {
 .t-cascader--multiple.t-size-s {
   padding: 0px 28px 0px 1px;
 }
-.t-cascader .t-input__inner {
+.t-cascader .t-input {
   border: 0;
   padding: 0;
   margin-left: 4px;
 }
-.t-cascader .t-input__inner:hover,
-.t-cascader .t-input__inner:focus {
+.t-cascader .t-input:hover,
+.t-cascader .t-input:focus {
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: transparent;
@@ -12076,7 +12143,7 @@ small.t-upload__tips-error {
   min-height: 32px;
   font-size: 14px;
 }
-.t-cascader.t-size-m .t-input__inner {
+.t-cascader.t-size-m .t-input {
   height: 28px;
   line-height: 28px;
 }
@@ -12086,7 +12153,7 @@ small.t-upload__tips-error {
   font-size: 12px;
   min-height: 24px;
 }
-.t-cascader.t-size-s .t-input__inner {
+.t-cascader.t-size-s .t-input {
   height: calc(24px - 2px);
   line-height: calc(32px - 4px);
 }
@@ -12593,9 +12660,6 @@ small.t-upload__tips-error {
 .t-date-picker--year tbody tr:first-child .t-date-picker__cell-wrapper {
   margin-top: 16px;
 }
-.t-date-picker--year tbody tr:last-child .t-date-picker__cell {
-  text-align: left;
-}
 .t-date-picker--month tbody tr .t-date-picker__cell-wrapper {
   margin-top: 8px;
 }