tdesign-react 0.28.0 → 0.30.0

package/dist/tdesign.css

@@ -2695,6 +2695,10 @@ template {
             transform: rotate(360deg);
   }
 }
+.t-icon-loading {
+  -webkit-animation: t-spin 1s linear infinite;
+          animation: t-spin 1s linear infinite;
+}
 @-webkit-keyframes t-zoom-out {
   from {
     -webkit-transform: scale(0.2);
@@ -2800,7 +2804,7 @@ template {
 .t-loading__gradient-conic {
   width: 100%;
   height: 100%;
-  background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentColor 360deg);
+  background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
   border-radius: 50%;
   /* stylelint-disable-next-line */
   mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
@@ -2952,8 +2956,8 @@ template {
   transition: opacity 0.2s linear;
 }
 .t-popup--animation-leave-active {
-  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
-  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1);
+  -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1), visibility 0.2s cubic-bezier(0.82, 0, 1, 0.9);
 }
 .t-popup--animation-expand-enter-active[data-popper-placement^=top] {
   -webkit-animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear;
@@ -4016,8 +4020,6 @@ template {
   max-width: 100%;
   min-width: 0;
   color: var(--td-text-color-primary);
-  height: 32px;
-  line-height: 32px;
   background-color: transparent;
 }
 .t-input__inner::-webkit-input-placeholder {
@@ -4170,17 +4172,11 @@ template {
   line-height: 40px;
   font-size: 16px;
 }
-.t-input.t-size-l.t-input__inner {
-  height: 40px;
-}
 .t-input.t-size-s {
   height: 24px;
   line-height: 24px;
   font-size: 12px;
 }
-.t-input.t-size-s.t-input__inner {
-  height: 24px;
-}
 .t-input .t-input__prefix > .t-icon,
 .t-input .t-input__suffix > .t-icon {
   font-size: inherit;
@@ -4922,13 +4918,12 @@ template {
 }
 
 .t-checkbox-group {
-  display: inline-block;
-}
-.t-checkbox-group .t-checkbox {
-  margin-right: 16px;
-}
-.t-checkbox-group .t-checkbox:last-child {
-  margin-right: 0;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  gap: 16px;
 }
 .t-checkbox {
   display: -webkit-inline-box;
@@ -5100,6 +5095,10 @@ template {
             transform: rotate(360deg);
   }
 }
+.t-icon-loading {
+  -webkit-animation: t-spin 1s linear infinite;
+          animation: t-spin 1s linear infinite;
+}
 @-webkit-keyframes t-zoom-out {
   from {
     -webkit-transform: scale(0.2);
@@ -5130,7 +5129,7 @@ template {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  width: 120px;
+  width: 128px;
 }
 .t-input-number input::-webkit-outer-spin-button,
 .t-input-number input::-webkit-inner-spin-button {
@@ -5320,7 +5319,7 @@ template {
   font-size: 16px;
 }
 .t-input-number.t-is-controls-right {
-  width: 88px;
+  width: 96px;
   padding: 0;
 }
 .t-input-number.t-is-controls-right:hover .t-input-number__decrease,
@@ -6150,6 +6149,10 @@ a .t-tag:active {
             transform: rotate(360deg);
   }
 }
+.t-icon-loading {
+  -webkit-animation: t-spin 1s linear infinite;
+          animation: t-spin 1s linear infinite;
+}
 @-webkit-keyframes t-zoom-out {
   from {
     -webkit-transform: scale(0.2);
@@ -6175,11 +6178,11 @@ a .t-tag:active {
   -webkit-animation: t-fade-in 0.1s ease-in-out;
           animation: t-fade-in 0.1s ease-in-out;
 }
-.t-tag-input.t-input {
+.t-tag-input .t-input {
   padding-left: 4px;
   overflow: hidden;
 }
-.t-tag-input.t-input.t-size-s {
+.t-tag-input .t-input.t-size-s {
   padding-left: 2px;
 }
 .t-tag-input:hover .t-input__inner,
@@ -6190,29 +6193,29 @@ a .t-tag:active {
 .t-tag-input .t-input__prefix:empty {
   margin-left: 4px;
 }
-.t-tag-input.t-input--auto-width {
+.t-tag-input .t-input--auto-width {
   padding-right: 4px;
 }
-.t-tag-input.t-input--auto-width .t-tag:last-child {
+.t-tag-input .t-input--auto-width .t-tag:last-child {
   margin-right: 0;
 }
-.t-tag-input.t-input--auto-width:hover .t-input__prefix:not(:empty) + .t-input__inner,
-.t-tag-input.t-input--auto-width .t-is-focused .t-input__prefix:not(:empty) + .t-input__inner {
+.t-tag-input .t-input--auto-width:hover .t-input__prefix:not(:empty) + .t-input__inner,
+.t-tag-input .t-input--auto-width .t-is-focused .t-input__prefix:not(:empty) + .t-input__inner {
   margin-left: 4px;
 }
 .t-tag-input__suffix-clear {
   cursor: pointer;
 }
-.t-tag-input--break-line.t-input {
+.t-tag-input--break-line .t-input {
   display: block;
   height: auto;
   padding-right: 24px;
 }
-.t-tag-input--break-line.t-input.t-input--prefix > .t-input__prefix {
+.t-tag-input--break-line .t-input.t-input--prefix > .t-input__prefix {
   display: inline;
   text-align: left;
 }
-.t-tag-input--break-line.t-input .t-input__suffix-icon {
+.t-tag-input--break-line .t-input .t-input__suffix-icon {
   position: absolute;
   right: 8px;
   bottom: 0;
@@ -6364,17 +6367,19 @@ a .t-tag:active {
           align-items: center;
 }
 .t-select .t-input__wrap {
-  margin-left: 4px;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
 }
-.t-select .t-select__input.t-input {
+.t-select .t-tag + .t-input__wrap {
+  margin-left: 4px;
+}
+.t-select .t-select__input .t-input {
   height: auto;
   border: 0;
   padding: 0;
 }
-.t-select .t-select__input.t-input--focused {
+.t-select .t-select__input .t-input--focused {
   -webkit-box-shadow: none;
           box-shadow: none;
   border-color: transparent;
@@ -6484,6 +6489,12 @@ a .t-tag:active {
   border-radius: 3px;
 }
 .t-select__dropdown-inner {
+  padding: 6px;
+}
+.t-select__dropdown-inner--size-s {
+  padding: 4px;
+}
+.t-select__dropdown-inner--size-l {
   padding: 8px;
 }
 .t-select__list {
@@ -6527,29 +6538,29 @@ ul.t-select-option-group__header,
 .t-select-option-group__header {
   color: var(--td-text-color-placeholder);
   display: block;
-  height: 40px;
-  line-height: 22px;
-  padding: 9px 8px;
+  height: 28px;
+  line-height: 20px;
+  padding: 3px 8px;
   white-space: nowrap;
   word-wrap: normal;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .t-select-option-group__header.t-size-l {
-  height: 48px;
-  padding: 13px 16px;
+  height: 36px;
+  padding: 7px 12px;
 }
 .t-select-option-group__header.t-size-s {
-  height: 32px;
-  padding: 5px 8px;
+  height: 20px;
+  padding: 0 8px;
 }
 .t-select-option {
   display: block;
   border-radius: 3px;
-  height: 40px;
-  line-height: 22px;
+  height: 28px;
+  line-height: 20px;
   cursor: pointer;
-  padding: 9px 8px;
+  padding: 3px 8px;
   color: var(--td-text-color-primary);
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
@@ -6594,13 +6605,13 @@ ul.t-select-option-group__header,
   background: var(--td-bg-color-specialcomponent);
 }
 .t-select-option.t-size-l {
-  height: 48px;
-  padding: 13px 16px;
+  height: 36px;
+  padding: 7px 12px;
   font-size: 16px;
 }
 .t-select-option.t-size-s {
-  height: 32px;
-  padding: 5px 8px;
+  height: 20px;
+  padding: 0 8px;
   font-size: 12px;
 }
 .t-select-option.t-is-selected {
@@ -6625,7 +6636,7 @@ ul.t-select-option-group__header,
   color: inherit;
 }
 .t-select-option + .t-select-option {
-  margin-top: 4px;
+  margin-top: 2px;
 }
 .t-select.t-select-input--borderless .t-select__right-icon {
   position: relative;
@@ -6886,38 +6897,38 @@ ul.t-select-option-group__header,
   color: var(--td-text-color-placeholder);
 }
 
-.t-tooltip {
+.t-popup .t-tooltip {
   display: inline-block;
   border: 0;
   margin-bottom: 1px;
   max-width: 480px;
   word-break: break-word;
 }
-.t-tooltip:not(.t-tooltip--light) {
+.t-popup .t-tooltip:not(.t-tooltip--light) {
   color: var(--td-text-color-anti);
 }
-.t-tooltip--default {
+.t-popup .t-tooltip--default {
   background: var(--td-gray-color-12);
   margin: 8px;
 }
-.t-tooltip--primary {
+.t-popup .t-tooltip--primary {
   background: var(--td-brand-color);
 }
-.t-tooltip--success {
+.t-popup .t-tooltip--success {
   background: var(--td-success-color);
 }
-.t-tooltip--danger {
+.t-popup .t-tooltip--danger {
   background: var(--td-error-color);
 }
-.t-tooltip--warning {
+.t-popup .t-tooltip--warning {
   background: var(--td-warning-color);
 }
-.t-tooltip .t-popup__arrow {
+.t-popup .t-tooltip .t-popup__arrow {
   background: inherit;
   width: auto;
   height: auto;
 }
-.t-tooltip .t-popup__arrow::before {
+.t-popup .t-tooltip .t-popup__arrow::before {
   background: inherit;
 }
 .t-popup[data-popper-placement^="top"] .t-tooltip .t-popup__arrow {
@@ -8003,7 +8014,7 @@ ul.t-select-option-group__header,
 }
 .t-tabs__nav-item.t-is-active {
   color: var(--td-brand-color);
-  text-shadow: 0 0 0.3px currentColor;
+  text-shadow: 0 0 0.3px currentcolor;
 }
 .t-tabs__nav-item.t-is-disabled {
   color: var(--td-text-color-disabled);
@@ -8441,7 +8452,6 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  overflow: auto hidden;
 }
 .t-head-menu .t-menu__operations:not(:empty) {
   position: relative;
@@ -8708,7 +8718,6 @@ a.t-menu__item:active {
 .t-default-menu__inner .t-menu {
   padding: 16px 8px;
   position: relative;
-  overflow: hidden auto;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
@@ -11449,6 +11458,7 @@ small.t-upload__tips-error {
   width: 100%;
   height: 100%;
   pointer-events: none;
+  overflow: hidden;
 }
 .t-drawer--lock {
   overflow: hidden;
@@ -12804,6 +12814,16 @@ small.t-upload__tips-error {
 .t-time-picker.t-is-disabled {
   cursor: not-allowed;
 }
+.t-time-picker .t-is-focused .t-input {
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
+.t-time-picker.t-is-focused .t-input {
+  border-color: var(--td-brand-color);
+  -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0 2px var(--td-brand-color-focus);
+}
 .t-time-picker > *:focus,
 .t-time-picker > *:active {
   outline: 0;
@@ -13046,7 +13066,7 @@ small.t-upload__tips-error {
   background-color: var(--td-bg-color-container);
   overflow: auto;
 }
-.t-date-picker .t-is-active > .t-input {
+.t-date-picker .t-is-active .t-input {
   border-color: var(--td-brand-color);
   -webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
           box-shadow: 0 0 0 2px var(--td-brand-color-focus);
@@ -14382,6 +14402,11 @@ small.t-upload__tips-error {
 }
 .t-transfer__list-content .t-checkbox-group {
   width: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 4px;
 }
 .t-transfer__list-content .t-checkbox-group .t-checkbox {
   margin-right: 8px;
@@ -14402,7 +14427,7 @@ small.t-upload__tips-error {
   display: -ms-flexbox;
   display: flex;
   cursor: pointer;
-  margin: 4px 8px 0px 8px;
+  margin: 0 8px;
   border-radius: 3px;
   -webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
   transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);