tdesign-react 0.45.6-alpha.1 → 0.45.6-alpha.2

package/es/select/style/index.css

@@ -1 +1,231 @@
-.t-select__wrap{width:100%}.t-select__dropdown .t-popup__content{scrollbar-color:var(--td-scrollbar-color) transparent;scrollbar-width:thin;margin:var(--td-comp-paddingTB-s) 0;padding:0;max-height:300px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;-webkit-box-shadow:var(--td-shadow-2);box-shadow:var(--td-shadow-2)}.t-select__dropdown .t-popup__content::-webkit-scrollbar{width:8px;height:8px}.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:content-box;background-color:var(--td-scrollbar-color);border-radius:15px}.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover,.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover{background-color:var(--td-scrollbar-hover-color)}.t-select__dropdown-inner .t-select__list .t-select__list{padding:0}.t-select__dropdown-inner .t-select__list,.t-select__dropdown-inner .t-tree{padding:var(--td-pop-padding-m)}.t-select__dropdown-inner--size-s .t-select__list,.t-select__dropdown-inner--size-s .t-tree{padding:var(--td-pop-padding-s)}.t-select__dropdown-inner--size-l .t-select__list,.t-select__dropdown-inner--size-l .t-tree{padding:var(--td-pop-padding-l)}.t-select__list{margin:0;padding:0;list-style:none}.t-select__dropdown.t-popup{padding:0}.t-select__empty.t-size-s{line-height:var(--td-comp-size-xs)}.t-select__empty{text-align:center;color:var(--td-text-color-disabled);line-height:var(--td-comp-size-m);padding:0 var(--td-comp-paddingLR-s)}.t-select__empty.t-size-l{line-height:var(--td-comp-size-xl)}.t-select__loading-tips.t-size-s{line-height:var(--td-comp-size-xs)}.t-select__loading-tips{text-align:center;line-height:var(--td-comp-size-m);color:var(--td-text-color-disabled)}.t-select__loading-tips.t-size-l{line-height:var(--td-comp-size-xl)}.t-select-option-group+.t-select-option-group{padding-top:var(--td-comp-margin-xs);margin-top:var(--td-comp-margin-xs)}.t-select-option-group__divider+.t-select-option-group__divider{position:relative}.t-select-option-group__divider+.t-select-option-group__divider:before{content:"";width:100%;height:1px;padding:0 var(--td-comp-paddingLR-s);position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--td-border-level-1-color);background-clip:content-box}.t-select-option-group__header,ul.t-select-option-group__header{color:var(--td-text-color-placeholder);display:block;height:var(--td-comp-size-s);line-height:var(--td-comp-size-s);padding:0 var(--td-comp-paddingLR-s);-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.t-select-option-group__header.t-size-l{height:var(--td-comp-size-l);line-height:var(--td-comp-size-l);padding:0 var(--td-comp-paddingLR-m)}.t-select-option-group__header.t-size-s{height:var(--td-comp-size-xxs);line-height:var(--td-comp-size-xxs);padding:0 var(--td-comp-paddingLR-s)}.t-select-option{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:var(--td-radius-default);height:var(--td-comp-size-s);font:var(--td-font-body-medium);cursor:pointer;padding:0 var(--td-comp-paddingLR-s);color:var(--td-text-color-primary);-webkit-transition:background-color .2s cubic-bezier(.38,0,.24,1);transition:background-color .2s cubic-bezier(.38,0,.24,1);-webkit-box-sizing:border-box;box-sizing:border-box;--ripple-color:var(--td-bg-color-container-active)}.t-select-option span{position:relative;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover{background-color:var(--td-bg-color-container-hover)}.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__label{color:inherit}.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__input{border-color:var(--td-brand-color)}.t-select-option .t-checkbox__label{color:var(--td-text-color-primary);-webkit-box-flex:1;-ms-flex:1;flex:1;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.t-select-option .t-checkbox{width:100%}.t-select-option.t-is-disabled{cursor:not-allowed;color:var(--td-text-color-disabled)}.t-select-option.t-is-disabled,.t-select-option.t-is-disabled :active,.t-select-option.t-is-disabled:hover{background:var(--td-bg-color-specialcomponent)}.t-select-option.t-size-l{height:var(--td-comp-size-l);padding:0 var(--td-comp-paddingLR-m);font:var(--td-font-body-large)}.t-select-option.t-size-m{font:var(--td-font-body-medium)}.t-select-option.t-size-s{height:var(--td-comp-size-xxs);padding:0 var(--td-comp-paddingLR-s);font:var(--td-font-body-small)}.t-select-option.t-is-selected{color:var(--td-brand-color);background-color:var(--td-brand-color-light);-webkit-transition:all .2s linear;transition:all .2s linear}.t-select-option.t-is-selected .t-checkbox__label{color:var(--td-brand-color)}.t-select-option.t-is-selected:hover{background-color:var(--td-brand-color-light)}.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected),.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected),.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected){background-color:var(--td-bg-color-container-hover)}.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input,.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input,.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input{border-color:var(--td-brand-color)}.t-select-option.t-select-option--hover .t-checkbox__label,.t-select-option.t-select-option__hover .t-checkbox__label{color:inherit}.t-select-option+.t-select-option{margin-top:var(--td-comp-paddingTB-xxs)}.t-select.t-select-input--borderless .t-select__right-icon{position:relative;margin:0}.t-select .t-fake-arrow{color:var(--td-text-color-placeholder)}.t-select .t-fake-arrow--active{color:var(--td-brand-color)}
+.t-select__wrap {
+  width: 100%;
+}
+.t-select__dropdown .t-popup__content {
+  scrollbar-color: var(--td-scrollbar-color) transparent;
+  scrollbar-width: thin;
+  margin: var(--td-comp-paddingTB-s) 0;
+  padding: 0;
+  max-height: 300px;
+  overflow-y: auto;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
+  -webkit-box-shadow: var(--td-shadow-2);
+          box-shadow: var(--td-shadow-2);
+}
+.t-select__dropdown .t-popup__content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-clip: content-box;
+  background-color: var(--td-scrollbar-color);
+  border-radius: 15px;
+}
+.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover,
+.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--td-scrollbar-hover-color);
+}
+.t-select__dropdown-inner .t-select__list .t-select__list {
+  padding: 0;
+}
+.t-select__dropdown-inner .t-select__list,
+.t-select__dropdown-inner .t-tree {
+  padding: var(--td-pop-padding-m);
+}
+.t-select__dropdown-inner--size-s .t-select__list,
+.t-select__dropdown-inner--size-s .t-tree {
+  padding: var(--td-pop-padding-s);
+}
+.t-select__dropdown-inner--size-l .t-select__list,
+.t-select__dropdown-inner--size-l .t-tree {
+  padding: var(--td-pop-padding-l);
+}
+.t-select__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.t-select__dropdown.t-popup {
+  padding: 0;
+}
+.t-select__empty.t-size-s {
+  line-height: var(--td-comp-size-xs);
+}
+.t-select__empty {
+  text-align: center;
+  color: var(--td-text-color-disabled);
+  line-height: var(--td-comp-size-m);
+  padding: 0 var(--td-comp-paddingLR-s);
+}
+.t-select__empty.t-size-l {
+  line-height: var(--td-comp-size-xl);
+}
+.t-select__loading-tips.t-size-s {
+  line-height: var(--td-comp-size-xs);
+}
+.t-select__loading-tips {
+  text-align: center;
+  line-height: var(--td-comp-size-m);
+  color: var(--td-text-color-disabled);
+}
+.t-select__loading-tips.t-size-l {
+  line-height: var(--td-comp-size-xl);
+}
+.t-select-option-group + .t-select-option-group {
+  padding-top: var(--td-comp-margin-xs);
+  margin-top: var(--td-comp-margin-xs);
+}
+.t-select-option-group__divider + .t-select-option-group__divider {
+  position: relative;
+}
+.t-select-option-group__divider + .t-select-option-group__divider::before {
+  content: "";
+  width: 100%;
+  height: 1px;
+  padding: 0 var(--td-comp-paddingLR-s);
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  background-color: var(--td-border-level-1-color);
+  background-clip: content-box;
+}
+ul.t-select-option-group__header,
+.t-select-option-group__header {
+  color: var(--td-text-color-placeholder);
+  display: block;
+  height: var(--td-comp-size-s);
+  line-height: var(--td-comp-size-s);
+  padding: 0 var(--td-comp-paddingLR-s);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-select-option-group__header.t-size-l {
+  height: var(--td-comp-size-l);
+  line-height: var(--td-comp-size-l);
+  padding: 0 var(--td-comp-paddingLR-m);
+}
+.t-select-option-group__header.t-size-s {
+  height: var(--td-comp-size-xxs);
+  line-height: var(--td-comp-size-xxs);
+  padding: 0 var(--td-comp-paddingLR-s);
+}
+.t-select-option {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  border-radius: var(--td-radius-default);
+  height: var(--td-comp-size-s);
+  font: var(--td-font-body-medium);
+  cursor: pointer;
+  padding: 0 var(--td-comp-paddingLR-s);
+  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);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  --ripple-color: var(--td-bg-color-container-active);
+}
+.t-select-option span {
+  position: relative;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__label {
+  color: inherit;
+}
+.t-select-option:not(.t-is-disabled):not(.t-is-selected):hover .t-checkbox__input {
+  border-color: var(--td-brand-color);
+}
+.t-select-option .t-checkbox__label {
+  color: var(--td-text-color-primary);
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-select-option .t-checkbox {
+  width: 100%;
+}
+.t-select-option.t-is-disabled {
+  cursor: not-allowed;
+  color: var(--td-text-color-disabled);
+  background: var(--td-bg-color-specialcomponent);
+}
+.t-select-option.t-is-disabled:hover,
+.t-select-option.t-is-disabled :active {
+  background: var(--td-bg-color-specialcomponent);
+}
+.t-select-option.t-size-l {
+  height: var(--td-comp-size-l);
+  padding: 0 var(--td-comp-paddingLR-m);
+  font: var(--td-font-body-large);
+}
+.t-select-option.t-size-m {
+  font: var(--td-font-body-medium);
+}
+.t-select-option.t-size-s {
+  height: var(--td-comp-size-xxs);
+  padding: 0 var(--td-comp-paddingLR-s);
+  font: var(--td-font-body-small);
+}
+.t-select-option.t-is-selected {
+  color: var(--td-brand-color);
+  background-color: var(--td-brand-color-light);
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.t-select-option.t-is-selected .t-checkbox__label {
+  color: var(--td-brand-color);
+}
+.t-select-option.t-is-selected:hover {
+  background-color: var(--td-brand-color-light);
+}
+/** 规范 CSS 类名为 --hover */
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected),
+.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected),
+.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
+.t-select-option.t-select-option__hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input,
+.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option__hover:not(.t-is-selected) .t-checkbox__input,
+.t-select-option.t-select-option--hover:not(.t-is-disabled).t-select-option.t-select-option--hover:not(.t-is-selected) .t-checkbox__input {
+  border-color: var(--td-brand-color);
+}
+.t-select-option.t-select-option__hover .t-checkbox__label,
+.t-select-option.t-select-option--hover .t-checkbox__label {
+  color: inherit;
+}
+.t-select-option + .t-select-option {
+  margin-top: var(--td-comp-paddingTB-xxs);
+}
+.t-select.t-select-input--borderless .t-select__right-icon {
+  position: relative;
+  margin: 0;
+}
+.t-select .t-fake-arrow {
+  color: var(--td-text-color-placeholder);
+}
+.t-select .t-fake-arrow--active {
+  color: var(--td-brand-color);
+}

package/es/select-input/style/index.css

@@ -1 +1,64 @@
-.t-select-input{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;width:100%;display:inline-block;vertical-align:middle}.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input{padding-right:var(--td-comp-paddingLR-xl)}.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input.t-size-l{padding-right:calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s))}.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input{padding-right:var(--td-comp-paddingLR-s)}.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input.t-size-l{padding-right:var(--td-comp-paddingLR-m)}.t-select-input--borderless .t-input{-webkit-box-shadow:none;box-shadow:none;border:1px solid transparent;-webkit-transition:all .2s linear;transition:all .2s linear}.t-select-input--borderless .t-input:hover:not(.t-input--focused){border-color:var(--td-component-border);background-color:var(--td-bg-color-container-hover);border-radius:var(--td-radius-default)}.t-select-input--borderless .t-input--focused{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);background-color:var(--td-bg-color-specialcomponent)}.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input{display:inline-block}.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input{background-color:var(--td-bg-color-container-hover)}.t-select-input--borderless.t-tag-input{border:0;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color .2s linear;transition:background-color .2s linear}.t-select-input--borderless.t-tag-input:hover{background-color:var(--td-bg-color-container-hover);border-radius:var(--td-radius-default)}
+.t-select-input {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+}
+/** 宽度自适应场景，多选，预留图标的位置。带标签和不带标签的布局不同，故而间距不同 */
+.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input {
+  padding-right: var(--td-comp-paddingLR-xl);
+}
+.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-tag-input--with-tag .t-input.t-size-l {
+  padding-right: calc(var(--td-comp-paddingLR-xl) + var(--td-comp-paddingLR-s));
+}
+.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input {
+  padding-right: var(--td-comp-paddingLR-s);
+}
+.t-select-input--multiple .t-input--auto-width.t-tag-input__with-suffix-icon.t-is-empty .t-input.t-size-l {
+  padding-right: var(--td-comp-paddingLR-m);
+}
+/** 无边框模式 */
+.t-select-input--borderless {
+  /** 无边框模式的多选 */
+}
+.t-select-input--borderless .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  border: 1px solid transparent;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.t-select-input--borderless .t-input:hover:not(.t-input--focused) {
+  border-color: var(--td-component-border);
+  background-color: var(--td-bg-color-container-hover);
+  border-radius: var(--td-radius-default);
+}
+.t-select-input--borderless .t-input--focused {
+  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);
+  background-color: var(--td-bg-color-specialcomponent);
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input {
+  display: inline-block;
+}
+.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input {
+  background-color: var(--td-bg-color-container-hover);
+}
+.t-select-input--borderless.t-tag-input {
+  border: 0;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  -webkit-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
+}
+.t-select-input--borderless.t-tag-input:hover {
+  background-color: var(--td-bg-color-container-hover);
+  border-radius: var(--td-radius-default);
+}

