tdesign-react 0.36.2 → 0.36.4-alpha.2

package/dist/tdesign.css

@@ -3661,6 +3661,7 @@
 }
 .t-button--shape-circle.t-size-l {
   width: 40px;
+  padding: 0;
   border-radius: 20px;
 }
 .t-button--ghost {
@@ -8153,6 +8154,7 @@ ul.t-select-option-group__header,
   border: 1px solid var(--td-component-border);
   border-bottom: 0;
   border-right: 0;
+  left: 1px;
 }
 .t-table--bordered .t-table__affixed-footer-elm {
   border-left: 1px solid var(--td-component-border);
@@ -10179,6 +10181,8 @@ a.t-menu__item:active {
   width: 100%;
   position: relative;
   padding: 48px 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 .t-dialog__ctx .t-dialog__position.t-dialog--top {
   -webkit-box-align: start;
@@ -10298,6 +10302,37 @@ a.t-menu__item:active {
 .t-tree__item--clickable {
   cursor: pointer;
 }
+.t-tree__item--draggable {
+  cursor: pointer;
+}
+.t-tree__item--draggable::before {
+  position: absolute;
+  top: -2px;
+  right: 0;
+  left: 0;
+  display: block;
+  height: 2px;
+  border-radius: 1px;
+  content: "";
+  padding: inherit;
+  background-clip: content-box;
+}
+.t-tree__item--draggable:hover {
+  background-color: var(--td-bg-color-container-hover);
+  background-clip: content-box;
+}
+.t-tree__item--tip-top::before {
+  background-color: var(--td-brand-color-6);
+}
+.t-tree__item--tip-bottom::before {
+  top: unset;
+  bottom: -2px;
+  background-color: var(--td-brand-color-6);
+}
+.t-tree__item--tip-highlight {
+  background-color: var(--td-brand-color-light);
+  background-clip: content-box;
+}
 .t-tree--block-node .t-tree__label {
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -11614,8 +11649,25 @@ a.t-menu__item:active {
   z-index: 1;
 }
 
-.t-form {
+.flex-center {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+.t-time-picker,
+.t-time-range-picker {
+  width: 240px;
+  background: transparent;
+  display: inline-block;
+  position: relative;
   font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  font-size: 14px;
   line-height: 22px;
   color: var(--td-text-color-primary);
   -webkit-box-sizing: border-box;
@@ -11623,137 +11675,384 @@ a.t-menu__item:active {
   margin: 0;
   padding: 0;
   list-style: none;
-  font-size: 14px;
-}
-.t-form:not(.t-form-inline) .t-form__item:last-of-type {
-  margin: 0;
-}
-.t-form__item {
-  margin-bottom: 24px;
-}
-.t-form__item.t-form__item-with-help {
-  margin-bottom: 4px;
 }
-.t-form__item.t-form__item-with-extra {
-  margin-bottom: 24px;
+.t-time-picker.t-is-disabled,
+.t-time-range-picker.t-is-disabled {
+  cursor: not-allowed;
 }
-.t-form__label {
-  float: left;
-  padding-right: 24px;
-  vertical-align: middle;
-  line-height: 32px;
-  color: var(--td-text-color-primary);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  white-space: nowrap;
+.t-time-picker > *:focus,
+.t-time-range-picker > *:focus,
+.t-time-picker > *:active,
+.t-time-range-picker > *:active {
+  outline: 0;
 }
-.t-form__label--top {
-  float: none;
-  min-height: 32px;
+.t-time-picker__group,
+.t-time-range-picker__group {
+  position: relative;
 }
-.t-form__label--left {
-  text-align: left;
+.t-time-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear),
+.t-time-range-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear) {
+  color: var(--td-brand-color);
 }
-.t-form__label--right {
-  text-align: right;
+.t-time-picker__group.active,
+.t-time-range-picker__group.active {
+  border: 1px solid var(--td-brand-color);
+  -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
 }
-.t-form__label--required label::before {
-  display: inline-block;
-  margin-right: 4px;
-  color: var(--td-error-color);
-  line-height: 22px;
-  content: "*";
+.t-time-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear,
+.t-time-range-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear {
+  display: block;
 }
-.t-form__label--colon label::after {
-  content: ":";
-  position: relative;
-  margin: 0 8px 0 2px;
+.t-time-picker__group-text,
+.t-time-range-picker__group-text {
+  color: var(--td-text-color-primary);
 }
-.t-form__controls {
-  min-height: 32px;
-  display: flow-root;
-  position: relative;
+.t-time-picker__group input,
+.t-time-range-picker__group input {
+  cursor: pointer;
 }
-.t-form__controls-content {
+.t-time-picker__input,
+.t-time-range-picker__input {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  padding: 0 8px 0 4px;
+  z-index: 1;
+  border-radius: 3px;
+  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  font-size: 14px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  min-height: 32px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
-.t-form__controls .t-form__item {
-  margin-right: 24px;
+.t-time-picker__input:hover,
+.t-time-range-picker__input:hover {
+  border-color: var(--td-brand-color);
 }
-.t-form__controls.t-is-success .t-form__status .t-icon {
-  color: var(--td-success-color);
+.t-time-picker__input-placeholder,
+.t-time-range-picker__input-placeholder {
+  margin-left: 8px;
+  color: var(--td-text-color-placeholder);
 }
-.t-form__controls.t-is-success .t-input__extra {
-  color: var(--td-success-color);
+.t-time-picker__input-item,
+.t-time-range-picker__input-item {
+  height: 22px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-input__extra {
-  color: var(--td-success-color);
+.t-time-picker__input-item-disabled,
+.t-time-range-picker__input-item-disabled {
+  color: var(--td-text-color-disabled);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner {
-  border-color: var(--td-success-color);
+.t-time-picker__input-item-input,
+.t-time-range-picker__input-item-input {
+  margin: 0 2px;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+  height: inherit;
+  outline: none;
+  width: 28px;
+  text-align: center;
+  border-radius: 3px;
+  border: 0;
+  line-height: 22px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-time-picker__input-item-input-meridiem,
+.t-time-range-picker__input-item-input-meridiem {
+  width: 36px;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
-  color: var(--td-success-color);
+.t-time-picker__input-item-input:focus,
+.t-time-range-picker__input-item-input:focus {
+  border-color: var(--td-bg-color-page);
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
-  -webkit-box-shadow: none;
-          box-shadow: none;
+.t-time-picker__input-disabled,
+.t-time-range-picker__input-disabled {
+  border: 1px solid var(--td-border-level-2-color);
+  background-color: var(--td-bg-color-container-hover);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
-  color: var(--td-success-color);
+.t-time-picker__input-disabled-placeholder,
+.t-time-range-picker__input-disabled-placeholder {
+  color: var(--td-text-color-disabled);
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-time-picker__input-disabled-item-input,
+.t-time-range-picker__input-disabled-item-input {
+  pointer-events: none;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active,
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active {
-  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
-          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+.t-time-range-picker {
+  width: auto;
 }
-.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
-  color: var(--td-success-color);
+.t-time-picker__panel {
+  width: 264px;
+  background: transparent;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
 }
-.t-form__status {
+.t-time-picker__panel-body {
+  width: 100%;
+  height: 216px;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  margin: 16px 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin-left: 8px;
-}
-.t-form__status > .t-icon {
-  font-size: 20px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
 }
-.t-form__status-without-icon {
-  width: 25px;
-  height: 25px;
+.t-time-picker__panel-body-active-mask {
+  position: absolute;
+  top: 50%;
+  height: 24px;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-time-picker__panel-body-active-mask > div {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  -webkit-transform: translateY(-15px);
+          transform: translateY(-15px);
+  height: 24px;
+  background-color: var(--td-brand-color-light);
+  margin: 6px 4px;
+  border-radius: 3px;
+}
+.t-time-picker__panel-body-scroll {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 100%;
+  overflow-y: scroll;
+  text-align: center;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.t-time-picker__panel-body-scroll::-webkit-scrollbar {
+  width: 0;
+}
+.t-time-picker__panel-body-scroll::after,
+.t-time-picker__panel-body-scroll::before {
+  display: block;
+  height: 50%;
+  content: "";
+}
+.t-time-picker__panel-body-scroll:last-child {
+  border-right: 0;
+}
+.t-time-picker__panel-body-scroll-item {
+  height: 24px;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--td-text-color-secondary);
+  margin: 6px 4px;
+  border-radius: 3px;
+  text-align: center;
+  cursor: pointer;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
+}
+.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):hover {
+  color: var(--td-text-color-primary);
+}
+.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):active {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-time-picker__panel-body-scroll-item.t-is-disabled {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
+}
+.t-time-picker__panel-body-scroll-item.t-is-hidden {
+  display: none;
+  cursor: not-allowed;
+}
+.t-time-picker__panel-body-scroll-item.t-is-current {
+  color: var(--td-brand-color);
+}
+.t-time-picker__panel-section-footer {
+  width: 100%;
+  height: 48px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: row-reverse;
+          flex-direction: row-reverse;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-color: transparent;
+  position: relative;
+  border-top: 1px solid var(--td-border-level-1-color);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.t-form {
+  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  line-height: 22px;
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+}
+.t-form:not(.t-form-inline) .t-form__item:last-of-type {
+  margin: 0;
+}
+.t-form__item {
+  margin-bottom: 24px;
+}
+.t-form__item.t-form__item-with-help {
+  margin-bottom: 4px;
+}
+.t-form__item.t-form__item-with-extra {
+  margin-bottom: 24px;
+}
+.t-form__label {
+  float: left;
+  padding-right: 24px;
+  vertical-align: middle;
+  line-height: 32px;
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  white-space: nowrap;
+}
+.t-form__label--top {
+  float: none;
+  min-height: 32px;
+}
+.t-form__label--left {
+  text-align: left;
+}
+.t-form__label--right {
+  text-align: right;
+}
+.t-form__label--required label::before {
+  display: inline-block;
+  margin-right: 4px;
+  color: var(--td-error-color);
+  line-height: 22px;
+  content: "*";
+}
+.t-form__label--colon label::after {
+  content: ":";
+  position: relative;
+  margin: 0 8px 0 2px;
+}
+.t-form__controls {
+  min-height: 32px;
+  display: flow-root;
+  position: relative;
+}
+.t-form__controls-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 32px;
+}
+.t-form__controls .t-form__item {
+  margin-bottom: 0;
+  margin-right: 24px;
+}
+.t-form__controls.t-is-success .t-form__status .t-icon {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-is-success .t-input__extra {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-input__extra {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner {
+  border-color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader--focused,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner--focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader.t-is-active,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select.t-is-active {
+  -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
+          box-shadow: 0 0 0 2px var(--td-success-color-focus);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-form__status .t-icon {
+  color: var(--td-success-color);
+}
+.t-form__status {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: 8px;
+}
+.t-form__status > .t-icon {
+  font-size: 20px;
+}
+.t-form__status-without-icon {
+  width: 25px;
+  height: 25px;
 }
 .t-form__status button {
   width: 32px;
@@ -13081,6 +13380,9 @@ a.t-menu__item:active {
 }
 .t-cascader__item {
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   height: 40px;
   line-height: 40px;
   color: var(--td-text-color-primary);
@@ -13089,6 +13391,7 @@ a.t-menu__item:active {
   margin-top: 4px;
   -webkit-transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
   transition: background-color 0.2s cubic-bezier(0.82, 0, 1, 0.9);
+  list-style: none;
   --ripple-color: var(--td-bg-color-container-active);
 }
 .t-cascader__item.t-size-s {
@@ -13187,269 +13490,6 @@ a.t-menu__item:active {
   color: var(--td-brand-color);
 }
 
-.flex-center {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-.t-time-picker,
-.t-time-range-picker {
-  width: 240px;
-  background: transparent;
-  display: inline-block;
-  position: relative;
-  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--td-text-color-primary);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.t-time-picker.t-is-disabled,
-.t-time-range-picker.t-is-disabled {
-  cursor: not-allowed;
-}
-.t-time-picker > *:focus,
-.t-time-range-picker > *:focus,
-.t-time-picker > *:active,
-.t-time-range-picker > *:active {
-  outline: 0;
-}
-.t-time-picker__group,
-.t-time-range-picker__group {
-  position: relative;
-}
-.t-time-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear),
-.t-time-range-picker__group.t-is-focused .t-input__suffix .t-icon:not(.t-input__suffix-clear) {
-  color: var(--td-brand-color);
-}
-.t-time-picker__group.active,
-.t-time-range-picker__group.active {
-  border: 1px solid var(--td-brand-color);
-  -webkit-box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
-          box-shadow: 0 0 2px 2px var(--td-brand-color-focus);
-}
-.t-time-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear,
-.t-time-range-picker__group.active + .t-time-picker__icon-wrap > .t-time-picker__icon-clear {
-  display: block;
-}
-.t-time-picker__group-text,
-.t-time-range-picker__group-text {
-  color: var(--td-text-color-primary);
-}
-.t-time-picker__group input,
-.t-time-range-picker__group input {
-  cursor: pointer;
-}
-.t-time-picker__input,
-.t-time-range-picker__input {
-  position: absolute;
-  top: 0;
-  height: 100%;
-  padding: 0 8px 0 4px;
-  z-index: 1;
-  border-radius: 3px;
-  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  font-size: 14px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-.t-time-picker__input:hover,
-.t-time-range-picker__input:hover {
-  border-color: var(--td-brand-color);
-}
-.t-time-picker__input-placeholder,
-.t-time-range-picker__input-placeholder {
-  margin-left: 8px;
-  color: var(--td-text-color-placeholder);
-}
-.t-time-picker__input-item,
-.t-time-range-picker__input-item {
-  height: 22px;
-}
-.t-time-picker__input-item-disabled,
-.t-time-range-picker__input-item-disabled {
-  color: var(--td-text-color-disabled);
-}
-.t-time-picker__input-item-input,
-.t-time-range-picker__input-item-input {
-  margin: 0 2px;
-  color: inherit;
-  background: none;
-  cursor: pointer;
-  height: inherit;
-  outline: none;
-  width: 28px;
-  text-align: center;
-  border-radius: 3px;
-  border: 0;
-  line-height: 22px;
-}
-.t-time-picker__input-item-input-meridiem,
-.t-time-range-picker__input-item-input-meridiem {
-  width: 36px;
-}
-.t-time-picker__input-item-input:focus,
-.t-time-range-picker__input-item-input:focus {
-  border-color: var(--td-bg-color-page);
-  background-color: var(--td-bg-color-container-hover);
-}
-.t-time-picker__input-disabled,
-.t-time-range-picker__input-disabled {
-  border: 1px solid var(--td-border-level-2-color);
-  background-color: var(--td-bg-color-container-hover);
-}
-.t-time-picker__input-disabled-placeholder,
-.t-time-range-picker__input-disabled-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-time-picker__input-disabled-item-input,
-.t-time-range-picker__input-disabled-item-input {
-  pointer-events: none;
-}
-.t-time-range-picker {
-  width: auto;
-}
-.t-time-picker__panel {
-  width: 264px;
-  background: transparent;
-  border-radius: 3px;
-  display: inline-block;
-  position: relative;
-  font-size: 14px;
-}
-.t-time-picker__panel-body {
-  width: 100%;
-  height: 216px;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  margin: 16px 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-}
-.t-time-picker__panel-body-active-mask {
-  position: absolute;
-  top: 50%;
-  height: 24px;
-  width: 100%;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-.t-time-picker__panel-body-active-mask > div {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  -webkit-transform: translateY(-15px);
-          transform: translateY(-15px);
-  height: 24px;
-  background-color: var(--td-brand-color-light);
-  margin: 6px 4px;
-  border-radius: 3px;
-}
-.t-time-picker__panel-body-scroll {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-  height: 100%;
-  overflow-y: scroll;
-  text-align: center;
-  position: relative;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.t-time-picker__panel-body-scroll::-webkit-scrollbar {
-  width: 0;
-}
-.t-time-picker__panel-body-scroll::after,
-.t-time-picker__panel-body-scroll::before {
-  display: block;
-  height: 50%;
-  content: "";
-}
-.t-time-picker__panel-body-scroll:last-child {
-  border-right: 0;
-}
-.t-time-picker__panel-body-scroll-item {
-  height: 24px;
-  font-size: 14px;
-  line-height: 24px;
-  color: var(--td-text-color-secondary);
-  margin: 6px 4px;
-  border-radius: 3px;
-  text-align: center;
-  cursor: pointer;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):hover {
-  color: var(--td-text-color-primary);
-}
-.t-time-picker__panel-body-scroll-item:not(.t-time-picker__panel-body-scroll-item.t-is-current):not(.t-time-picker__panel-body-scroll-item.t-is-disabled):active {
-  background-color: var(--td-bg-color-container-hover);
-}
-.t-time-picker__panel-body-scroll-item.t-is-disabled {
-  color: var(--td-text-color-disabled);
-  cursor: not-allowed;
-}
-.t-time-picker__panel-body-scroll-item.t-is-hidden {
-  display: none;
-  cursor: not-allowed;
-}
-.t-time-picker__panel-body-scroll-item.t-is-current {
-  color: var(--td-brand-color);
-}
-.t-time-picker__panel-section-footer {
-  width: 100%;
-  height: 48px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: row-reverse;
-          flex-direction: row-reverse;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background-color: transparent;
-  position: relative;
-  border-top: 1px solid var(--td-border-level-1-color);
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
 .t-date-picker,
 .t-date-range-picker {
   display: -webkit-inline-box;