package/es/skeleton/style/index.css

@@ -1 +1,128 @@
-:root,:root[theme-mode=light]{--skeleton-animation-gradient:rgba(0,0,0,0.04)}:root[theme-mode=dark]{--skeleton-animation-gradient:hsla(0,0%,100%,0.06)}.t-skeleton{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none}.t-skeleton__row{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:var(--td-comp-margin-l);-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-skeleton__row:last-child,.t-skeleton__row:only-child{margin-bottom:0}.t-skeleton__col{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;background-color:var(--td-bg-color-secondarycontainer);color:var(--td-text-color-disabled);margin-right:var(--td-comp-margin-l)}.t-skeleton__col:first-child:last-child,.t-skeleton__col:last-child{margin-right:0}.t-skeleton--type-text{width:100%;height:var(--td-font-size-body-large);border-radius:var(--td-radius-default)}.t-skeleton--type-rect{width:120px;height:88px;border-radius:var(--td-radius-default)}.t-skeleton--type-circle{width:32px;height:32px;border-radius:var(--td-radius-circle);-ms-flex-negative:0;flex-shrink:0}.t-skeleton--animation-gradient{position:relative;overflow-x:hidden}.t-skeleton--animation-gradient:after{content:" ";position:absolute;bottom:0;left:0;right:0;top:0;background:-webkit-gradient(linear,left top, right top,from(hsla(0,0%,100%,0)),color-stop(var(--skeleton-animation-gradient)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,hsla(0,0%,100%,0),var(--skeleton-animation-gradient),hsla(0,0%,100%,0));-webkit-animation:t-skeleton--gradient 1.5s linear 2s infinite;animation:t-skeleton--gradient 1.5s linear 2s infinite}.t-skeleton--animation-flashed{-webkit-animation:t-skeleton--flashed 2s linear 2s infinite;animation:t-skeleton--flashed 2s linear 2s infinite}@-webkit-keyframes t-skeleton--gradient{0%{-webkit-transform:translateX(-100%) skewX(-15deg);transform:translateX(-100%) skewX(-15deg)}to{-webkit-transform:translateX(100%) skewX(-15deg);transform:translateX(100%) skewX(-15deg)}}@keyframes t-skeleton--gradient{0%{-webkit-transform:translateX(-100%) skewX(-15deg);transform:translateX(-100%) skewX(-15deg)}to{-webkit-transform:translateX(100%) skewX(-15deg);transform:translateX(100%) skewX(-15deg)}}@-webkit-keyframes t-skeleton--flashed{0%{opacity:1}50%{background-color:hsla(0,0%,90.2%,.3);opacity:.3}to{opacity:1}}@keyframes t-skeleton--flashed{0%{opacity:1}50%{background-color:hsla(0,0%,90.2%,.3);opacity:.3}to{opacity:1}}
+:root,
+:root[theme-mode="light"] {
+  --skeleton-animation-gradient: rgba(0, 0, 0, 0.04);
+}
+:root[theme-mode="dark"] {
+  --skeleton-animation-gradient: rgba(255, 255, 255, 0.06);
+}
+.t-skeleton {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.t-skeleton__row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-bottom: var(--td-comp-margin-l);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-skeleton__row:only-child,
+.t-skeleton__row:last-child {
+  margin-bottom: 0;
+}
+.t-skeleton__col {
+  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;
+  background-color: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-disabled);
+  margin-right: var(--td-comp-margin-l);
+}
+.t-skeleton__col:first-child:last-child,
+.t-skeleton__col:last-child {
+  margin-right: 0;
+}
+.t-skeleton--type-text {
+  width: 100%;
+  height: var(--td-font-size-body-large);
+  border-radius: var(--td-radius-default);
+}
+.t-skeleton--type-rect {
+  width: 120px;
+  height: 88px;
+  border-radius: var(--td-radius-default);
+}
+.t-skeleton--type-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--td-radius-circle);
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+}
+.t-skeleton--animation-gradient {
+  position: relative;
+  overflow-x: hidden;
+}
+.t-skeleton--animation-gradient::after {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(var(--skeleton-animation-gradient)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--skeleton-animation-gradient), rgba(255, 255, 255, 0));
+  -webkit-animation: t-skeleton--gradient 1.5s linear 2s infinite;
+          animation: t-skeleton--gradient 1.5s linear 2s infinite;
+}
+.t-skeleton--animation-flashed {
+  -webkit-animation: t-skeleton--flashed 2s linear 2s infinite;
+          animation: t-skeleton--flashed 2s linear 2s infinite;
+}
+@-webkit-keyframes t-skeleton--gradient {
+  0% {
+    -webkit-transform: translateX(-100%) skewX(-15deg);
+            transform: translateX(-100%) skewX(-15deg);
+  }
+  100% {
+    -webkit-transform: translateX(100%) skewX(-15deg);
+            transform: translateX(100%) skewX(-15deg);
+  }
+}
+@keyframes t-skeleton--gradient {
+  0% {
+    -webkit-transform: translateX(-100%) skewX(-15deg);
+            transform: translateX(-100%) skewX(-15deg);
+  }
+  100% {
+    -webkit-transform: translateX(100%) skewX(-15deg);
+            transform: translateX(100%) skewX(-15deg);
+  }
+}
+@-webkit-keyframes t-skeleton--flashed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    background-color: rgba(230, 230, 230, 0.3);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes t-skeleton--flashed {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    background-color: rgba(230, 230, 230, 0.3);
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/es/slider/style/index.css

@@ -1 +1,247 @@
-.t-slider__input-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-left:var(--td-comp-margin-xxl)}.t-slider__input-container.is-vertical{padding-top:var(--td-comp-paddingTB-l);margin-left:0}.t-slider__input-container .t-slider__center-line{width:var(--td-size-4);height:1px;background:rgba(0,0,0,.9);margin:0 var(--td-comp-margin-s)}.t-slider{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;height:calc(var(--td-comp-paddingTB-xs)*2 + var(--td-size-2));width:100%;position:relative;padding:var(--td-comp-paddingTB-xs) 0}.t-slider__container{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-slider__container.is-vertical{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.t-slider__rail{position:absolute;width:100%;height:var(--td-size-2);background-color:var(--td-bg-color-secondarycomponent);-webkit-transition:.2s linear;transition:.2s linear;border-radius:var(--td-radius-round)}.t-slider__rail:hover{background-color:var(--td-bg-color-secondarycomponent-hover)}.t-slider__track{background-color:var(--td-brand-color);right:auto;border-radius:var(--td-radius-round)}.t-slider__step,.t-slider__track{position:absolute;height:var(--td-size-2)}.t-slider__step{width:100%;cursor:pointer}.t-slider__button{width:var(--td-comp-size-xxxs);height:var(--td-comp-size-xxxs);border:2px solid var(--td-brand-color);background-color:#fff;border-radius:var(--td-radius-circle);-webkit-transition:.2s;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:var(--td-shadow-1);box-shadow:var(--td-shadow-1)}.t-slider__button--dragging{-webkit-box-shadow:0 0 0 2px var(--td-brand-color-focus);box-shadow:0 0 0 2px var(--td-brand-color-focus)}.t-slider__button:hover{background-color:var(--td-gray-color-1)}.t-slider__button-wrapper{position:absolute;z-index:2;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal;outline:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-slider__stop{position:absolute;width:1px;height:var(--td-size-2);background-color:var(--td-bg-color-secondarycomponent);top:4px}.t-slider__mark{position:absolute;top:2px;left:0;width:100%}.t-slider__mark-text{position:absolute;display:inline-block;font:var(--td-font-body-small);color:var(--td-text-color-primary);top:calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px);-webkit-transform:translateX(-50%);transform:translateX(-50%);cursor:pointer}.t-slider__mark-text:first-child{-webkit-transform:translateX(0);transform:translateX(0)}.t-slider__mark-text:last-child{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.t-slider--vertical{height:100%;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.t-slider--vertical .t-slider__rail{width:var(--td-size-2);height:100%}.t-slider--vertical .t-slider__track{width:var(--td-size-2);top:auto}.t-slider--vertical .t-slider__step{width:var(--td-size-2);height:100%}.t-slider--vertical .t-slider__handle{margin-top:-6px;margin-left:-5px;top:auto;-webkit-transform:translateY(50%);transform:translateY(50%)}.t-slider--vertical .t-slider__mark{top:0;left:12px;width:18px;height:100%}.t-slider--vertical .t-slider__stop{width:var(--td-size-2);height:1px;left:4px;background-color:var(--td-bg-color-secondarycomponent)}.t-slider--vertical .t-slider__mark-text{-webkit-transform:translateY(-50%);transform:translateY(-50%);margin-top:0;margin-left:var(--td-comp-margin-xxs)}.t-slider--vertical .t-slider__button-wrapper{top:auto;position:absolute;z-index:2;left:50%;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal;outline:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.t-is-disabled{cursor:not-allowed}.t-is-disabled .t-slider__track{background-color:var(--td-brand-color-disabled)}.t-is-disabled .t-slider__rail{background-color:var(--td-bg-color-component-disabled)}.t-is-disabled .t-slider__handle{border:2px solid var(--td-brand-color-disabled)}.t-is-disabled .t-slider__button{border-color:var(--td-brand-color-disabled);outline:none}.t-is-disabled .t-slider__mark-text{color:var(--td-text-color-disabled);cursor:not-allowed}.t-is-disabled .t-slider__button-wrapper{cursor:not-allowed}
+.t-slider__input-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-left: var(--td-comp-margin-xxl);
+}
+.t-slider__input-container.is-vertical {
+  padding-top: var(--td-comp-paddingTB-l);
+  margin-left: 0px;
+}
+.t-slider__input-container .t-slider__center-line {
+  width: var(--td-size-4);
+  height: 1px;
+  background: rgba(0, 0, 0, 0.9);
+  margin: 0 var(--td-comp-margin-s);
+}
+.t-slider {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  height: calc(var(--td-comp-paddingTB-xs) * 2 + var(--td-size-2));
+  width: 100%;
+  position: relative;
+  padding: var(--td-comp-paddingTB-xs) 0;
+}
+.t-slider__container {
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-slider__container.is-vertical {
+  height: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-slider__rail {
+  position: absolute;
+  width: 100%;
+  height: var(--td-size-2);
+  background-color: var(--td-bg-color-secondarycomponent);
+  -webkit-transition: 0.2s linear;
+  transition: 0.2s linear;
+  border-radius: var(--td-radius-round);
+}
+.t-slider__rail:hover {
+  background-color: var(--td-bg-color-secondarycomponent-hover);
+}
+.t-slider__track {
+  position: absolute;
+  height: var(--td-size-2);
+  background-color: var(--td-brand-color);
+  right: auto;
+  border-radius: var(--td-radius-round);
+}
+.t-slider__step {
+  position: absolute;
+  width: 100%;
+  height: var(--td-size-2);
+  cursor: pointer;
+}
+.t-slider__button {
+  width: var(--td-comp-size-xxxs);
+  height: var(--td-comp-size-xxxs);
+  border: 2px solid var(--td-brand-color);
+  background-color: #fff;
+  border-radius: var(--td-radius-circle);
+  -webkit-transition: 0.2s;
+  transition: 0.2s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-box-shadow: var(--td-shadow-1);
+          box-shadow: var(--td-shadow-1);
+}
+.t-slider__button--dragging {
+  -webkit-box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
+          box-shadow: 0 0 0px 2px var(--td-brand-color-focus);
+}
+.t-slider__button:hover {
+  background-color: var(--td-gray-color-1);
+}
+.t-slider__button-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  background-color: transparent;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  line-height: normal;
+  outline: none;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-slider__stop {
+  position: absolute;
+  width: 1px;
+  height: var(--td-size-2);
+  background-color: var(--td-bg-color-secondarycomponent);
+  top: 4px;
+}
+.t-slider__mark {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 100%;
+}
+.t-slider__mark-text {
+  position: absolute;
+  display: inline-block;
+  font: var(--td-font-body-small);
+  color: var(--td-text-color-primary);
+  top: calc(var(--td-size-2) + var(--td-comp-paddingTB-xs) + 2px);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  cursor: pointer;
+}
+.t-slider__mark-text:first-child {
+  -webkit-transform: translateX(0%);
+          transform: translateX(0%);
+}
+.t-slider__mark-text:last-child {
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.t-slider--vertical {
+  height: 100%;
+  padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  position: relative;
+}
+.t-slider--vertical .t-slider__rail {
+  width: var(--td-size-2);
+  height: 100%;
+}
+.t-slider--vertical .t-slider__track {
+  width: var(--td-size-2);
+  top: auto;
+}
+.t-slider--vertical .t-slider__step {
+  width: var(--td-size-2);
+  height: 100%;
+}
+.t-slider--vertical .t-slider__handle {
+  margin-top: -6px;
+  margin-left: -5px;
+  top: auto;
+  -webkit-transform: translateY(50%);
+          transform: translateY(50%);
+}
+.t-slider--vertical .t-slider__mark {
+  top: 0;
+  left: 12px;
+  width: 18px;
+  height: 100%;
+}
+.t-slider--vertical .t-slider__stop {
+  width: var(--td-size-2);
+  height: 1px;
+  left: 4px;
+  background-color: var(--td-bg-color-secondarycomponent);
+}
+.t-slider--vertical .t-slider__mark-text {
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  margin-top: 0;
+  margin-left: var(--td-comp-margin-xxs);
+}
+.t-slider--vertical .t-slider__button-wrapper {
+  top: auto;
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  -webkit-transform: translate(-50%, 50%);
+          transform: translate(-50%, 50%);
+  background-color: transparent;
+  text-align: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  line-height: normal;
+  outline: none;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.t-is-disabled {
+  cursor: not-allowed;
+}
+.t-is-disabled .t-slider__track {
+  background-color: var(--td-brand-color-disabled);
+}
+.t-is-disabled .t-slider__rail {
+  background-color: var(--td-bg-color-component-disabled);
+}
+.t-is-disabled .t-slider__handle {
+  border: 2px solid var(--td-brand-color-disabled);
+}
+.t-is-disabled .t-slider__button {
+  border-color: var(--td-brand-color-disabled);
+  outline: none;
+}
+.t-is-disabled .t-slider__mark-text {
+  color: var(--td-text-color-disabled);
+  cursor: not-allowed;
+}
+.t-is-disabled .t-slider__button-wrapper {
+  cursor: not-allowed;
+}