@-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { 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; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-comp-size-xxxs); } .t-loading.t-size-l { font-size: var(--td-comp-size-xxxl); } .t-loading__parent--relative { position: relative !important; } .t-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-loading__content { position: absolute; left: 48%; top: 20%; } .t-loading--inherit-color { color: inherit; } .t-loading__parent { position: relative; } .t-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .t-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--hidden { visibility: hidden; } .t-loading--visible { visibility: visible; } .t-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .t-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .t-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-button { 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; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-button .t-icon { font-size: var(--td-font-size-body-large); } .t-button .t-loading { font-size: var(--td-font-size-body-large); } .t-button .t-icon + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-loading + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .t-button--variant-base .t-icon, .t-button--variant-base .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-base.t-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { background-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { background-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { background-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { background-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-base.t-button--ghost:active { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .t-button--variant-outline .t-icon, .t-button--variant-outline .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-outline.t-button--ghost:active { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .t-button--variant-dashed .t-icon, .t-button--variant-dashed .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-dashed.t-button--ghost:active { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .t-button--variant-text .t-icon, .t-button--variant-text .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { background-color: transparent; } .t-button--variant-text.t-is-disabled { background-color: transparent; } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { border-color: transparent; } .t-button--variant-text.t-is-disabled { border-color: transparent; } .t-button--variant-text.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary:hover, .t-button--variant-text.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-text.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success:hover, .t-button--variant-text.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-text.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning:hover, .t-button--variant-text.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-text.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger:hover, .t-button--variant-text.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-text.t-button--ghost { background: none; color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost:hover, .t-button--variant-text.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success:hover, .t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .t-button.t-size-s .t-icon, .t-button.t-size-s .t-loading { font-size: var(--td-font-size-body-medium); } .t-button.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .t-button--shape-square.t-size-s { width: var(--td-comp-size-xs); padding: 0; } .t-button--shape-square.t-size-l { width: var(--td-comp-size-xl); padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-round.t-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .t-button--shape-circle .t-icon { font-size: var(--td-font-size-body-large); } .t-button--shape-circle .t-loading { font-size: var(--td-font-size-body-large); } .t-button--shape-circle.t-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-circle.t-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button.t-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .t-button--ghost { --ripple-color: var(--td-gray-color-10); } .t-button:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-success-color-active); } .t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-error-color-active); } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .t-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-enter, .t-dialog-zoom-enter-from, .t-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-enter-active, .t-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-active .t-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-enter-active .t-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-active .t-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-leave-active .t-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-fade-enter, .t-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-enter.t-dialog-fade-enter-active, .t-dialog-fade-appear.t-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .t-dialog-fade-exit.t-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-dialog { 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: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .t-dialog .t-icon.t-is-info, .t-dialog t-icon-info-circle.t-is-info { color: var(--td-brand-color); } .t-dialog .t-icon.t-is-success, .t-dialog t-icon-check-circle.t-is-success { color: var(--td-success-color); } .t-dialog .t-icon.t-is-warning, .t-dialog t-icon-error-circle.t-is-warning { color: var(--td-warning-color); } .t-dialog .t-icon.t-is-error, .t-dialog t-icon-error-circle.t-is-error { color: var(--td-error-color); } .t-dialog--lock { overflow: hidden; } .t-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__header .t-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .t-dialog__header .t-icon:not(.t-icon-close), .t-dialog__header t-icon-check-circle, .t-dialog__header t-icon-info-circle, .t-dialog__header t-icon-error-circle { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .t-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .t-dialog__header--fullscreen .t-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; 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-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .t-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body__icon, .t-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .t-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .t-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .t-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .t-dialog__footer .t-button + .t-button, .t-dialog__footer .t-dialog__button + .t-dialog__button { margin-left: var(--td-comp-margin-s); } .t-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .t-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .t-dialog__close:active { background: var(--td-bg-color-container-active); } .t-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .t-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .t-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .t-dialog.t-dialog--draggable:hover { cursor: move; } .t-dialog.t-dialog--draggable .t-dialog__header:hover, .t-dialog.t-dialog--draggable .t-dialog__body:hover, .t-dialog.t-dialog--draggable .t-dialog__footer:hover { cursor: auto; } .t-dialog__fullscreen { width: 100%; border-radius: 0; } .t-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .t-dialog__ctx.t-dialog__ctx--modeless { pointer-events: none; } .t-dialog__ctx.t-dialog__ctx--fixed { position: fixed; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--absolute { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap { position: absolute; } .t-dialog__ctx.t-is-visible { visibility: visible; } .t-dialog__ctx.t-is-hidden { visibility: hidden; } .t-dialog__ctx.t-is-display { display: block; } .t-dialog__ctx.t-not-display { display: none; } .t-dialog__ctx .t-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .t-dialog__ctx .t-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .t-dialog__ctx .t-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__ctx .t-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; 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; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .t-dialog__ctx .t-dialog__position.t-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-dialog__ctx .t-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__ctx .t-is-hidden { background: none; } .t-dialog__ctx .t-dialog { pointer-events: auto; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--modeless .t-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } /** * 颜色 */ /** * 尺寸 */ /** * 字体 */ /** * 动画 */ /** * 间距 */ /** * 位置 */ /** * 边框弧度 */ .t-drawer-fade-enter, .t-drawer-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .t-drawer-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: paused; animation-play-state: paused; } .t-drawer-fade-enter.t-drawer-fade-enter-active, .t-drawer-fade-enter.t-drawer-fade-enter-active.t-drawer-fade-enter-to, .t-drawer-fade-appear.t-drawer-fade-appear-active, .t-drawer-fade-appear.t-drawer-fade-appear-active.t-drawer-fade-appear-to { -webkit-animation-name: tDrawerFadeIn; animation-name: tDrawerFadeIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } .t-drawer-fade-exit.t-drawer-fade-exit-active, .t-drawer-fade-leave-active.t-drawer-fade-leave-to { -webkit-animation-name: tDrawerFadeOut; animation-name: tDrawerFadeOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDrawerFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDrawerFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-drawer { 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; position: fixed; z-index: 1500; width: 100%; height: 100%; pointer-events: none; overflow: hidden; outline: none; } .t-drawer--lock { overflow: hidden; } .t-drawer--attach { position: absolute; } .t-drawer--left, .t-drawer--right { top: 0; } .t-drawer--left { left: 0; } .t-drawer--right { right: 0; } .t-drawer--top, .t-drawer--bottom { left: 0; } .t-drawer--top { top: 0; } .t-drawer--bottom { bottom: 0; } .t-drawer__mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--td-mask-active); -webkit-transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: opacity 0.2s cubic-bezier(0.38, 0, 0.24, 1); opacity: 0; } .t-drawer__content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-container); width: 16px; height: 16px; font-size: var(--td-font-body-medium); color: var(--td-text-color-secondary); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); overflow: hidden; pointer-events: auto; -webkit-transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: transform 0.28s cubic-bezier(0.38, 0, 0.24, 1), visibility 0.28s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.28s cubic-bezier(0.38, 0, 0.24, 1); position: relative; } .t-drawer .t-drawer__content-wrapper { position: absolute; width: 100%; height: 100%; visibility: hidden; } .t-drawer .t-drawer__content-wrapper--left, .t-drawer .t-drawer__content-wrapper--right { top: 0; } .t-drawer .t-drawer__content-wrapper--left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .t-drawer .t-drawer__content-wrapper--right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .t-drawer .t-drawer__content-wrapper--top, .t-drawer .t-drawer__content-wrapper--bottom { left: 0; } .t-drawer .t-drawer__content-wrapper--top { top: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .t-drawer .t-drawer__content-wrapper--bottom { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .t-drawer__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: var(--td-comp-size-xxxl); padding: 0 var(--td-comp-paddingLR-l); font: var(--td-font-title-medium); color: var(--td-text-color-primary); border-bottom: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-small) var(--td-radius-small) 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-drawer__body { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); overflow: auto; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-drawer__footer { width: 100%; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); text-align: left; border-top: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-drawer__footer .t-button { margin-left: var(--td-comp-margin-s); } .t-drawer__footer .t-button:first-child { margin-left: 0; } .t-drawer__close-btn { position: absolute; 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; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-xs)) / 2); right: var(--td-comp-margin-s); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); cursor: pointer; -webkit-transition: background-color 0.2s; transition: background-color 0.2s; } .t-drawer__close-btn:hover { background-color: var(--td-bg-color-container-hover); } .t-drawer__close-btn:active { background-color: var(--td-bg-color-container-active); } .t-drawer__close-btn .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); vertical-align: unset; } .t-drawer--open { width: 100%; height: 100%; pointer-events: auto; } .t-drawer--open > .t-drawer__content-wrapper { visibility: visible; } .t-drawer--open > .t-drawer__mask { opacity: 1; width: 100%; height: 100%; } .t-drawer--without-mask { pointer-events: none; } [tabindex="-1"]:focus { outline: none !important; /* stylelint-disable-line */ } .t-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-message > .t-icon, .t-message > [data-t-icon] > .t-icon, .t-message .t-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-message.t-is-success > .t-icon, .t-message.t-is-success > [data-t-icon] > .t-icon, .t-message.t-is-success .t-loading { color: var(--td-success-color); } .t-message.t-is-warning > .t-icon, .t-message.t-is-warning > [data-t-icon] > .t-icon, .t-message.t-is-warning .t-loading { color: var(--td-warning-color); } .t-message.t-is-error > .t-icon, .t-message.t-is-error > [data-t-icon] > .t-icon, .t-message.t-is-error .t-loading { color: var(--td-error-color); } .t-message.t-is-closable .t-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .t-message.t-is-closable .t-message__close .t-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-message.t-is-closable .t-message__close .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-message.t-is-closable .t-message__close .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-message__list { position: fixed; z-index: 6000; } .t-message__list .t-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .t-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .t-link .t-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link .t-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-s { font: var(--td-font-link-small); } .t-link.t-size-s .t-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-s .t-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-l { font: var(--td-font-link-large); } .t-link.t-size-l .t-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-l .t-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link--theme-default { color: var(--td-text-color-primary); } .t-link--theme-default:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-default.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-default.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-default.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled:hover, .t-link--theme-default.t-is-disabled:active { color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled.t-is-underline::after { border-color: var(--td-text-color-disabled); } .t-link--theme-primary { color: var(--td-brand-color); } .t-link--theme-primary:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-primary.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-primary.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-primary.t-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled:hover, .t-link--theme-primary.t-is-disabled:active { color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled.t-is-underline::after { border-color: var(--td-brand-color-disabled); } .t-link--theme-success { color: var(--td-success-color); } .t-link--theme-success:active { color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-success.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-success.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:hover { color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:active { color: var(--td-success-color-active); } .t-link--theme-success.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-success.t-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled:hover, .t-link--theme-success.t-is-disabled:active { color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled.t-is-underline::after { border-color: var(--td-success-color-disabled); } .t-link--theme-danger { color: var(--td-error-color); } .t-link--theme-danger:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-danger.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-danger.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:hover { color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-danger.t-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled:hover, .t-link--theme-danger.t-is-disabled:active { color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled.t-is-underline::after { border-color: var(--td-error-color-disabled); } .t-link--theme-warning { color: var(--td-warning-color); } .t-link--theme-warning:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-warning.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-warning.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:hover { color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-warning.t-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled:hover, .t-link--theme-warning.t-is-disabled:active { color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled.t-is-underline::after { border-color: var(--td-warning-color-disabled); } .t-layout { 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-layout, .t-layout__direction-vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: var(--td-bg-color-page); -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .t-layout--with-sider, .t-layout__direction-horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .t-layout__header { height: var(--td-comp-size-xxxl); background-color: var(--td-bg-color-container); } .t-layout__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; } .t-layout__sider { position: relative; -webkit-transition: all 0.2s; transition: all 0.2s; background: var(--td-bg-color-container); width: 232px; } .t-layout__footer { color: var(--td-text-color-placeholder); padding: 24px; } .t-row { 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; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .t-row--start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .t-row--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-row--end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .t-row--space-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-row--space-around { -ms-flex-pack: distribute; justify-content: space-around; } .t-row--top { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-row--middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-row--bottom { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .t-row--align-top, .t-row--align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-row--align-middle, .t-row--align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-row--align-bottom, .t-row--align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .t-row--align-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .t-row--align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .t-col { position: relative; max-width: 100%; min-height: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-col-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-push-12 { left: 100%; } .t-col-pull-12 { right: 100%; } .t-col-offset-12 { margin-left: 100%; } .t-col-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-push-11 { left: 91.66666667%; } .t-col-pull-11 { right: 91.66666667%; } .t-col-offset-11 { margin-left: 91.66666667%; } .t-col-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-push-10 { left: 83.33333333%; } .t-col-pull-10 { right: 83.33333333%; } .t-col-offset-10 { margin-left: 83.33333333%; } .t-col-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-push-9 { left: 75%; } .t-col-pull-9 { right: 75%; } .t-col-offset-9 { margin-left: 75%; } .t-col-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-push-8 { left: 66.66666667%; } .t-col-pull-8 { right: 66.66666667%; } .t-col-offset-8 { margin-left: 66.66666667%; } .t-col-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-push-7 { left: 58.33333333%; } .t-col-pull-7 { right: 58.33333333%; } .t-col-offset-7 { margin-left: 58.33333333%; } .t-col-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-push-6 { left: 50%; } .t-col-pull-6 { right: 50%; } .t-col-offset-6 { margin-left: 50%; } .t-col-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-push-5 { left: 41.66666667%; } .t-col-pull-5 { right: 41.66666667%; } .t-col-offset-5 { margin-left: 41.66666667%; } .t-col-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-push-4 { left: 33.33333333%; } .t-col-pull-4 { right: 33.33333333%; } .t-col-offset-4 { margin-left: 33.33333333%; } .t-col-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-push-3 { left: 25%; } .t-col-pull-3 { right: 25%; } .t-col-offset-3 { margin-left: 25%; } .t-col-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-push-2 { left: 16.66666667%; } .t-col-pull-2 { right: 16.66666667%; } .t-col-offset-2 { margin-left: 16.66666667%; } .t-col-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-push-1 { left: 8.33333333%; } .t-col-pull-1 { right: 8.33333333%; } .t-col-offset-1 { margin-left: 8.33333333%; } .t-col-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-offset-0 { margin-left: 0; } .t-col-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } .t-col-xs-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-xs-push-12 { left: 100%; } .t-col-xs-pull-12 { right: 100%; } .t-col-xs-offset-12 { margin-left: 100%; } .t-col-xs-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-xs-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xs-push-11 { left: 91.66666667%; } .t-col-xs-pull-11 { right: 91.66666667%; } .t-col-xs-offset-11 { margin-left: 91.66666667%; } .t-col-xs-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-xs-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xs-push-10 { left: 83.33333333%; } .t-col-xs-pull-10 { right: 83.33333333%; } .t-col-xs-offset-10 { margin-left: 83.33333333%; } .t-col-xs-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-xs-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-xs-push-9 { left: 75%; } .t-col-xs-pull-9 { right: 75%; } .t-col-xs-offset-9 { margin-left: 75%; } .t-col-xs-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-xs-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xs-push-8 { left: 66.66666667%; } .t-col-xs-pull-8 { right: 66.66666667%; } .t-col-xs-offset-8 { margin-left: 66.66666667%; } .t-col-xs-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-xs-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xs-push-7 { left: 58.33333333%; } .t-col-xs-pull-7 { right: 58.33333333%; } .t-col-xs-offset-7 { margin-left: 58.33333333%; } .t-col-xs-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-xs-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-xs-push-6 { left: 50%; } .t-col-xs-pull-6 { right: 50%; } .t-col-xs-offset-6 { margin-left: 50%; } .t-col-xs-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-xs-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xs-push-5 { left: 41.66666667%; } .t-col-xs-pull-5 { right: 41.66666667%; } .t-col-xs-offset-5 { margin-left: 41.66666667%; } .t-col-xs-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-xs-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xs-push-4 { left: 33.33333333%; } .t-col-xs-pull-4 { right: 33.33333333%; } .t-col-xs-offset-4 { margin-left: 33.33333333%; } .t-col-xs-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-xs-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-xs-push-3 { left: 25%; } .t-col-xs-pull-3 { right: 25%; } .t-col-xs-offset-3 { margin-left: 25%; } .t-col-xs-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-xs-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xs-push-2 { left: 16.66666667%; } .t-col-xs-pull-2 { right: 16.66666667%; } .t-col-xs-offset-2 { margin-left: 16.66666667%; } .t-col-xs-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-xs-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xs-push-1 { left: 8.33333333%; } .t-col-xs-pull-1 { right: 8.33333333%; } .t-col-xs-offset-1 { margin-left: 8.33333333%; } .t-col-xs-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-xs-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xs-push-0 { left: auto; } .t-col-xs-pull-0 { right: auto; } .t-col-xs-offset-0 { margin-left: 0; } .t-col-xs-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 768px) { .t-col-sm-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-sm-push-12 { left: 100%; } .t-col-sm-pull-12 { right: 100%; } .t-col-sm-offset-12 { margin-left: 100%; } .t-col-sm-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-sm-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-sm-push-11 { left: 91.66666667%; } .t-col-sm-pull-11 { right: 91.66666667%; } .t-col-sm-offset-11 { margin-left: 91.66666667%; } .t-col-sm-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-sm-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-sm-push-10 { left: 83.33333333%; } .t-col-sm-pull-10 { right: 83.33333333%; } .t-col-sm-offset-10 { margin-left: 83.33333333%; } .t-col-sm-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-sm-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-sm-push-9 { left: 75%; } .t-col-sm-pull-9 { right: 75%; } .t-col-sm-offset-9 { margin-left: 75%; } .t-col-sm-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-sm-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-sm-push-8 { left: 66.66666667%; } .t-col-sm-pull-8 { right: 66.66666667%; } .t-col-sm-offset-8 { margin-left: 66.66666667%; } .t-col-sm-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-sm-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-sm-push-7 { left: 58.33333333%; } .t-col-sm-pull-7 { right: 58.33333333%; } .t-col-sm-offset-7 { margin-left: 58.33333333%; } .t-col-sm-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-sm-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-sm-push-6 { left: 50%; } .t-col-sm-pull-6 { right: 50%; } .t-col-sm-offset-6 { margin-left: 50%; } .t-col-sm-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-sm-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-sm-push-5 { left: 41.66666667%; } .t-col-sm-pull-5 { right: 41.66666667%; } .t-col-sm-offset-5 { margin-left: 41.66666667%; } .t-col-sm-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-sm-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-sm-push-4 { left: 33.33333333%; } .t-col-sm-pull-4 { right: 33.33333333%; } .t-col-sm-offset-4 { margin-left: 33.33333333%; } .t-col-sm-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-sm-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-sm-push-3 { left: 25%; } .t-col-sm-pull-3 { right: 25%; } .t-col-sm-offset-3 { margin-left: 25%; } .t-col-sm-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-sm-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-sm-push-2 { left: 16.66666667%; } .t-col-sm-pull-2 { right: 16.66666667%; } .t-col-sm-offset-2 { margin-left: 16.66666667%; } .t-col-sm-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-sm-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-sm-push-1 { left: 8.33333333%; } .t-col-sm-pull-1 { right: 8.33333333%; } .t-col-sm-offset-1 { margin-left: 8.33333333%; } .t-col-sm-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-sm-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-sm-push-0 { left: auto; } .t-col-sm-pull-0 { right: auto; } .t-col-sm-offset-0 { margin-left: 0; } .t-col-sm-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 992px) { .t-col-md-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-md-push-12 { left: 100%; } .t-col-md-pull-12 { right: 100%; } .t-col-md-offset-12 { margin-left: 100%; } .t-col-md-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-md-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-md-push-11 { left: 91.66666667%; } .t-col-md-pull-11 { right: 91.66666667%; } .t-col-md-offset-11 { margin-left: 91.66666667%; } .t-col-md-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-md-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-md-push-10 { left: 83.33333333%; } .t-col-md-pull-10 { right: 83.33333333%; } .t-col-md-offset-10 { margin-left: 83.33333333%; } .t-col-md-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-md-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-md-push-9 { left: 75%; } .t-col-md-pull-9 { right: 75%; } .t-col-md-offset-9 { margin-left: 75%; } .t-col-md-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-md-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-md-push-8 { left: 66.66666667%; } .t-col-md-pull-8 { right: 66.66666667%; } .t-col-md-offset-8 { margin-left: 66.66666667%; } .t-col-md-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-md-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-md-push-7 { left: 58.33333333%; } .t-col-md-pull-7 { right: 58.33333333%; } .t-col-md-offset-7 { margin-left: 58.33333333%; } .t-col-md-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-md-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-md-push-6 { left: 50%; } .t-col-md-pull-6 { right: 50%; } .t-col-md-offset-6 { margin-left: 50%; } .t-col-md-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-md-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-md-push-5 { left: 41.66666667%; } .t-col-md-pull-5 { right: 41.66666667%; } .t-col-md-offset-5 { margin-left: 41.66666667%; } .t-col-md-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-md-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-md-push-4 { left: 33.33333333%; } .t-col-md-pull-4 { right: 33.33333333%; } .t-col-md-offset-4 { margin-left: 33.33333333%; } .t-col-md-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-md-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-md-push-3 { left: 25%; } .t-col-md-pull-3 { right: 25%; } .t-col-md-offset-3 { margin-left: 25%; } .t-col-md-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-md-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-md-push-2 { left: 16.66666667%; } .t-col-md-pull-2 { right: 16.66666667%; } .t-col-md-offset-2 { margin-left: 16.66666667%; } .t-col-md-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-md-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-md-push-1 { left: 8.33333333%; } .t-col-md-pull-1 { right: 8.33333333%; } .t-col-md-offset-1 { margin-left: 8.33333333%; } .t-col-md-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-md-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-md-push-0 { left: auto; } .t-col-md-pull-0 { right: auto; } .t-col-md-offset-0 { margin-left: 0; } .t-col-md-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1200px) { .t-col-lg-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-lg-push-12 { left: 100%; } .t-col-lg-pull-12 { right: 100%; } .t-col-lg-offset-12 { margin-left: 100%; } .t-col-lg-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-lg-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-lg-push-11 { left: 91.66666667%; } .t-col-lg-pull-11 { right: 91.66666667%; } .t-col-lg-offset-11 { margin-left: 91.66666667%; } .t-col-lg-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-lg-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-lg-push-10 { left: 83.33333333%; } .t-col-lg-pull-10 { right: 83.33333333%; } .t-col-lg-offset-10 { margin-left: 83.33333333%; } .t-col-lg-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-lg-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-lg-push-9 { left: 75%; } .t-col-lg-pull-9 { right: 75%; } .t-col-lg-offset-9 { margin-left: 75%; } .t-col-lg-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-lg-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-lg-push-8 { left: 66.66666667%; } .t-col-lg-pull-8 { right: 66.66666667%; } .t-col-lg-offset-8 { margin-left: 66.66666667%; } .t-col-lg-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-lg-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-lg-push-7 { left: 58.33333333%; } .t-col-lg-pull-7 { right: 58.33333333%; } .t-col-lg-offset-7 { margin-left: 58.33333333%; } .t-col-lg-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-lg-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-lg-push-6 { left: 50%; } .t-col-lg-pull-6 { right: 50%; } .t-col-lg-offset-6 { margin-left: 50%; } .t-col-lg-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-lg-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-lg-push-5 { left: 41.66666667%; } .t-col-lg-pull-5 { right: 41.66666667%; } .t-col-lg-offset-5 { margin-left: 41.66666667%; } .t-col-lg-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-lg-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-lg-push-4 { left: 33.33333333%; } .t-col-lg-pull-4 { right: 33.33333333%; } .t-col-lg-offset-4 { margin-left: 33.33333333%; } .t-col-lg-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-lg-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-lg-push-3 { left: 25%; } .t-col-lg-pull-3 { right: 25%; } .t-col-lg-offset-3 { margin-left: 25%; } .t-col-lg-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-lg-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-lg-push-2 { left: 16.66666667%; } .t-col-lg-pull-2 { right: 16.66666667%; } .t-col-lg-offset-2 { margin-left: 16.66666667%; } .t-col-lg-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-lg-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-lg-push-1 { left: 8.33333333%; } .t-col-lg-pull-1 { right: 8.33333333%; } .t-col-lg-offset-1 { margin-left: 8.33333333%; } .t-col-lg-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-lg-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-lg-push-0 { left: auto; } .t-col-lg-pull-0 { right: auto; } .t-col-lg-offset-0 { margin-left: 0; } .t-col-lg-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1400px) { .t-col-xl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-xl-push-12 { left: 100%; } .t-col-xl-pull-12 { right: 100%; } .t-col-xl-offset-12 { margin-left: 100%; } .t-col-xl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-xl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xl-push-11 { left: 91.66666667%; } .t-col-xl-pull-11 { right: 91.66666667%; } .t-col-xl-offset-11 { margin-left: 91.66666667%; } .t-col-xl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-xl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xl-push-10 { left: 83.33333333%; } .t-col-xl-pull-10 { right: 83.33333333%; } .t-col-xl-offset-10 { margin-left: 83.33333333%; } .t-col-xl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-xl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-xl-push-9 { left: 75%; } .t-col-xl-pull-9 { right: 75%; } .t-col-xl-offset-9 { margin-left: 75%; } .t-col-xl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-xl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xl-push-8 { left: 66.66666667%; } .t-col-xl-pull-8 { right: 66.66666667%; } .t-col-xl-offset-8 { margin-left: 66.66666667%; } .t-col-xl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-xl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xl-push-7 { left: 58.33333333%; } .t-col-xl-pull-7 { right: 58.33333333%; } .t-col-xl-offset-7 { margin-left: 58.33333333%; } .t-col-xl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-xl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-xl-push-6 { left: 50%; } .t-col-xl-pull-6 { right: 50%; } .t-col-xl-offset-6 { margin-left: 50%; } .t-col-xl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-xl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xl-push-5 { left: 41.66666667%; } .t-col-xl-pull-5 { right: 41.66666667%; } .t-col-xl-offset-5 { margin-left: 41.66666667%; } .t-col-xl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-xl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xl-push-4 { left: 33.33333333%; } .t-col-xl-pull-4 { right: 33.33333333%; } .t-col-xl-offset-4 { margin-left: 33.33333333%; } .t-col-xl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-xl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-xl-push-3 { left: 25%; } .t-col-xl-pull-3 { right: 25%; } .t-col-xl-offset-3 { margin-left: 25%; } .t-col-xl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-xl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xl-push-2 { left: 16.66666667%; } .t-col-xl-pull-2 { right: 16.66666667%; } .t-col-xl-offset-2 { margin-left: 16.66666667%; } .t-col-xl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-xl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xl-push-1 { left: 8.33333333%; } .t-col-xl-pull-1 { right: 8.33333333%; } .t-col-xl-offset-1 { margin-left: 8.33333333%; } .t-col-xl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-xl-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xl-push-0 { left: auto; } .t-col-xl-pull-0 { right: auto; } .t-col-xl-offset-0 { margin-left: 0; } .t-col-xl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 1880px) { .t-col-xxl-12 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .t-col-xxl-push-12 { left: 100%; } .t-col-xxl-pull-12 { right: 100%; } .t-col-xxl-offset-12 { margin-left: 100%; } .t-col-xxl-order-12 { -webkit-box-ordinal-group: 13; -ms-flex-order: 12; order: 12; } .t-col-xxl-11 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 91.66666667%; flex: 0 0 91.66666667%; max-width: 91.66666667%; } .t-col-xxl-push-11 { left: 91.66666667%; } .t-col-xxl-pull-11 { right: 91.66666667%; } .t-col-xxl-offset-11 { margin-left: 91.66666667%; } .t-col-xxl-order-11 { -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .t-col-xxl-10 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 83.33333333%; flex: 0 0 83.33333333%; max-width: 83.33333333%; } .t-col-xxl-push-10 { left: 83.33333333%; } .t-col-xxl-pull-10 { right: 83.33333333%; } .t-col-xxl-offset-10 { margin-left: 83.33333333%; } .t-col-xxl-order-10 { -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .t-col-xxl-9 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; } .t-col-xxl-push-9 { left: 75%; } .t-col-xxl-pull-9 { right: 75%; } .t-col-xxl-offset-9 { margin-left: 75%; } .t-col-xxl-order-9 { -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .t-col-xxl-8 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 66.66666667%; flex: 0 0 66.66666667%; max-width: 66.66666667%; } .t-col-xxl-push-8 { left: 66.66666667%; } .t-col-xxl-pull-8 { right: 66.66666667%; } .t-col-xxl-offset-8 { margin-left: 66.66666667%; } .t-col-xxl-order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .t-col-xxl-7 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 58.33333333%; flex: 0 0 58.33333333%; max-width: 58.33333333%; } .t-col-xxl-push-7 { left: 58.33333333%; } .t-col-xxl-pull-7 { right: 58.33333333%; } .t-col-xxl-offset-7 { margin-left: 58.33333333%; } .t-col-xxl-order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .t-col-xxl-6 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .t-col-xxl-push-6 { left: 50%; } .t-col-xxl-pull-6 { right: 50%; } .t-col-xxl-offset-6 { margin-left: 50%; } .t-col-xxl-order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .t-col-xxl-5 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 41.66666667%; flex: 0 0 41.66666667%; max-width: 41.66666667%; } .t-col-xxl-push-5 { left: 41.66666667%; } .t-col-xxl-pull-5 { right: 41.66666667%; } .t-col-xxl-offset-5 { margin-left: 41.66666667%; } .t-col-xxl-order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .t-col-xxl-4 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 33.33333333%; flex: 0 0 33.33333333%; max-width: 33.33333333%; } .t-col-xxl-push-4 { left: 33.33333333%; } .t-col-xxl-pull-4 { right: 33.33333333%; } .t-col-xxl-offset-4 { margin-left: 33.33333333%; } .t-col-xxl-order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .t-col-xxl-3 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .t-col-xxl-push-3 { left: 25%; } .t-col-xxl-pull-3 { right: 25%; } .t-col-xxl-offset-3 { margin-left: 25%; } .t-col-xxl-order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .t-col-xxl-2 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 16.66666667%; flex: 0 0 16.66666667%; max-width: 16.66666667%; } .t-col-xxl-push-2 { left: 16.66666667%; } .t-col-xxl-pull-2 { right: 16.66666667%; } .t-col-xxl-offset-2 { margin-left: 16.66666667%; } .t-col-xxl-order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .t-col-xxl-1 { display: block; -webkit-box-flex: 0; -ms-flex: 0 0 8.33333333%; flex: 0 0 8.33333333%; max-width: 8.33333333%; } .t-col-xxl-push-1 { left: 8.33333333%; } .t-col-xxl-pull-1 { right: 8.33333333%; } .t-col-xxl-offset-1 { margin-left: 8.33333333%; } .t-col-xxl-order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .t-col-xxl-0 { display: none; } .t-col-push-0 { left: auto; } .t-col-pull-0 { right: auto; } .t-col-xxl-push-0 { left: auto; } .t-col-xxl-pull-0 { right: auto; } .t-col-xxl-offset-0 { margin-left: 0; } .t-col-xxl-order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .t-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .t-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .t-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="top-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="top"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="top-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow { top: calc(-8px / 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .t-popup[data-popper-placement="bottom-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="bottom"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="bottom-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow { right: calc(-8px / 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .t-popup[data-popper-placement="left-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="left"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="left-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow { left: calc(-8px / 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="right-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="right"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="right-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup--animation-enter, .t-popup--animation-enter-from, .t-popup--animation-exiting, .t-popup--animation-leave-to { opacity: 0; visibility: hidden; } .t-popup--animation-enter-to, .t-popup--animation-entering, .t-popup--animation-leave-from, .t-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .t-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-popup--animation-leave-active { -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; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .t-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .input-readonly.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.t-is-readonly .t-input__inner { cursor: pointer; } .input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon, .input-disabled.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon:hover, .input-disabled.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-tips { font-size: var(--td-font-size-body-small); } .t-tips.t-is-default { color: var(--td-text-color-placeholder); } .t-tips.t-is-error { color: var(--td-error-color); } .t-tips.t-is-warning { color: var(--td-warning-color); } .t-tips.t-is-success { color: var(--td-success-color); } .t-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .t-input:hover { border-color: var(--td-brand-color); } .t-input:focus { z-index: 1; 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-input--borderless:not(.t-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input--borderless:not(.t-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .t-input--borderless:not(.t-input--focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .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); z-index: 1; } .t-input :focus-visible { outline: none; } .t-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-moz-placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .t-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner[type="password"]::-ms-reveal { display: none; } .t-input__inner[type="search"]::-webkit-search-decoration, .t-input__inner[type="search"]::-webkit-search-cancel-button, .t-input__inner[type="search"]::-webkit-search-results-button, .t-input__inner[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .t-input__inner.t-input--soft-hidden { width: 0; } .t-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__status { position: absolute; right: -24px; top: 0; } .t-input.t-input--suffix > span.t-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input.t-input--suffix:hover > span.t-input__clear { opacity: 1; visibility: visible; } .t-input.t-is-success { border-color: var(--td-success-color); } .t-input.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-input.t-is-success.t-input--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-input.t-is-success > .t-input__extra { color: var(--td-success-color); } .t-input.t-is-warning { border-color: var(--td-warning-color); } .t-input.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning > .t-input__extra { color: var(--td-warning-color); } .t-input.t-is-error { border-color: var(--td-error-color); } .t-input.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error > .t-input__extra { color: var(--td-error-color); } .t-input.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .t-input.t-is-readonly .t-input__inner { cursor: pointer; } .t-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .t-input.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon, .t-input.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon:hover, .t-input.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-input.t-input--prefix > .t-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--prefix > .t-input__prefix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--suffix > .t-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--suffix > .t-input__suffix-icon { font-size: var(--td-font-size-body-large); } .t-input .t-input__suffix-clear { cursor: pointer; } .t-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-input.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .t-input .t-input__prefix > .t-icon, .t-input .t-input__suffix > .t-icon { font-size: inherit; } .t-input .t-input__prefix > .t-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .t-input .t-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .t-input .t-input__suffix > .t-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix > .t-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .t-input.t-is-focused .t-input__prefix > .t-icon { color: var(--td-brand-color); } .t-input.t-is-focused .t-input__suffix > .t-icon-time, .t-input.t-is-focused .t-input__suffix .t-icon-calendar { color: var(--td-brand-color); } .t-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .t-input-group .t-input__wrap { border-radius: 0; } .t-input-group .t-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button, .t-input-group .t-select { border-radius: 0; } .t-input-group .t-button:not(:first-child), .t-input-group .t-select:not(:first-child) { margin-left: -1px; } .t-input-group .t-input__wrap:not(:first-child) .t-input { margin-left: -1px; } .t-input-group .t-input__wrap:first-child .t-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child .t-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button:first-child, .t-input-group .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-button:last-child, .t-input-group .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap + .t-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .t-input-group--separate .t-button, .t-input-group--separate .t-select { border-radius: var(--td-radius-default); } .t-input-group--separate .t-button:first-child, .t-input-group--separate .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group--separate .t-button:last-child, .t-input-group--separate .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap .t-input { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:first-child { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:last-child { border-radius: var(--td-radius-default); } .t-input-group .t-input__inner, .t-input-group .t-button, .t-input-group .t-select { position: relative; z-index: 0; } .t-input-group .t-input__inner:hover, .t-input-group .t-button:hover, .t-input-group .t-select:hover, .t-input-group .t-input__inner:focus, .t-input-group .t-button:focus, .t-input-group .t-select:focus, .t-input-group .t-input__inner:active, .t-input-group .t-button:active, .t-input-group .t-select:active { z-index: 1; } .t-input__wrap { width: 100%; } .t-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .t-input__tips--default { color: var(--td-text-color-placeholder); } .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-align-center > .t-input__inner { text-align: center; } .t-align-right > .t-input__inner { text-align: right; } .t-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .t-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .t-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .t-input__limit-number.t-is-disabled { background: var(--td-bg-color-component-disabled); } .t-input-adornment { 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; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-input-adornment__prepend .t-input, .t-input-adornment__append .t-input, .t-input-adornment__prepend .t-textarea__inner, .t-input-adornment__append .t-textarea__inner { background-color: transparent; } .t-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .t-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .t-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .t-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :first-child .t-input, .t-input-adornment > :first-child .t-input-adornment__text, .t-input-adornment > :first-child .t-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :last-child .t-input, .t-input-adornment > :last-child .t-input-adornment__text, .t-input-adornment > :last-child .t-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :not(:last-child):hover { z-index: 2; } .t-input-adornment > :not(:first-child):not(:last-child) .t-input, .t-input-adornment > :not(:first-child):not(:last-child) .t-textarea__inner { border-radius: 0; } /* Alert */ .t-alert { 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; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; border-radius: var(--td-radius-medium); } .t-alert.t-is-hidden { /* 隐藏 */ display: none; } .t-alert--closing { opacity: 0; } .t-alert--info { background-color: var(--td-brand-color-focus); } .t-alert--info .t-alert__icon { color: var(--td-brand-color); } .t-alert--info .t-alert__swiper-trigger-wrap { color: var(--td-brand-color); } .t-alert--info .t-alert__swiper-trigger--active { color: var(--td-brand-color); } .t-alert--success { background-color: var(--td-success-color-focus); } .t-alert--success .t-alert__icon { color: var(--td-success-color); } .t-alert--success .t-alert__swiper-trigger-wrap { color: var(--td-success-color-focus); } .t-alert--success .t-alert__swiper-trigger--active { color: var(--td-success-color); } .t-alert--warning { background-color: var(--td-warning-color-focus); } .t-alert--warning .t-alert__icon { color: var(--td-warning-color); } .t-alert--warning .t-alert__swiper-trigger-wrap { color: var(--td-warning-color-focus); } .t-alert--warning .t-alert__swiper-trigger--active { color: var(--td-warning-color); } .t-alert--error { background-color: var(--td-error-color-focus); } .t-alert--error .t-alert__icon { color: var(--td-error-color); } .t-alert--error .t-alert__swiper-trigger-wrap { color: var(--td-error-color-focus); } .t-alert--error .t-alert__swiper-trigger--active { color: var(--td-error-color); } .t-alert__icon { font-size: var(--td-line-height-body-medium); display: inherit; } .t-alert__icon, .t-alert__close { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; line-height: var(--td-line-height-body-small); } .t-alert__content { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); overflow: hidden; } .t-alert__title, .t-alert__message { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-alert__title { color: var(--td-text-color-primary); font-weight: bold; } .t-alert__title + .t-alert__message { margin-top: var(--td-comp-margin-s); } .t-alert__description { color: var(--td-text-color-secondary); -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; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 var(--td-comp-paddingLR-s); color: var(--td-brand-color); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .t-alert__operation:hover { color: var(--td-brand-color-hover); } .t-alert__operation:active { color: var(--td-brand-color-active); } .t-alert__icon + .t-alert__content { margin-left: var(--td-comp-margin-s); } .t-alert__collapse { margin-top: var(--td-comp-margin-s); color: var(--td-brand-color); cursor: pointer; } .t-alert__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s; transition: color 0.2s; } .t-alert__close:hover { color: var(--td-text-color-primary); } .t-alert__close > .t-icon { font-size: calc(var(--td-line-height-body-medium) - 2px); padding: calc((var(--td-line-height-body-medium) - calc(var(--td-line-height-body-medium) - 2px)) / 2) 0; } .t-badge { 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; position: relative; display: inline-block; } .t-badge--dot, .t-badge--circle, .t-badge--round { position: absolute; top: 0; right: 0; color: var(--td-text-color-anti); text-align: center; font: var(--td-font-body-small); -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-box-sizing: content-box; box-sizing: content-box; } .t-badge--static { position: static; display: inline-block; -webkit-transform: none; transform: none; } .t-badge--dot { right: 1px; margin-top: 1px; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-error-color); } .t-badge--circle, .t-badge--round { padding-right: calc((var(--td-comp-size-xxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxs); background-color: var(--td-error-color); line-height: var(--td-comp-size-xxs); } .t-badge--circle.t-size-s, .t-badge--round.t-size-s { padding-right: calc((var(--td-comp-size-xxxs) - 8px) / 2); padding-left: calc((var(--td-comp-size-xxxs) - 8px) / 2); min-width: 8px; height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); } .t-badge--circle { border-radius: calc(var(--td-comp-size-xxs) / 2); } .t-badge--round { border-radius: var(--td-radius-default); } .t-radio-group { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; max-width: 100%; border-radius: var(--td-radius-default); -ms-flex-wrap: wrap; flex-wrap: wrap; } @-moz-document url-prefix() { .t-radio-group { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-radio-group::-webkit-scrollbar { width: 4px; height: 4px; } .t-radio-group::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 7px; } .t-radio-group::-webkit-scrollbar-thumb:vertical:hover, .t-radio-group::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-radio-group .t-radio { margin-right: var(--td-comp-margin-xxl); } .t-radio-group.t-radio-group__outline { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-xs); } .t-radio-group.t-radio-group__outline.t-size-s .t-radio-button { height: var(--td-comp-size-xs); } .t-radio-group.t-radio-group__outline.t-size-m .t-radio-button { height: var(--td-comp-size-m); } .t-radio-group.t-radio-group__outline.t-size-l .t-radio-button { height: var(--td-comp-size-xl); } .t-radio-group.t-radio-group__outline .t-radio-button:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-radio-group.t-radio-group__outline .t-radio-button:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-radio-group.t-radio-group__outline .t-radio-button:only-child { border-radius: var(--td-radius-default); } .t-radio-group.t-radio-group__outline .t-radio-button.t-is-checked { color: var(--td-brand-color); } .t-radio-group.t-radio-group__outline .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-brand-color-disabled); border-color: var(--td-brand-color-disabled); background-color: var(--td-bg-color-specialcomponent); } .t-radio-group.t-radio-group--filled { border-color: var(--td-bg-color-component); padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-component); position: relative; } .t-radio-group.t-radio-group--filled .t-radio-group__bg-block { position: absolute; left: 2px; top: 2px; width: 0; height: calc(100% - 4px); background-color: var(--td-bg-color-container-select); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .t-radio-group.t-radio-group--filled .t-radio-button { color: var(--td-text-color-secondary); border: 0; background-color: transparent; } .t-radio-group.t-radio-group--filled .t-radio-button:hover { color: var(--td-text-color-primary); } .t-radio-group.t-radio-group--filled .t-radio-button::before { content: ""; position: absolute; left: 0px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: calc(100% - 16px); background-color: var(--td-component-border); -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; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked { position: relative; color: var(--td-text-color-primary); z-index: 1; border: 0; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked::before { opacity: 0; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-checked + label::before { opacity: 0; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled { background-color: transparent; } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-disabled); } .t-radio-group.t-radio-group--filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block { background-color: var(--td-bg-color-component-disabled); } .t-radio-group.t-radio-group--primary-filled .t-radio-group__bg-block { background-color: var(--td-brand-color); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-checked { color: var(--td-text-color-anti); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-anti); } .t-radio-group.t-radio-group--primary-filled .t-radio-button.t-is-disabled.t-is-checked ~ .t-radio-group__bg-block { background-color: var(--td-brand-color-disabled); } .t-radio-group.t-size-s .t-radio-button { height: calc(var(--td-comp-size-xs) - (var(--td-comp-paddingTB-xxs) * 2)); padding: 0px var(--td-comp-paddingLR-s); font: var(--td-font-body-small); } .t-radio-group.t-size-s .t-radio-button::before { height: calc(100% - 16px); } .t-radio-group.t-size-m .t-radio-button { height: calc(var(--td-comp-size-m) - (var(--td-comp-paddingTB-xxs) * 2)); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); font: var(--td-font-body-medium); } .t-radio-group.t-size-m .t-radio-button::before { height: calc(100% - 20px); } .t-radio-group.t-size-l .t-radio-button { height: calc(var(--td-comp-size-xl) - (var(--td-comp-paddingTB-xxs) * 2)); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xl); font: var(--td-font-body-large); } .t-radio-group.t-size-l .t-radio-button::before { height: calc(100% - 24px); } .t-radio-group .t-radio-button { cursor: pointer; position: relative; border: 1px solid; border-color: var(--td-border-level-2-color); border-right: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -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; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-radio-group .t-radio-button:first-child { border-radius: var(--td-radius-small) 0 0 var(--td-radius-small); } .t-radio-group .t-radio-button:last-child { border-right: 1px solid; border-right-color: var(--td-border-level-2-color); border-radius: 0 var(--td-radius-small) var(--td-radius-small) 0; } .t-radio-group .t-radio-button__former { opacity: 0; height: 0; width: 0; 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-radio-group .t-radio-button:hover { color: var(--td-brand-color); } .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.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; } .t-radio-group .t-radio-button.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-radio-group .t-radio-button.t-is-disabled:hover { border-color: var(--td-border-level-2-color); color: var(--td-text-color-disabled); } .t-radio-group .t-radio-button.t-is-disabled:hover::after { width: 0; } .t-radio-group .t-radio-button.t-is-disabled.t-is-checked { color: var(--td-text-color-disabled); } .t-radio-group .t-radio-button.t-is-disabled.t-is-checked::after { width: 0; } .t-radio { 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; position: relative; cursor: pointer; display: inline-block; } .t-radio__former { 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; opacity: 0; position: absolute; } .t-radio__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border-radius: var(--td-radius-circle); 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.15, 1); transition: border 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-radio__input::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 0; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); -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; margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); vertical-align: middle; font: var(--td-font-body-medium); white-space: nowrap; } .t-radio:hover .t-radio__input { border-color: var(--td-brand-color); } .t-radio.t-is-checked .t-radio__input { border-color: var(--td-brand-color); } .t-radio.t-is-checked .t-radio__input::after { opacity: 1; } .t-radio.t-is-disabled { cursor: not-allowed; } .t-radio.t-is-disabled .t-radio__label { color: var(--td-text-color-disabled); } .t-radio.t-is-disabled .t-radio__input { background-color: var(--td-bg-color-component-disabled); } .t-radio.t-is-disabled:hover .t-radio__input { border-color: var(--td-border-level-2-color); } .t-radio.t-is-disabled.t-is-checked .t-radio__input { border-color: var(--td-border-level-2-color); } .t-radio.t-is-disabled.t-is-checked .t-radio__input::after { background-color: var(--td-text-color-disabled); } .t-radio:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .t-checkbox-group { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .t-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .t-checkbox + .t-checkbox { margin-left: inherit; } .t-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .t-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .t-checkbox:hover .t-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-checkbox.t-is-checked .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-checked .t-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .t-checkbox.t-is-indeterminate .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-indeterminate .t-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .t-checkbox.t-is-disabled { cursor: not-allowed; } .t-checkbox.t-is-disabled .t-checkbox__label { color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled .t-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .t-checkbox.t-is-disabled:hover .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after { border-color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after { background-color: var(--td-text-color-disabled); } .t-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap { margin-left: var(--td-comp-margin-xs); } .t-input-number input::-webkit-outer-spin-button, .t-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .t-input-number input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .t-input-number > .t-input__tips { position: absolute; left: 0; } .t-input-number input + .t-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .t-input-number .t-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .t-input-number .t-input { color: var(--td-text-color-primary); } .t-input-number.t-input-number--auto-width { width: auto; } .t-input-number.t-input-number--auto-width.t-is-controls-right { min-width: auto; width: auto; } .t-input-number.t-input-number--auto-width .t-input__inner { min-width: 42px; } .t-input-number .t-input-number__decrease, .t-input-number .t-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; 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; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input-number .t-input-number__decrease:hover, .t-input-number .t-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:hover .t-icon, .t-input-number .t-input-number__increase:hover .t-icon { color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:active, .t-input-number .t-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .t-input-number .t-input-number__decrease .t-icon, .t-input-number .t-input-number__increase .t-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .t-input-number .t-input-number__decrease.t-is-disabled, .t-input-number .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled:hover, .t-input-number .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease { left: 0; } .t-input-number .t-input-number__increase { right: -8px; } .t-input-number.t-is-disabled .t-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-input-number.t-is-disabled .t-input:hover, .t-input-number.t-is-disabled .t-input:focus, .t-input-number.t-is-disabled .t-input:active { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-disabled .t-input-number__decrease, .t-input-number.t-is-disabled .t-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-disabled .t-input-number__decrease .t-icon, .t-input-number.t-is-disabled .t-input-number__increase .t-icon { color: var(--td-text-color-secondary); } .t-input-number.t-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input-number__decrease, .t-input-number.t-size-s .t-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .t-input-number.t-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input-number__decrease, .t-input-number.t-size-l .t-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .t-input-number.t-size-l.t-is-controls-right .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .t-input-number.t-size-l.t-is-controls-right .t-input-number__decrease, .t-input-number.t-size-l.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .t-input-number.t-size-l .t-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .t-input-number.t-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .t-input-number.t-input-number--normal.t-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled:hover .t-input { border-color: var(--td-border-level-2-color); } .t-input-number.t-input-number--normal.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled .t-input:focus { -webkit-box-shadow: none; box-shadow: none; } .t-input-number.t-is-controls-right { width: 96px; padding: 0; } .t-input-number.t-is-controls-right:hover .t-input-number__decrease, .t-input-number.t-is-controls-right:hover .t-input-number__increase { opacity: 1; visibility: visible; } .t-input-number.t-is-controls-right .t-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .t-input-number.t-is-controls-right .t-input-number__decrease, .t-input-number.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-m); height: calc(calc(var(--td-comp-size-m) / 2) - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .t-input-number.t-is-controls-right .t-input-number__decrease .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase .t-icon { font-size: var(--td-font-size-body-small); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover, .t-input-number.t-is-controls-right .t-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase:hover .t-icon { color: var(--td-text-color-primary); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-m) / 2) - 2px) + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right.t-size-l { width: 120px; } .t-input-number.t-is-controls-right.t-size-l .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xl) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xl) / 2) - 2px) + 3px); } .t-input-number.t-is-controls-right.t-size-s { width: 88px; } .t-input-number.t-is-controls-right.t-size-s .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xs) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xs) / 2) - 2px) + 3px); } .t-input-number--row .t-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .t-input-number--row .t-input-number__increase { right: 0; } .default-step-icon { 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; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .t-steps { 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; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .t-steps .t-steps-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; vertical-align: top; margin-right: var(--td-comp-margin-s); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-steps .t-steps-item:last-child { -webkit-box-flex: 0; -ms-flex: none; flex: none; } .t-steps .t-steps-item__inner { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-steps .t-steps-item__inner.t-steps-item--clickable { cursor: pointer; } .t-steps .t-steps-item--finish .t-steps-item__icon .t-icon { color: var(--td-brand-color); } .t-steps .t-steps-item--finish .t-steps-item__icon--number { border-color: var(--td-brand-color); } .t-steps .t-steps-item--finish .t-steps-item__title { color: var(--td-text-color-primary); font-weight: normal; } .t-steps .t-steps-item--finish .t-steps-item__description { color: var(--td-text-color-secondary); } .t-steps .t-steps-item--process .t-steps-item__icon .t-icon { color: var(--td-brand-color); } .t-steps .t-steps-item--process .t-steps-item__icon--number { border-color: var(--td-brand-color); background-color: var(--td-brand-color); color: var(--td-text-color-anti); font-weight: bold; } .t-steps .t-steps-item--process .t-steps-item__title { color: var(--td-brand-color); font-weight: bold; } .t-steps .t-steps-item--process .t-steps-item__description { color: var(--td-text-color-secondary); } .t-steps .t-steps-item--error .t-steps-item__icon .t-icon { color: var(--td-error-color); } .t-steps .t-steps-item--error .t-steps-item__icon--number { color: var(--td-error-color); border-color: var(--td-error-color); } .t-steps .t-steps-item--error .t-steps-item__title { color: var(--td-error-color); } .t-steps .t-steps-item--error .t-steps-item__description { color: var(--td-text-color-secondary); } .t-steps .t-steps-item__icon { vertical-align: top; font-size: var(--td-font-size-body-medium); margin-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); } .t-steps .t-steps-item__icon--number { color: var(--td-text-color-placeholder); border: 1px solid var(--td-text-color-placeholder); 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; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .t-steps .t-steps-item__icon--finish { border: 1px solid var(--td-brand-color); 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; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .t-steps .t-steps-item__icon--error { border: 1px solid var(--td-error-color); color: #000; 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; width: 22px; height: 22px; text-align: center; border-radius: var(--td-radius-circle); font-size: var(--td-font-size-body-large); } .t-steps .t-steps-item__icon > .t-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .t-steps .t-steps-item__title { position: relative; padding-right: var(--td-comp-margin-s); color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-large); line-height: 24px; } .t-steps .t-steps-item__description { color: var(--td-text-color-placeholder); font-size: var(--td-font-size-body-medium); margin-bottom: var(--td-comp-margin-xs); line-height: 22px; } .t-steps--line-separator .t-steps-item:before, .t-steps--line-separator .t-steps-item:after, .t-steps--line-separator .t-steps-item__title:after { border-style: solid; } .t-steps--dashed-separator .t-steps-item:before, .t-steps--dashed-separator .t-steps-item:after, .t-steps--dashed-separator .t-steps-item__title:after { border-style: dashed; } .t-steps--horizontal.t-steps--default-anchor .t-steps-item__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin-bottom: var(--td-comp-margin-xs); } .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number { width: 22px; height: 22px; } .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon { font-size: calc(var(--td-font-size-body-medium) + 10px); } .t-steps--horizontal.t-steps--default-anchor .t-steps-item:not(:last-child) .t-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title:after { content: ""; display: block; width: 9999px; border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 24px; content: "^"; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; border: 0; font-size: var(--td-font-size-body-large); color: var(--td-text-color-placeholder); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title:after, .t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after { border-bottom-width: 2px; border-bottom-color: var(--td-brand-color); color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item { overflow: visible; } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item .t-steps-item__title { padding-right: 0; margin-bottom: var(--td-comp-margin-xs); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { border-color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item__content { text-align: center; width: 140px; } .t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: calc(140px / 2 + 8px); top: 2.5px; } .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; content: "^"; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border: 0; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); color: var(--td-text-color-placeholder); } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after, .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after { content: ""; display: block; width: calc(100% - 16px); border-left: 0; border-top: 0; border-bottom-width: 1px; border-bottom-color: var(--td-text-color-placeholder); position: absolute; left: calc(140px / 2 + 8px); top: 2.5px; } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after, .t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after { color: var(--td-brand-color); border-bottom-color: var(--td-brand-color); border-bottom-width: 2px; } .t-steps--vertical { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--positive .t-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .t-steps--vertical.t-steps--positive .t-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-top: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .t-steps--vertical.t-steps--default-anchor .t-steps-item__content { margin-left: 0px; } .t-steps--vertical.t-steps--default-anchor .t-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); border-right-color: var(--td-brand-color); border-right-width: 2px; } .t-steps--vertical.t-steps--dot-anchor .t-steps-item { margin-bottom: 0; } .t-steps--vertical.t-steps--dot-anchor .t-steps-item .t-steps-item__title { margin-bottom: var(--td-comp-margin-xs); } .t-steps--vertical.t-steps--dot-anchor .t-steps-item--finish .t-steps-item__icon { border-color: var(--td-brand-color); } .t-steps--vertical.t-steps--dot-anchor .t-steps-item--process .t-steps-item__icon { background: var(--td-brand-color); border-color: var(--td-brand-color); } .t-steps--vertical.t-steps--dot-anchor .t-steps-item--error .t-steps-item__icon { background: var(--td-error-color); border-color: var(--td-error-color); } .t-steps--vertical.t-steps--dot-anchor .t-steps-item__icon { display: block; width: 8px; height: 8px; border: 2px solid var(--td-text-color-placeholder); border-radius: var(--td-radius-circle); margin-bottom: var(--td-comp-margin-xs); position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; top: 8px; } .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 24px); position: absolute; top: 24px; left: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-large); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); color: var(--td-text-color-placeholder); } .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { -webkit-transform: rotateZ(0); transform: rotateZ(0); margin-top: var(--td-comp-margin-xs); } .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, .t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--reverse .t-steps-item { padding-bottom: var(--td-comp-margin-xxl); margin-bottom: 5px; } .t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-left: 0; border-bottom: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; top: 35px; left: 11px; } .t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before, .t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before { content: "^"; border: 0; height: calc(100% - 4px); position: absolute; top: 8px; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-placeholder); } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before, .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before { color: var(--td-brand-color); } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item { margin-bottom: 0; } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before { content: ""; display: block; height: 100%; border-bottom: 0; border-left: 0; border-right-width: 1px; border-right-color: var(--td-text-color-placeholder); position: absolute; left: 3.5px; top: 17px; } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before { display: none; } .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before, .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before { border-right-width: 2px; border-right-color: var(--td-brand-color); color: var(--td-brand-color); } .t-sticky-tool { position: fixed; opacity: 1; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-container); border: 0.5px solid var(--td-component-border); -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .t-sticky-tool-popup-content { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); } .t-sticky-tool .t-sticky-item { opacity: 1; position: relative; margin: var(--td-comp-margin-xs); text-align: center; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-sticky-tool .t-sticky-item:hover { cursor: pointer; background-color: var(--td-bg-color-container-hover); } .t-sticky-tool .t-sticky-item--normal { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .t-sticky-tool .t-sticky-item--normal .t-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s) var(--td-comp-margin-l) 0 var(--td-comp-margin-l); color: var(--td-text-color-primary); } .t-sticky-tool .t-sticky-item--compact { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .t-sticky-tool .t-sticky-item--compact .t-icon { width: 24px; height: 24px; margin: var(--td-comp-margin-s); color: var(--td-text-color-primary); } .t-sticky-tool .t-sticky-item--square { border-radius: var(--td-radius-default); } .t-sticky-tool .t-sticky-item--round { border-radius: var(--td-radius-circle); } .t-sticky-tool .t-sticky-item .t-sticky-item__label { width: 100%; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); margin-top: var(--td-comp-margin-xxs); text-align: center; } .t-sticky-tool--square { border-radius: var(--td-radius-medium); } .t-sticky-tool--round { border-radius: var(--td-radius-round); } .t-tooltip .t-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .t-tooltip--default .t-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="left"] .t-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="right"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="top"] .t-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="bottom"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--primary .t-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-tooltip--success .t-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .t-tooltip--danger .t-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .t-tooltip--warning .t-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .t-tooltip .t-popup__arrow { background: inherit; height: auto; } .t-tooltip .t-popup__arrow::before { background: inherit; } .t-tooltip--noshadow .t-popup__content, .t-tooltip--noshadow[data-popper-placement] .t-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } .t-affix { position: fixed; z-index: 500; } .t-tag { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .t-tag .t-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-tag .t-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .t-tag--default .t-tag__icon-close { color: var(--td-text-color-placeholder); } .t-tag--default .t-tag__icon-close:hover { color: var(--td-text-color-primary); } .t-tag--default:active { cursor: default; } .t-tag--default.t-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .t-tag--default.t-tag--disabled:hover { cursor: not-allowed; } .t-tag--default.t-tag--disabled .t-icon:hover { cursor: pointer; } .t-tag--default.t-tag--outline { border-color: var(--td-component-border); } .t-tag--default.t-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .t-tag--default.t-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .t-tag--primary { background-color: var(--td-brand-color); } .t-tag--primary.t-tag--outline { border-color: var(--td-brand-color); } .t-tag--primary.t-tag--light { background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light, .t-tag--primary.t-tag--outline, .t-tag--primary.t-tag--light-outline { color: var(--td-brand-color); } .t-tag--primary.t-tag--light .t-tag__icon-close:hover, .t-tag--primary.t-tag--outline .t-tag__icon-close:hover, .t-tag--primary.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-brand-color-hover); } .t-tag--success { background-color: var(--td-success-color); } .t-tag--success.t-tag--outline { border-color: var(--td-success-color); } .t-tag--success.t-tag--light { background-color: var(--td-success-color-light); } .t-tag--success.t-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .t-tag--success.t-tag--light, .t-tag--success.t-tag--outline, .t-tag--success.t-tag--light-outline { color: var(--td-success-color); } .t-tag--success.t-tag--light .t-tag__icon-close:hover, .t-tag--success.t-tag--outline .t-tag__icon-close:hover, .t-tag--success.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-success-color-hover); } .t-tag--warning { background-color: var(--td-warning-color); } .t-tag--warning.t-tag--outline { border-color: var(--td-warning-color); } .t-tag--warning.t-tag--light { background-color: var(--td-warning-color-light); } .t-tag--warning.t-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .t-tag--warning.t-tag--light, .t-tag--warning.t-tag--outline, .t-tag--warning.t-tag--light-outline { color: var(--td-warning-color); } .t-tag--warning.t-tag--light .t-tag__icon-close:hover, .t-tag--warning.t-tag--outline .t-tag__icon-close:hover, .t-tag--warning.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-warning-color-hover); } .t-tag--danger { background-color: var(--td-error-color); } .t-tag--danger.t-tag--outline { border-color: var(--td-error-color); } .t-tag--danger.t-tag--light { background-color: var(--td-error-color-light); } .t-tag--danger.t-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .t-tag--danger .t-tag__icon-close { fill: var(--td-error-color); } .t-tag--danger .t-tag__icon-close:hover { fill: var(--td-error-color-hover); } .t-tag--danger.t-tag--light, .t-tag--danger.t-tag--outline, .t-tag--danger.t-tag--light-outline { color: var(--td-error-color); } .t-tag--danger.t-tag--light .t-tag__icon-close:hover, .t-tag--danger.t-tag--outline .t-tag__icon-close:hover, .t-tag--danger.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-error-color-hover); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close { color: var(--td-font-white-2); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover { color: var(--td-font-white-1); } .t-tag.t-tag--outline { background: transparent; } .t-tag.t-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .t-tag.t-size-s .t-icon { font-size: var(--td-font-body-small); } .t-tag.t-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .t-tag.t-size-l .t-icon { font: var(--td-font-body-medium); } .t-tag.t-tag--round { border-radius: var(--td-radius-extraLarge); } .t-tag.t-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .t-tag.t-tag--ellipsis .t-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-tag.t-tag--check:not(.t-tag--disabled) { -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); cursor: pointer; } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--dark:not(.t-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--primary.t-tag--dark.t-tag--checked:hover { background-color: var(--td-brand-color-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--outline:not(.t-tag--checked):hover { color: var(--td-brand-color-hover); } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .t-check-tag-group .t-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .t-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .t-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .t-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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-tag-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; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .t-tag-input .t-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .t-tag-input .t-tag-input__drag_wrapper + .t-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .t-tag-input .t-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .t-tag-input .t-input .t-input__suffix-icon { right: var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .t-tag-input .t-input.t-size-s .t-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .t-tag-input .t-input.t-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-l .t-input__suffix-icon { right: var(--td-comp-margin-m); } .t-tag-input.t-is-empty .t-input__inner { margin-left: var(--td-comp-margin-xs); } .t-tag-input:hover .t-input__inner:not(.t-input--soft-hidden), .t-tag-input .t-input--focused .t-input__inner:not(.t-input--soft-hidden) { min-width: 20px; } .t-tag-input .t-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .t-tag-input .t-tag-input__prefix > .t-icon { color: var(--td-text-color-placeholder); } .t-tag-input .t-input .t-input__prefix:not(:empty) { margin-right: 0; } .t-tag-input.t-input--auto-width .t-input.t-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input.t-input--auto-width .t-input__prefix { white-space: nowrap; } .t-tag-input .t-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .t-tag-input .t-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-tag-input__suffix-clear { cursor: pointer; } .t-tag-input--break-line:not(.t-is-empty) .t-input { display: block; } .t-tag-input--break-line:not(.t-is-empty) .t-input.t-input--prefix > .t-input__prefix { display: inline; text-align: left; } .t-tag-input--break-line:not(.t-is-empty) .t-input .t-input__suffix-icon { position: absolute; bottom: 0; } .t-tag-input--break-line:not(.t-is-empty) .t-tag-input__prefix { vertical-align: middle; } .t-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-input, .t-tag-input.t-input--auto-width:hover .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-size-l .t-input, .t-tag-input.t-input--auto-width:hover .t-size-l .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .t-tag-input.t-input--auto-width .t-input { padding-right: 0; } .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; background: 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; background: transparent; -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); } .t-select__wrap { width: 100%; } .t-select__dropdown .t-popup__content { 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); } @-moz-document url-prefix() { .t-select__dropdown .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .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 { min-height: var(--td-comp-size-m); } .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 { min-height: var(--td-comp-size-xs); } .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 { min-height: var(--td-comp-size-xl); } .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 { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 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; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .t-select__loading-tips.t-size-l { min-height: var(--td-comp-size-xl); 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:not(.t-is-disabled) { 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:not(.t-is-disabled) .t-checkbox__label { color: var(--td-brand-color); } .t-select-option.t-is-selected:not(.t-is-disabled):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); } .t-is-selected.t-select-option__hover { background-color: var(--td-brand-color-light-hover); } .t-is-selected.t-select-option__hover .t-checkbox__label { color: var(--td-brand-color); } .t-pagination-mini { 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-pagination-mini--outline .t-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__current:hover { z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__next:hover { z-index: 1; } .t-pagination { 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-pagination.t-is-disabled { color: var(--td-text-color-disabled); } .t-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-pagination .t-select__wrap { width: auto; } .t-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .t-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -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__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__btn.t-is-disabled, .t-pagination__btn.t-is-disabled:hover, .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .t-pagination__btn.t-is-disabled { cursor: not-allowed; } .t-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .t-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .t-pagination__btn + .t-pagination__select { margin-right: 0; } .t-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .t-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .t-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .t-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -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:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current.t-is-disabled, .t-pagination__number.t-is-current.t-is-disabled:hover, .t-pagination__number.t-is-current.t-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination__number.t-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-pagination__number.t-is-disabled:hover, .t-pagination__number.t-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .t-pagination__number--more { border: 0 none; padding: 0; } .t-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -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--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__number--more.t-is-disabled, .t-pagination__number--more.t-is-disabled:hover, .t-pagination__number--more.t-is-disabled:active { background: none; } .t-pagination__number--more .t-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .t-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .t-pagination .t-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .t-pagination .t-input-adornment__append .t-input-adornment__text { border: none; } .t-pagination .t-input-number { width: 56px; } .t-pagination .t-input-number .t-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .t-pagination .t-input-number .t-input__inner { text-align: center; } .t-pagination.t-size-s { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__jump { height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .t-pagination.t-size-s .t-input-number { width: 48px; } .t-pagination.t-size-s .t-input-number .t-input { height: calc(var(--td-comp-size-xs) - 4px); } .t-pagination.t-size-s .t-pagination__total { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .t-pagination.t-size-s .t-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .t-pagination.t-size-s .t-pagination__number:hover:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -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__number:active:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__number.t-is-disabled { background: none; color: var(--td-text-color-disabled); } .t-pagination.t-size-s .t-pagination__number.t-is-current.t-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination.t-size-s .t-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -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:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__btn.t-is-disabled, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:hover, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .t-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .t-pagination-ie .t-select .t-input__inner { min-width: 54px; } /** 吸顶表头 Affix 组件,zIndex: 1000。宽度拖拽辅助线层级需高于表头 */ @-moz-document url-prefix() { .scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .scrollbar::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .scrollbar::-webkit-scrollbar-thumb:vertical:hover, .scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .scrollbar.t-table__affixed-footer-elm::-webkit-scrollbar-track, .scrollbar.t-table__scrollbar--obvious::-webkit-scrollbar-track { background: var(--td-scroll-track-color); } .t-table__affixed-footer-wrap > .scrollbar.t-table__affixed-footer-elm::-webkit-scrollbar-thumb, .t-table--width-overflow.t-table--footer-affixed .t-table__content::-webkit-scrollbar-thumb, .t-table--width-overflow.t-table--horizontal-bar-affixed .t-table__content::-webkit-scrollbar-thumb { background: transparent; } .t-table.t-table--overflow-visible { overflow: initial; } .t-table { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; font: var(--td-font-body-medium); color: var(--td-text-color-primary); background-color: var(--td-bg-color-container); position: relative; /** loading need to be top of fixed columns */ } .t-table:focus-visible { outline: none; } .t-table .t-loading--full { z-index: 72; } .t-table.t-vertical-align-top th, .t-table.t-vertical-align-top td { vertical-align: top; } .t-table.t-vertical-align-middle th, .t-table.t-vertical-align-middle td { vertical-align: middle; } .t-table.t-vertical-align-bottom th, .t-table.t-vertical-align-bottom td { vertical-align: bottom; } .t-table .t-table__resize-line { display: none; position: absolute; left: 10px; width: 0; border-left: 1px solid var(--td-component-border); z-index: 1001; } .t-table__column-controller-trigger.t-align-top-right, .t-table__column-controller-trigger.t-align-bottom-right { text-align: right; } .t-table__column-controller-trigger { padding: var(--td-comp-paddingTB-l) 0; } .t-table__column-controller-item:not(:last-child) { margin-bottom: var(--td-comp-margin-l); } .t-table__content { position: relative; } @-moz-document url-prefix() { .t-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__content::-webkit-scrollbar-thumb:vertical:hover, .t-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .t-table__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__content::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__content::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__content::-webkit-scrollbar-thumb:vertical:hover, .t-table__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-table .t-icon { font-size: var(--td-font-size-body-large); } .t-table table { width: 100%; border-spacing: 0; } .t-table .t-text-ellipsis { line-height: var(--td-line-height-body-medium); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-table th, .t-table td { position: relative; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); line-height: var(--td-line-height-body-medium); font-weight: normal; overflow-wrap: break-word; background-color: inherit; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left; } .t-table th.t-table__th-drag { padding: 0; height: 0; text-align: center; } .t-table thead td, .t-table th { color: var(--td-text-color-placeholder); } .t-table td[key="row-select"] { padding: 13px 0 11px var(--td-comp-paddingLR-l); } .t-table td.t-align-left, .t-table th.t-align-left { text-align: left; } .t-table td.t-align-right, .t-table th.t-align-right { text-align: right; } .t-table td.t-align-center, .t-table th.t-align-center { text-align: center; } .t-table tr { background-color: var(--td-bg-color-container); } .t-table.t-size-s th, .t-table.t-size-s td { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); } .t-table.t-size-l th, .t-table.t-size-l td { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-table .t-table__expandable-icon-cell, .t-table .t-table__selection-cell { padding: 0; height: 0; } .t-table td.t-table__handle-draggable { text-align: center; height: 0; padding: 0; } .t-table .t-table__cell--selectable > .t-checkbox { vertical-align: middle; } .t-table .t-table__cell--selectable + td, .t-table .t-table__cell--selectable + th { padding-left: 0; } .t-table--bordered td, .t-table--bordered th { border-left: 1px solid var(--td-component-border); } .t-table--bordered td.t-table__cell--fixed-left-last::before, .t-table--bordered th.t-table__cell--fixed-left-last::before { border-right: 1px solid var(--td-component-border); } .t-table--bordered th:first-child, .t-table--bordered td.t-table__td-first-col { border-left-width: 0; } .t-table--bordered:not(.t-table--rowspan-colspan) td:first-child { border-left-width: 0; } .t-table--bordered .t-table__content { border-left: 1px solid var(--td-component-border); } .t-table--bordered .t-table__content::-webkit-scrollbar-corner { background-color: transparent; } .t-table--bordered .t-table__content { border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); } .t-table--bordered .t-table--loading { border-bottom: 1px solid var(--td-component-border); } .t-table--bordered .t-table__pagination { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .t-table--bordered .t-table__bottom-content + .t-table__pagination { padding: 0; } .t-table--bordered.t-table__header--fixed .t-table__content { border-bottom: 1px solid var(--td-component-border); } .t-table--bordered .t-table__td-last-row { border-bottom: none; } .t-table--striped:not(.t-table--bordered) th, .t-table--striped:not(.t-table--bordered) td { border-bottom: none; } .t-table--striped.t-table--header-fixed > .t-table__content > table > tbody tr:nth-of-type(even) { background-color: var(--td-bg-color-secondarycontainer); } .t-table--striped:not(.t-table--header-fixed) > .t-table__content > table > tbody > tr:nth-of-type(odd):not(.t-table__expanded-row) { background-color: var(--td-bg-color-secondarycontainer); } .t-table--striped.t-table--hoverable.t-table__header--fixed tbody tr:nth-of-type(even):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-table--striped.t-table--hoverable:not(.t-table__header--fixed) > .t-table__content > table > tbody tr:nth-of-type(odd):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-table--striped.t-table--hoverable > .t-table__content > table > tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-table--striped.t-table--hoverable > .t-table__content > table > tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .t-table--hoverable tbody tr { -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-table--hoverable tbody tr:hover { background-color: var(--td-bg-color-container-hover); } .t-table.t-table--align-top tbody td { vertical-align: top; } .t-table .t-table__cell--highlight { background-color: var(--td-bg-color-secondarycontainer); } .t-table__header--fixed table { table-layout: fixed; } .t-table__header--fixed th, .t-table__header--fixed td { overflow-wrap: break-word; } .t-table__header--fixed.t-table__header, .t-table__header--fixed .t-table__header { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; z-index: 5; } @-moz-document url-prefix() { .t-table__header--fixed .t-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__header--fixed .t-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:vertical:hover, .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .t-table__header--fixed .t-table__header { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__header--fixed .t-table__header::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:vertical:hover, .t-table__header--fixed .t-table__header::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-table__header--fixed .t-table__body { overflow-y: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @-moz-document url-prefix() { .t-table__header--fixed .t-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__header--fixed .t-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:vertical:hover, .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } @-moz-document url-prefix() { .t-table__header--fixed .t-table__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-table__header--fixed .t-table__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:vertical:hover, .t-table__header--fixed .t-table__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-table:not(.t-table--bordered) .t-table__cell--selectable + td, .t-table:not(.t-table--bordered) .t-table__cell--selectable + th { padding-left: 0; } .t-table__cell--fixed.t-table__header--fixed .t-table__header { overflow: hidden; width: 100%; } .t-table__cell--fixed.t-table__header--fixed .t-table__header .t-table__cell--fixed-left:last-child::after, .t-table__cell--fixed.t-table__header--fixed .t-table__header .t-table__cell--fixed-right:last-child::after { content: ""; position: absolute; right: -6px; width: 6px; height: 100%; top: 0; background-color: var(--td-bg-color-secondarycontainer); } .t-table__cell--fixed.t-table__header--fixed .t-table__body { overflow: auto scroll; } .t-table__cell--fixed .t-table__content { overflow: auto hidden; } .t-table__cell--fixed table { table-layout: fixed; min-width: 100%; } .t-table__cell--fixed th, .t-table__cell--fixed td { position: relative; } .t-table__cell--fixed .t-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .t-table__cell--fixed .t-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .t-table__cell--fixed .t-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .t-table__cell--fixed .t-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .t-table__cell--fixed .t-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .t-table__cell--fixed .t-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .t-table .t-table__cell-resizable { position: relative; } .t-table .t-table__cell-resizable .t-table__cell--resizer { position: absolute; top: 0; right: -5px; bottom: 0; z-index: 10; width: 10px; cursor: col-resize; } .t-table .t-table__row--disabled { color: var(--td-text-color-disabled); } .t-table .t-table__cell--title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-table__column-controller-desc { margin-bottom: var(--td-comp-margin-xxl); } .t-table__column-controller-block { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .t-table__column-controller-block + .t-table__column-controller-block { border-top: 0; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-border); } .t-table__column-controller--fixed .t-checkbox { width: 108px; } /** 表格行点击高亮悬浮态 */ .t-table.t-table__row--active-single tbody > tr.t-table__row--active, .t-table.t-table__row--active-multiple tbody > tr.t-table__row--active { background-color: var(--td-brand-color-light); } .t-table.t-table__row--active-single tbody > tr.t-table__row--active.t-table__row--hover, .t-table.t-table__row--active-multiple tbody > tr.t-table__row--active.t-table__row--hover { background-color: var(--td-brand-color-light-hover); } .t-table.t-table--hoverable tbody > tr.t-table__row--active:hover { background-color: var(--td-brand-color-light-hover); } /** 键盘操作悬浮表格行 */ .t-table.t-table--row-expandable tbody > tr.t-table__row--hover, .t-table.t-table--row-select tbody > tr.t-table__row--hover, .t-table.t-table__row--active-multiple tbody > tr.t-table__row--hover { background-color: var(--td-bg-color-container-hover); } .t-table--bordered .t-table__cell--sortable .t-table__cell--title, .t-table--bordered .t-table__cell--filterable .t-table__cell--title { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-table th.t-align-right .t-table__cell--title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } /** * 有边框和无边框的图标排列不一样,需谨慎修改 * 无边框模式,图标依次紧跟标题 * 有边框模式,只有一个图标时,图标靠近边框右侧;有两个图标时,排序图标靠近标题,过滤图标靠近边框右侧 */ .t-table__cell--sort-trigger { text-align: center; vertical-align: text-bottom; } .t-table__cell--sort-trigger svg { vertical-align: initial; } .t-table--loading { position: relative; } .t-table--loading-progressbar { overflow: hidden; position: absolute; top: 0; left: 0; height: 1px; background-color: var(--td-brand-color); -webkit-animation: tTableProgressbar 2s ease-in-out; animation: tTableProgressbar 2s ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-table--loading-message { 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; min-height: 120px; color: var(--td-text-color-placeholder); } .t-table__expanded-cell { padding-left: 45px; } .t-table__async-loading { text-align: center; } .t-table__async-loading.t-is-load-more { cursor: pointer; } .t-table__empty { 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; min-height: 120px; color: var(--td-text-color-disabled); } .t-table__filter-icon, .t-table__sort-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; vertical-align: text-bottom; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-table__filter-icon > svg, .t-table__sort-icon > svg { margin-top: 0; } .t-table__sort-icon .t-is-focus, .t-table__sort-icon.t-is-focus, .t-table__sort-icon:hover { color: var(--td-brand-color); border-radius: var(--td-radius-circle); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-table__filter-icon .t-is-focus, .t-table__filter-icon.t-is-focus, .t-table__filter-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-table__filter-pop .t-popup__content { padding: 0; } .t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-inner { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-table__filter-popup-input { margin-bottom: var(--td-comp-margin-s); } .t-table__filter-pop .t-table__filter-pop-content .t-radio-group { display: block; height: auto; } .t-table__filter-pop .t-table__filter-pop-content .t-checkbox-group { display: block; } .t-table__filter-pop .t-table__filter-pop-content .t-checkbox, .t-table__filter-pop .t-table__filter-pop-content .t-radio { display: block; margin: var(--td-comp-margin-xs) 0; } .t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-button { border-top: 1px solid var(--td-component-border); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .t-table__filter-pop .t-table__filter-pop-content .t-table__filter-pop-content-button .t-button + .t-button { margin-left: var(--td-comp-margin-l); } .t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner { padding: 0; max-height: 280px; overflow: auto; position: relative; } .t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-input__wrap { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) 0 var(--td-comp-paddingLR-l); position: -webkit-sticky; position: sticky; top: 0; z-index: 1; background-color: var(--td-bg-color-container); } .t-table__filter-pop .t-table__list-filter-input--sticky .t-table__filter-pop-content .t-table__filter-pop-content-inner .t-radio-group { padding: 0 var(--td-comp-paddingLR-l); } .t-table__filter-pop-content-inner > .t-input__wrap { width: 200px; } .t-table__filter-pop-content-inner > .t-date-range-picker__panel { margin: calc(0px - var(--td-comp-margin-l)); } .t-table__sort-icon--active { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-table__double-icons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-table__double-icons .t-table__sort-icon { position: relative; } .t-table__double-icons .t-table-sort-asc { top: var(--td-comp-margin-xxs); } .t-table__double-icons .t-table-sort-desc { bottom: var(--td-comp-margin-xxs); } .t-table__filter-icon-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: all; height: var(--td-font-size-body-large); width: var(--td-font-size-body-large); margin-left: var(--td-comp-margin-s); } .t-table--bordered .t-table__filter-icon-wrap { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .t-table--bordered .t-table__cell--sortable.t-table__cell--filterable .t-table__filter-icon-wrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-table .t-align-center .t-table__cell--sortable, .t-table .t-align-center .t-table__cell--filterable { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; } .t-table__expand-box { 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; width: 100%; height: 100%; color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s; } .t-table__expand-box:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } @-webkit-keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } @keyframes tTableProgressbar { 0% { width: 0; } 100% { width: 100%; } } .t-table__th-row-select .t-table__th-cell-inner { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-table-expandable-icon-cell + .t-table__cell--selectable[key="row-select"] { padding-left: var(--td-comp-margin-s); } .t-table__filter--bottom-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-top: 1px solid var(--td-component-border); } .t-table__filter--bottom-buttons > .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-table__row-filter-inner { position: -webkit-sticky; position: sticky; left: 0; text-align: center; } .t-table__filter-result { 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-table__filter-result > .t-button { margin-left: var(--td-comp-margin-s); } .t-table--layout-fixed { table-layout: fixed; } .t-table--layout-auto { table-layout: auto; } .t-table__ellipsis { white-space: nowrap; width: 100%; } .t-table__content { overflow: auto; } .t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after { border-right: 2px solid var(--td-component-border); } .t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after { border-left: 2px solid var(--td-component-border); } .t-table--bordered.t-table__content--scrollable-to-left .t-table__cell--fixed-left-last::after { border-right: 4px solid var(--td-component-border); } .t-table--bordered.t-table__content--scrollable-to-right .t-table__cell--fixed-right-first::after { border-left: 4px solid var(--td-component-border); } .t-table__scroll-bar-divider { position: absolute; bottom: 0; right: 0; height: 100%; border-right: 1px solid var(--td-component-border); z-index: 71; } .t-table__footer, .t-table__header.t-table__header--fixed { position: -webkit-sticky; position: sticky; z-index: 50; } .t-table:not(.t-table--striped) .t-table__footer > tr { background-color: var(--td-bg-color-secondarycontainer); } .t-table__header--fixed:not(.t-table__header--multiple) > tr > th { background-color: var(--td-bg-color-secondarycontainer); } .t-table__row--fixed-top, .t-table__row--fixed-bottom { position: -webkit-sticky; position: sticky; z-index: 70; } .t-table__row--fixed-bottom-first > td { border-top: 1px solid var(--td-component-border); } .t-table--bordered .t-table__content .t-table__row--without-border-bottom > td { border-bottom: 0; } .t-table--bordered tbody > tr:last-child > td, .t-table--bordered tfoot > tr:last-child > td { border-bottom: 0; } .t-table--bordered tfoot > tr:first-child > td { border-top: 1px solid var(--td-component-border); } .t-table__header.t-table__header--fixed { top: 0; } .t-table__footer.t-table__footer--fixed { bottom: 0; } .t-table--column-fixed .t-table__cell--fixed-left-last::before { z-index: -1; background-color: inherit; } .t-table--column-fixed .t-table__cell--fixed-left-last::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .t-table--column-fixed .t-table__cell--fixed-left-last::after { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); } .t-table--column-fixed .t-table__cell--fixed-right-first::before { z-index: -1; background-color: inherit; } .t-table--column-fixed .t-table__cell--fixed-right-first::after { position: absolute; top: 0; bottom: 0; content: ""; -webkit-transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s; transition: box-shadow 0.3s; transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; pointer-events: none; z-index: -2; } .t-table--column-fixed .t-table__cell--fixed-right-first::after { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .t-table--column-fixed .t-table__cell--fixed-left, .t-table--column-fixed .t-table__cell--fixed-right { position: -webkit-sticky; position: sticky; } .t-table--column-fixed .t-table__cell--fixed-left { z-index: 30; } .t-table--column-fixed .t-table__cell--fixed-right { z-index: 31; } .t-table__empty-row > td { padding: 0; border: 0; } .t-table:not(.t-table--bordered) .t-table__header.t-table--bordered > tr:first-child > th { border-top: 1px solid var(--td-component-border); } .t-table--multiple-header .t-table__header th.t-table__header-th--bordered { border-left-width: 1px; } .t-table__header.t-table__header--multiple > tr { background-color: var(--td-bg-color-container); } .t-table__tree-op-icon { margin-right: var(--td-comp-margin-s); cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: -3px; } .t-table__tree-op-icon:hover { color: var(--td-brand-color); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-table__tree-leaf-node .t-table__tree-op-icon { min-width: 0; margin-right: var(--td-comp-margin-xxs); } .t-table__virtual-scroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .t-table__virtual-scroll-header { position: absolute; z-index: 51; left: 0; } /** 用于隐藏表头滚动条 */ .t-table__affixed-header-elm-wrap { overflow: hidden; } .t-table__affixed-header-elm-wrap, .t-table__affixed-header-elm { position: absolute; left: 0; z-index: 51; } .t-table__affixed-header-elm { overflow: auto; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; opacity: 1; } .t-table__affixed-footer-elm { overflow: auto; z-index: 50; } .t-table--bordered .t-table__affixed-header-elm { border: 1px solid var(--td-component-border); border-bottom: 0; border-right: 0; } .t-table--bordered .t-table__affixed-footer-elm { border-left: 1px solid var(--td-component-border); border-bottom: 1px solid var(--td-component-border); } .t-table--multiple-header.t-table--bordered .t-table__affixed-header-elm { border-right: 0; } .t-is-hidden { display: none; } .t-positive-rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-negative-rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .t-table__expanded-row > td, .t-table__row--full > td { padding: 0; } /** @{prefix}-table__row--full 和 @{prefix}-table__row-full-element 同时存在,是为了保证 固定列时,当前行不随内容进行横向滚动 */ .t-table__row-full-element { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-table__row-full-inner { position: -webkit-sticky; position: sticky; left: 0; } .t-table__row-full-inner:not(.t-table__empty) { display: inline-block; } .t-table__tree-col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-table__tree-col--inline { display: inline; } .t-table--full-height { height: 100%; } /** 默认最小高度限制为 Empty 高度加表头高度 */ .t-table--loading .t-table__content { min-height: 168px; } .t-table__handle-draggable:hover, .t-table--row-draggable tr, .t-table__th--drag-sort { cursor: move; } .t-table__ele--draggable-chosen { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .t-table:not(.t-table--row-edit) .t-table__cell--editable { min-height: 22px; line-height: var(--td-line-height-body-medium); cursor: pointer; } .t-table:not(.t-table--row-edit) .t-table__cell--editable .t-icon { margin-left: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-placeholder); } .t-table:not(.t-table--row-edit) .t-table__cell--editable .t-icon:hover { color: var(--td-brand-color); } .t-table:not(.t-table--row-edit) .t-table__cell--editable:hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } /** 吸底的分页器,需要背景色,避免表格文本内容显示穿透 */ .t-affix .t-table__pagination { background-color: var(--td-bg-color-container); } .t-table--bordered .t-affix .t-table__pagination { border-top: 1px solid var(--td-component-border); } .t-table__bottom-content + .t-table__pagination-wrap .t-table__pagination { border: 0; padding: 0; } .t-table--column-resizable:not(.t-table--bordered) { /** 表格左边有冻结列滚动时,去掉hover表头时多出的一个像素,避免出现表头的冻结列跟表内容的冻结列没有对齐的问题 */ } .t-table--column-resizable:not(.t-table--bordered) th { border-top: 1px solid transparent; } .t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th:not(:last-child) { border-right: 1px solid var(--td-component-border); } .t-table--column-resizable:not(.t-table--bordered) thead.t-table__header:hover th { border-top: 1px solid var(--td-component-border); } .t-table--column-resizable:not(.t-table--bordered).t-table__content--scrollable-to-left.t-table__content--scrollable-to-right thead.t-table__header:hover .t-table__cell--fixed-left-last:not(:last-child), .t-table--column-resizable:not(.t-table--bordered).t-table__content--scrollable-to-left thead.t-table__header:hover .t-table__cell--fixed-left-last:not(:last-child) { border-right: 0; } /** 可选中行的场景下,将 Checkbox 和 Radio 铺满整个单元格,增大点击范围,方便用户选中 */ .t-table td.t-table__cell-check, .t-table th.t-table__cell-check { padding: 0; /** HTML 特性: th/td 必须设置为 0,他们的子元素才能设置为 100% */ height: 0; } .t-table td.t-table__cell-check .t-radio__label:empty, .t-table th.t-table__cell-check .t-radio__label:empty, .t-table td.t-table__cell-check .t-checkbox__label:empty, .t-table th.t-table__cell-check .t-checkbox__label:empty { display: none; } .t-table .t-table__cell-check .t-radio, .t-table .t-table__cell-check .t-checkbox, .t-table .t-table__cell-check .t-table__th-cell-inner { width: 100%; height: 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-table td .t-input__tips { position: initial; } .t-table .t-table__sort-column { background-color: var(--td-bg-color-secondarycontainer); } .t-table__ellipsis-content.t-size-s .t-popup__content { font: var(--td-font-body-medium); } .t-list { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; overflow: auto; color: var(--td-text-color-primary); background: var(--td-bg-color-container); } @-moz-document url-prefix() { .t-list { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-list::-webkit-scrollbar { width: 6px; height: 6px; } .t-list::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-list::-webkit-scrollbar-thumb:vertical:hover, .t-list::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-list__inner { list-style: none; padding: 0; margin: 0; } .t-list-item { font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .t-list-item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; } .t-list-item-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-list-item__meta { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-list-item__meta-avatar { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: calc(var(--td-comp-size-xxxl) / 2); overflow: hidden; background: var(--td-bg-color-page); margin-right: var(--td-comp-margin-l); -ms-flex-negative: 0; flex-shrink: 0; } .t-list-item__meta-avatar img { max-width: 100%; width: 100%; height: 100%; } .t-list-item__meta-title { padding: 0; font: var(--td-font-title-medium); margin: 0 0 var(--td-comp-margin-s); color: var(--td-text-color-primary); } .t-list-item__meta-description { margin-right: var(--td-comp-margin-xxl); color: var(--td-text-color-primary); } .t-list-item__action { list-style: none; padding: 0; -ms-flex-negative: 0; flex-shrink: 0; } .t-list-item__action > li { display: inline-block; } .t-list-item__action > li:not(:last-child) { margin-right: var(--td-comp-margin-l); } .t-list-item__action > li .t-icon { color: var(--td-text-color-secondary); font-size: var(--td-comp-size-xxxs); } .t-list-item__action > li .t-icon:hover { color: var(--td-text-color-link); cursor: pointer; } .t-list-item__action > li > a { text-decoration: none; color: var(--td-brand-color); } .t-list--split .t-list-item::after { background: var(--td-border-level-1-color); } .t-list--stripe .t-list-item:nth-child(even) { background: var(--td-bg-color-secondarycontainer); } .t-list--vertical-action .t-list-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-list.t-size-s .t-list-item { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-m); } .t-list.t-size-l .t-list-item { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-list__header, .t-list__footer { background: var(--td-bg-color-container); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-list__load { background: var(--td-bg-color-container); text-align: center; line-height: var(--td-line-height-body-medium); } .t-list__load > div { 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-list__load:not(:empty) { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-list__load .t-loading { font-size: var(--td-comp-size-xxxs); margin-right: var(--td-comp-margin-s); } .t-list__load .t-loading.t-is-load-more { cursor: pointer; } .t-tabs { 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; overflow: hidden; background-color: var(--td-bg-color-container); } .t-tabs__header.t-is-left { float: left; } .t-tabs__header.t-is-right { float: right; } .t-tabs__header .t-icon { font-size: var(--td-font-size-body-large); } .t-tabs__nav { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-tabs__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: absolute; border-bottom: 1px solid var(--td-component-stroke); } .t-tabs__operations--left { left: 0; z-index: 2; } .t-tabs__operations--right { right: 0; z-index: 2; } .t-tabs__operations--right .t-tabs__btn:first-child { -webkit-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 0.05); } .t-tabs__operations--right .t-tabs__nav-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-tabs__btn { width: 40px; height: 100%; 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); border-left: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); z-index: 1; opacity: 1; } .t-tabs__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-tabs__btn.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__btn.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__btn--left { border-right: 1px solid var(--td-component-stroke); -webkit-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); } .t-tabs__btn--left.fade-enter, .t-tabs__btn--left.fade-enter-from, .t-tabs__btn--left.fade-leave-to { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .t-tabs__btn--right.fade-enter, .t-tabs__btn--right.fade-enter-from, .t-tabs__btn--right.fade-leave-to { -webkit-transform: translateX(50px); transform: translateX(50px); } .t-tabs__nav-container { position: relative; } .t-tabs__nav-container.t-is-top::after { content: ""; width: 100%; height: 1px; position: absolute; top: auto; right: auto; bottom: 0; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-bottom::after { content: ""; width: 100%; height: 1px; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-left::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: 0; bottom: auto; left: auto; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-right::after { content: ""; width: 1px; height: 100%; position: absolute; top: 0; right: auto; bottom: auto; left: 0; background-color: var(--td-component-stroke); } .t-tabs__nav-container.t-is-addable { margin-right: 40px; } .t-tabs__nav-container.t-tabs__nav--card::after { content: ""; background-color: transparent; } .t-tabs__scroll-btn { position: absolute; z-index: 1; width: 40px; height: 100%; display: block; background-color: var(--td-bg-color-secondarycontainer); text-align: center; border-bottom: 1px solid var(--td-component-stroke); cursor: pointer; color: var(--td-text-color-secondary); font: var(--td-font-body-large); } .t-tabs__scroll-btn.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__scroll-btn.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__nav-scroll { position: relative; display: inline-block; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; -ms-flex-item-align: stretch; align-self: stretch; overflow: hidden; white-space: nowrap; -webkit-transform: translate(0); transform: translate(0); z-index: 1; } .t-tabs__nav-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0; } .t-tabs__nav-wrap.t-is-smooth { -webkit-transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1); transition: transform 0.24s cubic-bezier(0, 0, 0.15, 1), -webkit-transform 0.24s cubic-bezier(0, 0, 0.15, 1); } .t-tabs__nav-wrap.t-is-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-tabs__bar { position: absolute; background-color: var(--td-brand-color); z-index: 1; -webkit-transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.24s cubic-bezier(0.38, 0, 0.24, 1); border-radius: var(--td-radius-small); } .t-tabs__bar.t-is-top { bottom: 0; left: 0; height: 3px; } .t-tabs__bar.t-is-bottom { top: 0; left: 0; height: 3px; } .t-tabs__bar.t-is-left { top: 0; right: 0; width: 3px; } .t-tabs__bar.t-is-right { top: 0; left: 0; width: 3px; } .t-tabs__nav-item { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-secondary); position: relative; overflow: hidden; z-index: 0; cursor: pointer; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .t-tabs__nav-item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-s); margin-left: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-s); border-radius: var(--td-radius-default); -webkit-transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; --ripple-color: var(--td-bg-color-container-active); } .t-tabs__nav-item.t-size-l { font: var(--td-font-body-large); } .t-tabs__nav-item.t-size-l .t-tabs__nav-item-wrapper { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); } .t-tabs__nav-item-text-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper { background-color: var(--td-bg-color-container-hover); } .t-tabs__nav-item.t-is-left, .t-tabs__nav-item.t-is-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-tabs__nav-item.t-size-m { height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); } .t-tabs__nav-item.t-size-l { height: var(--td-comp-size-xxxxl); line-height: var(--td-comp-size-xxxxl); } .t-tabs__nav-item.t-is-active { color: var(--td-brand-color); text-shadow: 0 0 0.3px currentcolor; } .t-tabs__nav-item.t-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-tabs__nav-item > .remove-btn { margin-left: var(--td-comp-margin-s); -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .t-tabs__nav--card { background-color: var(--td-bg-color-secondarycontainer); } .t-tabs__nav--card.t-tabs__nav-item { padding-right: var(--td-comp-paddingLR-l); padding-left: var(--td-comp-paddingLR-l); border-bottom: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item::after { display: none; } .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(.t-is-active):hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-tabs__nav--card.t-tabs__nav-item:not(:first-of-type) { border-left: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item:last-of-type { border-right: 1px solid var(--td-component-stroke); } .t-tabs__nav--card.t-tabs__nav-item.t-is-active { color: var(--td-brand-color); background-color: var(--td-bg-color-container); border-bottom-color: var(--td-bg-color-container); } .t-tabs__nav--card.t-tabs__nav-item.t-size-l { padding-left: var(--td-comp-paddingLR-xl); padding-right: var(--td-comp-paddingLR-xl); } .t-tabs__nav--card .t-icon-close { color: var(--td-text-color-secondary); -webkit-transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-tabs__nav--card .t-icon-close:hover { color: var(--td-text-color-primary); } .t-tabs__content { overflow: hidden; position: relative; } .t-tab-panel.t-is-hidden { display: none; } .t-notification { color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); outline: 0; border: 0; background-color: var(--td-bg-color-container); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); width: 360px; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); } .t-notification__icon { width: calc(var(--td-font-size-body-large) + 8px); text-align: center; margin-right: var(--td-comp-margin-s); } .t-notification__icon .t-icon { font-size: calc(var(--td-font-size-body-large) + 8px); } .t-notification .t-icon.t-is-info { color: var(--td-brand-color); } .t-notification .t-icon.t-is-success { color: var(--td-success-color); } .t-notification .t-icon.t-is-warning { color: var(--td-warning-color); } .t-notification .t-icon.t-is-error { color: var(--td-error-color-6); } .t-notification__main { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-notification__title__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-notification__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); } .t-notification .t-icon-close { cursor: pointer; font-size: var(--td-font-size-body-large); border-radius: var(--td-radius-default); color: var(--td-text-color-secondary); } .t-notification .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-notification .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-notification__content { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); max-height: 66px; overflow: hidden; text-overflow: ellipsis; word-break: break-all; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ -webkit-box-orient: vertical; } .t-notification__detail { margin-top: var(--td-comp-margin-l); text-align: right; font: var(--td-font-body-medium); } .t-notification__detail-item { cursor: pointer; } .t-notification__detail-item:hover { color: inherit; background: var(--td-bg-color-container-hover); } .t-notification__detail-item:active { color: inherit; background: var(--td-bg-color-container-active); } .t-notification__detail-item + .t-notification__detail-item { margin-left: var(--td-comp-margin-s); } .t-notification__detail-item.t-is-active { color: var(--td-brand-color); } .t-notification__show--top-left { position: fixed; top: 0; left: 0; } .t-notification__show--top-left > .t-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-left; animation-name: slidein-top-left; } @-webkit-keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .t-notification__show--top-right { position: fixed; top: 0; right: 0; } .t-notification__show--top-right > .t-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-top-right; animation-name: slidein-top-right; } @-webkit-keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-top-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .t-notification__show--bottom-left { position: fixed; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .t-notification__show--bottom-left > .t-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-left; animation-name: slidein-bottom-left; } @-webkit-keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-left { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .t-notification__show--bottom-right { position: fixed; bottom: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .t-notification__show--bottom-right > .t-notification { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-name: slidein-bottom-right; animation-name: slidein-bottom-right; } @-webkit-keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slidein-bottom-right { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .t-notification-list__show { position: fixed; } a.t-menu__item { text-decoration: none; color: unset; } a.t-menu__item:hover, a.t-menu__item:active { color: inherit; } .t-menu__logo > * { margin-left: var(--td-comp-margin-xxl); } .t-head-menu { 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; position: relative; width: 100%; background-color: var(--td-bg-color-container); } .t-head-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-xxxl); } .t-head-menu__inner li + li { margin-left: var(--td-comp-margin-s); } .t-head-menu__inner .t-menu:first-child { margin-left: var(--td-comp-margin-xxl); } .t-head-menu .t-menu__logo:not(:empty) { height: 100%; margin-right: var(--td-comp-margin-xxxl); } .t-head-menu .t-menu { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-head-menu .t-menu__operations:not(:empty) { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-xxxl); line-height: 64px; text-align: right; margin-right: var(--td-comp-margin-s); overflow: hidden; } .t-head-menu .t-menu__operations-icon { width: var(--td-comp-size-m); height: var(--td-comp-size-m); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); line-height: var(--td-comp-size-m); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-head-menu .t-submenu > .t-menu__item { overflow: unset; } .t-head-menu .t-submenu > .t-menu__item::before { content: ""; display: block; position: absolute; bottom: -20px; left: 0; right: 0; height: 20px; } .t-head-menu .t-menu__item { height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); padding: 0 var(--td-comp-paddingLR-l); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); } .t-head-menu__submenu { border-top: 1px solid var(--td-component-stroke); padding-left: 0; } .t-head-menu .t-fake-arrow { margin-left: var(--td-comp-margin-m); } .t-default-menu { 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; position: relative; width: 232px; display: inline-block; background: var(--td-bg-color-container); -webkit-transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); transition: width 0.28s cubic-bezier(0.645, 0.045, 0.355, 1); white-space: nowrap; } .t-default-menu .t-menu__item { color: var(--td-text-color-secondary); } .t-default-menu.t-is-collapsed { width: 64px; } .t-default-menu.t-is-collapsed .t-menu__logo > * { margin-left: var(--td-comp-margin-l); } .t-default-menu.t-is-collapsed .t-menu .t-menu__item { padding: 0 14px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-default-menu.t-is-collapsed .t-menu .t-menu__item .t-menu__item-link { margin-left: 0; opacity: 0; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .t-default-menu.t-is-collapsed .t-fake-arrow { display: none; } .t-default-menu.t-is-collapsed .t-menu__item { text-overflow: initial; } .t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-default-menu.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon { color: var(--td-brand-color); } .t-default-menu.t-is-collapsed .t-menu__item.t-menu__item--plain::after { content: ""; } .t-default-menu.t-is-collapsed .t-menu__item span { display: none; } .t-default-menu.t-is-collapsed .t-menu__item .t-icon { margin-right: initial; } .t-default-menu.t-is-collapsed .t-submenu-icon { display: none; } .t-default-menu.t-is-collapsed .t-submenu > .t-menu__item { min-width: initial; } .t-default-menu.t-is-collapsed .t-submenu > .t-menu__item::after { content: ""; display: block; position: absolute; right: -20px; top: 0; bottom: 0; width: 20px; } .t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title { display: none; } .t-default-menu.t-is-collapsed .t-menu-group:first-child .t-menu-group__title + * { margin-top: 0; } .t-default-menu.t-is-collapsed .t-menu-group__title { padding: 0; font-size: 0; } .t-default-menu.t-is-collapsed .t-menu-group__title::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 1px; width: 20px; background: var(--td-component-stroke); } .t-default-menu.t-is-collapsed .t-menu__operations { text-align: center; } .t-default-menu.t-is-collapsed .t-menu__operations-icon { display: block; } .t-default-menu.t-is-collapsed .t-menu__log > * { margin: 0 auto; } .t-default-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; } .t-default-menu__inner .t-menu__logo:not(:empty) { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: var(--td-comp-size-xxxl); border-bottom: 1px solid var(--td-component-stroke); } .t-default-menu__inner .t-menu { padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-s); position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-default-menu__inner .t-menu--scroll { overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .t-default-menu__inner .t-menu--scroll { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar { width: 6px; height: 6px; } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:vertical:hover, .t-default-menu__inner .t-menu--scroll::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-default-menu__inner .t-menu > *:not(.t-menu-group):not(:first-child) { margin-top: var(--td-comp-margin-xs); } .t-default-menu__inner .t-menu .t-menu-group > *:not(:first-child), .t-default-menu__inner .t-menu .t-menu__sub > *:not(:first-child), .t-default-menu__inner .t-menu .t-submenu > *:not(:first-child) { margin-top: var(--td-comp-margin-xs); } .t-default-menu__inner .t-menu-group__title { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-l); color: var(--td-text-color-placeholder); font-size: var(--td-font-body-small); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-default-menu .t-submenu { position: relative; } .t-default-menu .t-menu__operations:not(:empty) { width: 100%; position: relative; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); top: 0; left: 0; text-align: left; border-top: solid 1px var(--td-component-stroke); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-default-menu .t-menu__operations-icon { width: 32px; height: 32px; padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); cursor: pointer; color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-default-menu .t-menu__item.t-is-opened { color: var(--td-text-color-primary); background-color: unset; } .t-default-menu .t-menu__item.t-is-opened .t-icon { color: var(--td-text-color-primary); } .t-default-menu .t-menu__sub { padding: 0; overflow: hidden; } .t-default-menu .t-menu__sub .t-menu__item { padding-left: var(--padding-left, 32px); } .t-default-menu .t-slide-down-enter-active .t-menu__sub { height: 100%; } .t-default-menu .t-menu__item { position: relative; padding: 0 10px 0 16px; height: var(--td-comp-size-l); line-height: var(--td-comp-size-l); border-bottom: 0; text-align: left; border-radius: var(--td-radius-default); -webkit-transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.28s cubic-bezier(0.38, 0, 0.24, 1), padding 0.28s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-default-menu .t-menu__item .t-icon { width: 20px; height: 20px; -ms-flex-negative: 0; flex-shrink: 0; } .t-default-menu .t-menu__item .t-fake-arrow { margin-left: auto; min-width: 16px; } .t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-default-menu .t-menu__item.t-is-active:not(.t-is-opened) .t-icon { color: var(--td-brand-color); } .t-default-menu .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) { background: var(--td-bg-color-secondarycontainer-hover); } .t-default-menu.t-menu--dark { background: var(--td-gray-color-13); } .t-default-menu.t-menu--dark .t-menu__item { color: var(--td-font-white-2); } .t-default-menu.t-menu--dark .t-menu__logo:not(:empty) { border-bottom-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__operations:not(:empty) { border-top-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-disabled) { background-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-default-menu.t-menu--dark .t-menu__item.t-is-active:not(.t-is-opened) .t-icon { color: var(--td-text-color-anti); } .t-default-menu.t-menu--dark .t-menu__item.t-is-opened.t-is-active { background-color: transparent; } .t-default-menu.t-menu--dark .t-menu-group__title { color: var(--td-font-white-3); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu-group__title:after { background-color: var(--td-gray-color-10); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened { background-color: var(--td-brand-color); color: var(--td-text-color-anti); } .t-default-menu.t-menu--dark.t-is-collapsed .t-menu__item.t-is-active.t-is-opened .t-icon { color: var(--td-text-color-anti); } .t-menu { color: var(--td-text-color-primary); font: var(--td-font-body-medium); list-style: none; padding: 0; margin: 0; } .t-menu--dark { color: var(--td-font-white-2); } .t-menu__logo:not(:empty) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-menu .t-submenu { position: relative; } .t-menu .t-submenu.t-is-active > .t-menu__item { color: var(--td-gray-color-13); } .t-menu .t-submenu.t-is-active > .t-menu__item .t-icon { color: var(--td-gray-color-13); } .t-menu .t-submenu .t-submenu-icon { width: 16px; height: 16px; } .t-menu .t-submenu.t-is-opened .t-submenu-icon { -webkit-transform: scaleY(-1); transform: scaleY(-1); } .t-menu__spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .t-menu__spacer--left::before { left: -16px; width: 16px; top: 0; bottom: 0; } .t-menu__spacer--top::before { top: -20px; left: 0; right: 0; height: 20px; } .t-menu__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; line-height: 40px; text-align: center; color: var(--td-text-color-primary); cursor: pointer; text-overflow: ellipsis; border-radius: var(--td-radius-default); --ripple-color: var(--td-bg-color-container-active); } .t-menu__item > .t-fake-arrow { margin-left: var(--td-comp-margin-m); } .t-menu__item ::-moz-selection { background: transparent; } .t-menu__item ::selection { background: transparent; } .t-menu__item-spacer { overflow: unset; } .t-menu__item-spacer::before { content: ""; display: block; position: absolute; z-index: 1; } .t-menu__item-spacer--right::before { right: -16px; width: 16px; top: 0; bottom: 0; } .t-menu__item-spacer--bottom::before { bottom: -20px; left: 0; right: 0; height: 20px; } .t-menu__item a { color: unset; text-decoration: none; } .t-menu__item a.t-menu__item-link { color: unset; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-menu__item a.t-menu__item-link::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .t-menu__item.t-is-active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-menu__item.t-is-opened { color: var(--td-brand-color); } .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) { background-color: var(--td-bg-color-container-hover); } .t-menu__item.t-is-disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-menu__content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-icon + .t-menu__content, .t-icon + .t-menu__item-link { margin-left: var(--td-comp-margin-s); } .t-menu--dark.t-head-menu { background-color: var(--td-gray-color-13); } .t-menu--dark .t-menu__item { color: var(--td-text-color-anti); --ripple-color: var(--td-gray-color-11); } .t-menu--dark .t-menu__item.t-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-menu--dark .t-menu__item.t-is-opened { color: var(--td-text-color-anti); } .t-menu--dark .t-menu__item.t-is-opened .t-icon { color: var(--td-text-color-anti); } .t-menu--dark .t-menu__item.t-is-disabled { color: var(--td-font-white-4); } .t-menu--dark .t-menu__item:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) { background-color: var(--td-gray-color-10); } .t-menu--dark .t-menu__popup { background: var(--td-gray-color-13); border: solid 0.5px var(--td-gray-color-10); } .t-menu--dark .t-menu__popup .t-menu__item { color: var(--td-text-color-anti); border-radius: var(--td-radius-default); } .t-menu--dark .t-menu__popup .t-menu__item.t-is-active { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-menu--dark .t-menu__popup .t-menu__item:hover:not(.t-is-active) { background-color: var(--td-gray-color-10); } .t-menu--dark .t-head-menu__submenu { border-top: 1px solid transparent; } .t-menu--dark .t-menu__operations-icon { color: var(--td-bg-color-container); } .t-menu--dark .t-menu__operations-icon:hover { background-color: var(--td-brand-color); } .t-menu__popup { overflow: hidden; background: var(--td-bg-color-container); z-index: 1000; border-radius: var(--td-radius-medium); opacity: 0; list-style: none; padding: 0; margin: 0; } .t-menu__popup.t-popup__content { position: absolute; } .t-menu__popup-wrapper { padding: var(--td-pop-padding-m); height: 100%; list-style: none; margin: 0; } @-moz-document url-prefix() { .t-menu__popup-wrapper { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-menu__popup-wrapper::-webkit-scrollbar { width: 8px; height: 8px; } .t-menu__popup-wrapper::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-menu__popup-wrapper::-webkit-scrollbar-thumb:vertical:hover, .t-menu__popup-wrapper::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-menu__popup .t-fake-arrow { margin-left: auto; } .t-menu__popup .t-menu__item { padding-left: var(--td-comp-paddingLR-l); padding-right: var(--td-comp-paddingLR-l); } .t-menu__popup.t-is-vertical { min-width: var(--popup-width, 160px); } .t-menu__popup.t-is-horizontal .t-menu__item { white-space: nowrap; } .t-menu__popup.t-is-horizontal li + li { margin-top: var(--td-comp-margin-xs); } .t-menu__popup.t-is-opened { opacity: 1; -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.1), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 3px 14px 6px rgba(0, 0, 0, 0.05); overflow: visible; } .t-menu__popup .t-menu__item { color: var(--td-text-color-primary); height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); } .t-menu__popup .t-menu__item + .t-menu__item { margin-left: 0; } .t-menu__popup .t-menu__item:hover:not(.t-is-active) { background-color: var(--td-bg-color-container-hover); } .t-menu__popup .t-is-disabled { color: var(--td-text-color-disabled); } .t-menu__operations-icon { margin-right: var(--td-comp-margin-l); border-radius: var(--td-radius-default); color: var(--td-text-color-primary); -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-menu__operations-icon:hover { background-color: var(--td-brand-color-light); } .t-opacity-transition { -webkit-transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); transition: opacity 0.28s cubic-bezier(0.55, 0, 0.1, 1); } .horizontal-collapse-transition .t-submenu__title .t-submenu__icon-arrow { -webkit-transition: 0.2s; transition: 0.2s; opacity: 0; } .t-menu__popup { top: 0; left: calc(100% - var(--td-pop-padding-m)); } .t-menu__popup .t-menu__item:not(:first-child), .t-menu__popup .t-submenu:not(:first-child) { margin-top: var(--td-comp-margin-xxs); } .t-is-head-menu .t-menu__popup { margin-top: calc((var(--td-comp-size-xxxl) - var(--td-comp-size-m)) / 2) !important; } .t-menu-is-nested .t-menu__popup { margin-top: calc(0px - var(--td-pop-padding-m)) !important; } .t-tree { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); color: var(--td-text-color-primary); position: relative; } .t-tree.t-is-disabled { color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-tree__item.t-is-active { background-color: var(--td-bg-color-container-hover); color: var(--td-text-color-disabled); } .t-tree.t-is-disabled .t-tree__item .t-icon { color: var(--td-text-color-secondary); } .t-tree__empty { color: var(--td-text-color-disabled); } .t-tree__branch { display: block; } .t-tree__item { --level: 0; --hscale: 2; will-change: opacity, max-height; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 0 0 calc(var(--td-comp-margin-xxl) * var(--level)); cursor: default; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; perspective: 1000; } .t-tree__item .t-icon, .t-tree__item .t-loading { display: inline-block; position: relative; z-index: 2; font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-tree__item .t-icon { color: var(--td-text-color-secondary); } .t-tree__item .t-checkbox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .t-tree__item .t-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .t-tree__item .t-checkbox__label { overflow: hidden; text-overflow: ellipsis; } .t-tree__item .t-tree__icon--default .t-icon { -webkit-transform: rotate(0); transform: rotate(0); } .t-tree__item--open .t-icon { color: var(--td-text-color-brand); } .t-tree__item--open .t-tree__icon--default .t-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .t-tree__item--clickable { cursor: pointer; } .t-tree__item--locked { color: var(--td-text-color-disabled); } .t-tree__item--matched { color: inherit; } .t-tree__item--draggable { cursor: pointer; } .t-tree__item--draggable:hover { background-color: var(--td-bg-color-container-hover); background-clip: content-box; } .t-tree__item--draggable::after { position: absolute; top: -1px; right: 0; left: 0; display: block; height: 2px; border-radius: 1px; content: ""; padding: inherit; background-clip: content-box; } .t-tree__item--tip-top::after { background-color: var(--td-brand-color); } .t-tree__item--tip-bottom::after { top: unset; bottom: -1px; background-color: var(--td-brand-color); } .t-tree__item--tip-highlight { background-color: var(--td-brand-color-light); background-clip: content-box; } .t-tree__item::before { content: ""; display: block; width: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; height: calc(var(--td-comp-size-m) + 2px); } .t-tree--block-node .t-tree__label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-tree--hoverable .t-tree__label:not(.t-is-active):not(.t-is-checked):hover { background-color: var(--td-bg-color-container-hover); } .t-tree__line { --level: 0; --color: var(--td-border-level-1-color); --space: var(--td-comp-margin-xxl); --iconSize: 16px; position: absolute; left: calc(var(--td-comp-margin-xxl) * var(--level) - var(--td-comp-margin-l)); bottom: var(--td-comp-margin-l); width: 1px; height: calc(var(--td-comp-size-m) + 2px); pointer-events: none; } .t-tree__line::before { content: ""; position: absolute; bottom: 0; left: 0; display: block; height: calc(var(--td-comp-size-m) + 2px); width: var(--td-comp-margin-m); border-left: 1px solid var(--color); border-bottom: 1px solid var(--color); } .t-tree__line--first::before { height: var(--td-line-height-body-medium); } .t-tree__line--leaf::before { width: var(--td-comp-margin-m); } .t-tree__icon { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; width: calc(var(--td-font-size-body-medium) + 2px); font-size: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } .t-tree__icon::after { content: ""; display: block; position: absolute; left: -2px; top: -2px; width: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px); height: calc(calc(var(--td-font-size-body-medium) + 2px) + 4px); border-radius: var(--td-radius-default); } .t-tree__icon:not(:empty):hover { background-color: var(--td-bg-color-container-hover); } .t-tree__icon:empty { cursor: initial; } .t-tree__label { --ripple-color: var(--td-bg-color-container-active); -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xs); margin-left: var(--td-comp-margin-xs); border-radius: var(--td-radius-default); cursor: pointer; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-tree__label.t-is-checked { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .t-tree__label::-moz-selection { background-color: transparent; } .t-tree__label::selection { background-color: transparent; } .t-is-active .t-tree__label { font-weight: 500; color: var(--td-text-color-primary); background-color: var(--td-brand-color-light); } .t-tree__space { display: block; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .t-tree__operations { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: auto; } .t-tree__operations .t-icon { cursor: pointer; } .t-tree__item.t-is-disabled { color: var(--td-text-color-disabled); cursor: default; } .t-tree__item.t-is-disabled .t-checkbox { cursor: default; } .t-tree__item--hidden { display: none; } .t-tree--transition .t-tree__label { -webkit-transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-tree--transition .t-tree__icon { -webkit-transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); transition: color, transform 0.24s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.24s cubic-bezier(0.38, 0, 0.24, 1); } .t-tree--transition .t-tree__icon::after { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-tree--transition .t-tree__icon:not(:empty):hover { -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-tree--transition .t-tree__icon--default .t-icon { -webkit-transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: color, transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-transform cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-tree--transition .t-tree__item--visible { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); opacity: 1; -webkit-transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; transition: opacity 150ms linear 150ms, max-height 150ms linear 0s; } .t-tree--transition .t-tree__item--hidden { display: -webkit-box; display: -ms-flexbox; display: flex; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation: initial; animation: initial; -webkit-transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; transition: opacity 150ms linear 0s, max-height 150ms linear 150ms; } .t-tree--transition .t-tree__item--enter-active { -webkit-animation: t-tree-toggle 300ms linear; animation: t-tree-toggle 300ms linear; } .t-tree--transition .t-tree__item--leave-active { animation: t-tree-toggle 300ms reverse linear forwards; } .t-tree__vscroll { overflow-y: auto; } .t-tree__lazyload { overflow-y: auto; } .t-tree__vscroll-cursor { position: absolute; width: 1px; height: 1px; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; } .t-tree--scrolling .t-tree__item { will-change: initial; } .t-tree--scrolling .v-enter, .t-tree--scrolling .v-leave, .t-tree--scrolling .t-tree__item--visible, .t-tree--scrolling .t-tree__item--hidden, .t-tree--scrolling .t-tree__item--enter, .t-tree--scrolling .t-tree__item--enter-active, .t-tree--scrolling .t-tree__item--enter-to, .t-tree--scrolling .t-tree__item--leave, .t-tree--scrolling .t-tree__item--leave-active .t-tree__item--leave-to { -webkit-animation: none; animation: none; -webkit-transition: none; transition: none; } .t-tree--scrolling .t-tree__item--visible { max-height: initial; } .t-tree--scrolling .t-tree__item--enter-to, .t-tree--scrolling .t-tree__item--enter-active { max-height: initial; } .t-tree--scrolling .t-tree__item--leave-to, .t-tree--scrolling .t-tree__item--leave-active { max-height: 0; } @-webkit-keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } @keyframes t-tree-toggle { 0% { opacity: 0; max-height: 0; } 50% { opacity: 0; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } 100% { opacity: 1; max-height: calc(calc(var(--td-comp-size-m) + 2px) * var(--hscale) + 0px); } } .t-tree-select { 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-tree-select--without-input input { display: none; } .t-tree-select--without-input .t-input__suffix-icon { margin-left: auto; } .t-tree-select .t-fake-arrow { -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); color: var(--td-text-color-placeholder); } .t-tree-select .t-fake-arrow--highlight { color: var(--td-text-color-brand); } .t-tree-select .t-fake-arrow--disable { color: var(--td-text-color-disabled); } .t-tree-select--placeholder { color: var(--td-text-color-placeholder); } .t-tree-select.t-single-suffix { padding-right: 20px; } .t-tree-select.t-tag-prefix { padding-left: 4px; } .t-tree-select-popup .t-popup__content { padding: var(--td-pop-padding-m); max-height: 300px; overflow-y: auto; } @-moz-document url-prefix() { .t-tree-select-popup .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-tree-select-popup .t-popup__content::-webkit-scrollbar { width: 8px; height: 8px; } .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:vertical:hover, .t-tree-select-popup .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-divider { margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); margin: var(--td-comp-margin-xxl) 0; border-top: 1px solid var(--td-border-level-1-color); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-divider--dashed { border-top-style: dashed; } .t-divider--horizontal { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-divider--vertical { border-top: 0; display: inline-block; margin: 0 var(--td-comp-margin-m); border-left: 1px solid var(--td-border-level-1-color); height: 0.9em; vertical-align: middle; } .t-divider--with-text { display: -webkit-box; display: -ms-flexbox; display: flex; border-top: 0; white-space: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-divider--with-text .t-divider__inner-text:not(:empty) { padding: 0 1em; display: inline-block; } .t-divider--with-text::before, .t-divider--with-text::after { content: ""; width: 50%; border-top: 1px solid var(--td-border-level-1-color); } .t-divider--with-text-left::before { width: 5%; } .t-divider--with-text-left::after { width: 95%; } .t-divider--with-text-right::before { width: 95%; } .t-divider--with-text-right::after { width: 5%; } .t-divider--dashed::before, .t-divider--dashed::after { border-top: 1px dashed var(--td-border-level-1-color); } .t-divider--vertical.t-divider--dashed { border-left: 1px dashed var(--td-border-level-1-color); } .t-switch { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; border: 0; padding: 0; margin: 0; height: var(--td-comp-size-xxs); line-height: var(--td-comp-size-xxs); border-radius: var(--td-radius-round); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); background-color: var(--td-bg-color-secondarycomponent); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-switch:hover { background-color: var(--td-bg-color-secondarycomponent-hover); } .t-switch__handle { position: absolute; 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; top: 4px; left: 4px; width: calc(var(--td-comp-size-xxs) - 2 * 4px); height: calc(var(--td-comp-size-xxs) - 2 * 4px); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xxs) - 4px); color: transparent; } .t-switch__handle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: var(--td-radius-round); background-color: #fff; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -6px; } .t-switch:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -6px; } .t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__content { opacity: 0; } .t-switch__content { -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-anti); padding: 0 var(--td-comp-margin-xs) 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px); font-size: var(--td-font-size-body-small); min-width: calc(var(--td-comp-size-xxs) / 0.618); -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear; } .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-is-checked { background-color: var(--td-brand-color); } .t-switch.t-is-checked:hover { background-color: var(--td-brand-color-hover); } .t-switch.t-is-checked .t-switch__handle { left: calc(100% - 2.5px); -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); width: calc(var(--td-comp-size-xxs) - 2 * 2.5px); height: calc(var(--td-comp-size-xxs) - 2 * 2.5px); top: 2.5px; } .t-switch.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xs); color: var(--td-text-color-anti); } .t-switch.t-is-loading { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .t-switch.t-is-loading .t-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-switch.t-is-loading .t-switch__handle .t-icon { color: var(--td-bg-color-component-disabled); } .t-switch.t-is-loading.t-is-checked { background-color: var(--td-brand-color-focus); } .t-switch.t-is-loading.t-is-checked .t-switch__handle .t-icon { color: var(--td-brand-color-focus); } .t-switch.t-is-disabled { cursor: not-allowed; background-color: var(--td-bg-color-component-disabled); } .t-switch.t-is-disabled .t-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .t-switch.t-is-disabled.t-is-checked { background-color: var(--td-brand-color-disabled); } .t-switch.t-is-disabled.t-is-checked .t-switch__handle { -webkit-box-shadow: none; box-shadow: none; } .t-switch.t-is-disabled.t-is-checked .t-switch__handle .t-icon { color: var(--td-brand-color-disabled); } .t-switch.t-size-l { min-width: calc(var(--td-comp-size-xs) / 0.618); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); border-radius: var(--td-radius-round); } .t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -8px; } .t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -8px; } .t-switch.t-size-l .t-switch__handle { top: 5px; left: 5px; width: calc(var(--td-comp-size-xs) - 2 * 5px); height: calc(var(--td-comp-size-xs) - 2 * 5px); } .t-switch.t-size-l .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xs) - 4px); } .t-switch.t-size-l .t-switch__content { padding: 0 var(--td-comp-margin-s) 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px); min-width: calc(var(--td-comp-size-xs) / 0.618); font-size: var(--td-font-size-body-large); } .t-switch.t-size-l .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-size-l.t-is-checked .t-switch__handle { left: calc(100% - 3px); top: 3px; width: calc(var(--td-comp-size-xs) - 2 * 3px); height: calc(var(--td-comp-size-xs) - 2 * 3px); } .t-switch.t-size-l.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px) 0 var(--td-comp-margin-s); } .t-switch.t-size-s { min-width: calc(var(--td-comp-size-xxxs) / 0.618); height: var(--td-comp-size-xxxs); line-height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-round); } .t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before { left: 0; right: -4px; } .t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before { right: 0; left: -4px; } .t-switch.t-size-s .t-switch__handle { top: 3px; left: 3px; width: calc(var(--td-comp-size-xxxs) - 2 * 3px); height: calc(var(--td-comp-size-xxxs) - 2 * 3px); } .t-switch.t-size-s .t-switch__handle .t-icon { font-size: calc(var(--td-comp-size-xxxs) - 4px); } .t-switch.t-size-s .t-switch__content { padding: 0 var(--td-comp-margin-xxs) 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px); min-width: calc(var(--td-comp-size-xxxs) / 0.618); font-size: 9px; } .t-switch.t-size-s .t-switch__content .t-icon { font-size: var(--td-font-size-body-large); } .t-switch.t-size-s.t-is-checked .t-switch__handle { left: calc(100% - 2px); top: 2px; width: calc(var(--td-comp-size-xxxs) - 2 * 2px); height: calc(var(--td-comp-size-xxxs) - 2 * 2px); } .t-switch.t-size-s.t-is-checked .t-switch__content { padding: 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xxs); } .t-anchor { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; --td-anchor-space-base: var(--td-size-6); position: relative; background: var(--td-bg-color-container); width: 200px; color: var(--td-text-color-primary); font: var(--td-font-body-medium); } .t-anchor .t-is-active > a { color: var(--td-brand-color); } .t-anchor__line { position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--td-component-stroke); cursor: pointer; } .t-anchor__line-cursor-wrapper { position: absolute; display: block; height: 0; opacity: 0; -webkit-transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); transition: all 0.2s cubic-bezier(0.24, 0.41, 0.51, 0.9); } .t-anchor__line-cursor-wrapper .t-anchor__line-cursor { width: 1px; height: 100%; background-color: var(--td-brand-color); } .t-anchor__item { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingTB-l); --level: 1; padding-left: calc(var(--level) * var(--td-anchor-space-base)); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-anchor__item.t-is-active { font-weight: 500; } .t-anchor__item-link { display: inline-block; position: relative; overflow: hidden; word-break: break-all; color: var(--td-text-color-primary); text-decoration: none; text-align: justify; } .t-anchor a { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-anchor a:hover { color: var(--td-brand-color); cursor: pointer; } .t-anchor a:active { color: var(--td-brand-color-active); } .t-anchor.t-size-s { width: 120px; } .t-anchor.t-size-l { width: 320px; } .t-anchor__target { cursor: pointer; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; display: none; } } .t-anchor__target .t-anchor__copy { display: none; margin: 0 0 0 var(--td-comp-margin-xs); } .t-anchor__target:hover .t-anchor__copy { display: inline-block; } .t-anchor__target:target::after { display: inline-block; content: ""; width: 6px; height: 6px; border-radius: var(--td-radius-circle); background-color: var(--td-brand-color); vertical-align: middle; -webkit-animation: fadeOut 2s 2s linear 1; animation: fadeOut 2s 2s linear 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .t-calendar { 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; border: 1px solid var(--td-border-level-1-color); background-color: var(--td-bg-color-container); border-radius: var(--td-radius-large); } .t-calendar .t-is-disabled.t-calendar__table-body-cell:hover { cursor: not-allowed; } .t-calendar .t-is-disabled .t-calendar__table-body-cell-display { color: var(--td-text-color-disabled); } .t-calendar .t-is-disabled .t-calendar__table-body-cell-display:hover { -webkit-box-shadow: none; box-shadow: none; } .t-calendar--full { min-width: 560px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-calendar--full .t-calendar__control { padding: 0; } .t-calendar--full .t-calendar__title { font: var(--td-font-title-large); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-calendar--full .t-calendar__panel { position: relative; margin-top: var(--td-comp-margin-xxxl); } .t-calendar--full .t-calendar__panel-title { font: var(--td-font-title-large); color: var(--td-text-color-primary); position: absolute; } .t-calendar--full .t-calendar__table-head-cell, .t-calendar--full .t-calendar__table-body-cell { margin-right: var(--td-comp-margin-s); position: relative; } .t-calendar--full .t-calendar__table-body-cell { border-top: 2px solid var(--td-border-level-1-color); padding: 0; height: 104px; line-height: var(--td-line-height-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 0; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-property: border-top, background; transition-property: border-top, background; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .t-calendar--full .t-calendar__table-body-cell-content { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-xs); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-calendar--full .t-calendar__table-body-cell.t-is-checked { background-color: var(--td-brand-color-light); } .t-calendar--full .t-calendar__table-body-cell.t-is-checked:hover { background-color: var(--td-brand-color-light); } .t-calendar--full .t-calendar__table-body-cell--now { border-top: 2px solid var(--td-brand-color); } .t-calendar--full .t-calendar__table-body-cell--now .t-calendar__table-body-cell-display { color: var(--td-text-color-primary); } .t-calendar--full .t-calendar__footer { height: 90px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-top: 1px solid var(--td-border-level-1-color); } .t-calendar--card { width: 280px; border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-calendar--card .t-calendar__control { padding: 0; } .t-calendar--card .t-calendar__control-section { width: 100%; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .t-calendar--card .t-calendar__control-section-cell:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: right; display: block; } .t-calendar--card .t-calendar__panel.t-calendar__panel--month { height: 200px; margin-top: var(--td-comp-margin-m); } .t-calendar--card .t-calendar__panel.t-calendar__panel--year { height: 168px; margin-top: var(--td-comp-margin-m); } .t-calendar--card .t-calendar__panel.t-calendar__panel--year .t-calendar__table-body-cell-display { min-width: var(--td-comp-size-xxl); } .t-calendar--card .t-calendar__table { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-calendar--card .t-calendar__table-head-row, .t-calendar--card .t-calendar__table-body-row { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: var(--td-bg-color-container); } .t-calendar--card .t-calendar__table-head-cell, .t-calendar--card .t-calendar__table-body-cell { width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-calendar--card .t-calendar__table-head-cell-display, .t-calendar--card .t-calendar__table-body-cell-display { width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-calendar--card .t-calendar__table-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; justify-self: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-calendar--card .t-calendar__table-body-cell { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-calendar--card .t-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container); } .t-calendar--card .t-calendar__table-body-cell-display { font: var(--td-font-body-medium); padding-top: calc(var(--td-comp-paddingTB-xxs) / 2); padding-bottom: calc(var(--td-comp-paddingTB-xxs) / 2); text-align: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-calendar--card .t-calendar__table-body-cell-display:hover { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); -webkit-transition: -webkit-box-shadow 0.2s linear; transition: -webkit-box-shadow 0.2s linear; transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear; } .t-calendar--card .t-calendar__table-body-cell--now .t-calendar__table-body-cell-display { color: var(--td-brand-color); background-color: var(--td-brand-color-light); position: relative; } .t-calendar--card .t-is-checked .t-calendar__table-body-cell-display { background: var(--td-brand-color); border-radius: var(--td-radius-default); color: var(--td-text-color-anti); } .t-calendar--card .t-calendar__footer { height: var(--td-comp-size-xxl); padding: 0 var(--td-comp-paddingLR-m); border-top: 1px solid var(--td-border-level-1-color); } .t-calendar__control { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-calendar__control-section { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-calendar__control-section:last-child { margin-right: 0; } .t-calendar__control-section-cell { height: 100%; margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-calendar__control-section-cell .t-radio-group { vertical-align: bottom; } .t-calendar__control-section-cell .t-select { display: inline; } .t-calendar__control-section-cell:last-child { margin-right: 0; } .t-calendar__panel { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; } .t-calendar__table { border-collapse: collapse; border-spacing: 0; width: 100%; height: 100%; } .t-calendar__table-head, .t-calendar__table-body { width: 100%; } .t-calendar__table-head-row, .t-calendar__table-body-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-calendar__table-head-cell, .t-calendar__table-body-cell { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; font: var(--td-font-title-small); color: var(--td-text-color-primary); cursor: default; padding: 0; } .t-calendar__table-head-cell:last-child, .t-calendar__table-body-cell:last-child { margin-right: 0; } .t-calendar__table-head { margin-bottom: var(--td-comp-margin-s); display: block; } .t-calendar__table-head-row { padding-bottom: 0px; background: var(--td-bg-color-container); } .t-calendar__table-head-cell { height: 100%; font: var(--td-font-title-small); color: var(--td-text-color-secondary); } .t-calendar__table-body-cell { cursor: pointer; } .t-calendar__table-body-cell:hover { background-color: var(--td-bg-color-container-hover); -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .t-calendar__table-body-cell-display { font: var(--td-font-title-small); color: var(--td-text-color-primary); } .t-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-space .t-space-item { width: inherit; } .t-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .t-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .t-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-space-vertical .t-space-item-separator { width: 100%; } .t-space.t-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .t-space.t-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-space.t-space--polyfill.t-space-horizontal, .t-space.t-space--polyfill.t-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .t-space.t-space--polyfill.t-space-vertical, .t-space.t-space--polyfill.t-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .t-space.t-space--polyfill.t-space-horizontal > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-left: var(--td-space-column-gap); } .t-space.t-space--polyfill.t-space-vertical > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-top: var(--td-space-row-gap); } .t-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .t-image__wrapper--shape-square { border-radius: 0; } .t-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .t-image__wrapper--shape-circle { border-radius: 50%; } .t-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .t-image__wrapper--gallery .t-image { position: relative; z-index: 5; } .t-image__wrapper--need-hover { cursor: pointer; } .t-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .t-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .t-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .t-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .t-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .t-image--fit-none { -o-object-fit: none; object-fit: none; } .t-image--position-center { -o-object-position: center; object-position: center; } .t-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .t-image--position-top { -o-object-position: top; object-position: top; } .t-image--position-left { -o-object-position: left; object-position: left; } .t-image--position-right { -o-object-position: right; object-position: right; } .t-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: calc(5 - 2); } .t-image__gallery-shadow::before, .t-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .t-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: calc(5 - 1); } .t-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: calc(5 - 3); } .t-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: 0; } .t-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: calc(5 + 1); opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .t-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .t-image__loading, .t-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: calc(0 + 1); } .t-image__loading { color: var(--td-text-color-secondary); } .t-image__error { color: var(--td-text-color-disabled); } .t-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .t-image-viewer__img-error .t-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .t-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .t-image-viewer-preview-image.t-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide; } .t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide; } .t-image-viewer-preview-image .t-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 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; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .t-image-viewer-preview-image .t-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; 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-container); padding: 0 0 12px 0; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon { font-size: var(--td-font-size-body-large); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev { width: calc(40px / 9 * 16 * 7 + 4px * 6); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before, .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: calc(40px / 9 * 16); pointer-events: none; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .t-image-viewer-preview-image .t-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; 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; gap: 4px; margin-left: calc(40px / 9 * 16 * 3 + 4px * 3); } .t-image-viewer-preview-image .t-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: calc(40px / 9 * 16); height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); 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; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer-preview-image .t-image-viewer__header-box .t-image-viewer__header-img { width: auto; height: 100%; } .t-image-viewer-preview-image .t-image-viewer__header-box:hover, .t-image-viewer-preview-image .t-image-viewer__header-box.t-is-active { border-color: var(--td-brand-color); } .t-image-viewer-preview-image .t-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt { top: 100px; right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { left: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); 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-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label { margin-left: 2px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled { color: rgba(255, 255, 255, 0.22); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .t-image-viewer-preview-image .t-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .t-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .t-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; 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; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-image-viewer__utils .t-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); 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; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .t-image-viewer-mini__footer .t-image-viewer__utils { position: inherit; } .t-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 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-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .t-image-viewer__dialog.t-dialog__ctx--fixed { z-index: 3000; } .t-image-viewer__dialog .t-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title { pointer-events: all; } .t-image-viewer__dialog .t-dialog__header .t-dialog__close { pointer-events: auto; } .t-image-viewer__dialog .t-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .t-image-viewer__dialog .t-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer__dialog .t-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-image-viewer__dialog .t-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .range-input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.t-is-disabled .t-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled > .t-range-input__prefix .t-icon, .range-input-disabled.t-is-disabled > .t-range-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .t-range-input:hover { border-color: var(--td-brand-color); } .t-range-input--borderless:not(.t-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-range-input--borderless:not(.t-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .t-range-input--borderless:not(.t-is-focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .t-range-input.t-is-focused { z-index: 1; 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-range-input.t-is-success { border-color: var(--td-success-color); } .t-range-input.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-range-input.t-is-success.t-range-input--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-range-input.t-is-success > .t-range-input__extra { color: var(--td-success-color); } .t-range-input.t-is-success > .t-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-warning { border-color: var(--td-warning-color); } .t-range-input.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-range-input.t-is-warning.t-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-range-input.t-is-warning > .t-range-input__extra { color: var(--td-warning-color); } .t-range-input.t-is-warning > .t-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-error { border-color: var(--td-error-color); } .t-range-input.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-range-input.t-is-error.t-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-range-input.t-is-error > .t-range-input__extra { color: var(--td-error-color); } .t-range-input.t-is-error > .t-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-range-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-range-input.t-is-disabled .t-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled > .t-range-input__prefix .t-icon, .t-range-input.t-is-disabled > .t-range-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-range-input.t-range-input--prefix .t-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .t-range-input.t-range-input--suffix .t-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .t-range-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .t-range-input.t-size-l .t-input { padding: 0 var(--td-comp-margin-s); } .t-range-input.t-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .t-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .t-range-input__inner .t-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .t-range-input__inner > .t-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .t-range-input__inner .t-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .t-range-input__inner .t-input:hover { background-color: var(--td-bg-color-container-hover); } .t-range-input__inner .t-input__inner { width: 100%; height: 100%; line-height: 1; } .t-range-input__inner .t-input.t-is-focused { background-color: var(--td-bg-color-component); } .t-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .t-range-input.t-range-input--suffix .t-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-range-input.t-range-input--suffix:hover .t-input__clear { opacity: 1; visibility: visible; } .t-range-input .t-range-input__suffix-clear { cursor: pointer; } .t-range-input__prefix > .t-icon, .t-range-input__suffix > .t-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .t-range-input-popup { width: 100%; } .t-range-input-popup--visible .t-range-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-range-input-popup--visible .t-range-input .t-icon-time, .t-range-input-popup--visible .t-range-input .t-icon-calendar { color: var(--td-brand-color); } .t-range-input-popup--visible .t-range-input .t-input.t-is-focused { background-color: var(--td-bg-color-component); } .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: 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-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.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-range-picker { width: auto; } .t-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .t-time-picker__panel-body { width: 100%; height: calc(calc(var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 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: var(--td-comp-size-xs); 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(calc(0px - (calc(var(--td-comp-size-xs) + var(--td-size-3)) / 2))); transform: translateY(calc(0px - (calc(var(--td-comp-size-xs) + var(--td-size-3)) / 2))); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .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::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .t-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .t-time-picker__panel-body-scroll:last-child { border-right: 0; } .t-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .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-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .t-time-picker__panel-section-footer { width: 100%; 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; padding: var(--td-pop-padding-xl); } .t-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .t-form:not(.t-form-inline) .t-form__item:last-of-type { margin: 0; } .t-form__item { margin-bottom: var(--td-comp-margin-xxl); } .t-form__item.t-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .t-form__item.t-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .t-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); 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: var(--td-comp-margin-xxxl); } .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: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .t-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .t-form__controls { min-height: var(--td-comp-margin-xxxl); 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: var(--td-comp-margin-xxxl); } .t-form__controls .t-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .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-range-input, .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-range-input--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-range-input .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-range-input .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-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-radio-button:last-child { border-right-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: 0 var(--td-comp-margin-s); } .t-form__status > .t-icon { font-size: var(--td-comp-size-xxxs); } .t-form__status-without-icon { width: 25px; height: 25px; } .t-form__status button { width: var(--td-comp-size-m); } .t-form__status button + button { margin-left: var(--td-comp-margin-s); } .t-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .t-form-inline .t-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .t-input__extra, .t-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-is-warning .t-input__extra { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input, .t-is-warning .t-form__controls-content .t-select, .t-is-warning .t-form__controls-content .t-radio-button, .t-is-warning .t-form__controls-content .t-cascader, .t-is-warning .t-form__controls-content .t-range-input, .t-is-warning .t-form__controls-content .t-textarea__inner { border-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input--focused, .t-is-warning .t-form__controls-content .t-select--focused, .t-is-warning .t-form__controls-content .t-radio-button--focused, .t-is-warning .t-form__controls-content .t-cascader--focused, .t-is-warning .t-form__controls-content .t-range-input--focused, .t-is-warning .t-form__controls-content .t-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-input .t-icon, .t-is-warning .t-form__controls-content .t-select .t-icon, .t-is-warning .t-form__controls-content .t-radio-button .t-icon, .t-is-warning .t-form__controls-content .t-cascader .t-icon, .t-is-warning .t-form__controls-content .t-range-input .t-icon, .t-is-warning .t-form__controls-content .t-textarea__inner .t-icon, .t-is-warning .t-form__controls-content .t-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-select .t-fake-arrow, .t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-warning .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-cascader.t-is-active, .t-is-warning .t-form__controls-content .t-select.t-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-form__status .t-icon { color: var(--td-warning-color); } .t-is-error .t-input__extra { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input, .t-is-error .t-form__controls-content .t-select, .t-is-error .t-form__controls-content .t-radio-button, .t-is-error .t-form__controls-content .t-cascader, .t-is-error .t-form__controls-content .t-range-input, .t-is-error .t-form__controls-content .t-textarea__inner { border-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input--focused, .t-is-error .t-form__controls-content .t-select--focused, .t-is-error .t-form__controls-content .t-radio-button--focused, .t-is-error .t-form__controls-content .t-cascader--focused, .t-is-error .t-form__controls-content .t-range-input--focused, .t-is-error .t-form__controls-content .t-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-input .t-icon, .t-is-error .t-form__controls-content .t-select .t-icon, .t-is-error .t-form__controls-content .t-radio-button .t-icon, .t-is-error .t-form__controls-content .t-cascader .t-icon, .t-is-error .t-form__controls-content .t-range-input .t-icon, .t-is-error .t-form__controls-content .t-textarea__inner .t-icon, .t-is-error .t-form__controls-content .t-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-select .t-fake-arrow, .t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-error .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-error .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-cascader.t-is-active, .t-is-error .t-form__controls-content .t-select.t-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-form__status .t-icon { color: var(--td-error-color); } .t-progress { 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-progress__inner { position: relative; height: 100%; background: var(--td-brand-color); border-radius: var(--td-radius-round); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-progress__info { margin-left: var(--td-comp-margin-s); color: var(--td-text-color-primary); white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-progress__icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-progress__bar { width: 100%; height: var(--td-size-3); overflow: hidden; background: var(--td-bg-color-component); border-radius: var(--td-radius-round); } .t-progress--thin { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-progress--plump { height: var(--td-comp-size-xxs); border-radius: calc(var(--td-comp-size-xxs) / 2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-progress--plump .t-progress__info { font-size: var(--td-font-size-body-small); } .t-progress--over-ten .t-progress__info { position: absolute; top: 50%; z-index: 10; right: var(--td-comp-margin-s); color: var(--td-text-color-anti); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .t-progress--under-ten .t-progress__info, .t-progress--under-ten .t-progress__inner { display: inline-block; } .t-progress--under-ten .t-progress__info { vertical-align: top; } .t-progress--circle { position: relative; } .t-progress--circle .t-progress__info { position: absolute; display: block; top: 50%; left: 50%; width: 100%; margin: 0; font-size: inherit; font-weight: 600; line-height: 1; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .t-progress--circle .t-progress__circle-outer { stroke: var(--td-bg-color-component); } .t-progress--circle .t-progress__circle-inner { stroke: var(--td-brand-color); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-progress--circle .t-progress__icon { font-size: 2.4em; } .t-progress--status--active .t-progress__inner::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; content: ""; -webkit-animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; animation: progress-active-animation 2s cubic-bezier(0.23, 0.99, 0.86, 0.2) infinite; background: var(--td-text-color-anti); opacity: 0.2; } .t-progress--status--success .t-progress__inner { background: var(--td-success-color); } .t-progress--status--success .t-progress__circle-inner { stroke: var(--td-success-color); } .t-progress--status--success .t-progress__icon { color: var(--td-success-color); } .t-progress--status--warning .t-progress__inner { background: var(--td-warning-color); } .t-progress--status--warning .t-progress__circle-inner { stroke: var(--td-warning-color); } .t-progress--status--warning .t-progress__icon { color: var(--td-warning-color); } .t-progress--status--error .t-progress__inner { background: var(--td-error-color); } .t-progress--status--error .t-progress__circle-inner { stroke: var(--td-error-color); } .t-progress--status--error .t-progress__icon { color: var(--td-error-color); } @-webkit-keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } @keyframes progress-active-animation { 0% { width: 0; opacity: 0.1; } 35% { width: 50%; opacity: 0.4; } 100% { width: 100%; opacity: 0; } } .t-popconfirm { 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; min-width: 160px; border-radius: var(--td-radius-medium); } .t-popconfirm .t-popup__content { padding: 0; } .t-popconfirm.t-popup[data-popper-placement^="top"] .t-popup__arrow { bottom: calc(-8px / 2); } .t-popconfirm__content { position: relative; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l); border-radius: var(--td-radius-medium); } .t-popconfirm__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } .t-popconfirm__body > .t-icon { display: inline-block; margin-right: var(--td-comp-margin-s); padding: calc(calc(var(--td-line-height-body-medium) - calc(var(--td-font-size-body-medium) + 6px)) / 2) 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-popconfirm__confirm { margin-left: var(--td-comp-margin-s); } .t-popconfirm__inner { display: inline-block; vertical-align: top; max-width: 320px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); } .t-popconfirm__icon--warning { color: var(--td-warning-color); } .t-popconfirm__icon--danger { color: var(--td-error-color); } .t-popconfirm__icon--default { color: var(--td-brand-color); } .t-popconfirm__buttons { text-align: right; margin-top: var(--td-comp-margin-l); } .t-popconfirm__buttons > span:last-child { margin-right: 0; } .t-textarea { 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; position: relative; width: 100%; } .t-textarea__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: var(--td-comp-size-xxxl); min-height: var(--td-comp-size-xxxl); border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); padding: calc(calc(var(--td-comp-size-m) - var(--td-line-height-body-medium)) / 2) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); font: var(--td-font-body-medium); color: var(--td-text-color-primary); resize: vertical; outline: none; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s, height 0s; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-textarea__inner:hover { border-color: var(--td-brand-color); } .t-textarea__inner:focus { 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-textarea__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner::placeholder { color: var(--td-text-color-placeholder); } .t-textarea__inner.t-is-success { border-color: var(--td-success-color); } .t-textarea__inner.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-textarea__inner.t-is-warning { border-color: var(--td-warning-color); } .t-textarea__inner.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-textarea__inner.t-is-error { border-color: var(--td-error-color); } .t-textarea__inner.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-textarea__info_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: var(--td-comp-margin-s); -moz-column-gap: var(--td-comp-margin-s); column-gap: var(--td-comp-margin-s); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-textarea__info_wrapper_align { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .t-textarea__limit { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-textarea .t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); cursor: not-allowed; } .t-textarea .t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-textarea .t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-textarea .t-resize-none { resize: none; } .t-textarea__tips { height: auto; min-height: var(--td-comp-size-xs); font: var(--td-font-body-small); display: inline-block; } .t-textarea__tips--normal { color: var(--td-text-color-placeholder); } .t-textarea__tips--success { color: var(--td-success-color); } .t-textarea__tips--warning { color: var(--td-warning-color); } .t-textarea__tips--error { color: var(--td-error-color); } @-webkit-keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } @keyframes changeColor { from { color: var(--td-brand-color-hover); } to { color: var(--td-brand-color-active); } } .t-breadcrumb { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-breadcrumb__separator { margin: 0 var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-breadcrumb__separator .t-icon { color: var(--td-text-color-placeholder); } .t-breadcrumb__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-placeholder); text-decoration: none; } .t-breadcrumb__item.t-is-current { color: var(--td-text-color-primary); } .t-breadcrumb__item.t-is-current .t-icon { color: var(--td-text-color-placeholder); } .t-breadcrumb__item:last-child { color: var(--td-text-color-primary); } .t-breadcrumb__item:last-child .t-breadcrumb__separator { display: none; } .t-breadcrumb__item .t-icon { font-size: var(--td-font-size-body-large); } .t-breadcrumb__item .t-link { color: inherit; text-decoration: none; } .t-breadcrumb__item .t-link:hover { color: var(--td-brand-color); } .t-breadcrumb__item .t-is-disabled { cursor: not-allowed; } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner { color: var(--td-text-color-disabled); } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:hover { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-breadcrumb__item .t-is-disabled .t-breadcrumb__inner:active { -webkit-animation: none; animation: none; } .t-breadcrumb__item--arrow { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .t-breadcrumb__item--slash { margin: 0 var(--td-comp-margin-xs); line-height: 0; color: var(--td-text-color-placeholder); display: inline-block; vertical-align: middle; } .t-breadcrumb__inner { font: var(--td-font-body-medium); word-break: break-all; display: inline-block; vertical-align: middle; } .t-breadcrumb__inner .t-icon { margin: 0 var(--td-comp-margin-xs); } .t-breadcrumb__select { position: relative; } .t-breadcrumb__select:hover .t-breadcrumb__option { display: block; } .t-breadcrumb__select-item:hover .t-icon { color: var(--td-brand-color); } .t-breadcrumb__option { display: none; position: absolute; top: 28px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); max-width: 120px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .t-breadcrumb__option-item { padding: 8px; font: var(--td-font-body-medium); color: var(--td-text-color-primary); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-breadcrumb__option-item:hover { color: var(--td-brand-color); } .t-breadcrumb__option-item.t-is-active { color: var(--td-brand-color); } .t-breadcrumb__inner-msg { display: none; position: absolute; left: 50%; bottom: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 300px; padding: 8px; color: var(--td-text-color-primary); background: var(--td-bg-color-container); border-radius: calc(var(--td-radius-default) * 0.5); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); z-index: 20; } .t-breadcrumb__inner-msg::before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 8px 6px 0; border-color: var(--td-bg-color-container) transparent transparent transparent; z-index: 20; } .t-breadcrumb--text-overflow { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-breadcrumb--text-overflow:hover .t-breadcrumb__inner-msg { display: block; } .t-breadcrumb--text-overflow .t-breadcrumb__inner { max-width: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-breadcrumb--text-overflow .t-breadcrumb__inner-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .t-breadcrumb--text-overflow .t-breadcrumb__inner:hover { color: var(--td-brand-color); cursor: pointer; } .t-breadcrumb--text-overflow .t-breadcrumb__inner:active { -webkit-animation: 0.2s linear changeColor; animation: 0.2s linear changeColor; } .t-dropdown { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; background-color: var(--td-bg-color-container); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-primary); position: relative; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border: 0.5px solid var(--td-component-border); border-radius: var(--td-radius-medium); } .t-dropdown__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: var(--td-radius-medium); padding: var(--td-pop-padding-m); gap: 2px; overflow-y: auto; overflow-x: hidden; } @-moz-document url-prefix() { .t-dropdown__menu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dropdown__menu::-webkit-scrollbar { width: 8px; height: 8px; } .t-dropdown__menu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dropdown__menu::-webkit-scrollbar-thumb:vertical:hover, .t-dropdown__menu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dropdown__menu .t-divider { margin: var(--td-comp-margin-xs) var(--td-comp-margin-s) var(--td-comp-margin-xxs) var(--td-comp-margin-s); color: var(--td-brand-color-light); width: calc(100% - var(--td-comp-margin-s) * 2); } .t-dropdown__menu .t-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--right { left: calc(100% - 14px); } .t-dropdown__menu--overflow .t-dropdown__submenu-wrapper--left { right: calc(100% - 14px); } .t-dropdown__submenu { background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); z-index: 1100; position: absolute; padding: var(--td-pop-padding-m); display: none; overflow-y: auto; overflow-x: visible; } @-moz-document url-prefix() { .t-dropdown__submenu { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dropdown__submenu::-webkit-scrollbar { width: 8px; height: 8px; } .t-dropdown__submenu::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dropdown__submenu::-webkit-scrollbar-thumb:vertical:hover, .t-dropdown__submenu::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dropdown__submenu ul { list-style: none; display: grid; padding-left: 0; gap: 2px; } .t-dropdown__submenu--disabled { visibility: hidden; } .t-dropdown__submenu .t-dropdown__item-direction { margin: 0 0 0 var(--td-comp-margin-s); } .t-dropdown__submenu-wrapper--right { left: calc(100% - 6px); } .t-dropdown__submenu-wrapper--left { right: calc(100% - 6px); } .t-dropdown__item { border-radius: var(--td-radius-default); font: var(--td-font-body-medium); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; -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); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: calc(var(--td-comp-paddingTB-xs) - 1px) var(--td-comp-paddingLR-s); --ripple-color: var(--td-bg-color-container-active); } .t-dropdown__item-icon { display: -webkit-box; display: -ms-flexbox; display: flex; color: currentcolor; margin-right: var(--td-comp-margin-s); font-size: var(--td-font-size-body-large); } .t-dropdown__item:hover > div > div { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-dropdown__item--disabled { cursor: not-allowed; } .t-dropdown__item-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } .t-dropdown__item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-dropdown__item.t-dropdown__item--suffix .t-dropdown__item-sub-icon { color: currentcolor; font-size: var(--td-font-size-body-large); -ms-flex-negative: 0; flex-shrink: 0; } .t-dropdown__item--theme-default { color: var(--td-text-color-primary); } .t-dropdown__item--theme-default:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-default.t-dropdown__item--active { color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-dropdown__item--theme-default.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-default.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-default.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-default.t-dropdown__item--suffix:hover { background-color: var(--td-brand-color-light); color: var(--td-brand-color); } .t-dropdown__item--theme-success { color: var(--td-success-color); } .t-dropdown__item--theme-success:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-success.t-dropdown__item--active { background-color: var(--td-success-color-light); } .t-dropdown__item--theme-success.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-success.t-dropdown__item-disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-success.t-dropdown__item-disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-success.t-dropdown__item--suffix:hover { background-color: var(--td-success-color-light); } .t-dropdown__item--theme-error { color: var(--td-error-color); } .t-dropdown__item--theme-error:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-error.t-dropdown__item--active { background-color: var(--td-error-color-light); } .t-dropdown__item--theme-error.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-error.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-error.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-error.t-dropdown__item--suffix:hover { background-color: var(--td-error-color-light); } .t-dropdown__item--theme-warning { color: var(--td-warning-color); } .t-dropdown__item--theme-warning:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-warning.t-dropdown__item--active { background-color: var(--td-warning-color-light); } .t-dropdown__item--theme-warning.t-dropdown__item--active:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning.t-dropdown__item--active:active { background-color: var(--td-bg-color-container-active); } .t-dropdown__item--theme-warning.t-dropdown__item--disabled { color: var(--td-text-color-disabled); } .t-dropdown__item--theme-warning.t-dropdown__item--disabled:hover { background-color: var(--td-bg-color-container-hover); } .t-dropdown__item--theme-warning.t-dropdown__item--suffix:hover { background-color: var(--td-warning-color-light); } .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, .t-slider__button-wrapper--vertical { 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-select-option__highlight-item .t-is-highlight { color: var(--td-brand-color); } .t-auto-complete { width: 100%; } .t-auto-complete .t-input__suffix-clear { display: none; } .t-auto-complete:hover .t-input__suffix-clear { display: inline-block; } .t-cascader .t-fake-arrow { color: var(--td-text-color-placeholder); } .t-cascader .t-fake-arrow--active { color: var(--td-brand-color); } .t-cascader__popup .t-popup__content { padding: 0; -webkit-box-shadow: var(--td-shadow-2); box-shadow: var(--td-shadow-2); border-radius: var(--td-radius-medium); border: 0.5px solid var(--td-component-border); overflow: hidden; } .t-cascader__panel { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; } .t-cascader__panel.t-cascader--normal { height: 200px; } .t-cascader__panel.t-cascader--multiple { height: 280px; } .t-cascader__panel--empty { width: 100%; height: var(--td-comp-size-s); line-height: var(--td-comp-size-s); color: var(--td-text-color-disabled); margin: var(--td-pop-padding-m); text-align: center; padding-left: 0; } .t-cascader__panel--empty:hover { background: none; cursor: default; } .t-cascader__menu { width: 148px; overflow: auto; -webkit-box-sizing: content-box; box-sizing: content-box; padding: var(--td-pop-padding-m); background: var(--td-bg-color-container); } .t-cascader__menu.t-size-l { padding: var(--td-pop-padding-l); } .t-cascader__menu.t-size-s { padding: var(--td-pop-padding-s); } .t-cascader__menu--segment { border-right: 1px solid var(--td-component-stroke); } .t-cascader__menu--filter { width: auto; min-width: 148px; } .t-cascader__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: var(--td-comp-size-s); font: var(--td-font-body-medium); color: var(--td-text-color-primary); padding: 0 var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); margin-top: var(--td-comp-margin-xxs); -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 { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding: 0px var(--td-comp-paddingLR-s); } .t-cascader__item.t-size-l { height: var(--td-comp-size-m); font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .t-cascader__item.t-is-disabled { color: var(--td-text-color-disabled); background-color: transparent; cursor: not-allowed; } .t-cascader__item-icon.t-icon { position: absolute; height: 100%; right: 0; top: 0; background: transparent; margin: 0 8px; font-size: 16px; color: var(--td-text-color-placeholder); } .t-cascader__item-icon.t-loading { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--td-text-color-brand); } .t-cascader__item.t-is-expanded { background: var(--td-brand-color-light); color: var(--td-text-color-brand); } .t-cascader__item.t-is-expanded .t-icon-chevron-right { color: var(--td-text-color-brand); } .t-cascader__item.t-is-expanded:hover { cursor: pointer; } .t-cascader__item:first-child { margin-top: 0; } .t-cascader__item .t-checkbox { max-width: 100%; } .t-cascader__item .t-checkbox .t-checkbox__input { -ms-flex-negative: 0; flex-shrink: 0; } .t-cascader__item .t-checkbox .t-checkbox__label { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-cascader__item .t-checkbox .t-checkbox__label .t-cascader__item__label--filter { color: var(--td-text-color-brand); } .t-cascader__item--with-icon { padding: 0 calc(var(--td-comp-paddingLR-s) + 14px) 0 var(--td-comp-paddingLR-s); } .t-cascader__item--leaf .t-checkbox { width: 100%; } .t-cascader__item-label { display: block; position: relative; white-space: nowrap; padding: 0; } .t-cascader__item-label--ellipsis { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-cascader__item-label--filter { color: var(--td-text-color-brand); } .t-cascader__item:hover:not(.t-is-expanded):not(.t-is-disabled) { background: var(--td-bg-color-container-hover); cursor: pointer; } .t-cascader__item.t-is-selected { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-cascader__item.t-is-selected .t-checkbox__label { color: var(--td-brand-color); } .t-date-picker, .t-date-range-picker { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; 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-date-picker__header-controller-month-popup > .t-popup__content, .t-date-picker__header-controller-year-popup > .t-popup__content { max-height: 160px; } .t-date-picker__panel-container > .t-popup__content, .t-date-range-picker__panel-container > .t-popup__content { padding: 0; min-width: 280px; } .t-date-picker__panel, .t-date-range-picker__panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-date-picker__panel--direction-row, .t-date-range-picker__panel--direction-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .t-date-picker__panel .t-time-picker__panel, .t-date-range-picker__panel .t-time-picker__panel { width: 216px; } .t-date-picker__panel .t-time-picker__panel-section-body, .t-date-range-picker__panel .t-time-picker__panel-section-body { padding: 0; } .t-date-picker__panel .t-time-picker__panel-body, .t-date-range-picker__panel .t-time-picker__panel-body { margin: 0; } .t-date-picker__panel-content, .t-date-range-picker__panel-content, .t-date-range-picker__panel-content-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-date-picker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: var(--td-comp-margin-m); width: 100%; } .t-date-picker__header-controller { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: var(--td-comp-margin-s); } .t-date-picker__header-controller .t-date-picker__header-controller-month { width: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-date-picker__header-controller .t-date-picker__header-controller-year { width: 78px; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-date-picker__table table { width: 100%; border-collapse: collapse; } .t-date-picker__table table th { text-align: center; color: var(--td-text-color-secondary); font-weight: 400; } .t-date-picker__table table td.t-date-picker__cell { text-align: center; font-weight: 500; } .t-date-picker__table table th, .t-date-picker__table table td.t-date-picker__cell { padding: 0; border: 0; line-height: var(--td-line-height-body-medium); } .t-date-picker__table table thead::after { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .t-date-picker__table table thead::before { content: "-"; display: block; line-height: var(--td-comp-margin-xs); color: transparent; } .t-date-picker__table-week-row { cursor: pointer; position: -webkit-sticky; position: sticky; } .t-date-picker__table-week-row .t-date-picker__cell:first-child .t-date-picker__cell-inner { color: var(--td-text-color-disabled); } .t-date-picker__table-week-row .t-date-picker__cell:hover .t-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background: none; } .t-date-picker__table-week-row::after { content: ""; position: absolute; left: var(--td-comp-margin-xxxl); right: 0; top: calc(var(--td-comp-margin-xs) - 1px); z-index: 10; height: var(--td-comp-size-xs); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); pointer-events: none; } .t-date-picker__table-week-row:hover .t-date-picker__cell:first-child .t-date-picker__cell-inner { color: var(--td-brand-color); } .t-date-picker__table-week-row:hover::after { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .t-date-picker__table-week-row--active::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color); } .t-date-picker__table-week-row--active .t-date-picker__cell:first-child .t-date-picker__cell-inner { color: var(--td-brand-color); } .t-date-picker__table-week-row--active .t-date-picker__cell .t-date-picker__cell-inner { background: transparent; color: var(--td-text-color-anti); } .t-date-picker__table-week-row--range::after { opacity: 1; z-index: 0; background-color: var(--td-brand-color-light); } .t-date-picker__table-week-row--range .t-date-picker__cell .t-date-picker__cell-inner { background: transparent; } .t-date-picker__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-s); } .t-date-picker__footer--bottom { border-top: 1px solid var(--td-component-stroke); } .t-date-picker__footer--top { border-bottom: 1px solid var(--td-component-stroke); } .t-date-picker__footer--left { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid var(--td-component-stroke); } .t-date-picker__footer--left .t-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-date-picker__footer--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-left: 1px solid var(--td-component-stroke); } .t-date-picker__footer--right .t-date-picker__presets { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-date-picker__presets { display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-s); white-space: nowrap; min-width: var(--td-comp-size-xl); } .t-date-picker__presets .t-button { cursor: pointer; } .t-date-picker__presets a { color: var(--td-brand-color); } .t-date-picker__presets a:hover { color: var(--td-brand-color-hover); } .t-date-picker__panel-time, .t-date-range-picker__panel-time { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: calc(var(--td-comp-margin-m) / 2); padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); border-left: 1px solid var(--td-component-stroke); } .t-date-picker__panel-time-viewer, .t-date-range-picker__panel-time-viewer { display: -webkit-box; display: -ms-flexbox; display: flex; height: var(--td-comp-size-m); line-height: var(--td-line-height-body-medium); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--td-text-color-primary); } .t-date-picker__panel-time .t-time-picker__panel-body, .t-date-range-picker__panel-time .t-time-picker__panel-body { margin: 0; } .t-date-picker__panel-year, .t-date-picker__panel-month, .t-date-picker__panel-quarter, .t-date-picker__panel-week, .t-date-picker__panel-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: var(--td-pop-padding-xl); gap: var(--td-comp-margin-m); width: 280px; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before, .t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::before, .t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after, .t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--hover-highlight::after { opacity: 1; left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .t-date-picker__panel-year .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after, .t-date-picker__panel-month .t-date-picker__cell--hover-highlight + .t-date-picker__cell--active::after { opacity: 1; left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); z-index: 5; } .t-date-picker__panel-year .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before, .t-date-picker__panel-month .t-date-picker__cell--highlight + .t-date-picker__cell--highlight::before { left: calc(0px - calc(var(--td-comp-size-xs) + var(--td-comp-margin-xxl))); } .t-date-picker__panel-year .t-date-picker__header-controller-year, .t-date-picker__panel-month .t-date-picker__header-controller-year, .t-date-picker__panel-quarter .t-date-picker__header-controller-year { width: 130px; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-date-picker__panel-year .t-date-picker__table table tbody, .t-date-picker__panel-month .t-date-picker__table table tbody, .t-date-picker__panel-quarter .t-date-picker__table table tbody { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--td-comp-margin-m); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-date-picker__panel-year .t-date-picker__table table tbody tr, .t-date-picker__panel-month .t-date-picker__table table tbody tr, .t-date-picker__panel-quarter .t-date-picker__table table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-date-picker__panel-year .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before, .t-date-picker__panel-month .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before, .t-date-picker__panel-quarter .t-date-picker__cell--disabled + .t-date-picker__cell--disabled:before { left: calc(0px - var(--td-comp-size-xxxl)); } .t-date-picker__panel-year .t-date-picker__cell:nth-child(1), .t-date-picker__panel-month .t-date-picker__cell:nth-child(1), .t-date-picker__panel-quarter .t-date-picker__cell:nth-child(1) { text-align: left; } .t-date-picker__panel-year .t-date-picker__cell:nth-child(3), .t-date-picker__panel-month .t-date-picker__cell:nth-child(3), .t-date-picker__panel-quarter .t-date-picker__cell:nth-child(3) { text-align: right; } .t-date-picker__panel-year .t-date-picker__cell-inner, .t-date-picker__panel-month .t-date-picker__cell-inner, .t-date-picker__panel-quarter .t-date-picker__cell-inner { width: var(--td-comp-size-xxl); } .t-date-picker__cell { cursor: pointer; position: relative; padding: 0; } .t-date-picker__cell::before, .t-date-picker__cell::after { content: ""; position: absolute; top: 50%; right: -5%; left: -5%; z-index: 1; opacity: 0; border-radius: var(--td-radius-default); height: var(--td-comp-size-xs); -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); transition: opacity 0.2s cubic-bezier(0, 0, 0.15, 1); } .t-date-picker__cell:hover .t-date-picker__cell-inner { -webkit-box-shadow: inset 0 0 0 1px var(--td-brand-color); box-shadow: inset 0 0 0 1px var(--td-brand-color); } .t-date-picker__cell-inner { position: relative; z-index: 5; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); margin: calc(var(--td-comp-margin-xs) - 1px); border-radius: var(--td-radius-default); -webkit-transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear; transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-date-picker__cell--now .t-date-picker__cell-inner { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-date-picker__cell--hover-highlight::after { opacity: 1; background-color: var(--td-brand-color-light); } .t-date-picker__cell--highlight::before { opacity: 1; background-color: var(--td-brand-color-light); } .t-date-picker__cell--highlight.t-date-picker__cell--hover-highlight::after { opacity: 1; background-color: rgba(0, 0, 0, 0.06); } .t-date-picker__cell--additional:hover .t-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .t-date-picker__cell--additional .t-date-picker__cell-inner { color: var(--td-text-color-disabled); } .t-date-picker__cell--active .t-date-picker__cell-inner { color: var(--td-text-color-anti); background-color: var(--td-brand-color); } .t-date-picker__cell--active-start::before { opacity: 1; left: calc(calc(var(--td-comp-margin-xs) - 1px) * 2); border-top-left-radius: var(--td-radius-default); border-bottom-left-radius: var(--td-radius-default); } .t-date-picker__cell--active-start:hover::before { left: -5%; } .t-date-picker__cell--active-end::before { opacity: 1; right: calc(calc(var(--td-comp-margin-xs) - 1px) * 2); border-top-right-radius: var(--td-radius-default); border-bottom-right-radius: var(--td-radius-default); } .t-date-picker__cell--active-end:hover::before { right: -5%; } .t-date-picker__cell--disabled:hover .t-date-picker__cell-inner { -webkit-box-shadow: none; box-shadow: none; background-color: var(--td-bg-color-component-disabled); } .t-date-picker__cell--disabled .t-date-picker__cell-inner { cursor: not-allowed; color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-date-picker__cell--disabled + .t-date-picker__cell--disabled::before { opacity: 1; left: calc(0px - var(--td-comp-size-l)); background-color: var(--td-bg-color-component-disabled); border-radius: var(--td-radius-default); } .t-date-picker__input--placeholder input { color: var(--td-text-color-placeholder); } .t-upload { 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-upload .t-is-bordered { border: 1px solid var(--td-component-border); } .t-upload .t-upload__trigger { display: inline-block; } .t-upload .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload .t-icon-check-circle-filled { color: var(--td-success-color); } .t-upload .t-icon-error-circle-filled { color: var(--td-error-color); } .t-upload .t-icon-time-filled { color: var(--td-text-color-placeholder); } .t-upload .t-icon-add { color: var(--td-text-color-primary); } .t-upload__list-file { 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; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .t-upload__list-file .t-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .t-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .t-upload__list-item.t-is--error .t-upload__list-name { color: var(--td-error-color); } .t-upload__list-item.t-is--error .t-upload__list-file .t-icon { color: var(--td-error-color); } .t-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload-list__control { cursor: pointer; } .t-upload-list__control:hover { color: var(--td-error-color); } .t-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .t-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload--highlight { color: var(--td-text-color-brand); } .t-upload__single-name { margin-right: var(--td-comp-margin-s); } .t-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .t-upload__card .t-is-disabled :hover { cursor: not-allowed; } .t-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .t-upload__card-item::after { content: ""; display: block; } .t-upload__card-item:hover .t-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-upload__card-item.t-is--error .t-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-item.t-is--error .t-upload__card-status { color: var(--td-error-color); } .t-upload__card-item.t-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__card .t-icon-loading { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; 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; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .t-upload__card-container { width: 110px; height: 110px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .t-upload__card-container:hover:not(.t-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__card-container > .t-icon { color: var(--td-text-color-placeholder); } .t-upload__card-container > .t-icon, .t-upload__card-container .t-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-container > p, .t-upload__card-container .t-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .t-upload__card-status-wrap { text-align: center; } .t-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-status-wrap .t-icon, .t-upload__card-status-wrap .t-loading { font-size: var(--td-comp-size-xs); } .t-upload__card-image { max-width: 100%; max-height: 100%; } .t-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .t-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; 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; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .t-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .t-upload__card-mask-item > .t-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__dialog .t-dialog { max-width: 80%; } .t-upload__dialog .t-dialog--default { padding: 32px; } .t-upload__dialog .t-dialog-body { padding-bottom: 0; } .t-upload__dialog .t-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .t-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__dragger.t-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .t-upload__dragger:hover { border-color: var(--td-brand-color); } .t-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .t-upload__dragger .t-size-s { display: block; } .t-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__dragger-error { border-color: var(--td-error-color); } .t-upload__dragger-error:hover { border-color: var(--td-error-color); } .t-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .t-upload__dragger-text .t-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .t-upload__tips.t-upload__tips-error { color: var(--td-error-color); } .t-upload__tips.t-upload__tips-warn { color: var(--td-warning-color); } .t-upload__placeholder { color: var(--td-text-color-placeholder); } .t-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .t-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-display-text .t-upload__flow-status .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .t-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .t-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-file-input .t-upload__trigger { margin-left: var(--td-comp-margin-l); } .t-upload__single-file-input .t-upload__single-progress { white-space: nowrap; } .t-upload__single-file-input .t-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-upload__dragger-progress .t-icon, .t-upload__dragger-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); 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; -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square { width: 100%; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square .t-space-item { text-align: center; } .t-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .t-upload__dragger-img-wrap + .t-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - calc(110px + var(--td-comp-margin-l))); } .t-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-upload__dragger-progress-info .t-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .t-upload__dragger-progress-info .t-button:hover { background-color: transparent; } .t-upload__dragger-progress-cancel, .t-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .t-upload__dragger-progress-cancel:hover, .t-upload__dragger-progress-reupload:hover { border-color: transparent; } .t-upload__dragger-delete-btn:hover, .t-upload__dragger-upload-btn:hover { border-color: transparent; } .t-upload__flow-image-flow { width: 498px; } .t-upload__flow { min-width: 498px; max-width: 960px; } .t-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .t-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .t-upload__flow-bottom .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-upload__flow-empty { width: 100%; height: 184px; 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; color: var(--td-text-color-placeholder); } .t-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .t-upload__flow-table > thead > tr, .t-upload__flow-table > tbody > tr, .t-upload__flow-table > tfoot > tr, .t-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td, .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .t-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__flow-button:hover { color: var(--td-text-color-secondary); } .t-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__flow-status .t-icon, .t-upload__flow-status .t-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .t-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__icon-delete, .t-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__icon-delete:hover, .t-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-icon.t-upload__single-input-clear { display: none; } .t-upload__single-input-preview:hover .t-upload__single-input-clear { display: initial; } .t-upload__single-input-preview:hover .t-upload__status-icon { display: none; } .t-upload .t-upload__single-name { color: var(--td-text-color-secondary); } .t-upload .t-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); 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; cursor: pointer; } .t-upload .t-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .t-upload__card-name { margin-top: 8px; } .t-upload--theme-file-input { width: 100%; } .t-upload__dragger-btns > .t-button { padding: 0; } .t-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__card-container.t-is-disabled { cursor: not-allowed; } .t-upload__card-container.t-is-disabled .t-upload__add-text { color: var(--td-text-color-disabled); } .t-upload__card-container.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } /* Swiper */ .t-swiper { 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; position: relative; } .t-swiper__wrap { display: block; position: relative; height: 100%; } .t-swiper__content { position: relative; z-index: 1; overflow: hidden; } .t-swiper__container { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; height: 100%; z-index: 1; } .t-swiper__container__item { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: 100%; display: inline-block; } .t-swiper__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-swiper__arrow svg.t-icon { width: 20px; height: 20px; } .t-swiper__arrow svg.t-icon::before { font-size: 24px; } .t-swiper__arrow--default .t-swiper__arrow-left { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; left: 16px; } .t-swiper__arrow--default .t-swiper__arrow-left:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-swiper__arrow--default .t-swiper__arrow-left:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-swiper__arrow--default .t-swiper__arrow-right { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; width: 24px; height: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 2; background-color: transparent; color: var(--td-font-white-2); -webkit-transition: 0.2s linear; transition: 0.2s linear; cursor: pointer; right: 16px; } .t-swiper__arrow--default .t-swiper__arrow-right:hover { color: var(--td-bg-color-container); background-color: var(--td-font-white-4); border-radius: var(--td-radius-default); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-swiper__arrow--default .t-swiper__arrow-right:active { background-color: var(--td-font-white-3); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-swiper-card .t-swiper__container { display: block; } .t-swiper-card .t-swiper__container .t-is-active { z-index: 2; } .t-swiper-card .t-swiper__card { position: absolute; top: 0; left: 0; width: 41.5%; height: 100%; z-index: 0; } .t-swiper-fade .t-swiper__container { display: block; } .t-swiper-fade .t-swiper__fade { position: absolute; top: 0; left: 0; } .t-swiper__navigation { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; margin: 0; padding: 0; z-index: 2; } .t-swiper__navigation > li { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; list-style-type: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-swiper__navigation .t-swiper__arrow svg.t-icon { width: 16px; height: 16px; } .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 100%; height: 3px; } .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-left: 0; } .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { width: 24px; } .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper__navigation-dots-bar .t-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: 14px; height: auto; } .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { border-radius: calc(3px / 2); } .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { width: 100%; height: 3px; } .t-swiper__navigation-dots-bar .t-swiper__navigation-item:nth-child(1) { margin-left: 0; } .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active { width: 24px; } .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper__navigation-dots .t-swiper__navigation-item { cursor: pointer; margin: 0 0 0 6px; padding: 18px 0; width: var(--td-size-2); height: auto; } .t-swiper__navigation-dots .t-swiper__navigation-item span { border-radius: 50%; } .t-swiper__navigation-dots .t-swiper__navigation-item span { width: 100%; height: var(--td-size-2); } .t-swiper__navigation-dots .t-swiper__navigation-item:nth-child(1) { margin-left: 0; } .t-swiper__navigation-dots .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper__navigation-dots .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper__navigation-dots .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper__navigation-dots .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--vertical .t-swiper__container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-swiper--vertical .t-swiper__navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; right: 0; bottom: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 3px; height: 100%; } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-top: 0; } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { height: 24px; } .t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; height: 14px; } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { border-radius: calc(3px / 2); } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { width: 3px; height: 100%; } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item:nth-child(1) { margin-top: 0; } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active { height: 24px; } .t-swiper--vertical .t-swiper__navigation-dots-bar .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item { cursor: pointer; margin: 6px 0 0 0; padding: 0 18px; width: auto; max-height: var(--td-size-2); } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span { border-radius: 50%; } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span { width: var(--td-size-2); height: 100%; } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item:nth-child(1) { margin-top: 0; } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--vertical .t-swiper__navigation-dots .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--outside .t-swiper__navigation { bottom: -36px; } .t-swiper--outside .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper--outside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--outside .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation { bottom: auto; right: -36px; } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-swiper--inside .t-swiper__navigation { bottom: 0; } .t-swiper--inside .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-medium) + 12px)); height: var(--td-line-height-body-medium); line-height: var(--td-line-height-body-medium); } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-medium); height: var(--td-line-height-body-medium); cursor: pointer; } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper--inside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--large .t-swiper__arrow i.t-icon::before { font-size: 32px; } .t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-left { width: 32px; height: 32px; left: 24px; } .t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-right { width: 32px; height: 32px; right: 24px; } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 0 0 0 8px; padding: 24px 0; width: 21px; height: auto; } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 100%; height: 4px; } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-left: 0; } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { width: 36px; } .t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--large .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-large) + 12px)); height: var(--td-line-height-body-large); line-height: var(--td-line-height-body-large); } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-large); height: var(--td-line-height-body-large); cursor: pointer; } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper--large .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--large.t-swiper--outside .t-swiper__navigation { bottom: -48px; } .t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 8px 0 0 0; padding: 0 24px; width: auto; height: 21px; } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 4px; height: 100%; } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-top: 0; } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { height: 36px; } .t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation { right: -48px; } .t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-swiper--small .t-swiper__arrow i.t-icon::before { font-size: 16px; } .t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-left { width: 16px; height: 16px; left: 8px; } .t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-right { width: 16px; height: 16px; right: 8px; } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 0 0 0 4px; padding: 12px 0; width: 9px; height: auto; } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 100%; height: 2px; } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-left: 0; } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { width: 15px; } .t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--small .t-swiper__navigation--fraction { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: auto; right: auto; bottom: calc(0px - calc(var(--td-line-height-body-small) + 12px)); height: var(--td-line-height-body-small); line-height: var(--td-line-height-body-small); } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:hover { color: var(--td-text-color-primary); } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:active { color: var(--td-brand-color-active); } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right { 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; z-index: 2; background-color: transparent; color: var(--td-text-color-secondary); width: var(--td-line-height-body-small); height: var(--td-line-height-body-small); cursor: pointer; } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:hover { color: var(--td-text-color-primary); } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:active { color: var(--td-brand-color-active); } .t-swiper--small .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction { display: inline-block; font-size: var(--td-font-size-body-small); color: var(--td-text-color-secondary); margin: 0; } .t-swiper--small.t-swiper--outside .t-swiper__navigation { bottom: -24px; } .t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item { cursor: pointer; margin: 4px 0 0 0; padding: 0 12px; width: auto; height: 9px; } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { width: 2px; height: 100%; } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) { margin-top: 0; } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span { background: var(--td-font-white-4); } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-font-white-2); } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-bg-color-container); } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active { height: 15px; } .t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span { background-color: var(--td-bg-color-container); } .t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation { right: -24px; } .t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span { background-color: var(--td-text-color-disabled); } .t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover { background-color: var(--td-text-color-primary); } .t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active { background-color: var(--td-brand-color-active); } .t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span { background-color: var(--td-brand-color-active); } .t-comment { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; width: 100%; color: var(--td-text-color-primary); } .t-comment__inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-comment__avatar { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-xxl); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-comment__avatar-image { width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); border-radius: var(--td-radius-circle); } .t-comment__content { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; font: var(--td-font-body-medium); } .t-comment__author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: var(--td-comp-margin-s); } .t-comment__name { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-title-medium); padding-right: var(--td-comp-paddingLR-s); cursor: pointer; } .t-comment__time { font: var(--td-font-body-small); padding-right: var(--td-comp-paddingLR-s); color: var(--td-text-color-placeholder); } .t-comment__detail { word-break: break-all; font: var(--td-font-body-medium); } .t-comment__quote { margin-top: var(--td-comp-margin-l); border-left: 4px solid var(--td-component-stroke); padding-left: var(--td-comp-margin-l); } .t-comment__quote .t-comment__name, .t-comment__quote .t-comment__detail { color: var(--td-text-color-secondary); } .t-comment__actions { margin-top: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; list-style: none; padding: 0; gap: var(--td-comp-margin-s); } .t-comment__actions .t-button--variant-text { color: var(--td-text-color-placeholder); } .t-comment__actions .t-button--variant-text .t-button__text { gap: var(--td-comp-margin-s); } .t-comment__reply { margin-top: var(--td-comp-margin-l); margin-left: calc(var(--td-comp-size-xxxl) + var(--td-comp-margin-xxl)); background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-comment__reply .t-button--variant-text { color: var(--td-text-color-placeholder); } .t-comment__reply .t-button--variant-text:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-comment__reply .t-button--variant-text .t-button__text { gap: var(--td-comp-margin-s); } .t-transfer { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; background: transparent; color: var(--td-text-color-primary); max-height: 100%; } .t-transfer__list { position: relative; display: inline-block; min-width: 200px; height: 200px; padding-top: var(--td-comp-size-xxl); border: 0; word-break: break-word; vertical-align: middle; } .t-transfer__list-source, .t-transfer__list-target { border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-medium); } .t-transfer__list-header { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; top: 0; height: var(--td-comp-size-xxl); line-height: var(--td-comp-size-xxl); width: calc(200px - var(--td-comp-margin-s) * 2); padding: 0 var(--td-comp-paddingLR-s); margin: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-transfer__list-header + :not(.t-transfer__list--with-search) { border-top: 1px solid var(--td-border-level-1-color); } .t-transfer__list-header .t-checkbox { margin-right: 0; } .t-transfer__list-header .t-checkbox__label { margin: 0; } .t-transfer__list-header div { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-transfer__list-header div > span { margin-left: var(--td-comp-margin-s); } .t-transfer__list-header > span { color: var(--td-text-color-placeholder); } .t-transfer__list-body { position: relative; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-transfer__list--with-search { padding-top: var(--td-comp-size-m); border-top: 0; } .t-transfer__list-content { height: 100%; width: 100%; overflow: auto; } .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: var(--td-comp-margin-xs); margin: var(--td-comp-margin-s) 0; } .t-transfer__list-content .t-checkbox-group .t-checkbox { margin-right: var(--td-comp-margin-s); --ripple-color: var(--td-bg-color-container-active); } .t-transfer__list-content .t-checkbox-group .t-checkbox + .t-checkbox { margin-left: var(--td-comp-margin-s); } .t-transfer__list-content .t-checkbox-group .t-checkbox__label { margin: 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-transfer__list-content .t-checkbox-group .t-checkbox__label > span { margin-left: var(--td-comp-margin-s); display: inline-block; } .t-transfer__list .t-transfer__list-item { padding: var(--td-comp-paddingLR-xs) var(--td-comp-paddingLR-s); display: -webkit-box; display: -ms-flexbox; display: flex; cursor: pointer; margin: 0 var(--td-comp-margin-s); border-radius: var(--td-radius-default); -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); } .t-transfer__list .t-transfer__list-item:first-child { margin-top: 0; } .t-transfer__list .t-transfer__list-item.t-is-disabled:hover { background: transparent; } .t-transfer__list-item:hover { background: var(--td-bg-color-container-hover); -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); } .t-transfer__list-item.t-is-checked { background: var(--td-brand-color-light); } .t-transfer__list-wrapper { position: relative; height: 100%; width: 100%; overflow: auto; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-transfer__list-pagination { height: var(--td-comp-size-xs); vertical-align: middle; padding: var(--td-comp-paddingTB-m); } .t-transfer__list-footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid var(--td-border-level-1-color); width: 100%; } .t-transfer__operations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto var(--td-comp-margin-s); vertical-align: middle; overflow: hidden; gap: var(--td-comp-margin-l); } .t-transfer__operations .t-icon { font-size: var(--td-comp-size-xxxs); } .t-transfer__operations .t-icon + .t-button__text { margin-left: 0; } .t-transfer__empty { text-align: center; position: absolute; color: var(--td-text-color-placeholder); top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .t-transfer__search-wrapper { position: absolute; top: 0; width: 100%; padding: 0 var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-transfer__search .t-transfer__list { height: 240px; } .t-transfer--with-tree .t-transfer__list { height: auto; } .t-transfer--with-tree .t-transfer__list .t-tree { padding: 0 var(--td-comp-paddingLR-m); margin: var(--td-comp-margin-s) 0; } .t-transfer__pagination .t-transfer__list { height: 240px; padding-bottom: calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2); } .t-transfer__footer .t-transfer__list { height: 248px; padding-bottom: 48px; } .t-transfer__pagination.t-transfer__footer .t-transfer__list { height: 288px; padding-bottom: calc(calc(var(--td-comp-size-xs) + var(--td-comp-paddingTB-m) * 2) + 48px); } .t-transfer__search.t-transfer__footer .t-transfer__list { height: 288px; padding-bottom: 48px; } .t-transfer__search.t-transfer__pagination .t-transfer__list { height: 280px; padding-bottom: 48px; } .t-transfer__search.t-transfer__footer.t-transfer__pagination .t-transfer__list { height: 328px; padding-bottom: 88px; } .t-transfer__wrapper .t-transfer__list { height: 320px; width: 206px; overflow: scroll; } .t-avatar { 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; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .t-avatar.t-avatar__icon { font-size: var(--td-comp-size-xxs); } .t-avatar--circle { border-radius: var(--td-radius-circle); } .t-avatar--round { border-radius: var(--td-radius-default); } .t-avatar.t-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .t-avatar.t-size-s.t-avatar__icon { font-size: var(--td-comp-size-xxxs); } .t-avatar.t-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .t-avatar.t-size-l.t-avatar__icon { font-size: var(--td-comp-size-xs); } .t-avatar > .t-image__wrapper { max-width: 100%; max-height: 100%; } .t-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-avatar-group .t-avatar { border: 2px solid var(--td-bg-color-container); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child), .t-avatar-group.t-avatar--offset-right t-avatar-light-dom:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s, .t-avatar-group.t-avatar--offset-right t-avatar-light-dom:not(:last-child).t-size-s { margin-right: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l, .t-avatar-group.t-avatar--offset-right t-avatar-light-dom:not(:last-child).t-size-l { margin-right: calc(0px - var(--td-size-4)); } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(1) { z-index: 49; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2) { z-index: 48; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3) { z-index: 47; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4) { z-index: 46; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5) { z-index: 45; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6) { z-index: 44; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7) { z-index: 43; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8) { z-index: 42; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9) { z-index: 41; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10) { z-index: 40; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11) { z-index: 39; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12) { z-index: 38; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13) { z-index: 37; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14) { z-index: 36; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15) { z-index: 35; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16) { z-index: 34; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17) { z-index: 33; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18) { z-index: 32; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19) { z-index: 31; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20) { z-index: 30; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21) { z-index: 29; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22) { z-index: 28; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23) { z-index: 27; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24) { z-index: 26; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25) { z-index: 25; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26) { z-index: 24; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27) { z-index: 23; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28) { z-index: 22; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29) { z-index: 21; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30) { z-index: 20; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31) { z-index: 19; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32) { z-index: 18; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33) { z-index: 17; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34) { z-index: 16; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35) { z-index: 15; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36) { z-index: 14; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37) { z-index: 13; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38) { z-index: 12; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39) { z-index: 11; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40) { z-index: 10; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41) { z-index: 9; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42) { z-index: 8; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43) { z-index: 7; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44) { z-index: 6; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45) { z-index: 5; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46) { z-index: 4; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47) { z-index: 3; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48) { z-index: 2; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49) { z-index: 1; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50) { z-index: 0; } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child), .t-avatar-group.t-avatar--offset-left t-avatar-light-dom:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s, .t-avatar-group.t-avatar--offset-left t-avatar-light-dom:not(:first-child).t-size-s { margin-left: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l, .t-avatar-group.t-avatar--offset-left t-avatar-light-dom:not(:first-child).t-size-l { margin-left: calc(0px - var(--td-size-4)); } :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; } } .t-color-picker__panel { padding: 0; width: 256px; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-popup__content .t-color-picker__panel { background: transparent; -webkit-box-shadow: unset; box-shadow: unset; } .t-color-picker { 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-color-picker.t-popup__content { -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .t-color-picker__icon { 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; font-size: var(--td-comp-size-xxxs); background: transparent; -webkit-transition: 0.2s linear; transition: 0.2s linear; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); cursor: pointer; } .t-color-picker__icon:hover { background: var(--td-bg-color-container-hover); -webkit-transition: 0.2s linear; transition: 0.2s linear; } .t-color-picker__icon.t-is-disabled { color: var(--td-text-color-disabled); pointer-events: none; } .t-color-picker__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-pop-padding-xl); position: relative; z-index: 2; } .t-color-picker__head .t-color-picker__close { -ms-flex-negative: 0; flex-shrink: 0; } .t-color-picker__head + .t-color-picker__body { padding-top: 0; } .t-color-picker__body { padding: var(--td-pop-padding-xl); padding-bottom: calc(var(--td-pop-padding-xl) - 4px); } .t-color-picker__thumb { position: absolute; z-index: 1; outline: none; border-color: currentcolor; width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); background: var(--td-text-color-anti); color: var(--td-text-color-brand); padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-color-picker__thumb::before { content: ""; width: 100%; height: 100%; background: currentcolor; border-radius: var(--td-radius-circle); display: block; } .t-color-picker__saturation { height: 160px; border-radius: var(--td-radius-default); position: relative; overflow: hidden; background: transparent; } .t-color-picker__saturation::before, .t-color-picker__saturation::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .t-color-picker__saturation::before { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(transparent)); background: linear-gradient(90deg, #fff, transparent); } .t-color-picker__saturation::after { /* stylelint-disable-next-line color-no-hex */ background: -webkit-gradient(linear, left bottom, left top, from(#000), to(transparent)); background: linear-gradient(0deg, #000, transparent); } .t-color-picker__saturation .t-color-picker__thumb { width: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); height: calc(var(--td-comp-size-xxxs) + var(--td-size-1)); border-radius: var(--td-radius-circle); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .t-color-picker__slider-wrapper { border-radius: calc(8px / 2); padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); position: relative; } .t-color-picker__slider-wrapper--hue-type { /* stylelint-disable-next-line color-named */ background: red; } .t-color-picker__slider-wrapper--alpha-type { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__slider-padding { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: calc(8px / 2); } .t-color-picker__slider { height: 8px; position: relative; border-radius: calc(8px / 2); cursor: pointer; color: transparent; outline: none; z-index: 1; } .t-color-picker__slider .t-color-picker__thumb { -webkit-transform: translate(calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); transform: translate(calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) * -0.5), -50%); top: 50%; } .t-color-picker__slider .t-color-picker__rail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .t-color-picker__alpha, .t-color-picker__format { margin: var(--td-comp-margin-m) 0 0 0; } .t-color-picker__hue { /* stylelint-disable color-no-hex, color-named */ background: -webkit-gradient(linear, left top, right top, from(red), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(red)); background: linear-gradient(90deg, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red); } .t-color-picker__alpha .t-color-picker__rail { background: -webkit-gradient(linear, left top, right top, from(transparent), to(currentcolor)); background: linear-gradient(to right, transparent, currentcolor); } .t-color-picker__sliders-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: var(--td-comp-margin-m) 0; } .t-color-picker__sliders { width: 100%; } .t-color-picker__sliders-preview { -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-s); height: var(--td-comp-size-s); border-radius: var(--td-radius-default); overflow: hidden; background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__sliders-preview-inner { display: block; width: 100%; height: 100%; } .t-color-picker__gradient { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: var(--td-comp-margin-m); } .t-color-picker__gradient-slider { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-color-picker__gradient-degree { position: relative; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-m); width: var(--td-comp-size-xxl); } .t-color-picker__gradient-degree .t-input { margin: 0; font: var(--td-font-body-small); } .t-color-picker__gradient-degree .t-input-number { width: 100%; padding: 0; } .t-color-picker__gradient .gradient-thumbs { position: absolute; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; list-style: none; border-radius: inherit; cursor: pointer; } .t-color-picker__gradient .gradient-thumbs__item { top: 50%; left: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 0; cursor: pointer; } .t-color-picker__gradient .gradient-thumbs__item::before { display: none; } .t-color-picker__gradient .gradient-thumbs__item.t-is-active { z-index: 1; outline: 2px solid var(--td-component-border); } .t-color-picker__gradient .gradient-thumbs__item-inner { display: block; width: 100%; height: 100%; border-radius: var(--td-radius-circle); overflow: hidden; } .t-color-picker__gradient .gradient-thumbs__item-inner::before { content: ""; width: 100%; height: 100%; display: block; background-color: currentcolor; } .t-color-picker__format { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-color-picker__format--item:first-child { -ms-flex-negative: 0; flex-shrink: 0; } .t-color-picker__format--item:last-child { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-color-picker__format--item .t-size-m, .t-color-picker__format--item .t-input.t-size-m { font: var(--td-font-body-small); } .t-color-picker__format--item .t-input-number .t-input { margin: 0; } .t-color-picker__format--item .input-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; margin-left: var(--td-comp-margin-s); } .t-color-picker__format--item .input-group__item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0; margin-left: -1px; } .t-color-picker__format--item .input-group__item .t-input { padding: 0 1px; } .t-color-picker__format--item .input-group__item .t-input:focus, .t-color-picker__format--item .input-group__item .t-input:focus-within, .t-color-picker__format--item .input-group__item .t-input:hover { z-index: 1; } .t-color-picker__format--item .input-group__item:not(:first-child):not(:last-child) .t-input { border-radius: 0; } .t-color-picker__format--item .input-group__item:first-child:not(:last-child) .t-input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .t-color-picker__format--item .input-group__item:last-child:not(:first-child) .t-input { border-top-left-radius: 0; border-bottom-left-radius: 0; } .t-color-picker__format--item .input-group .t-input-number { width: 100%; padding: 0; max-width: 100%; } .t-color-picker__format-mode-select { width: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-color-picker__format-mode-select .t-select, .t-color-picker__format-mode-select .t-input { padding-right: 0; } .t-color-picker__format-mode-select .t-input--prefix > .t-input__suffix { padding-left: 0; } .t-color-picker__format-mode-select .t-select__right-icon { margin-right: var(--td-comp-margin-xs); } .t-color-picker__swatches-wrap { margin-top: var(--td-comp-margin-m); position: relative; } .t-color-picker__swatches-wrap .t-color-picker__swatches + .t-color-picker__swatches { margin-top: var(--td-comp-margin-m); } .t-color-picker__swatches-wrap .t-color-picker__swatches--title { font: var(--td-font-body-small); padding: 0; color: var(--td-text-color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-color-picker__swatches-wrap .t-color-picker__swatches--actions { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--actions .t-color-picker__icon { width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); margin-left: var(--td-comp-margin-s); } .t-color-picker__swatches-wrap .t-color-picker__swatches--items { width: 100%; list-style: none; display: grid; grid-template-columns: repeat(10, var(--td-comp-size-xxxs)); gap: calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9) calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9); max-height: calc(4 * calc(var(--td-comp-size-xxxs) + calc(calc(256px - calc(calc(var(--td-pop-padding-xl) * 2) + calc(var(--td-comp-size-xxxs) * 10))) / 9))); overflow-x: hidden; overflow-y: auto; padding: calc(var(--td-pop-padding-xl) - 8px); position: relative; left: calc(0px - calc(var(--td-pop-padding-xl) - 8px)); -webkit-box-sizing: content-box; box-sizing: content-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item { display: -webkit-box; display: -ms-flexbox; display: flex; width: var(--td-comp-size-xxxs); height: var(--td-comp-size-xxxs); border-radius: var(--td-radius-default); padding: 0; overflow: hidden; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item:hover { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transform-origin: center; transform-origin: center; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item__color { width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); -ms-flex-negative: 0; flex-shrink: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item__inner { width: 100%; height: 100%; display: block; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item:not(.t-is-active):hover { padding: 0; } .t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--item__color, .t-color-picker__swatches-wrap .t-color-picker__swatches--item.t-is-active .t-color-picker__swatches--color { border-color: var(--td-text-color-brand); } .t-color-picker__swatches-wrap .t-color-picker__swatches--color { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: var(--td-radius-default); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-color-picker__swatches-wrap .t-color-picker__swatches--inner { width: 100%; height: 100%; display: block; border-radius: var(--td-radius-default); -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .t-color-picker__trigger--default { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-color-picker__trigger--default > .t-input { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .t-color-picker__trigger--default .t-input { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-paddingLR-xs); } .t-color-picker__trigger--default__color { width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-color-picker__trigger--default__color .color-inner { border: 1px solid var(--td-scrollbar-color); display: block; width: calc(var(--td-comp-size-xs) - 2px); height: calc(var(--td-comp-size-xs) - 2px); color: transparent; position: relative; border-radius: var(--td-radius-small); } .t-color-picker__trigger--default__color .color-inner.t-size-s { width: calc(var(--td-comp-size-xxs) - 2px); height: calc(var(--td-comp-size-xxs) - 2px); } .t-color-picker__trigger--default__color .color-inner.t-size-l { width: calc(var(--td-comp-size-s) - 2px); height: calc(var(--td-comp-size-s) - 2px); } .t-color-picker__gradient-slider { padding: 0 calc(calc(var(--td-comp-size-xxxs) + var(--td-size-1)) / 2); border-radius: calc(8px / 2); } .t-color-picker__gradient-slider .t-color-picker--bg-alpha { background: var(--td-text-color-anti); /* stylelint-disable-next-line color-no-hex */ background-image: linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5), linear-gradient(45deg, #c5c5c5 25%, transparent 0, transparent 75%, #c5c5c5 0, #c5c5c5); background-size: 6px 6px; background-position: 0 0, 3px 3px; } .t-color-picker__panel.t-is-disabled .t-color-picker__saturation, .t-color-picker__panel.t-is-disabled .t-color-picker__slider, .t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item { opacity: 0.8; cursor: not-allowed; } .t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs, .t-color-picker__panel.t-is-disabled .t-color-picker__gradient-slider .gradient-thumbs__item { cursor: not-allowed; } .t-color-picker__panel.t-is-disabled .t-color-picker__swatches--item:hover { padding: 0; } .t-color-picker__select-options > .t-popup__content { -webkit-box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-1), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); } .t-card { font: var(--td-font-body-medium); margin: 0; padding: 0; list-style: none; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); -webkit-transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-box-shadow 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-card--bordered { border: 1px solid var(--td-component-border); } .t-card--shadow-hover:hover, .t-card--shadow { -webkit-box-shadow: var(--td-shadow-1); box-shadow: var(--td-shadow-1); } .t-card__cover { display: flow-root; } .t-card__cover img { display: flow-root; width: 100%; max-height: 100%; border-radius: var(--td-radius-default) var(--td-radius-default) 0 0; } .t-card__body { display: flow-root; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-card__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); position: relative; } .t-card__header-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-card__header + .t-card__cover img { border-radius: 0; } .t-card__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-xl); } .t-card__footer-wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-size-s .t-card__body { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-size-s .t-card__header { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-size-s .t-card__footer { padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-l); } .t-card__avatar { margin-right: var(--td-comp-margin-l); width: var(--td-comp-size-xxxl); height: var(--td-comp-size-xxxl); } .t-card__title { font: var(--td-font-title-medium); color: var(--td-text-color-primary); margin-right: var(--td-comp-margin-l); word-break: break-all; } .t-card__subtitle { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); word-break: break-all; } .t-card__description { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-xs); word-break: break-all; } .t-card__actions { float: right; color: var(--td-brand-color); } .t-card__title--bordered { border-bottom: 1px solid var(--td-component-border); } .t-collapse { 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; border: solid 1px var(--td-component-border); border-bottom: 0; background: var(--td-bg-color-container); } .t-collapse.t--border-less { border: none; } .t-collapse.t--border-less .t-collapse-panel__header { border-bottom: none; } .t-collapse.t--border-less .t-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .t-collapse-panel__icon { -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); cursor: pointer; 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-collapse-panel__icon > .t-fake-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-collapse-panel__icon--left { margin-right: var(--td-comp-margin-s); } .t-collapse-panel__icon--right { margin-left: var(--td-comp-margin-s); } .t-collapse-panel__icon--active > .t-fake-arrow { -webkit-transform: rotate(0); transform: rotate(0); } .t-collapse-panel__icon:hover { background-color: var(--td-bg-color-container-hover); border-radius: var(--td-radius-small); } .t-collapse-panel__wrapper { overflow: hidden; } .t-collapse-panel__wrapper.t--borderless .t-collapse-panel__header { border-bottom: none; } .t-collapse-panel__wrapper.t--borderless .t-collapse-panel__body { background: var(--td-bg-color-container); border: none; } .t-collapse-panel__wrapper .t-collapse-panel__header { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); border-bottom: solid 1px var(--td-component-border); font: var(--td-font-title-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-collapse-panel__wrapper .t-collapse-panel__header--blank { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-collapse-panel__wrapper .t-collapse-panel__header.t-is-clickable { cursor: pointer; } .t-collapse-panel__wrapper .t-collapse-panel__header-left, .t-collapse-panel__wrapper .t-collapse-panel__header-right, .t-collapse-panel__wrapper .t-collapse-panel__header-right-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-collapse-panel__wrapper .t-collapse-panel__body { border-bottom: solid 1px var(--td-component-border); background: var(--td-bg-color-secondarycontainer); overflow: inherit; } .t-collapse-panel__wrapper .t-collapse-panel__body--collapsed { border: none; } .t-collapse-panel__wrapper .t-collapse-panel__content { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l) var(--td-comp-paddingTB-m) calc(var(--td-comp-paddingLR-l) + var(--td-comp-margin-xxl)); color: var(--td-text-color-secondary); } .t-collapse-panel.t-is-disabled .t-collapse-panel__header { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-collapse-panel.t-is-disabled .t-collapse-panel__icon { cursor: not-allowed; pointer-events: none; } .t-collapse-panel.t-is-disabled .t-collapse-panel__body { background: var(--td-bg-color-component-disabled); } .t-collapse-panel.t-is-disabled .t-collapse-panel__content { color: var(--td-text-color-disabled); } .t-watermark { position: relative; } .t-timeline { 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; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-timeline-item { min-height: 72px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; position: relative; } .t-timeline-item__label.t-timeline-item__label--alternate { position: absolute; } .t-timeline-item__wrapper { width: 8px; position: relative; } .t-timeline-item__wrapper .t-timeline-item__dot { -webkit-box-sizing: unset; box-sizing: unset; position: absolute; width: 4px; height: 4px; border: 2px solid transparent; border-radius: 50%; top: 8px; } .t-timeline-item__wrapper .t-timeline-item__dot--primary { border-color: var(--td-brand-color); } .t-timeline-item__wrapper .t-timeline-item__dot--default { border-color: var(--td-component-border); } .t-timeline-item__wrapper .t-timeline-item__dot--success { border-color: var(--td-success-color); } .t-timeline-item__wrapper .t-timeline-item__dot--warning { border-color: var(--td-warning-color); } .t-timeline-item__wrapper .t-timeline-item__dot--error { border-color: var(--td-error-color); } .t-timeline-item__wrapper .t-timeline-item__dot--custom { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 4px; border: 0; } .t-timeline-item__wrapper .t-timeline-item__dot--custom .t-timeline-item__dot-content { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .t-timeline-item__wrapper .t-timeline-item__tail { position: absolute; border-left: 2px solid transparent; left: 50%; height: calc(100% - (8px * 2 + 8px)); bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding-bottom: var(--td-comp-size-s); border-color: var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-timeline-item__wrapper .t-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .t-timeline-item__label { color: var(--td-text-color-secondary); font-size: var(--td-font-size-body-medium); } .t-timeline-item__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: var(--td-comp-margin-l); font-size: var(--td-font-size-body-large); } .t-timeline-item--last .t-timeline-item__tail { display: none; } .t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__label { text-align: right; left: 0; } .t-timeline-label.t-timeline-label--alternate.t-timeline-left .t-timeline-item__wrapper { margin-left: 100px; } .t-timeline-label.t-timeline-label--alternate.t-timeline-right .t-timeline-item__label { text-align: left; right: 0; } .t-timeline-label.t-timeline-label--alternate.t-timeline-right .t-timeline-item__wrapper { margin-right: 100px; } .t-timeline-right .t-timeline-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .t-timeline-right .t-timeline-item__content { text-align: right; padding-left: 0; padding-right: var(--td-comp-margin-l); } .t-timeline-alternate .t-timeline-item-left { margin-left: calc(50% - (8px / 2)); } .t-timeline-alternate .t-timeline-item-right { text-align: right; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; margin-right: calc(50% - (8px / 2)); } .t-timeline-alternate .t-timeline-item-right .t-timeline-item__content { padding-right: var(--td-comp-margin-l); padding-left: 0; } .t-timeline-label.t-timeline-alternate .t-timeline-item__label { width: 100%; } .t-timeline-label.t-timeline-alternate .t-timeline-item-left .t-timeline-item__label--alternate { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); text-align: right; padding-right: var(--td-comp-margin-l); } .t-timeline-label.t-timeline-alternate .t-timeline-item-right .t-timeline-item__label--alternate { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); text-align: left; padding-left: var(--td-comp-margin-l); } .t-timeline-horizontal { min-height: 200px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-timeline-horizontal .t-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 8px; min-width: 160px; } .t-timeline-horizontal .t-timeline-item__wrapper { width: 100%; height: 8px; } .t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: unset; width: 4px; height: 4px; border-radius: 50%; } .t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot--custom { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 0; } .t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__dot--custom .t-timeline-item__dot-content { position: absolute; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__tail { left: calc(8px + var(--td-comp-margin-s)); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(100% - calc(8px + var(--td-comp-margin-s))); border: 0; border-top: 2px solid transparent; padding-bottom: 0; border-color: var(--td-component-border); } .t-timeline-horizontal .t-timeline-item__wrapper .t-timeline-item__tail--theme-dot { border-style: dashed; border-right: 0; } .t-timeline-horizontal .t-timeline-item__content { padding-left: unset; padding-top: var(--td-comp-margin-l); -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .t-timeline-vertical .t-timeline-item__content { padding-bottom: var(--td-comp-margin-l); } .t-timeline-label.t-timeline-horizontal.t-timeline-top .t-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: 0; } .t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__wrapper { padding-top: 0; } .t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__label--alternate { padding-top: var(--td-comp-margin-l); bottom: 0; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); } .t-timeline-label.t-timeline-horizontal.t-timeline-bottom .t-timeline-item__content { padding-top: 0; padding-bottom: var(--td-comp-margin-l); } .t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-top .t-timeline-item__label--alternate { top: 0; width: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); padding-bottom: var(--td-comp-margin-l); } .t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: relative; -webkit-transform: translateY(calc(-100% + 8px)); transform: translateY(calc(-100% + 8px)); } .t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom .t-timeline-item__content { padding-bottom: var(--td-comp-margin-l); padding-top: unset; } .t-timeline-label.t-timeline-horizontal.t-timeline-alternate .t-timeline-item-bottom .t-timeline-item__label--alternate { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); padding-top: var(--td-comp-margin-l); } .t-rate { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-rate .t-rate__star-top { position: absolute; width: 0; height: 100%; left: 0; top: 0; overflow: hidden; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-rate .t-rate__star-top, .t-rate .t-rate__star-bottom { display: grid; } .t-rate__list { display: -webkit-box; display: -ms-flexbox; display: flex; list-style: none; padding: 0; margin: 0; } .t-rate__item { position: relative; cursor: pointer; -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-rate__item:hover { -webkit-transform: scale(1.33); transform: scale(1.33); } .t-rate__item--half .t-rate__star-top { width: 50%; } .t-rate__item--full .t-rate__star-top { width: 100%; } .t-rate__text { color: var(--td-text-color-primary); font: var(--td-font-mark-medium); margin-left: var(--td-comp-margin-l); } .t-guide { 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-guide--lock { overflow: hidden; } .t-guide--absolute { position: absolute; } .t-guide--fixed { position: fixed; } .t-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .t-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .t-guide__highlight--dialog { border-radius: var(--td-radius-large); } .t-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .t-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-guide__reference { z-index: 999999; } .t-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .t-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .t-guide__dialog .t-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .t-guide__dialog .t-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .t-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .t-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .t-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .t-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__action button { margin-right: var(--td-comp-margin-s); } .t-guide__action button:last-child { margin-right: 0; } .t-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .t-guide__footer--dialog { margin-top: 24px; } .t-guide__footer--dialog .t-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-guide__popup .t-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .t-back-top { position: fixed; z-index: 300; overflow: hidden; outline: none; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-width: 0.5px; border-style: solid; -webkit-transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; transition: background 0.2s linear, border 0.2s linear, color 0.2s linear, opacity 0.2s linear, visibility 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); visibility: hidden; opacity: 0; color: var(--td-text-color-primary); } .t-back-top__text { font: var(--td-font-body-small); text-align: center; margin-top: var(--td-comp-margin-xxs); } .t-back-top__icon { font-size: var(--td-font-headline-small); } .t-back-top.t-size-m .t-back-top__icon { margin-top: 2px; } .t-back-top--show { visibility: visible; opacity: 1; } .t-back-top--theme-light { border-color: var(--td-component-border); background-color: var(--td-bg-color-container); } .t-back-top--theme-light:hover { border-color: var(--td-bg-color-container-hover); background-color: var(--td-bg-color-container-hover); } .t-back-top--theme-light .t-back-top__text { color: var(--td-text-color-secondary); } .t-back-top--theme-light .t-back-top__icon { color: var(--td-text-color-primary); } .t-back-top--theme-primary { border-color: var(--td-brand-color); background-color: var(--td-brand-color); } .t-back-top--theme-primary:hover { border-color: var(--td-brand-color-hover); background-color: var(--td-brand-color-hover); } .t-back-top--theme-primary .t-back-top__text { color: var(--td-text-color-anti); } .t-back-top--theme-primary .t-back-top__icon { color: var(--td-text-color-anti); } .t-back-top--theme-dark { border-color: rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.9); } .t-back-top--theme-dark:hover { border-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6); } .t-back-top--theme-dark .t-back-top__text { color: var(--td-text-color-anti); } .t-back-top--theme-dark .t-back-top__icon { color: var(--td-text-color-anti); } .t-back-top.t-size-s { width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); } .t-back-top.t-size-s .t-back-top__text { display: none; } .t-back-top.t-size-m { width: var(--td-comp-size-xxxxl); height: var(--td-comp-size-xxxxl); } .t-back-top.t-size-m .t-back-top__text { display: block; } .t-back-top--circle { border-radius: var(--td-radius-circle); } .t-back-top--square { border-radius: var(--td-radius-medium); } .t-statistic { display: inline-block; font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); color: var(--td-text-color-secondary); } .t-statistic-title { font-size: var(--td-font-body-medium); margin-bottom: var(--td-comp-margin-s); } .t-statistic-content { display: inline-block; color: var(--td-text-color-primary); text-align: left; white-space: nowrap; } .t-statistic-content-value { font-size: var(--td-font-size-headline-medium); line-height: var(--td-line-height-headline-medium); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .t-statistic-content-unit { font-size: var(--td-font-size-body-medium); margin-left: var(--td-comp-margin-xs); font-family: TCloudNumber, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei, Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } .t-statistic-content-suffix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-left: var(--td-comp-margin-s); } .t-statistic-content-prefix { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-title-large); margin-right: var(--td-comp-margin-s); } .t-statistic-content-prefix .t-icon { font-size: var(--td-font-size-title-large); } .t-statistic-extra { margin-top: 8px; } .t-statistic-extra .t-space .t-space-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-descriptions { 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-descriptions__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); margin-bottom: var(--td-comp-margin-m); font-weight: 600; } .t-descriptions__body { border-collapse: collapse; font: var(--td-font-body-medium); width: 100%; } .t-descriptions__body.t-size-l > tbody > tr > td { padding: var(--td-comp-paddingTB-l); } .t-descriptions__body.t-size-m > tbody > tr > td { padding: var(--td-comp-paddingLR-m) var(--td-comp-paddingLR-l); } .t-descriptions__body.t-size-s > tbody > tr > td { padding: var(--td-comp-paddingLR-s) var(--td-comp-paddingLR-l); } .t-descriptions__body .t-descriptions__label { color: var(--td-text-color-placeholder); } .t-descriptions__body--fixed { table-layout: fixed; } .t-descriptions__body--border > tbody > tr > td { border: 1px solid var(--td-component-border); } .t-descriptions__body--border .t-descriptions__label { background-color: var(--td-bg-color-secondarycontainer); } .t-descriptions__body--border .t-descriptions__label:hover { background-color: var(--td-bg-color-container-hover); } .t-empty { font: var(--td-font-body-medium); color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; list-style: none; padding: 0; text-align: center; } .t-empty__image { font-size: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-empty__title { font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin-top: var(--td-comp-margin-s); margin-bottom: 0; } .t-empty__description { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xs); margin-bottom: 0; } .t-empty__action { margin-top: var(--td-comp-margin-xxl); margin-bottom: 0; } .t-empty.t-size-s .t-empty__image { font-size: 20px; } .t-empty.t-size-s .t-empty__title { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .t-empty.t-size-s .t-empty__description { font: var(--td-font-body-small); margin-top: var(--td-comp-margin-xxs); } .t-empty.t-size-l .t-empty__image { font-size: 64px; } .t-typography { color: var(--td-text-color-primary); font: var(--td-font-body-medium); margin: var(--td-comp-margin-m) 0; } h1.t-typography { font: var(--td-font-headline-large); margin-top: var(--td-comp-margin-xxxxl); margin-bottom: var(--td-comp-margin-l); } h2.t-typography { font: var(--td-font-headline-medium); margin-top: var(--td-comp-margin-xxxl); margin-bottom: var(--td-comp-margin-l); } h3.t-typography { font: var(--td-font-headline-small); margin-top: var(--td-comp-margin-xxl); margin-bottom: var(--td-comp-margin-m); } h4.t-typography { font: var(--td-font-title-large); margin-top: var(--td-comp-margin-xl); margin-bottom: var(--td-comp-margin-m); } h5.t-typography { font: var(--td-font-title-medium); margin-top: var(--td-comp-margin-l); margin-bottom: var(--td-comp-margin-m); } h6.t-typography { font: var(--td-font-title-small); } .t-typography strong { font-weight: 600; } .t-typography mark { background-color: #fcdf47; } .t-typography code { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-transition: background-color 0.2s; transition: background-color 0.2s; white-space: nowrap; font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .t-typography code:hover { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer-hover); } .t-typography kbd { border-radius: var(--td-radius-default); border: 1px solid var(--td-component-border); margin: 0 var(--td-comp-margin-xs); background-color: var(--td-bg-color-secondarycontainer); padding: 1px var(--td-comp-paddingLR-s); -webkit-box-shadow: 0 1px 0 0 var(--td-component-border); box-shadow: 0 1px 0 0 var(--td-component-border); font: var(--td-font-body-small); font-family: Source Code Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei; display: inline-block; } .t-typography--disabled { color: var(--td-text-color-disabled); cursor: not-allowed; } .t-typography--success { color: var(--td-success-color); } .t-typography--warning { color: var(--td-warning-color); } .t-typography--error { color: var(--td-error-color); } .t-typography--secondary { color: var(--td-text-color-secondary); } .t-typography-ellipsis-symbol, .t-typography .t-icon-copy { color: var(--td-brand-color); cursor: pointer; } .t-typography-ellipsis-symbol:hover, .t-typography .t-icon-copy:hover { color: var(--td-brand-color-hover); } .t-typography .t-icon-checked { color: var(--td-success-color); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { 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; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-comp-size-xxxs); } .t-loading.t-size-l { font-size: var(--td-comp-size-xxxl); } .t-loading__parent--relative { position: relative !important; } .t-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-loading__content { position: absolute; left: 48%; top: 20%; } .t-loading--inherit-color { color: inherit; } .t-loading__parent { position: relative; } .t-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .t-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--hidden { visibility: hidden; } .t-loading--visible { visibility: visible; } .t-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .t-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .t-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-message > .t-icon, .t-message > [data-t-icon] > .t-icon, .t-message .t-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-message.t-is-success > .t-icon, .t-message.t-is-success > [data-t-icon] > .t-icon, .t-message.t-is-success .t-loading { color: var(--td-success-color); } .t-message.t-is-warning > .t-icon, .t-message.t-is-warning > [data-t-icon] > .t-icon, .t-message.t-is-warning .t-loading { color: var(--td-warning-color); } .t-message.t-is-error > .t-icon, .t-message.t-is-error > [data-t-icon] > .t-icon, .t-message.t-is-error .t-loading { color: var(--td-error-color); } .t-message.t-is-closable .t-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .t-message.t-is-closable .t-message__close .t-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-message.t-is-closable .t-message__close .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-message.t-is-closable .t-message__close .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-message__list { position: fixed; z-index: 6000; } .t-message__list .t-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .input-readonly.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.t-is-readonly .t-input__inner { cursor: pointer; } .input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon, .input-disabled.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon:hover, .input-disabled.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-tips { font-size: var(--td-font-size-body-small); } .t-tips.t-is-default { color: var(--td-text-color-placeholder); } .t-tips.t-is-error { color: var(--td-error-color); } .t-tips.t-is-warning { color: var(--td-warning-color); } .t-tips.t-is-success { color: var(--td-success-color); } .t-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .t-input:hover { border-color: var(--td-brand-color); } .t-input:focus { z-index: 1; 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-input--borderless:not(.t-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input--borderless:not(.t-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .t-input--borderless:not(.t-input--focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .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); z-index: 1; } .t-input :focus-visible { outline: none; } .t-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-moz-placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .t-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner[type="password"]::-ms-reveal { display: none; } .t-input__inner[type="search"]::-webkit-search-decoration, .t-input__inner[type="search"]::-webkit-search-cancel-button, .t-input__inner[type="search"]::-webkit-search-results-button, .t-input__inner[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .t-input__inner.t-input--soft-hidden { width: 0; } .t-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__status { position: absolute; right: -24px; top: 0; } .t-input.t-input--suffix > span.t-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input.t-input--suffix:hover > span.t-input__clear { opacity: 1; visibility: visible; } .t-input.t-is-success { border-color: var(--td-success-color); } .t-input.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-input.t-is-success.t-input--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-input.t-is-success > .t-input__extra { color: var(--td-success-color); } .t-input.t-is-warning { border-color: var(--td-warning-color); } .t-input.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning > .t-input__extra { color: var(--td-warning-color); } .t-input.t-is-error { border-color: var(--td-error-color); } .t-input.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error > .t-input__extra { color: var(--td-error-color); } .t-input.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .t-input.t-is-readonly .t-input__inner { cursor: pointer; } .t-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .t-input.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon, .t-input.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon:hover, .t-input.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-input.t-input--prefix > .t-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--prefix > .t-input__prefix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--suffix > .t-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--suffix > .t-input__suffix-icon { font-size: var(--td-font-size-body-large); } .t-input .t-input__suffix-clear { cursor: pointer; } .t-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-input.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .t-input .t-input__prefix > .t-icon, .t-input .t-input__suffix > .t-icon { font-size: inherit; } .t-input .t-input__prefix > .t-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .t-input .t-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .t-input .t-input__suffix > .t-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix > .t-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .t-input.t-is-focused .t-input__prefix > .t-icon { color: var(--td-brand-color); } .t-input.t-is-focused .t-input__suffix > .t-icon-time, .t-input.t-is-focused .t-input__suffix .t-icon-calendar { color: var(--td-brand-color); } .t-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .t-input-group .t-input__wrap { border-radius: 0; } .t-input-group .t-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button, .t-input-group .t-select { border-radius: 0; } .t-input-group .t-button:not(:first-child), .t-input-group .t-select:not(:first-child) { margin-left: -1px; } .t-input-group .t-input__wrap:not(:first-child) .t-input { margin-left: -1px; } .t-input-group .t-input__wrap:first-child .t-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child .t-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button:first-child, .t-input-group .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-button:last-child, .t-input-group .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap + .t-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .t-input-group--separate .t-button, .t-input-group--separate .t-select { border-radius: var(--td-radius-default); } .t-input-group--separate .t-button:first-child, .t-input-group--separate .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group--separate .t-button:last-child, .t-input-group--separate .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap .t-input { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:first-child { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:last-child { border-radius: var(--td-radius-default); } .t-input-group .t-input__inner, .t-input-group .t-button, .t-input-group .t-select { position: relative; z-index: 0; } .t-input-group .t-input__inner:hover, .t-input-group .t-button:hover, .t-input-group .t-select:hover, .t-input-group .t-input__inner:focus, .t-input-group .t-button:focus, .t-input-group .t-select:focus, .t-input-group .t-input__inner:active, .t-input-group .t-button:active, .t-input-group .t-select:active { z-index: 1; } .t-input__wrap { width: 100%; } .t-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .t-input__tips--default { color: var(--td-text-color-placeholder); } .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-align-center > .t-input__inner { text-align: center; } .t-align-right > .t-input__inner { text-align: right; } .t-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .t-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .t-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .t-input__limit-number.t-is-disabled { background: var(--td-bg-color-component-disabled); } .t-button { 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; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-button .t-icon { font-size: var(--td-font-size-body-large); } .t-button .t-loading { font-size: var(--td-font-size-body-large); } .t-button .t-icon + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-loading + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .t-button--variant-base .t-icon, .t-button--variant-base .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-base.t-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { background-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { background-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { background-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { background-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-base.t-button--ghost:active { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .t-button--variant-outline .t-icon, .t-button--variant-outline .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-outline.t-button--ghost:active { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .t-button--variant-dashed .t-icon, .t-button--variant-dashed .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-dashed.t-button--ghost:active { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .t-button--variant-text .t-icon, .t-button--variant-text .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { background-color: transparent; } .t-button--variant-text.t-is-disabled { background-color: transparent; } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { border-color: transparent; } .t-button--variant-text.t-is-disabled { border-color: transparent; } .t-button--variant-text.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary:hover, .t-button--variant-text.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-text.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success:hover, .t-button--variant-text.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-text.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning:hover, .t-button--variant-text.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-text.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger:hover, .t-button--variant-text.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-text.t-button--ghost { background: none; color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost:hover, .t-button--variant-text.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success:hover, .t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .t-button.t-size-s .t-icon, .t-button.t-size-s .t-loading { font-size: var(--td-font-size-body-medium); } .t-button.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .t-button--shape-square.t-size-s { width: var(--td-comp-size-xs); padding: 0; } .t-button--shape-square.t-size-l { width: var(--td-comp-size-xl); padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-round.t-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .t-button--shape-circle .t-icon { font-size: var(--td-font-size-body-large); } .t-button--shape-circle .t-loading { font-size: var(--td-font-size-body-large); } .t-button--shape-circle.t-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-circle.t-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button.t-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .t-button--ghost { --ripple-color: var(--td-gray-color-10); } .t-button:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-success-color-active); } .t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-error-color-active); } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .t-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-enter, .t-dialog-zoom-enter-from, .t-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-enter-active, .t-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-active .t-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-enter-active .t-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-active .t-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-leave-active .t-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-fade-enter, .t-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-enter.t-dialog-fade-enter-active, .t-dialog-fade-appear.t-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .t-dialog-fade-exit.t-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-dialog { 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: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .t-dialog .t-icon.t-is-info, .t-dialog t-icon-info-circle.t-is-info { color: var(--td-brand-color); } .t-dialog .t-icon.t-is-success, .t-dialog t-icon-check-circle.t-is-success { color: var(--td-success-color); } .t-dialog .t-icon.t-is-warning, .t-dialog t-icon-error-circle.t-is-warning { color: var(--td-warning-color); } .t-dialog .t-icon.t-is-error, .t-dialog t-icon-error-circle.t-is-error { color: var(--td-error-color); } .t-dialog--lock { overflow: hidden; } .t-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__header .t-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .t-dialog__header .t-icon:not(.t-icon-close), .t-dialog__header t-icon-check-circle, .t-dialog__header t-icon-info-circle, .t-dialog__header t-icon-error-circle { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .t-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .t-dialog__header--fullscreen .t-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; 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-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .t-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body__icon, .t-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .t-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .t-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .t-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .t-dialog__footer .t-button + .t-button, .t-dialog__footer .t-dialog__button + .t-dialog__button { margin-left: var(--td-comp-margin-s); } .t-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .t-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .t-dialog__close:active { background: var(--td-bg-color-container-active); } .t-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .t-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .t-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .t-dialog.t-dialog--draggable:hover { cursor: move; } .t-dialog.t-dialog--draggable .t-dialog__header:hover, .t-dialog.t-dialog--draggable .t-dialog__body:hover, .t-dialog.t-dialog--draggable .t-dialog__footer:hover { cursor: auto; } .t-dialog__fullscreen { width: 100%; border-radius: 0; } .t-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .t-dialog__ctx.t-dialog__ctx--modeless { pointer-events: none; } .t-dialog__ctx.t-dialog__ctx--fixed { position: fixed; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--absolute { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap { position: absolute; } .t-dialog__ctx.t-is-visible { visibility: visible; } .t-dialog__ctx.t-is-hidden { visibility: hidden; } .t-dialog__ctx.t-is-display { display: block; } .t-dialog__ctx.t-not-display { display: none; } .t-dialog__ctx .t-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .t-dialog__ctx .t-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .t-dialog__ctx .t-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__ctx .t-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; 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; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .t-dialog__ctx .t-dialog__position.t-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-dialog__ctx .t-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__ctx .t-is-hidden { background: none; } .t-dialog__ctx .t-dialog { pointer-events: auto; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--modeless .t-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .t-checkbox-group { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .t-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .t-checkbox + .t-checkbox { margin-left: inherit; } .t-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .t-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .t-checkbox:hover .t-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-checkbox.t-is-checked .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-checked .t-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .t-checkbox.t-is-indeterminate .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-indeterminate .t-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .t-checkbox.t-is-disabled { cursor: not-allowed; } .t-checkbox.t-is-disabled .t-checkbox__label { color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled .t-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .t-checkbox.t-is-disabled:hover .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after { border-color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after { background-color: var(--td-text-color-disabled); } .t-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .t-checkbox-group { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .t-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .t-checkbox + .t-checkbox { margin-left: inherit; } .t-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .t-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .t-checkbox:hover .t-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-checkbox.t-is-checked .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-checked .t-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .t-checkbox.t-is-indeterminate .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-indeterminate .t-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .t-checkbox.t-is-disabled { cursor: not-allowed; } .t-checkbox.t-is-disabled .t-checkbox__label { color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled .t-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .t-checkbox.t-is-disabled:hover .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after { border-color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after { background-color: var(--td-text-color-disabled); } .t-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .t-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .t-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .t-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="top-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="top"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="top-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow { top: calc(-8px / 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .t-popup[data-popper-placement="bottom-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="bottom"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="bottom-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow { right: calc(-8px / 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .t-popup[data-popper-placement="left-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="left"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="left-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow { left: calc(-8px / 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="right-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="right"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="right-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup--animation-enter, .t-popup--animation-enter-from, .t-popup--animation-exiting, .t-popup--animation-leave-to { opacity: 0; visibility: hidden; } .t-popup--animation-enter-to, .t-popup--animation-entering, .t-popup--animation-leave-from, .t-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .t-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-popup--animation-leave-active { -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; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .t-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { 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; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-comp-size-xxxs); } .t-loading.t-size-l { font-size: var(--td-comp-size-xxxl); } .t-loading__parent--relative { position: relative !important; } .t-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-loading__content { position: absolute; left: 48%; top: 20%; } .t-loading--inherit-color { color: inherit; } .t-loading__parent { position: relative; } .t-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .t-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--hidden { visibility: hidden; } .t-loading--visible { visibility: visible; } .t-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .t-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .t-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-button { 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; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-button .t-icon { font-size: var(--td-font-size-body-large); } .t-button .t-loading { font-size: var(--td-font-size-body-large); } .t-button .t-icon + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-loading + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .t-button--variant-base .t-icon, .t-button--variant-base .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-base.t-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { background-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { background-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { background-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { background-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-base.t-button--ghost:active { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .t-button--variant-outline .t-icon, .t-button--variant-outline .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-outline.t-button--ghost:active { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .t-button--variant-dashed .t-icon, .t-button--variant-dashed .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-dashed.t-button--ghost:active { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .t-button--variant-text .t-icon, .t-button--variant-text .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { background-color: transparent; } .t-button--variant-text.t-is-disabled { background-color: transparent; } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { border-color: transparent; } .t-button--variant-text.t-is-disabled { border-color: transparent; } .t-button--variant-text.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary:hover, .t-button--variant-text.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-text.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success:hover, .t-button--variant-text.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-text.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning:hover, .t-button--variant-text.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-text.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger:hover, .t-button--variant-text.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-text.t-button--ghost { background: none; color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost:hover, .t-button--variant-text.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success:hover, .t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .t-button.t-size-s .t-icon, .t-button.t-size-s .t-loading { font-size: var(--td-font-size-body-medium); } .t-button.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .t-button--shape-square.t-size-s { width: var(--td-comp-size-xs); padding: 0; } .t-button--shape-square.t-size-l { width: var(--td-comp-size-xl); padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-round.t-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .t-button--shape-circle .t-icon { font-size: var(--td-font-size-body-large); } .t-button--shape-circle .t-loading { font-size: var(--td-font-size-body-large); } .t-button--shape-circle.t-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-circle.t-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button.t-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .t-button--ghost { --ripple-color: var(--td-gray-color-10); } .t-button:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-success-color-active); } .t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-error-color-active); } .t-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-message > .t-icon, .t-message > [data-t-icon] > .t-icon, .t-message .t-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-message.t-is-success > .t-icon, .t-message.t-is-success > [data-t-icon] > .t-icon, .t-message.t-is-success .t-loading { color: var(--td-success-color); } .t-message.t-is-warning > .t-icon, .t-message.t-is-warning > [data-t-icon] > .t-icon, .t-message.t-is-warning .t-loading { color: var(--td-warning-color); } .t-message.t-is-error > .t-icon, .t-message.t-is-error > [data-t-icon] > .t-icon, .t-message.t-is-error .t-loading { color: var(--td-error-color); } .t-message.t-is-closable .t-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .t-message.t-is-closable .t-message__close .t-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-message.t-is-closable .t-message__close .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-message.t-is-closable .t-message__close .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-message__list { position: fixed; z-index: 6000; } .t-message__list .t-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } .t-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; text-decoration: none; outline: none; padding: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font: var(--td-font-link-medium); } .t-link .t-link__prefix-icon { margin-right: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link .t-link__suffix-icon { margin-left: var(--td-comp-margin-s); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-s { font: var(--td-font-link-small); } .t-link.t-size-s .t-link__prefix-icon { margin-right: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-s .t-link__suffix-icon { margin-left: var(--td-comp-margin-xs); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-l { font: var(--td-font-link-large); } .t-link.t-size-l .t-link__prefix-icon { margin-right: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link.t-size-l .t-link__suffix-icon { margin-left: var(--td-comp-margin-m); display: -webkit-box; display: -ms-flexbox; display: flex; } .t-link--theme-default { color: var(--td-text-color-primary); } .t-link--theme-default:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-text-color-primary); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-default.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-default.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-default.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-default.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-default.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-text-color-primary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-default.t-is-disabled { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled:hover, .t-link--theme-default.t-is-disabled:active { color: var(--td-text-color-disabled); } .t-link--theme-default.t-is-disabled.t-is-underline::after { border-color: var(--td-text-color-disabled); } .t-link--theme-primary { color: var(--td-brand-color); } .t-link--theme-primary:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-brand-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-primary.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-primary.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:hover { color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-brand-color-hover); } .t-link--theme-primary.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-brand-color-active); } .t-link--theme-primary.t-link--hover-color:active { color: var(--td-brand-color-active); } .t-link--theme-primary.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-brand-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-primary.t-is-disabled { cursor: not-allowed; color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled:hover, .t-link--theme-primary.t-is-disabled:active { color: var(--td-brand-color-disabled); } .t-link--theme-primary.t-is-disabled.t-is-underline::after { border-color: var(--td-brand-color-disabled); } .t-link--theme-success { color: var(--td-success-color); } .t-link--theme-success:active { color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-success-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-success.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-success.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:hover { color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-success-color-hover); } .t-link--theme-success.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-success-color-active); } .t-link--theme-success.t-link--hover-color:active { color: var(--td-success-color-active); } .t-link--theme-success.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-success-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-success.t-is-disabled { cursor: not-allowed; color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled:hover, .t-link--theme-success.t-is-disabled:active { color: var(--td-success-color-disabled); } .t-link--theme-success.t-is-disabled.t-is-underline::after { border-color: var(--td-success-color-disabled); } .t-link--theme-danger { color: var(--td-error-color); } .t-link--theme-danger:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-error-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-danger.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-danger.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:hover { color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-error-color-hover); } .t-link--theme-danger.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-error-color-active); } .t-link--theme-danger.t-link--hover-color:active { color: var(--td-error-color-active); } .t-link--theme-danger.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-error-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-danger.t-is-disabled { cursor: not-allowed; color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled:hover, .t-link--theme-danger.t-is-disabled:active { color: var(--td-error-color-disabled); } .t-link--theme-danger.t-is-disabled.t-is-underline::after { border-color: var(--td-error-color-disabled); } .t-link--theme-warning { color: var(--td-warning-color); } .t-link--theme-warning:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; border-bottom: 1px solid var(--td-warning-color); opacity: 0; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-warning.t-link--hover-underline:hover::after { opacity: 1; } .t-link--theme-warning.t-link--hover-underline:active::after { opacity: 1; border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:hover { color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:hover::after { border-color: var(--td-warning-color-hover); } .t-link--theme-warning.t-link--hover-color.t-is-underline:active::after { border-color: var(--td-warning-color-active); } .t-link--theme-warning.t-link--hover-color:active { color: var(--td-warning-color-active); } .t-link--theme-warning.t-is-underline::after { content: ""; position: absolute; left: 0; right: 0; height: 0; bottom: 0; opacity: 1; border-bottom: 1px solid var(--td-warning-color); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-link--theme-warning.t-is-disabled { cursor: not-allowed; color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled:hover, .t-link--theme-warning.t-is-disabled:active { color: var(--td-warning-color-disabled); } .t-link--theme-warning.t-is-disabled.t-is-underline::after { border-color: var(--td-warning-color-disabled); } .t-tooltip .t-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .t-tooltip--default .t-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="left"] .t-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="right"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="top"] .t-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="bottom"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--primary .t-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-tooltip--success .t-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .t-tooltip--danger .t-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .t-tooltip--warning .t-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .t-tooltip .t-popup__arrow { background: inherit; height: auto; } .t-tooltip .t-popup__arrow::before { background: inherit; } .t-tooltip--noshadow .t-popup__content, .t-tooltip--noshadow[data-popper-placement] .t-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .t-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-enter, .t-dialog-zoom-enter-from, .t-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-enter-active, .t-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-active .t-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-enter-active .t-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-active .t-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-leave-active .t-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-fade-enter, .t-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-enter.t-dialog-fade-enter-active, .t-dialog-fade-appear.t-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .t-dialog-fade-exit.t-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-dialog { 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: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .t-dialog .t-icon.t-is-info { color: var(--td-brand-color); } .t-dialog .t-icon.t-is-success { color: var(--td-success-color); } .t-dialog .t-icon.t-is-warning { color: var(--td-warning-color); } .t-dialog .t-icon.t-is-error { color: var(--td-error-color); } .t-dialog--lock { overflow: hidden; } .t-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__header .t-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .t-dialog__header .t-icon:not(.t-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .t-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .t-dialog__header--fullscreen .t-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; 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-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .t-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body__icon, .t-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .t-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .t-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .t-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .t-dialog__footer .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .t-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .t-dialog__close:active { background: var(--td-bg-color-container-active); } .t-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .t-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .t-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .t-dialog.t-dialog--draggable:hover { cursor: move; } .t-dialog.t-dialog--draggable .t-dialog__header:hover, .t-dialog.t-dialog--draggable .t-dialog__body:hover, .t-dialog.t-dialog--draggable .t-dialog__footer:hover { cursor: auto; } .t-dialog__fullscreen { width: 100%; border-radius: 0; } .t-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .t-dialog__ctx.t-dialog__ctx--modeless { pointer-events: none; } .t-dialog__ctx.t-dialog__ctx--fixed { position: fixed; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--absolute { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap { position: absolute; } .t-dialog__ctx.t-is-visible { visibility: visible; } .t-dialog__ctx.t-is-hidden { visibility: hidden; } .t-dialog__ctx.t-is-display { display: block; } .t-dialog__ctx.t-not-display { display: none; } .t-dialog__ctx .t-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .t-dialog__ctx .t-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .t-dialog__ctx .t-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__ctx .t-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; 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; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .t-dialog__ctx .t-dialog__position.t-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-dialog__ctx .t-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__ctx .t-is-hidden { background: none; } .t-dialog__ctx .t-dialog { pointer-events: auto; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--modeless .t-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .t-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-space .t-space-item { width: inherit; } .t-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .t-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .t-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-space-vertical .t-space-item-separator { width: 100%; } .t-space.t-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .t-space.t-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-space.t-space--polyfill.t-space-horizontal, .t-space.t-space--polyfill.t-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .t-space.t-space--polyfill.t-space-vertical, .t-space.t-space--polyfill.t-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .t-space.t-space--polyfill.t-space-horizontal > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-left: var(--td-space-column-gap); } .t-space.t-space--polyfill.t-space-vertical > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-top: var(--td-space-row-gap); } .t-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .t-image__wrapper--shape-square { border-radius: 0; } .t-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .t-image__wrapper--shape-circle { border-radius: 50%; } .t-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .t-image__wrapper--gallery .t-image { position: relative; z-index: 5; } .t-image__wrapper--need-hover { cursor: pointer; } .t-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .t-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .t-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .t-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .t-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .t-image--fit-none { -o-object-fit: none; object-fit: none; } .t-image--position-center { -o-object-position: center; object-position: center; } .t-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .t-image--position-top { -o-object-position: top; object-position: top; } .t-image--position-left { -o-object-position: left; object-position: left; } .t-image--position-right { -o-object-position: right; object-position: right; } .t-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: calc(5 - 2); } .t-image__gallery-shadow::before, .t-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .t-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: calc(5 - 1); } .t-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: calc(5 - 3); } .t-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: 0; } .t-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: calc(5 + 1); opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .t-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .t-image__loading, .t-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: calc(0 + 1); } .t-image__loading { color: var(--td-text-color-secondary); } .t-image__error { color: var(--td-text-color-disabled); } .t-image-viewer__img-error { height: 440px; width: 440px; background-color: var(--td-bg-color-component-disabled); border-radius: 4px; color: #000000; cursor: inherit; position: absolute; } .t-image-viewer__img-error .t-image-viewer__img-error-content { position: absolute; height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; font: var(--td-font-body-medium); } .t-image-viewer__img-error .t-image-viewer__img-error-content .t-image-viewer__img-error-text { margin-top: var(--td-comp-margin-s); } @-webkit-keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @keyframes modal-image-hide { 0% { -webkit-transform: scale(1); transform: scale(1); } to { -webkit-transform: scale(0); transform: scale(0); } } @-webkit-keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @keyframes modal-mask-show { 0% { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } @keyframes modal-mask-hide { 0% { opacity: 1; } to { opacity: 0; } } .t-image-viewer-preview-image { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 3000; overflow: hidden; -webkit-animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; animation: 0.2s cubic-bezier(0.82, 0, 1, 0.9) modal-mask-show; } .t-image-viewer-preview-image.t-is-hide { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-mask-hide forwards; } .t-image-viewer-preview-image.t-is-hide .t-image-viewer__modal-pic .t-image-viewer__modal-box { -webkit-animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; animation: 0.2s cubic-bezier(0, 0, 0.15, 1) modal-image-hide forwards; } .t-image-viewer-preview-image .t-image-viewer__modal-index { text-align: center; font-size: var(--td-font-size-body-medium); color: var(--td-text-color-anti); position: absolute; top: 92px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.4); border-radius: var(--td-radius-default); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); z-index: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-mask { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--td-mask-active); height: 100%; width: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; } .t-image-viewer-preview-image .t-image-viewer__modal-pic { height: 0; width: 0; position: absolute; top: 50%; left: 50%; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 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; -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) modal-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(90vw, 1000px); max-height: min(90vh, 800px); -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1); -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .t-image-viewer-preview-image .t-image-viewer__modal-header { width: 100%; position: absolute; top: 0; z-index: 1; height: auto; 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-container); padding: 0 0 12px 0; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show { padding: 12px 0; } @-webkit-keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @keyframes preview-icon-range { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } to { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } } @-webkit-keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } @keyframes preview-icon-unrange { 0% { -webkit-transform: translate(-50%, 50%) rotateZ(-180deg); transform: translate(-50%, 50%) rotateZ(-180deg); } to { -webkit-transform: translate(-50%, 50%) rotateZ(0); transform: translate(-50%, 50%) rotateZ(0); } } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt { width: var(--td-comp-size-xxs); height: var(--td-comp-size-xxs); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); background-color: var(--td-bg-color-container); color: var(--td-text-color-primary); border-radius: 50%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-unrange; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt .t-icon { font-size: var(--td-font-size-body-large); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-pre-bt:hover { background-color: inherit; } @-webkit-keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @keyframes preview-image-show { 0% { height: 0; } to { height: 40px; } } @-webkit-keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } @keyframes preview-image-hide { 0% { height: 40px; } to { height: 0; } } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-prev { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-show; } .t-image-viewer-preview-image .t-image-viewer__modal-header.t-is-show .t-image-viewer__header-pre-bt { -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-icon-range; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev { width: calc(40px / 9 * 16 * 7 + 4px * 6); -webkit-animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; animation: 0.2s cubic-bezier(0.38, 0, 0.24, 1) 0s 1 normal forwards running preview-image-hide; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; overflow: hidden; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before, .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { content: ""; position: absolute; height: 100%; z-index: 1; width: calc(40px / 9 * 16); pointer-events: none; } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::before { left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--td-bg-color-container)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(to right, var(--td-bg-color-container), rgba(255, 255, 255, 0)); } .t-image-viewer-preview-image .t-image-viewer__modal-header .t-image-viewer__header-prev::after { right: 0; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--td-bg-color-container))); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--td-bg-color-container)); } .t-image-viewer-preview-image .t-image-viewer__header-trans { height: 100%; -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s; 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; gap: 4px; margin-left: calc(40px / 9 * 16 * 3 + 4px * 3); } .t-image-viewer-preview-image .t-image-viewer__header-box { -webkit-box-sizing: border-box; box-sizing: border-box; width: calc(40px / 9 * 16); height: 40px; position: relative; -webkit-transition: 0.2s; transition: 0.2s; overflow: hidden; border-radius: var(--td-radius-default); 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; border: 1px solid transparent; background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer-preview-image .t-image-viewer__header-box .t-image-viewer__header-img { width: auto; height: 100%; } .t-image-viewer-preview-image .t-image-viewer__header-box:hover, .t-image-viewer-preview-image .t-image-viewer__header-box.t-is-active { border-color: var(--td-brand-color); } .t-image-viewer-preview-image .t-image-viewer__modal-icon { cursor: pointer; color: var(--td-text-color-primary); border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt { top: 100px; right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt { left: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { right: 40px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-close-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-prev-bt, .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-image-viewer__modal-next-bt { position: fixed; z-index: 10; color: var(--td-text-color-anti); background-color: rgba(0, 0, 0, 0.4); border-radius: 50%; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); 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-image-viewer-preview-image .t-image-viewer__modal-icon .t-image-viewer__modal-icon-label { margin-left: 2px; } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled { color: rgba(255, 255, 255, 0.22); } .t-image-viewer-preview-image .t-image-viewer__modal-icon.t-is-disabled:hover { background-color: rgba(0, 0, 0, 0.4); } .t-image-viewer-preview-image .t-image-viewer__modal-icon:hover { background-color: rgba(0, 0, 0, 0.2); } .t-image-viewer__mask { width: 100vh; height: 100vh; left: 0; top: 0; z-index: 99; position: fixed; background-color: transparent; } .t-image-viewer__utils { width: 100%; position: absolute; bottom: 32px; z-index: 1; height: auto; 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; color: var(--td-text-color-primary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-image-viewer__utils .t-image-viewer__utils-content { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 50px; line-height: 100%; background: var(--td-bg-color-container); border-radius: var(--td-radius-medium); padding: 0 var(--td-comp-paddingLR-xs); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon { margin: 0 var(--td-comp-margin-xs); width: var(--td-comp-size-m); height: var(--td-comp-size-m); 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; border-radius: var(--td-radius-default); -webkit-transition: 0.2s; transition: 0.2s; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__modal-icon:hover { background-color: var(--td-bg-color-container-hover); } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale { width: var(--td-comp-size-xl); text-align: center; cursor: inherit; } .t-image-viewer__utils .t-image-viewer__utils-content .t-image-viewer__utils-scale:hover { background-color: var(--td-bg-color-container); } .t-image-viewer-mini__footer .t-image-viewer__utils { position: inherit; } .t-image-viewer-mini__content { max-width: min(90vw, 1000px); max-height: min(90vh, 800px); } @keyframes modal-image-show { 0% { -webkit-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); transform: scale(1); } } .t-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box { width: 100%; height: 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-image-viewer-mini__content .t-image-viewer__modal-pic .t-image-viewer__modal-box .t-image-viewer__modal-image { display: block; max-width: min(80vw, 800px); max-height: min(80vh, 600px); -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); -o-object-fit: contain; object-fit: contain; } .t-image-viewer__dialog.t-dialog__ctx--fixed { z-index: 3000; } .t-image-viewer__dialog .t-dialog__header { padding: 0 var(--td-comp-paddingLR-s); pointer-events: none; } .t-image-viewer__dialog .t-dialog__header .t-image-viewer__dialog-title { pointer-events: all; } .t-image-viewer__dialog .t-dialog__header .t-dialog__close { pointer-events: auto; } .t-image-viewer__dialog .t-dialog { border-color: var(--td-component-border); overflow: hidden; padding: 0; -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .t-image-viewer__dialog .t-dialog__header { height: 40px; width: 100%; font-size: var(--td-font-size-body-medium); background-color: var(--td-bg-color-secondarycontainer); } .t-image-viewer__dialog .t-dialog__header-content { margin-left: 32px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-image-viewer__dialog .t-dialog__close:hover { background-color: var(--td-bg-color-secondarycontainer-hover); } .t-upload { 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-upload .t-is-bordered { border: 1px solid var(--td-component-border); } .t-upload .t-upload__trigger { display: inline-block; } .t-upload .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload .t-icon-check-circle-filled { color: var(--td-success-color); } .t-upload .t-icon-error-circle-filled { color: var(--td-error-color); } .t-upload .t-icon-time-filled { color: var(--td-text-color-placeholder); } .t-upload .t-icon-add { color: var(--td-text-color-primary); } .t-upload__list-file { 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; width: 100px; height: 100px; margin-right: var(--td-comp-margin-m); overflow: hidden; } .t-upload__list-file .t-icon { font-size: var(--td-comp-size-xl); color: var(--td-brand-color); } .t-upload__list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: var(--td-comp-margin-m); width: 496px; height: 124px; padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); border: 1px solid var(--td-component-border); border-radius: var(--td-radius-default); font: var(--td-font-body-medium); } .t-upload__list-item.t-is--error .t-upload__list-name { color: var(--td-error-color); } .t-upload__list-item.t-is--error .t-upload__list-file .t-icon { color: var(--td-error-color); } .t-upload__list-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload-list__control { cursor: pointer; } .t-upload-list__control:hover { color: var(--td-error-color); } .t-upload__list-img { -o-object-fit: cover; object-fit: cover; max-width: 100%; max-height: 100%; cursor: pointer; } .t-upload__list-name { max-width: 200px; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload--highlight { color: var(--td-text-color-brand); } .t-upload__single-name { margin-right: var(--td-comp-margin-s); } .t-upload__card { font: var(--td-font-body-small); overflow: hidden; width: 100%; margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--td-comp-margin-s); } .t-upload__card .t-is-disabled :hover { cursor: not-allowed; } .t-upload__card-item { cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; } .t-upload__card-item::after { content: ""; display: block; } .t-upload__card-item:hover .t-upload__card-mask { opacity: 1; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-upload__card-item.t-is--error .t-icon-warning_fill { color: var(--td-error-color); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-item.t-is--error .t-upload__card-status { color: var(--td-error-color); } .t-upload__card-item.t-is-background { -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__card .t-icon-loading { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-name { max-width: 100%; margin-top: var(--td-comp-margin-s); white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__card-content { position: relative; width: 110px; height: 110px; overflow: hidden; 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; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s); border-radius: var(--td-radius-default); } .t-upload__card-container { width: 110px; height: 110px; 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; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: var(--td-bg-color-secondarycontainer); border: 1px dashed var(--td-component-border); -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; border-radius: var(--td-radius-default); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .t-upload__card-container:hover:not(.t-is-disabled) { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__card-container > .t-icon { color: var(--td-text-color-placeholder); } .t-upload__card-container > .t-icon, .t-upload__card-container .t-loading { font-size: var(--td-comp-size-xs); margin-bottom: var(--td-comp-margin-s); } .t-upload__card-container > p, .t-upload__card-container .t-upload__add-text { color: var(--td-text-color-placeholder); margin: 0; } .t-upload__card-status-wrap { text-align: center; } .t-upload__card-status-wrap > svg { margin-bottom: var(--td-comp-margin-s); } .t-upload__card-status-wrap .t-icon, .t-upload__card-status-wrap .t-loading { font-size: var(--td-comp-size-xs); } .t-upload__card-image { max-width: 100%; max-height: 100%; width: 100%; height: 100%; } .t-upload__card-status { color: var(--td-text-color-disabled); font: var(--td-font-body-small); } .t-upload__card-mask { background-color: var(--td-mask-active); color: var(--td-text-color-anti); will-change: transform; opacity: 0; z-index: 2; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; 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; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .t-upload__card-mask-item-divider { margin: 0 var(--td-comp-margin-l); border-left: 1px var(--td-text-color-anti) solid; height: var(--td-comp-size-xxxs); } .t-upload__card-mask-item > .t-icon { cursor: pointer; font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__dialog .t-dialog { max-width: 80%; } .t-upload__dialog .t-dialog--default { padding: 32px; } .t-upload__dialog .t-dialog-body { padding-bottom: 0; } .t-upload__dialog .t-dialog-body-img-box img { display: block; max-width: 100%; max-height: 100%; } .t-upload__dragger { display: -webkit-box; display: -ms-flexbox; display: flex; width: 336px; height: 144px; border: 1px dashed var(--td-component-border); border-radius: var(--td-radius-small); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); cursor: pointer; padding: var(--td-comp-margin-l); position: relative; overflow: auto; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__dragger.t-is--active { background-color: var(--td-bg-color-container-active); border-color: var(--td-brand-color); } .t-upload__dragger:hover { border-color: var(--td-brand-color); } .t-upload__dragger-btns { position: absolute; bottom: var(--td-comp-margin-l); } .t-upload__dragger .t-size-s { display: block; } .t-upload__dragger-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__dragger-error { border-color: var(--td-error-color); } .t-upload__dragger-error:hover { border-color: var(--td-error-color); } .t-upload__dragger-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin-bottom: var(--td-comp-margin-s); max-width: calc(336px - var(--td-comp-margin-l) * 2 - 0); } .t-upload__dragger-text .t-upload__single-name { white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__tips { display: block; color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-s); font: var(--td-font-body-small); } .t-upload__tips.t-upload__tips-error { color: var(--td-error-color); } .t-upload__tips.t-upload__tips-warn { color: var(--td-warning-color); } .t-upload__placeholder { color: var(--td-text-color-placeholder); } .t-upload__display-text--margin { margin-top: var(--td-comp-margin-s); } .t-upload__single-display-text { color: var(--td-text-color-secondary); font: var(--td-font-body-small); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-display-text .t-upload__flow-status .t-icon { font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-icon-clear-circle-filled { color: var(--td-text-color-placeholder); margin-top: var(--td-comp-margin-xxs); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-icon-clear-circle-filled:hover { color: var(--td-text-color-secondary); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__single-percent { margin-left: var(--td-comp-margin-xs); } .t-upload__single-progress { color: var(--td-brand-color); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__single-input-delete { margin-left: var(--td-comp-margin-l); font: var(--td-font-body-medium); color: var(--td-brand-color); cursor: pointer; } .t-upload__single-input-preview { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-upload__single-input-text { display: block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-upload__single-file-input { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__single-file-input .t-upload__trigger { margin-left: var(--td-comp-margin-l); } .t-upload__single-file-input .t-upload__single-progress { white-space: nowrap; } .t-upload__single-file-input .t-input__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .t-upload__dragger-progress { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-upload__dragger-progress .t-icon, .t-upload__dragger-progress .t-loading { font-size: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__dragger-img-wrap { width: 110px; height: 110px; background-color: var(--td-bg-color-secondarycontainer); border-radius: var(--td-radius-default); 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; -ms-flex-negative: 0; flex-shrink: 0; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square { width: 100%; } .t-upload__dragger-img-wrap > .t-image__wrapper--shape-square .t-space-item { text-align: center; } .t-upload__dragger-img-wrap > img { max-width: 100%; max-height: 100%; } .t-upload__dragger-img-wrap + .t-upload__dragger-progress-info { margin-left: var(--td-comp-margin-l); max-width: calc(336px - var(--td-comp-margin-l) * 2 - calc(110px + var(--td-comp-margin-l))); } .t-upload__dragger-progress-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-upload__dragger-progress-info .t-upload__single-display-text { margin-bottom: var(--td-comp-margin-s); } .t-upload__dragger-progress-info .t-button:hover { background-color: transparent; } .t-upload__dragger-progress-cancel, .t-upload__dragger-progress-reupload { margin-right: var(--td-comp-margin-l); } .t-upload__dragger-progress-cancel:hover, .t-upload__dragger-progress-reupload:hover { border-color: transparent; } .t-upload__dragger-delete-btn:hover, .t-upload__dragger-upload-btn:hover { border-color: transparent; } .t-upload__flow-image-flow { width: 498px; } .t-upload__flow { min-width: 498px; max-width: 960px; } .t-upload__flow-placeholder { display: inline-block; margin-left: var(--td-comp-margin-l); } .t-upload__flow-op { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__flow-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: var(--td-comp-margin-xxl); } .t-upload__flow-bottom .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-upload__flow-empty { width: 100%; height: 184px; 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; color: var(--td-text-color-placeholder); } .t-upload__flow-table { width: 100%; border: 1px dashed var(--td-component-border); margin-top: var(--td-comp-margin-xxl); border-collapse: collapse; } .t-upload__flow-table > thead > tr, .t-upload__flow-table > tbody > tr, .t-upload__flow-table > tfoot > tr, .t-upload__flow-table > tr { border-top: 1px solid var(--td-component-border); } .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { color: var(--td-text-color-placeholder); font-weight: normal; border: 1px solid var(--td-component-border); text-align: left; background-color: var(--td-bg-color-container); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td { color: var(--td-text-color-primary); } .t-upload__flow-table > thead > tr > td, .t-upload__flow-table > tbody > tr > td, .t-upload__flow-table > tfoot > tr > td, .t-upload__flow-table > tr > td, .t-upload__flow-table > thead > tr > th, .t-upload__flow-table > tbody > tr > th, .t-upload__flow-table > tfoot > tr > th, .t-upload__flow-table > tr > th { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-upload__flow-table__batch-row { border-left: 1px solid var(--td-component-border); } .t-upload__flow-button { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__flow-button:hover { color: var(--td-text-color-secondary); } .t-upload__flow-status { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__flow-status .t-icon, .t-upload__flow-status .t-loading { margin-right: var(--td-comp-margin-s); font-size: calc(var(--td-font-size-body-medium) + 2px); } .t-upload__flow-card-area { border: 1px dashed var(--td-component-border); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); margin-top: var(--td-comp-margin-xxl); -webkit-transition: border 0.2s linear; transition: border 0.2s linear; } .t-upload__flow-card-area:hover { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-upload__icon-delete, .t-upload__single-input-clear { color: var(--td-text-color-placeholder); cursor: pointer; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-upload__icon-delete:hover, .t-upload__single-input-clear:hover { color: var(--td-text-color-secondary); -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .t-icon.t-upload__single-input-clear { display: none; } .t-upload__single-input-preview:hover .t-upload__single-input-clear { display: initial; } .t-upload__single-input-preview:hover .t-upload__status-icon { display: none; } .t-upload .t-upload__single-name { color: var(--td-text-color-secondary); } .t-upload .t-upload__file-thumbnail { margin-right: var(--td-comp-paddingLR-s); width: var(--td-comp-size-xxl); height: var(--td-comp-size-xxl); 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; cursor: pointer; } .t-upload .t-upload__file-thumbnail > svg { font-size: var(--td-comp-size-s); color: var(--td-text-color-placeholder); } .t-upload__card-name { margin-top: 8px; } .t-upload--theme-file-input { width: 100%; } .t-upload__dragger-btns > .t-button { padding: 0; } .t-upload__file-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-upload__card-container.t-is-disabled { cursor: not-allowed; } .t-upload__card-container.t-is-disabled .t-upload__add-text { color: var(--td-text-color-disabled); } .t-upload__card-container.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .input-readonly.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .input-readonly.t-is-readonly .t-input__inner { cursor: pointer; } .input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .input-disabled.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .input-disabled.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon, .input-disabled.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .input-disabled.t-is-disabled > .t-input__prefix .t-icon:hover, .input-disabled.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-tips { font-size: var(--td-font-size-body-small); } .t-tips.t-is-default { color: var(--td-text-color-placeholder); } .t-tips.t-is-error { color: var(--td-error-color); } .t-tips.t-is-warning { color: var(--td-warning-color); } .t-tips.t-is-success { color: var(--td-success-color); } .t-input { margin: 0; padding: 0; list-style: none; position: relative; height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: 0 var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); outline: none; color: var(--td-text-color-primary); font: var(--td-font-body-medium); width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } .t-input:hover { border-color: var(--td-brand-color); } .t-input:focus { z-index: 1; 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-input--borderless:not(.t-input--focused) { border-color: transparent; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input--borderless:not(.t-input--focused):hover { border-color: var(--td-component-border); background-color: var(--td-bg-color-container-hover); cursor: pointer; } .t-input--borderless:not(.t-input--focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .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); z-index: 1; } .t-input :focus-visible { outline: none; } .t-input__inner { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 0; max-width: 100%; min-width: 0; color: var(--td-text-color-primary); font: inherit; background-color: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-moz-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-placeholder); } .t-input__inner::placeholder { color: var(--td-text-color-placeholder); } .t-input__inner:-moz-placeholder { text-overflow: ellipsis; width: 100%; } .t-input__inner:-ms-input-placeholder { text-overflow: ellipsis; width: 100%; } .t-input__inner:placeholder-shown { text-overflow: ellipsis; width: 100%; } .t-input__inner[type="password"]::-ms-reveal { display: none; } .t-input__inner[type="search"]::-webkit-search-decoration, .t-input__inner[type="search"]::-webkit-search-cancel-button, .t-input__inner[type="search"]::-webkit-search-results-button, .t-input__inner[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; } .t-input__inner.t-input--soft-hidden { width: 0; } .t-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__status { position: absolute; right: -24px; top: 0; } .t-input.t-input--suffix > span.t-input__clear { opacity: 0; visibility: hidden; -webkit-transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: border cubic-bezier(0.38, 0, 0.24, 1) 0.2s, box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s, background-color cubic-bezier(0.38, 0, 0.24, 1) 0.2s, -webkit-box-shadow cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input.t-input--suffix:hover > span.t-input__clear { opacity: 1; visibility: visible; } .t-input.t-is-success { border-color: var(--td-success-color); } .t-input.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-input.t-is-success.t-input--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-input.t-is-success > .t-input__extra { color: var(--td-success-color); } .t-input.t-is-warning { border-color: var(--td-warning-color); } .t-input.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-input.t-is-warning > .t-input__extra { color: var(--td-warning-color); } .t-input.t-is-error { border-color: var(--td-error-color); } .t-input.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error.t-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-input.t-is-error > .t-input__extra { color: var(--td-error-color); } .t-input.t-is-readonly { color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); } .t-input.t-is-readonly .t-input__inner { cursor: pointer; } .t-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input.t-is-disabled .t-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); text-overflow: initial; } .t-input.t-is-disabled .t-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled .t-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon, .t-input.t-is-disabled > .t-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-input.t-is-disabled > .t-input__prefix .t-icon:hover, .t-input.t-is-disabled > .t-input__suffix .t-icon:hover { color: var(--td-text-color-disabled); } .t-input.t-input--prefix > .t-input__prefix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--prefix > .t-input__prefix-icon { font-size: var(--td-font-size-body-large); } .t-input.t-input--suffix > .t-input__suffix { z-index: 2; height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-input.t-input--suffix > .t-input__suffix-icon { font-size: var(--td-font-size-body-large); } .t-input .t-input__suffix-clear { cursor: pointer; } .t-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-m); } .t-input.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .t-input .t-input__prefix > .t-icon, .t-input .t-input__suffix > .t-icon { font-size: inherit; } .t-input .t-input__prefix > .t-icon { font-size: 16px; color: var(--td-text-color-placeholder); } .t-input .t-input__prefix:not(:empty) { margin-right: var(--td-comp-margin-s); } .t-input .t-input__suffix > .t-icon { color: var(--td-text-color-placeholder); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix > .t-icon:hover { color: var(--td-text-color-secondary); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-input .t-input__suffix:not(:empty) { margin-left: var(--td-comp-margin-s); } .t-input.t-is-focused .t-input__prefix > .t-icon { color: var(--td-brand-color); } .t-input.t-is-focused .t-input__suffix > .t-icon-time, .t-input.t-is-focused .t-input__suffix .t-icon-calendar { color: var(--td-brand-color); } .t-input-group { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .t-input-group .t-input__wrap { border-radius: 0; } .t-input-group .t-input__wrap:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button, .t-input-group .t-select { border-radius: 0; } .t-input-group .t-button:not(:first-child), .t-input-group .t-select:not(:first-child) { margin-left: -1px; } .t-input-group .t-input__wrap:not(:first-child) .t-input { margin-left: -1px; } .t-input-group .t-input__wrap:first-child .t-input { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-input__wrap:last-child .t-input { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group .t-button:first-child, .t-input-group .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group .t-button:last-child, .t-input-group .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap + .t-input__wrap { margin-left: var(--td-comp-margin-xxxl); } .t-input-group--separate .t-button, .t-input-group--separate .t-select { border-radius: var(--td-radius-default); } .t-input-group--separate .t-button:first-child, .t-input-group--separate .t-select:first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-group--separate .t-button:last-child, .t-input-group--separate .t-select:last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-group--separate .t-input__wrap .t-input { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:first-child { border-radius: var(--td-radius-default); } .t-input-group--separate .t-input__wrap .t-input:last-child { border-radius: var(--td-radius-default); } .t-input-group .t-input__inner, .t-input-group .t-button, .t-input-group .t-select { position: relative; z-index: 0; } .t-input-group .t-input__inner:hover, .t-input-group .t-button:hover, .t-input-group .t-select:hover, .t-input-group .t-input__inner:focus, .t-input-group .t-button:focus, .t-input-group .t-select:focus, .t-input-group .t-input__inner:active, .t-input-group .t-button:active, .t-input-group .t-select:active { z-index: 1; } .t-input__wrap { width: 100%; } .t-input__tips { height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); position: absolute; } .t-input__tips--default { color: var(--td-text-color-placeholder); } .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-align-center > .t-input__inner { text-align: center; } .t-align-right > .t-input__inner { text-align: right; } .t-input__input-pre { position: absolute; visibility: hidden; white-space: pre; display: block; } .t-input--auto-width { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; min-width: 60px; } .t-input__limit-number { font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); background: var(--td-bg-color-specialcomponent); } .t-input__limit-number.t-is-disabled { background: var(--td-bg-color-component-disabled); } .t-tag { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0px var(--td-comp-paddingLR-s); height: var(--td-comp-size-xs); font: var(--td-font-body-small); color: var(--td-text-color-anti); border-radius: var(--td-radius-default); border: 1px solid transparent; white-space: nowrap; } .t-tag .t-icon { margin-right: var(--td-comp-margin-xs); width: calc(var(--td-font-size-body-medium) + 2px); height: calc(var(--td-font-size-body-medium) + 2px); -ms-flex-negative: 0; flex-shrink: 0; } .t-tag .t-tag__icon-close { margin-right: 0; margin-left: var(--td-comp-margin-s); font: var(--td-font-body-medium); cursor: pointer; -webkit-transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: color 0.2s cubic-bezier(0.38, 0, 0.24, 1); } .t-tag--default { color: var(--td-text-color-primary); background-color: var(--td-bg-color-component); } .t-tag--default .t-tag__icon-close { color: var(--td-text-color-placeholder); } .t-tag--default .t-tag__icon-close:hover { color: var(--td-text-color-primary); } .t-tag--default:active { cursor: default; } .t-tag--default.t-tag--disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-component-border); cursor: not-allowed; } .t-tag--default.t-tag--disabled:hover { cursor: not-allowed; } .t-tag--default.t-tag--disabled .t-icon:hover { cursor: pointer; } .t-tag--default.t-tag--outline { border-color: var(--td-component-border); } .t-tag--default.t-tag--light { background-color: var(--td-bg-color-secondarycontainer); } .t-tag--default.t-tag--light-outline { border-color: var(--td-component-border); background-color: var(--td-bg-color-secondarycontainer); } .t-tag--primary { background-color: var(--td-brand-color); } .t-tag--primary.t-tag--outline { border-color: var(--td-brand-color); } .t-tag--primary.t-tag--light { background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light-outline { border-color: var(--td-brand-color); background-color: var(--td-brand-color-light); } .t-tag--primary.t-tag--light, .t-tag--primary.t-tag--outline, .t-tag--primary.t-tag--light-outline { color: var(--td-brand-color); } .t-tag--primary.t-tag--light .t-tag__icon-close:hover, .t-tag--primary.t-tag--outline .t-tag__icon-close:hover, .t-tag--primary.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-brand-color-hover); } .t-tag--success { background-color: var(--td-success-color); } .t-tag--success.t-tag--outline { border-color: var(--td-success-color); } .t-tag--success.t-tag--light { background-color: var(--td-success-color-light); } .t-tag--success.t-tag--light-outline { border-color: var(--td-success-color); background-color: var(--td-success-color-light); } .t-tag--success.t-tag--light, .t-tag--success.t-tag--outline, .t-tag--success.t-tag--light-outline { color: var(--td-success-color); } .t-tag--success.t-tag--light .t-tag__icon-close:hover, .t-tag--success.t-tag--outline .t-tag__icon-close:hover, .t-tag--success.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-success-color-hover); } .t-tag--warning { background-color: var(--td-warning-color); } .t-tag--warning.t-tag--outline { border-color: var(--td-warning-color); } .t-tag--warning.t-tag--light { background-color: var(--td-warning-color-light); } .t-tag--warning.t-tag--light-outline { border-color: var(--td-warning-color); background-color: var(--td-warning-color-light); } .t-tag--warning.t-tag--light, .t-tag--warning.t-tag--outline, .t-tag--warning.t-tag--light-outline { color: var(--td-warning-color); } .t-tag--warning.t-tag--light .t-tag__icon-close:hover, .t-tag--warning.t-tag--outline .t-tag__icon-close:hover, .t-tag--warning.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-warning-color-hover); } .t-tag--danger { background-color: var(--td-error-color); } .t-tag--danger.t-tag--outline { border-color: var(--td-error-color); } .t-tag--danger.t-tag--light { background-color: var(--td-error-color-light); } .t-tag--danger.t-tag--light-outline { border-color: var(--td-error-color); background-color: var(--td-error-color-light); } .t-tag--danger .t-tag__icon-close { fill: var(--td-error-color); } .t-tag--danger .t-tag__icon-close:hover { fill: var(--td-error-color-hover); } .t-tag--danger.t-tag--light, .t-tag--danger.t-tag--outline, .t-tag--danger.t-tag--light-outline { color: var(--td-error-color); } .t-tag--danger.t-tag--light .t-tag__icon-close:hover, .t-tag--danger.t-tag--outline .t-tag__icon-close:hover, .t-tag--danger.t-tag--light-outline .t-tag__icon-close:hover { color: var(--td-error-color-hover); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close { color: var(--td-font-white-2); } .t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover { color: var(--td-font-white-1); } .t-tag.t-tag--outline { background: transparent; } .t-tag.t-size-s { padding: 0px var(--td-comp-paddingLR-xs); height: var(--td-comp-size-xxs); font: var(--td-font-body-small); } .t-tag.t-size-s .t-icon { font-size: var(--td-font-body-small); } .t-tag.t-size-l { padding: 0px var(--td-comp-paddingLR-m); height: var(--td-comp-size-m); font: var(--td-font-body-medium); } .t-tag.t-size-l .t-icon { font: var(--td-font-body-medium); } .t-tag.t-tag--round { border-radius: var(--td-radius-extraLarge); } .t-tag.t-tag--mark { border-radius: 0 var(--td-radius-extraLarge) var(--td-radius-extraLarge) 0; } .t-tag.t-tag--ellipsis .t-tag--text { display: inline-block; white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow: ellipsis; } .t-tag.t-tag--check:not(.t-tag--disabled) { -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); cursor: pointer; } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--dark:not(.t-tag--checked):hover { background-color: var(--td-bg-color-component-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--primary.t-tag--dark.t-tag--checked:hover { background-color: var(--td-brand-color-hover); } .t-tag.t-tag--check:not(.t-tag--disabled).t-tag--default.t-tag--outline:not(.t-tag--checked):hover { color: var(--td-brand-color-hover); } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--dark { background-color: var(--td-brand-color-disabled); cursor: not-allowed; } .t-tag--check.t-tag--disabled.t-tag--primary.t-tag--outline { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); border-color: var(--td-text-color-disabled); cursor: not-allowed; } .t-check-tag-group .t-tag:not(:last-child) { margin-right: var(--td-comp-margin-s); } a .t-tag { cursor: pointer; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } a .t-tag:hover { color: var(--td-brand-color); background-color: var(--td-bg-color-component-hover); } a .t-tag:active { color: var(--td-brand-color-active); background-color: var(--td-bg-color-component-active); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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-tag-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; /** 设计稿:未填充标签场景,边距和已填充不同 */ } .t-tag-input .t-tag { vertical-align: middle; -webkit-animation: t-fade-in 0.2s ease-in-out; animation: t-fade-in 0.2s ease-in-out; margin: 3px var(--td-comp-margin-xs) 3px 0; } .t-tag-input .t-tag-input__drag_wrapper + .t-tag-input__drag_wrapper { margin-left: var(--td-comp-margin-xs); } .t-tag-input .t-input { overflow: hidden; min-height: var(--td-comp-size-m); height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); } .t-tag-input .t-input .t-input__suffix-icon { right: var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-s { padding: 0 var(--td-comp-paddingLR-s) 0 var(--td-comp-margin-xs); min-height: var(--td-comp-size-xs); } .t-tag-input .t-input.t-size-s .t-tag { margin: 1px var(--td-comp-margin-xs) 1px 0; } .t-tag-input .t-input.t-size-l { min-height: var(--td-comp-size-xl); padding: 0 var(--td-comp-paddingLR-m) 0 var(--td-comp-margin-s); } .t-tag-input .t-input.t-size-l .t-input__suffix-icon { right: var(--td-comp-margin-m); } .t-tag-input.t-is-empty .t-input__inner { margin-left: var(--td-comp-margin-xs); } .t-tag-input:hover .t-input__inner:not(.t-input--soft-hidden), .t-tag-input .t-input--focused .t-input__inner:not(.t-input--soft-hidden) { min-width: 20px; } .t-tag-input .t-tag-input__prefix { margin-left: var(--td-comp-margin-xs); line-height: 1; } .t-tag-input .t-tag-input__prefix > .t-icon { color: var(--td-text-color-placeholder); } .t-tag-input .t-input .t-input__prefix:not(:empty) { margin-right: 0; } .t-tag-input.t-input--auto-width .t-input.t-input--focused { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input.t-input--auto-width .t-input__prefix { white-space: nowrap; } .t-tag-input .t-input__prefix--scrollable { overflow-y: hidden; overflow-x: auto; } @-moz-document url-prefix() { .t-tag-input .t-input__prefix--scrollable { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:vertical:hover, .t-tag-input .t-input__prefix--scrollable::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-tag-input__suffix-clear { cursor: pointer; } .t-tag-input--break-line:not(.t-is-empty) .t-input { display: block; } .t-tag-input--break-line:not(.t-is-empty) .t-input.t-input--prefix > .t-input__prefix { display: inline; text-align: left; } .t-tag-input--break-line:not(.t-is-empty) .t-input .t-input__suffix-icon { position: absolute; bottom: 0; } .t-tag-input--break-line:not(.t-is-empty) .t-tag-input__prefix { vertical-align: middle; } .t-tag-input__prefix { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: inline-block; margin-right: var(--td-comp-margin-s); } /** 换行模式避免标签和右侧图标重合,需保留图标宽度 22px 和左侧距离标签间距 8px */ .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-input, .t-tag-input.t-input--auto-width:hover .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xxs)); } .t-tag-input--break-line.t-tag-input--with-tag:not(.t-input--auto-width) .t-size-l .t-input, .t-tag-input.t-input--auto-width:hover .t-size-l .t-input { padding-right: calc(var(--td-comp-paddingLR-xxl) + var(--td-comp-paddingLR-xs)); } /** auto-width 模式,左右边距相同 */ .t-tag-input.t-input--auto-width .t-input { padding-right: 0; } /** max-rows模式,限制最大高度 */ .t-tag-input--max-rows .t-input { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-m) - 2px)); overflow-y: scroll; } .t-tag-input--max-rows .t-input.t-size-s { max-height: calc(var(--max-rows, 1) * var(--td-comp-size-xs)); } .t-tag-input--max-rows .t-input.t-size-l { max-height: calc(var(--max-rows, 1) * (var(--td-comp-size-xl) - 2px)); } .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; background: 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; background: transparent; -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); } .t-select__wrap { width: 100%; } .t-select__dropdown .t-popup__content { 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); } @-moz-document url-prefix() { .t-select__dropdown .t-popup__content { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .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 { min-height: var(--td-comp-size-m); } .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 { min-height: var(--td-comp-size-xs); } .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 { min-height: var(--td-comp-size-xl); } .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 { min-height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-select__loading-tips { position: fixed; top: var(--td-comp-paddingTB-s); left: 0; bottom: var(--td-comp-paddingTB-s); right: 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; background-color: var(--td-bg-color-container); border-radius: var(--td-radius-default); min-height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); color: var(--td-text-color-disabled); z-index: 1000; } .t-select__loading-tips.t-size-l { min-height: var(--td-comp-size-xl); 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:not(.t-is-disabled) { 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:not(.t-is-disabled) .t-checkbox__label { color: var(--td-brand-color); } .t-select-option.t-is-selected:not(.t-is-disabled):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); } .t-is-selected.t-select-option__hover { background-color: var(--td-brand-color-light-hover); } .t-is-selected.t-select-option__hover .t-checkbox__label { color: var(--td-brand-color); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { font: var(--td-font-body-medium); color: var(--td-text-color-primary); margin: 0; padding: 0; list-style: none; display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 var(--td-comp-size-m); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 144px; } .t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap { margin-left: var(--td-comp-margin-xs); } .t-input-number input::-webkit-outer-spin-button, .t-input-number input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; } .t-input-number input[type="number"] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .t-input-number > .t-input__tips { position: absolute; left: 0; } .t-input-number input + .t-input__suffix { margin-left: var(--td-comp-paddingLR-s); } .t-input-number .t-input__prefix { margin-right: var(--td-comp-paddingLR-s); } .t-input-number .t-input { color: var(--td-text-color-primary); } .t-input-number.t-input-number--auto-width { width: auto; } .t-input-number.t-input-number--auto-width.t-is-controls-right { min-width: auto; width: auto; } .t-input-number.t-input-number--auto-width .t-input__inner { min-width: 42px; } .t-input-number .t-input-number__decrease, .t-input-number .t-input-number__increase { width: var(--td-comp-size-m); height: var(--td-comp-size-m); position: absolute; top: 0; border: 1px solid var(--td-border-level-2-color); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-default); background-color: transparent; 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; z-index: 1; cursor: pointer; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-input-number .t-input-number__decrease:hover, .t-input-number .t-input-number__increase:hover { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:hover .t-icon, .t-input-number .t-input-number__increase:hover .t-icon { color: var(--td-brand-color); } .t-input-number .t-input-number__decrease:active, .t-input-number .t-input-number__increase:active { color: var(--td-brand-color); background-color: var(--td-bg-color-container-hover); } .t-input-number .t-input-number__decrease .t-icon, .t-input-number .t-input-number__increase .t-icon { position: relative; z-index: 1; font-size: var(--td-font-size-body-large); color: var(--td-text-color-secondary); } .t-input-number .t-input-number__decrease.t-is-disabled, .t-input-number .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled:hover, .t-input-number .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number .t-input-number__increase.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number .t-input-number__decrease { left: 0; } .t-input-number .t-input-number__increase { right: -8px; } .t-input-number.t-is-disabled .t-input { cursor: no-drop; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-input-number.t-is-disabled .t-input:hover, .t-input-number.t-is-disabled .t-input:focus, .t-input-number.t-is-disabled .t-input:active { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-disabled .t-input-number__decrease, .t-input-number.t-is-disabled .t-input-number__increase { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-disabled .t-input-number__decrease .t-icon, .t-input-number.t-is-disabled .t-input-number__increase .t-icon { color: var(--td-text-color-secondary); } .t-input-number.t-size-s { width: 120px; padding: 0 var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input { font-size: var(--td-font-size-body-small); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-input-number.t-size-s .t-input-number__decrease, .t-input-number.t-size-s .t-input-number__increase { font-size: var(--td-font-size-body-medium); width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); } .t-input-number.t-size-l { width: 168px; padding: 0 var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); } .t-input-number.t-size-l .t-input-number__decrease, .t-input-number.t-size-l .t-input-number__increase { font-size: 18px; width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); } .t-input-number.t-size-l.t-is-controls-right .t-input { height: var(--td-comp-size-xl); line-height: var(--td-comp-size-xl); padding-right: calc(var(--td-comp-size-xl) + var(--td-comp-paddingLR-s)); } .t-input-number.t-size-l.t-is-controls-right .t-input-number__decrease, .t-input-number.t-size-l.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-xl); font-size: var(--td-font-size-body-large); } .t-input-number.t-size-l .t-input--prefix { font: var(--td-font-body-large); padding: 0 var(--td-comp-paddingLR-m); } .t-input-number.t-input-number--normal { padding: 0; border-radius: var(--td-radius-default); } .t-input-number.t-input-number--normal.t-is-disabled { cursor: no-drop; color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled:hover .t-input { border-color: var(--td-border-level-2-color); } .t-input-number.t-input-number--normal.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-input-number--normal.t-is-disabled .t-input:focus { -webkit-box-shadow: none; box-shadow: none; } .t-input-number.t-is-controls-right { width: 96px; padding: 0; } .t-input-number.t-is-controls-right:hover .t-input-number__decrease, .t-input-number.t-is-controls-right:hover .t-input-number__increase { opacity: 1; visibility: visible; } .t-input-number.t-is-controls-right .t-input { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding-right: calc(var(--td-comp-size-m) + var(--td-comp-paddingLR-s)); border-radius: var(--td-radius-default); } .t-input-number.t-is-controls-right .t-input-number__decrease, .t-input-number.t-is-controls-right .t-input-number__increase { width: var(--td-comp-size-m); height: calc(calc(var(--td-comp-size-m) / 2) - 2px); border: 0; left: initial; top: initial; right: 1px; border-radius: 0; background: var(--td-bg-color-secondarycontainer); opacity: 0; visibility: hidden; z-index: 2; } .t-input-number.t-is-controls-right .t-input-number__decrease .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase .t-icon { font-size: var(--td-font-size-body-small); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover, .t-input-number.t-is-controls-right .t-input-number__increase:hover { background: var(--td-bg-color-component-hover); } .t-input-number.t-is-controls-right .t-input-number__decrease:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase:hover .t-icon { color: var(--td-text-color-primary); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled { color: var(--td-text-color-disabled); cursor: no-drop; background-color: var(--td-bg-color-component-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:hover .t-icon, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:hover .t-icon { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-webkit-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-moz-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-moz-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled:-ms-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::-ms-input-placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__decrease.t-is-disabled::placeholder, .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder { color: var(--td-text-color-disabled); } .t-input-number.t-is-controls-right .t-input-number__increase { top: 1px; border-top-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-m) / 2) - 2px) + 3px); border-bottom-right-radius: calc(var(--td-radius-default) - 1px); } .t-input-number.t-is-controls-right.t-size-l { width: 120px; } .t-input-number.t-is-controls-right.t-size-l .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xl) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xl) / 2) - 2px) + 3px); } .t-input-number.t-is-controls-right.t-size-s { width: 88px; } .t-input-number.t-is-controls-right.t-size-s .t-input-number__increase, .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { height: calc(calc(var(--td-comp-size-xs) / 2) - 2px); } .t-input-number.t-is-controls-right.t-size-s .t-input-number__decrease { top: calc(calc(calc(var(--td-comp-size-xs) / 2) - 2px) + 3px); } .t-input-number--row .t-input__wrap { width: initial; margin-right: var(--td-comp-margin-xs); } .t-input-number--row .t-input-number__increase { right: 0; } .t-input-adornment { 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; display: -webkit-box; display: -ms-flexbox; display: flex; } .t-input-adornment__prepend .t-input, .t-input-adornment__append .t-input, .t-input-adornment__prepend .t-textarea__inner, .t-input-adornment__append .t-textarea__inner { background-color: transparent; } .t-input-adornment__prepend { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-right: -1px; } .t-input-adornment__append { background-color: var(--td-bg-color-secondarycontainer); color: var(--td-text-color-primary); word-break: keep-all; margin-left: -1px; } .t-input-adornment__text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; padding: 0 var(--td-comp-paddingLR-s); border: 1px solid var(--td-border-level-2-color); } .t-input-adornment > :first-child { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :first-child .t-input, .t-input-adornment > :first-child .t-input-adornment__text, .t-input-adornment > :first-child .t-textarea__inner { border-radius: var(--td-radius-default) 0 0 var(--td-radius-default); } .t-input-adornment > :last-child { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :last-child .t-input, .t-input-adornment > :last-child .t-input-adornment__text, .t-input-adornment > :last-child .t-textarea__inner { border-radius: 0 var(--td-radius-default) var(--td-radius-default) 0; } .t-input-adornment > :not(:last-child):hover { z-index: 2; } .t-input-adornment > :not(:first-child):not(:last-child) .t-input, .t-input-adornment > :not(:first-child):not(:last-child) .t-textarea__inner { border-radius: 0; } .t-pagination-mini { 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-pagination-mini--outline .t-pagination-mini__prev { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__current { border-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__current:hover { z-index: 1; } .t-pagination-mini--outline .t-pagination-mini__next { border-top-left-radius: 0; border-bottom-left-radius: 0; position: relative; margin-left: -1px; } .t-pagination-mini--outline .t-pagination-mini__next:hover { z-index: 1; } .t-pagination { 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; white-space: nowrap; color: var(--td-text-color-secondary); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .t-pagination.t-is-disabled { color: var(--td-text-color-disabled); } .t-pagination__total { font: var(--td-font-body-medium); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-pagination .t-select__wrap { width: auto; } .t-pagination__select { -ms-flex-negative: 0; flex-shrink: 0; margin-right: var(--td-comp-margin-l); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary); } .t-pagination__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer; color: var(--td-text-color-secondary); border-radius: var(--td-radius-default); font: var(--td-font-body-large); width: var(--td-comp-size-m); height: var(--td-comp-size-m); line-height: var(--td-comp-size-m); } .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -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__btn:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__btn.t-is-disabled, .t-pagination__btn.t-is-disabled:hover, .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } .t-pagination__btn.t-is-disabled { cursor: not-allowed; } .t-pagination__btn-prev { margin-right: var(--td-comp-margin-s); } .t-pagination__btn-next { margin-left: var(--td-comp-margin-s); } .t-pagination__btn + .t-pagination__select { margin-right: 0; } .t-pagination__pager { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; vertical-align: middle; list-style: none; padding: 0; margin: 0; } .t-pagination__pager li:not(:last-child) { margin-right: var(--td-comp-margin-s); } .t-pagination__number { display: inline-block; border: 1px solid var(--td-component-border); text-align: center; border-radius: var(--td-radius-default); cursor: pointer; background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; height: var(--td-comp-size-m); min-width: var(--td-comp-size-m); line-height: calc(var(--td-comp-size-m) - 2px); font-size: var(--td-font-body-medium); padding-left: var(--td-comp-paddingLR-xs); padding-right: var(--td-comp-paddingLR-xs); } .t-pagination__number:hover { color: var(--td-brand-color-hover); border-color: var(--td-brand-color-hover); -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:active { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current { background-color: var(--td-brand-color); color: var(--td-text-color-anti); border-color: var(--td-brand-color); } .t-pagination__number.t-is-current.t-is-disabled, .t-pagination__number.t-is-current.t-is-disabled:hover, .t-pagination__number.t-is-current.t-is-disabled:active { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination__number.t-is-disabled { cursor: auto; background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); } .t-pagination__number.t-is-disabled:hover, .t-pagination__number.t-is-disabled:active { background-color: var(--td-bg-color-component-disabled); color: var(--td-text-color-disabled); border-color: var(--td-component-border); } .t-pagination__number--more { border: 0 none; padding: 0; } .t-pagination__number--more:hover { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -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--more:active { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination__number--more.t-is-disabled, .t-pagination__number--more.t-is-disabled:hover, .t-pagination__number--more.t-is-disabled:active { background: none; } .t-pagination__number--more .t-icon-more { -webkit-transform: rotate(90deg); transform: rotate(90deg); color: var(--td-text-color-disabled); } .t-pagination__jump { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; margin-left: var(--td-comp-margin-s); font-size: var(--td-font-body-medium); gap: var(--td-comp-margin-s); background-color: var(--td-bg-color-secondarycontainer); height: var(--td-comp-size-m); padding-left: var(--td-comp-margin-s); border-radius: var(--td-radius-default); } .t-pagination .t-input-adornment__append { border: none; height: calc(var(--td-comp-size-m) - 4px); color: var(--td-text-color-secondary); background-color: transparent; } .t-pagination .t-input-adornment__append .t-input-adornment__text { border: none; } .t-pagination .t-input-number { width: 56px; } .t-pagination .t-input-number .t-input { height: calc(var(--td-comp-size-m) - 4px); border-radius: var(--td-radius-default); } .t-pagination .t-input-number .t-input__inner { text-align: center; } .t-pagination.t-size-s { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__jump { height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-input-adornment__append { height: calc(var(--td-comp-size-xs) - 4px); font: var(--td-font-body-small); } .t-pagination.t-size-s .t-input-number { width: 48px; } .t-pagination.t-size-s .t-input-number .t-input { height: calc(var(--td-comp-size-xs) - 4px); } .t-pagination.t-size-s .t-pagination__total { font: var(--td-font-body-small); } .t-pagination.t-size-s .t-pagination__select { height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-small); } .t-pagination.t-size-s .t-pagination__number { border: 0 none; height: var(--td-comp-size-xs); min-width: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); font-size: var(--td-font-body-small); padding-left: var(--td-comp-paddingLR-xxs); padding-right: var(--td-comp-paddingLR-xxs); } .t-pagination.t-size-s .t-pagination__number:hover:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-hover); -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__number:active:not(.t-pagination.t-size-s .t-pagination__number.t-is-current) { color: var(--td-text-color-primary); background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__number.t-is-disabled { background: none; color: var(--td-text-color-disabled); } .t-pagination.t-size-s .t-pagination__number.t-is-current.t-is-disabled { background-color: var(--td-brand-color-focus); color: var(--td-text-color-anti); border-color: var(--td-brand-color-focus); } .t-pagination.t-size-s .t-pagination__btn { border: 0 none; background: none; width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); line-height: var(--td-comp-size-xs); } .t-pagination.t-size-s .t-pagination__btn:hover { background-color: var(--td-bg-color-secondarycontainer-hover); -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:active { background-color: var(--td-bg-color-secondarycontainer-active); } .t-pagination.t-size-s .t-pagination__btn.t-is-disabled, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:hover, .t-pagination.t-size-s .t-pagination__btn.t-is-disabled:active { background: none; color: var(--td-text-color-disabled); } /** IE 兼容 **/ .t-pagination-ie { /** 在 IE11 以下浏览器,input autoWidth 计算无法依赖 observer,因而加上最小宽度,避免分页信息出现 0 的情况 */ } .t-pagination-ie .t-select .t-input__inner { min-width: 54px; } .range-input-disabled.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .range-input-disabled.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .range-input-disabled.t-is-disabled .t-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled .t-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .range-input-disabled.t-is-disabled > .t-range-input__prefix .t-icon, .range-input-disabled.t-is-disabled > .t-range-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-range-input { margin: 0; padding: 0; list-style: none; width: 100%; position: relative; font: var(--td-font-body-medium); height: var(--td-comp-size-m); border-width: 1px; border-style: solid; border-radius: var(--td-radius-default); border-color: var(--td-border-level-2-color); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s) var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); background-color: var(--td-bg-color-specialcomponent); color: var(--td-text-color-primary); font-size: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4px; } .t-range-input:hover { border-color: var(--td-brand-color); } .t-range-input--borderless:not(.t-is-focused) { border-color: transparent; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-range-input--borderless:not(.t-is-focused):hover { border-color: var(--td-component-border); cursor: pointer; } .t-range-input--borderless:not(.t-is-focused).t-is-disabled { border: none; background-color: var(--td-bg-color-component-disabled); } .t-range-input.t-is-focused { z-index: 1; 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-range-input.t-is-success { border-color: var(--td-success-color); } .t-range-input.t-is-success:focus { -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus); box-shadow: 0 0 0 2px var(--td-success-color-focus); } .t-range-input.t-is-success.t-range-input--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-range-input.t-is-success > .t-range-input__extra { color: var(--td-success-color); } .t-range-input.t-is-success > .t-range-input__tips { color: var(--td-success-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-warning { border-color: var(--td-warning-color); } .t-range-input.t-is-warning:focus { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-range-input.t-is-warning.t-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-range-input.t-is-warning > .t-range-input__extra { color: var(--td-warning-color); } .t-range-input.t-is-warning > .t-range-input__tips { color: var(--td-warning-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-error { border-color: var(--td-error-color); } .t-range-input.t-is-error:focus { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-range-input.t-is-error.t-range-input--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-range-input.t-is-error > .t-range-input__extra { color: var(--td-error-color); } .t-range-input.t-is-error > .t-range-input__tips { color: var(--td-error-color); font-size: var(--td-font-size-body-small); margin-left: calc(-1 * var(--td-comp-paddingLR-xs)); } .t-range-input.t-is-disabled { color: var(--td-text-color-disabled); background-color: var(--td-bg-color-component-disabled); } .t-range-input.t-is-disabled:hover { border-color: var(--td-border-level-2-color); } .t-range-input.t-is-disabled .t-range-input__inner { cursor: not-allowed; color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-webkit-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-moz-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner:-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::-ms-input-placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled .t-range-input__inner::placeholder { color: var(--td-text-color-disabled); } .t-range-input.t-is-disabled > .t-range-input__prefix .t-icon, .t-range-input.t-is-disabled > .t-range-input__suffix .t-icon { color: var(--td-text-color-disabled); } .t-range-input.t-range-input--prefix .t-range-input__prefix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .t-range-input.t-range-input--suffix .t-range-input__suffix { height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: var(--td-font-size-body-medium); } .t-range-input.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-top: var(--td-comp-paddingTB-xs); padding-bottom: var(--td-comp-paddingTB-xs); } .t-range-input.t-size-l .t-input { padding: 0 var(--td-comp-margin-s); } .t-range-input.t-size-s { padding: var(--td-comp-paddingTB-xxs) var(--td-comp-margin-xs); height: var(--td-comp-size-xs); font: var(--td-font-body-small); } .t-range-input__inner { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: var(--td-comp-margin-s); } .t-range-input__inner .t-input__wrap { height: 100%; border-radius: var(--td-radius-small); } .t-range-input__inner > .t-range-input__prefix { -ms-flex-negative: 0; flex-shrink: 0; } .t-range-input__inner .t-input { padding: 0 var(--td-comp-paddingLR-xs); height: 100%; border: 0; -webkit-box-shadow: none; box-shadow: none; font-size: inherit; border-radius: var(--td-radius-small); } .t-range-input__inner .t-input:hover { background-color: var(--td-bg-color-container-hover); } .t-range-input__inner .t-input__inner { width: 100%; height: 100%; line-height: 1; } .t-range-input__inner .t-input.t-is-focused { background-color: var(--td-bg-color-component); } .t-range-input__extra { font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-range-input__status { position: absolute; right: calc(0px - var(--td-comp-margin-xxxl)); top: 0; } .t-range-input.t-range-input--suffix .t-input__clear { opacity: 0; visibility: hidden; -webkit-transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; transition: all cubic-bezier(0.38, 0, 0.24, 1) 0.2s; } .t-range-input.t-range-input--suffix:hover .t-input__clear { opacity: 1; visibility: visible; } .t-range-input .t-range-input__suffix-clear { cursor: pointer; } .t-range-input__prefix > .t-icon, .t-range-input__suffix > .t-icon { -webkit-transition: color 0.2s linear; transition: color 0.2s linear; font-size: 16px; color: var(--td-text-color-placeholder); -ms-flex-negative: 0; flex-shrink: 0; } .t-range-input-popup { width: 100%; } .t-range-input-popup--visible .t-range-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-range-input-popup--visible .t-range-input .t-icon-time, .t-range-input-popup--visible .t-range-input .t-icon-calendar { color: var(--td-brand-color); } .t-range-input-popup--visible .t-range-input .t-input.t-is-focused { background-color: var(--td-bg-color-component); } .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: 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-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.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-range-picker { width: auto; } .t-time-picker__panel { width: 280px; background: transparent; border-radius: var(--td-radius-default); display: inline-block; position: relative; font: var(--td-font-body-medium); --timePickerPanelOffsetTop: 15; --timePickerPanelOffsetBottom: 21; } .t-time-picker__panel-body { width: 100%; height: calc(calc(var(--td-comp-size-xs) + var(--td-size-3)) * 7 + var(--td-size-3)); position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 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: var(--td-comp-size-xs); 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(calc(0px - (calc(var(--td-comp-size-xs) + var(--td-size-3)) / 2))); transform: translateY(calc(0px - (calc(var(--td-comp-size-xs) + var(--td-size-3)) / 2))); height: var(--td-comp-size-xs); background-color: var(--td-brand-color-light); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); } .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::before { height: calc(50% - var(--timePickerPanelOffsetTop, 0) * 1px); } .t-time-picker__panel-body-scroll::after { height: calc(50% - var(--timePickerPanelOffsetBottom, 0) * 1px); } .t-time-picker__panel-body-scroll:last-child { border-right: 0; } .t-time-picker__panel-body-scroll-item { height: var(--td-comp-size-xs); font: var(--td-font-body-medium); line-height: var(--td-comp-size-xs); color: var(--td-text-color-secondary); margin: var(--td-size-3) var(--td-comp-margin-xs); border-radius: var(--td-radius-default); text-align: center; cursor: pointer; -webkit-transition: 0.2s linear; transition: 0.2s linear; } .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-body { padding: var(--td-pop-padding-xl) calc(var(--td-pop-padding-xl) - var(--td-comp-margin-xs)); } .t-time-picker__panel-section-footer { width: 100%; 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; padding: var(--td-pop-padding-xl); } .t-form { color: var(--td-text-color-primary); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; font: var(--td-font-body-medium); } .t-form:not(.t-form-inline) .t-form__item:last-of-type { margin: 0; } .t-form__item { margin-bottom: var(--td-comp-margin-xxl); } .t-form__item.t-form__item-with-help { margin-bottom: var(--td-comp-margin-xs); } .t-form__item.t-form__item-with-extra { margin-bottom: var(--td-comp-margin-xxl); } .t-form__label { float: left; padding-right: var(--td-comp-paddingLR-xl); vertical-align: middle; line-height: var(--td-comp-margin-xxxl); 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: var(--td-comp-margin-xxxl); } .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: var(--td-comp-margin-xs); color: var(--td-error-color); line-height: var(--td-line-height-body-medium); content: "*"; } .t-form__label--colon label::after { content: ":"; position: relative; margin: 0 var(--td-comp-margin-xxs); } .t-form__controls { min-height: var(--td-comp-margin-xxxl); 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: var(--td-comp-margin-xxxl); } .t-form__controls .t-form__item { margin-bottom: 0; margin-right: var(--td-comp-margin-xxl); } .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-range-input, .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-range-input--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-range-input .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-range-input .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-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-radio-button:last-child { border-right-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: 0 var(--td-comp-margin-s); } .t-form__status > .t-icon { font-size: var(--td-comp-size-xxxs); } .t-form__status-without-icon { width: 25px; height: 25px; } .t-form__status button { width: var(--td-comp-size-m); } .t-form__status button + button { margin-left: var(--td-comp-margin-s); } .t-form-inline { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: var(--td-comp-margin-l); } .t-form-inline .t-form__item { margin: 0; min-width: 200px; display: inline-block; margin-right: var(--td-comp-margin-xxl); } .t-input__extra, .t-input__help { margin: 0; width: 100%; height: auto; min-height: var(--td-line-height-body-small); font: var(--td-font-body-small); color: var(--td-text-color-placeholder); } .t-input__extra { position: absolute; bottom: calc(0px - var(--td-line-height-body-small)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-is-warning .t-input__extra { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input, .t-is-warning .t-form__controls-content .t-select, .t-is-warning .t-form__controls-content .t-radio-button, .t-is-warning .t-form__controls-content .t-cascader, .t-is-warning .t-form__controls-content .t-range-input, .t-is-warning .t-form__controls-content .t-textarea__inner { border-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-input--focused, .t-is-warning .t-form__controls-content .t-select--focused, .t-is-warning .t-form__controls-content .t-radio-button--focused, .t-is-warning .t-form__controls-content .t-cascader--focused, .t-is-warning .t-form__controls-content .t-range-input--focused, .t-is-warning .t-form__controls-content .t-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-input .t-icon, .t-is-warning .t-form__controls-content .t-select .t-icon, .t-is-warning .t-form__controls-content .t-radio-button .t-icon, .t-is-warning .t-form__controls-content .t-cascader .t-icon, .t-is-warning .t-form__controls-content .t-range-input .t-icon, .t-is-warning .t-form__controls-content .t-textarea__inner .t-icon, .t-is-warning .t-form__controls-content .t-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-select .t-fake-arrow, .t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-warning .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-warning-color); } .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-cascader.t-is-active, .t-is-warning .t-form__controls-content .t-select.t-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus); box-shadow: 0 0 0 2px var(--td-warning-color-focus); } .t-is-warning .t-form__controls-content .t-form__status .t-icon { color: var(--td-warning-color); } .t-is-error .t-input__extra { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input, .t-is-error .t-form__controls-content .t-select, .t-is-error .t-form__controls-content .t-radio-button, .t-is-error .t-form__controls-content .t-cascader, .t-is-error .t-form__controls-content .t-range-input, .t-is-error .t-form__controls-content .t-textarea__inner { border-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-input--focused, .t-is-error .t-form__controls-content .t-select--focused, .t-is-error .t-form__controls-content .t-radio-button--focused, .t-is-error .t-form__controls-content .t-cascader--focused, .t-is-error .t-form__controls-content .t-range-input--focused, .t-is-error .t-form__controls-content .t-textarea__inner--focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-input .t-icon, .t-is-error .t-form__controls-content .t-select .t-icon, .t-is-error .t-form__controls-content .t-radio-button .t-icon, .t-is-error .t-form__controls-content .t-cascader .t-icon, .t-is-error .t-form__controls-content .t-range-input .t-icon, .t-is-error .t-form__controls-content .t-textarea__inner .t-icon, .t-is-error .t-form__controls-content .t-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-select .t-fake-arrow, .t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow, .t-is-error .t-form__controls-content .t-cascader .t-fake-arrow, .t-is-error .t-form__controls-content .t-range-input .t-fake-arrow, .t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) { color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-radio-button:last-child { border-right-color: var(--td-error-color); } .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-cascader.t-is-active, .t-is-error .t-form__controls-content .t-select.t-is-active { -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus); box-shadow: 0 0 0 2px var(--td-error-color-focus); } .t-is-error .t-form__controls-content .t-form__status .t-icon { color: var(--td-error-color); } .t-checkbox-group { 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; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .t-checkbox { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; cursor: pointer; color: var(--td-text-color-primary); } .t-checkbox + .t-checkbox { margin-left: inherit; } .t-checkbox__former { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .t-checkbox__input { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 1px solid var(--td-border-level-2-color); border-radius: var(--td-radius-default); background-color: var(--td-bg-color-container); -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-negative: 0; flex-shrink: 0; } .t-checkbox__input::after { content: ""; position: absolute; opacity: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-checkbox__label { display: inline-block; margin-left: 8px; vertical-align: middle; font: var(--td-font-body-medium); } .t-checkbox:hover .t-checkbox__input { border-color: var(--td-brand-color); -webkit-transition: border-color 0.2s linear; transition: border-color 0.2s linear; } .t-checkbox.t-is-checked .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-checked .t-checkbox__input::after { opacity: 1; top: 6px; left: 3px; width: 5px; height: 9px; border: 2px solid var(--td-text-color-anti); border-radius: 0 0 1px; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%); transform: rotate(45deg) scale(1) translate(-50%, -50%); background: transparent; } .t-checkbox.t-is-indeterminate .t-checkbox__input { border-color: var(--td-brand-color); background-color: var(--td-brand-color); -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); } .t-checkbox.t-is-indeterminate .t-checkbox__input::after { opacity: 1; width: 16px; height: 4px; left: -1px; right: 0; top: 5px; border: unset; -webkit-transform: scale(0.5); transform: scale(0.5); background-color: var(--td-font-white-1); } .t-checkbox.t-is-disabled { cursor: not-allowed; } .t-checkbox.t-is-disabled .t-checkbox__label { color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled .t-checkbox__input { background-color: var(--td-bg-color-component-disabled); } .t-checkbox.t-is-disabled:hover .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-checked .t-checkbox__input::after { border-color: var(--td-text-color-disabled); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input { border-color: var(--td-border-level-2-color); } .t-checkbox.t-is-disabled.t-is-indeterminate .t-checkbox__input::after { background-color: var(--td-text-color-disabled); } .t-checkbox:focus-visible:focus-visible { outline: 2px solid var(--td-brand-color); outline-offset: var(--td-comp-paddingTB-xs); border-radius: 0; } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .t-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .t-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .t-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="top-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="top"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="top-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow { top: calc(-8px / 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .t-popup[data-popper-placement="bottom-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="bottom"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="bottom-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow { right: calc(-8px / 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .t-popup[data-popper-placement="left-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="left"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="left-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow { left: calc(-8px / 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="right-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="right"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="right-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup--animation-enter, .t-popup--animation-enter-from, .t-popup--animation-exiting, .t-popup--animation-leave-to { opacity: 0; visibility: hidden; } .t-popup--animation-enter-to, .t-popup--animation-entering, .t-popup--animation-leave-from, .t-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .t-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-popup--animation-leave-active { -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; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .t-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .t-space { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-space .t-space-item { width: inherit; } .t-space-align-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .t-space-align-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .t-space-align-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .t-space-align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-space-vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-space-vertical .t-space-item-separator { width: 100%; } .t-space.t-space--break-line { -ms-flex-wrap: wrap; flex-wrap: wrap; } .t-space.t-space--polyfill { display: -webkit-box; display: -ms-flexbox; display: flex; } .t-space.t-space--polyfill.t-space-horizontal, .t-space.t-space--polyfill.t-space--break-line { margin-left: calc(-1 * var(--td-space-column-gap, 0)); } .t-space.t-space--polyfill.t-space-vertical, .t-space.t-space--polyfill.t-space--break-line { margin-top: calc(-1 * var(--td-space-row-gap, 0)); } .t-space.t-space--polyfill.t-space-horizontal > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-left: var(--td-space-column-gap); } .t-space.t-space--polyfill.t-space-vertical > *, .t-space.t-space--polyfill.t-space--break-line > * { margin-top: var(--td-space-row-gap); } .t-image__wrapper { position: relative; background: var(--td-bg-color-secondarycontainer); z-index: 1; } .t-image__wrapper--shape-square { border-radius: 0; } .t-image__wrapper--shape-round { border-radius: var(--td-radius-medium); } .t-image__wrapper--shape-circle { border-radius: 50%; } .t-image__wrapper--gallery { border-radius: var(--td-radius-medium); } .t-image__wrapper--gallery .t-image { position: relative; z-index: 5; } .t-image__wrapper--need-hover { cursor: pointer; } .t-image { width: 100%; height: 100%; border-radius: inherit; position: relative; z-index: inherit; } .t-image--fit-fill { -o-object-fit: fill; object-fit: fill; } .t-image--fit-contain { -o-object-fit: contain; object-fit: contain; } .t-image--fit-cover { -o-object-fit: cover; object-fit: cover; } .t-image--fit-scale-down { -o-object-fit: scale-down; object-fit: scale-down; } .t-image--fit-none { -o-object-fit: none; object-fit: none; } .t-image--position-center { -o-object-position: center; object-position: center; } .t-image--position-bottom { -o-object-position: bottom; object-position: bottom; } .t-image--position-top { -o-object-position: top; object-position: top; } .t-image--position-left { -o-object-position: left; object-position: left; } .t-image--position-right { -o-object-position: right; object-position: right; } .t-image__gallery-shadow { position: absolute; left: 0; right: -24px; top: 24px; bottom: 24px; background: rgba(238, 238, 238, 0.26); border-radius: var(--td-radius-medium); z-index: calc(5 - 2); } .t-image__gallery-shadow::before, .t-image__gallery-shadow::after { content: ""; position: absolute; left: 0; border-radius: var(--td-radius-medium); } .t-image__gallery-shadow::after { top: -16px; right: 16px; bottom: -16px; background: rgba(238, 238, 238, 0.8); z-index: calc(5 - 1); } .t-image__gallery-shadow::before { top: -8px; right: 8px; bottom: -8px; background: rgba(238, 238, 238, 0.5); z-index: calc(5 - 3); } .t-image__placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: 0; } .t-image__overlay-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: calc(5 + 1); opacity: 1; visibility: visible; -webkit-transition: visibility 0s, opacity 0.2s linear; transition: visibility 0s, opacity 0.2s linear; } .t-image__overlay-content--hidden { visibility: hidden; opacity: 0; } .t-image__loading, .t-image__error { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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; z-index: calc(0 + 1); } .t-image__loading { color: var(--td-text-color-secondary); } .t-image__error { color: var(--td-text-color-disabled); } .t-avatar { 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; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background: var(--td-brand-color-focus); color: var(--td-text-color-brand); overflow: hidden; white-space: nowrap; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: content-box; box-sizing: content-box; width: var(--td-comp-size-m); height: var(--td-comp-size-m); font-size: var(--td-font-size-body-large); line-height: var(--td-comp-size-m); } .t-avatar.t-avatar__icon { font-size: var(--td-comp-size-xxs); } .t-avatar--circle { border-radius: var(--td-radius-circle); } .t-avatar--round { border-radius: var(--td-radius-default); } .t-avatar.t-size-s { width: var(--td-comp-size-xs); height: var(--td-comp-size-xs); font-size: var(--td-font-size-body-medium); line-height: var(--td-comp-size-xs); } .t-avatar.t-size-s.t-avatar__icon { font-size: var(--td-comp-size-xxxs); } .t-avatar.t-size-l { width: var(--td-comp-size-xl); height: var(--td-comp-size-xl); font-size: var(--td-font-size-title-large); line-height: var(--td-comp-size-xl); } .t-avatar.t-size-l.t-avatar__icon { font-size: var(--td-comp-size-xs); } .t-avatar > .t-image__wrapper { max-width: 100%; max-height: 100%; } .t-avatar-group { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-avatar-group .t-avatar { border: 2px solid var(--td-bg-color-container); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child) { margin-right: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-s { margin-right: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-right .t-avatar:not(:last-child).t-size-l { margin-right: calc(0px - var(--td-size-4)); } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(1) { z-index: 49; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(2) { z-index: 48; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(3) { z-index: 47; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(4) { z-index: 46; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(5) { z-index: 45; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(6) { z-index: 44; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(7) { z-index: 43; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(8) { z-index: 42; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(9) { z-index: 41; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(10) { z-index: 40; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(11) { z-index: 39; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(12) { z-index: 38; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(13) { z-index: 37; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(14) { z-index: 36; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(15) { z-index: 35; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(16) { z-index: 34; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(17) { z-index: 33; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(18) { z-index: 32; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(19) { z-index: 31; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(20) { z-index: 30; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(21) { z-index: 29; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(22) { z-index: 28; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(23) { z-index: 27; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(24) { z-index: 26; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(25) { z-index: 25; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(26) { z-index: 24; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(27) { z-index: 23; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(28) { z-index: 22; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(29) { z-index: 21; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(30) { z-index: 20; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(31) { z-index: 19; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(32) { z-index: 18; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(33) { z-index: 17; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(34) { z-index: 16; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(35) { z-index: 15; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(36) { z-index: 14; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(37) { z-index: 13; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(38) { z-index: 12; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(39) { z-index: 11; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(40) { z-index: 10; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(41) { z-index: 9; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(42) { z-index: 8; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(43) { z-index: 7; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(44) { z-index: 6; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(45) { z-index: 5; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(46) { z-index: 4; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(47) { z-index: 3; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(48) { z-index: 2; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(49) { z-index: 1; } .t-avatar-group.t-avatar--offset-left .t-avatar:nth-child(50) { z-index: 0; } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child) { margin-left: calc(0px - var(--td-size-3)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-s { margin-left: calc(0px - var(--td-size-2)); } .t-avatar-group.t-avatar--offset-left .t-avatar:not(:first-child).t-size-l { margin-left: calc(0px - var(--td-size-4)); } @-webkit-keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes t-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); 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); 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 { 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; position: relative; color: var(--td-brand-color); font-size: var(--td-comp-size-l); } .t-loading--lock { overflow: hidden; } .t-loading.t-size-s { font-size: var(--td-comp-size-xxxs); } .t-loading.t-size-l { font-size: var(--td-comp-size-xxxl); } .t-loading__parent--relative { position: relative !important; } .t-loading__fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--center { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-loading__content { position: absolute; left: 48%; top: 20%; } .t-loading--inherit-color { color: inherit; } .t-loading__parent { position: relative; } .t-loading__overlay { background-color: var(--td-mask-disabled); } /** 仅用于作为包裹元素时 */ .t-loading--full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3500; } .t-loading--hidden { visibility: hidden; } .t-loading--visible { visibility: visible; } .t-loading__text { width: auto; display: inline-block; vertical-align: middle; font: var(--td-font-body-medium); margin-left: var(--td-comp-margin-xs); } .t-loading__gradient { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; vertical-align: middle; } .t-loading__gradient-conic { width: 100%; height: 100%; border-radius: var(--td-radius-circle); /* stylelint-disable-next-line color-no-hex */ background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line color-no-hex */ mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-button { 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; position: relative; z-index: 0; overflow: hidden; font-size: var(--td-font-body-medium); outline: none; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; cursor: pointer; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; white-space: nowrap; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -ms-touch-action: manipulation; touch-action: manipulation; text-decoration: none; } .t-button .t-button__text, .t-button .t-icon { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .t-button .t-icon { font-size: var(--td-font-size-body-large); } .t-button .t-loading { font-size: var(--td-font-size-body-large); } .t-button .t-icon + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-loading + .t-button__text:not(:empty) { margin-left: 8px; } .t-button .t-button__suffix:not(:empty) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-left: 8px; } .t-button--variant-base { color: var(--td-text-color-anti); height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); background-color: var(--td-bg-color-component); border-color: var(--td-bg-color-component); color: var(--td-text-color-primary); } .t-button--variant-base .t-icon, .t-button--variant-base .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { background-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { background-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { border-color: var(--td-bg-color-component-hover); } .t-button--variant-base.t-is-loading { border-color: var(--td-bg-color-component); } .t-button--variant-base.t-is-disabled { border-color: var(--td-bg-color-component-disabled); } .t-button--variant-base:hover, .t-button--variant-base:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-base.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-base.t-button--theme-primary { color: var(--td-text-color-anti); background-color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { background-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { background-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { background-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-primary:hover, .t-button--variant-base.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-base.t-button--theme-success { color: var(--td-text-color-anti); background-color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { background-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { background-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { background-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-success:hover, .t-button--variant-base.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-base.t-button--theme-warning { color: var(--td-text-color-anti); background-color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { background-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { background-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { background-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-warning:hover, .t-button--variant-base.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-base.t-button--theme-danger { color: var(--td-text-color-anti); background-color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { background-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { background-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { background-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--theme-danger:hover, .t-button--variant-base.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-base.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-base.t-button--ghost:active { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-base.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost:hover, .t-button--variant-base.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-base.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-base.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-base.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-success:hover, .t-button--variant-base.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-base.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-base.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-base.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-base.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-base.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-base.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-base.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); } .t-button--variant-outline .t-icon, .t-button--variant-outline .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-outline.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-outline.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-outline:hover, .t-button--variant-outline:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-outline.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-primary:hover, .t-button--variant-outline.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-outline.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-success:hover, .t-button--variant-outline.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-outline.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-warning:hover, .t-button--variant-outline.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-outline.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--theme-danger:hover, .t-button--variant-outline.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-outline.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-outline.t-button--ghost:active { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost:hover, .t-button--variant-outline.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-outline.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-success:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-outline.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-outline.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: var(--td-bg-color-specialcomponent); border-color: var(--td-border-level-2-color); border-style: dashed; } .t-button--variant-dashed .t-icon, .t-button--variant-dashed .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-dashed.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-loading { background-color: var(--td-bg-color-specialcomponent); } .t-button--variant-dashed.t-is-disabled { background-color: var(--td-bg-color-component-disabled); } .t-button--variant-dashed:hover, .t-button--variant-dashed:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-is-loading { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-is-disabled { border-color: var(--td-border-level-2-color); } .t-button--variant-dashed.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--theme-primary.t-is-disabled { border-color: var(--td-brand-color-disabled); } .t-button--variant-dashed.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-success:hover, .t-button--variant-dashed.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--theme-success.t-is-disabled { border-color: var(--td-success-color-disabled); } .t-button--variant-dashed.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--theme-warning.t-is-disabled { border-color: var(--td-warning-color-disabled); } .t-button--variant-dashed.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--theme-danger.t-is-disabled { border-color: var(--td-error-color-disabled); } .t-button--variant-dashed.t-button--ghost { background-color: transparent; color: var(--td-text-color-anti); border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { background-color: transparent; } .t-button--variant-dashed.t-button--ghost:active { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-loading { background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-is-disabled { background-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost:hover, .t-button--variant-dashed.t-button--ghost:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-is-loading { border-color: var(--td-text-color-anti); } .t-button--variant-dashed.t-button--ghost.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:focus-visible { border-color: var(--td-brand-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary:active { border-color: var(--td-brand-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-loading { border-color: var(--td-brand-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-primary.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success { color: var(--td-success-color); border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-success:focus-visible { border-color: var(--td-success-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success:active { border-color: var(--td-success-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-loading { border-color: var(--td-success-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-success.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:focus-visible { border-color: var(--td-warning-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning:active { border-color: var(--td-warning-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-loading { border-color: var(--td-warning-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-warning.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:focus-visible { border-color: var(--td-error-color-hover); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger:active { border-color: var(--td-error-color-active); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-loading { border-color: var(--td-error-color); } .t-button--variant-dashed.t-button--ghost.t-button--theme-danger.t-is-disabled { border-color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text { height: var(--td-comp-size-m); font: var(--td-font-body-medium); padding-left: calc(var(--td-comp-paddingLR-l) - 1px); padding-right: calc(var(--td-comp-paddingLR-l) - 1px); color: var(--td-text-color-primary); background-color: transparent; border-color: transparent; } .t-button--variant-text .t-icon, .t-button--variant-text .t-loading { font-size: var(--td-font-size-body-large); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-loading { color: var(--td-text-color-primary); } .t-button--variant-text.t-is-disabled { color: var(--td-text-color-disabled); } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { background-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { background-color: transparent; } .t-button--variant-text.t-is-disabled { background-color: transparent; } .t-button--variant-text:hover, .t-button--variant-text:focus-visible { border-color: var(--td-bg-color-container-hover); } .t-button--variant-text.t-is-loading { border-color: transparent; } .t-button--variant-text.t-is-disabled { border-color: transparent; } .t-button--variant-text.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary:hover, .t-button--variant-text.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--theme-primary.t-is-disabled { color: var(--td-brand-color-disabled); } .t-button--variant-text.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success:hover, .t-button--variant-text.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--theme-success.t-is-disabled { color: var(--td-success-color-disabled); } .t-button--variant-text.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning:hover, .t-button--variant-text.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--theme-warning.t-is-disabled { color: var(--td-warning-color-disabled); } .t-button--variant-text.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger:hover, .t-button--variant-text.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--theme-danger.t-is-disabled { color: var(--td-error-color-disabled); } .t-button--variant-text.t-button--ghost { background: none; color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost:hover, .t-button--variant-text.t-button--ghost:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-is-loading { color: var(--td-text-color-anti); } .t-button--variant-text.t-button--ghost.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-primary { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:hover, .t-button--variant-text.t-button--ghost.t-button--theme-primary:focus-visible { color: var(--td-brand-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-primary:active { color: var(--td-brand-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-loading { color: var(--td-brand-color); } .t-button--variant-text.t-button--ghost.t-button--theme-primary.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-success { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success:hover, .t-button--variant-text.t-button--ghost.t-button--theme-success:focus-visible { color: var(--td-success-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-success:active { color: var(--td-success-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-loading { color: var(--td-success-color); } .t-button--variant-text.t-button--ghost.t-button--theme-success.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-warning { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:hover, .t-button--variant-text.t-button--ghost.t-button--theme-warning:focus-visible { color: var(--td-warning-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-warning:active { color: var(--td-warning-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-loading { color: var(--td-warning-color); } .t-button--variant-text.t-button--ghost.t-button--theme-warning.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button--variant-text.t-button--ghost.t-button--theme-danger { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:hover, .t-button--variant-text.t-button--ghost.t-button--theme-danger:focus-visible { color: var(--td-error-color-hover); } .t-button--variant-text.t-button--ghost.t-button--theme-danger:active { color: var(--td-error-color-active); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-loading { color: var(--td-error-color); } .t-button--variant-text.t-button--ghost.t-button--theme-danger.t-is-disabled { color: rgba(255, 255, 255, 0.22); background-color: transparent; } .t-button.t-is-loading, .t-button.t-is-disabled { cursor: not-allowed; } .t-button.t-size-s { height: var(--td-comp-size-xs); font: var(--td-font-body-small); padding-left: calc(var(--td-comp-paddingLR-s) - 1px); padding-right: calc(var(--td-comp-paddingLR-s) - 1px); } .t-button.t-size-s .t-icon, .t-button.t-size-s .t-loading { font-size: var(--td-font-size-body-medium); } .t-button.t-size-l { height: var(--td-comp-size-xl); font: var(--td-font-body-large); padding-left: calc(var(--td-comp-paddingLR-xl) - 1px); padding-right: calc(var(--td-comp-paddingLR-xl) - 1px); } .t-button.t-size-l .t-icon, .t-button.t-size-l .t-loading { font-size: var(--td-font-size-title-large); } .t-button--shape-square { width: var(--td-comp-size-m); padding: 0; } .t-button--shape-square.t-size-s { width: var(--td-comp-size-xs); padding: 0; } .t-button--shape-square.t-size-l { width: var(--td-comp-size-xl); padding: 0; } .t-button--shape-round { border-radius: var(--td-radius-round); } .t-button--shape-round.t-size-s { border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-round.t-size-l { border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button--shape-circle { width: var(--td-comp-size-m); padding: 0; text-align: center; border-radius: calc(var(--td-comp-size-m) / 2); } .t-button--shape-circle .t-icon { font-size: var(--td-font-size-body-large); } .t-button--shape-circle .t-loading { font-size: var(--td-font-size-body-large); } .t-button--shape-circle.t-size-s { width: var(--td-comp-size-xs); border-radius: calc(var(--td-comp-size-xs) / 2); } .t-button--shape-circle.t-size-l { width: var(--td-comp-size-xl); padding: 0; border-radius: calc(var(--td-comp-size-xl) / 2); } .t-button.t-size-full-width { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .t-button--ghost { --ripple-color: var(--td-gray-color-10); } .t-button:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-container-active); } .t-button--variant-base:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-bg-color-component-active); } .t-button--variant-base.t-button--theme-primary:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-brand-color-active); } .t-button--variant-base.t-button--theme-success:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-success-color-active); } .t-button--variant-base.t-button--theme-warning:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-warning-color-active); } .t-button--variant-base.t-button--theme-danger:not(.t-is-disabled):not(.t-button--ghost) { --ripple-color: var(--td-error-color-active); } .t-message { margin: 0; padding: 0; list-style: none; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; outline: 0; border-radius: var(--td-radius-medium); background-color: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--td-text-color-primary); font: var(--td-font-body-medium); padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l); } .t-message > .t-icon, .t-message > [data-t-icon] > .t-icon, .t-message .t-loading { color: var(--td-brand-color); margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; font-size: calc(var(--td-font-size-body-medium) + 6px); } .t-message.t-is-success > .t-icon, .t-message.t-is-success > [data-t-icon] > .t-icon, .t-message.t-is-success .t-loading { color: var(--td-success-color); } .t-message.t-is-warning > .t-icon, .t-message.t-is-warning > [data-t-icon] > .t-icon, .t-message.t-is-warning .t-loading { color: var(--td-warning-color); } .t-message.t-is-error > .t-icon, .t-message.t-is-error > [data-t-icon] > .t-icon, .t-message.t-is-error .t-loading { color: var(--td-error-color); } .t-message.t-is-closable .t-message__close { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0; margin-left: var(--td-comp-margin-xxl); cursor: pointer; color: var(--td-text-color-secondary); } .t-message.t-is-closable .t-message__close .t-icon-close { font-size: calc(var(--td-font-size-body-medium) + 2px); border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } .t-message.t-is-closable .t-message__close .t-icon-close:hover { background: var(--td-bg-color-container-hover); } .t-message.t-is-closable .t-message__close .t-icon-close:active { background: var(--td-bg-color-container-active); } .t-message__list { position: fixed; z-index: 6000; } .t-message__list .t-message { margin-bottom: var(--td-comp-margin-s); word-break: break-all; } @-webkit-keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @keyframes tDialogZoomIn { 0% { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } 100% { opacity: 1; } } @-webkit-keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @keyframes tDialogZoomOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: scale(0.01); transform: scale(0.01); } } @-webkit-keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @keyframes tDialogMaskIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } @keyframes tDialogMaskOut { from { opacity: 1; } to { opacity: 0; } } .t-dialog-zoom .animation-enter { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom .animation-active { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-enter, .t-dialog-zoom-enter-from, .t-dialog-zoom-appear { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom-enter-active, .t-dialog-zoom-appear-active { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom-exit-active { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-active .t-dialog { -webkit-animation-name: tDialogZoomIn; animation-name: tDialogZoomIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-enter-active .t-dialog__mask { -webkit-animation-name: tDialogMaskIn; animation-name: tDialogMaskIn; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-active .t-dialog { -webkit-animation-name: tDialogZoomOut; animation-name: tDialogZoomOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-zoom__vue-leave-active .t-dialog__mask { -webkit-animation-name: tDialogMaskOut; animation-name: tDialogMaskOut; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-enter-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-zoom__vue-leave-to .t-dialog { -webkit-animation-play-state: running; animation-play-state: running; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-dialog-fade-enter, .t-dialog-fade-appear { opacity: 0; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-exit { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1); animation-timing-function: cubic-bezier(0, 0, 0.15, 1); -webkit-animation-play-state: paused; animation-play-state: paused; } .t-dialog-fade-enter.t-dialog-fade-enter-active, .t-dialog-fade-appear.t-dialog-fade-appear-active { -webkit-animation-name: tDialogFadeIn; animation-name: tDialogFadeIn; -webkit-animation-play-state: running; animation-play-state: running; } .t-dialog-fade-exit.t-dialog-fade-exit-active { -webkit-animation-name: tDialogFadeOut; animation-name: tDialogFadeOut; -webkit-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tDialogFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .t-dialog { 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: 480px; background-color: var(--td-bg-color-container); position: relative; border: 1px solid var(--td-border-level-1-color); border-radius: var(--td-radius-large); } .t-dialog .t-icon.t-is-info { color: var(--td-brand-color); } .t-dialog .t-icon.t-is-success { color: var(--td-success-color); } .t-dialog .t-icon.t-is-warning { color: var(--td-warning-color); } .t-dialog .t-icon.t-is-error { color: var(--td-error-color); } .t-dialog--lock { overflow: hidden; } .t-dialog__header { color: var(--td-text-color-primary); font: var(--td-font-title-medium); font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; word-break: break-word; gap: var(--td-comp-margin-s); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__header .t-dialog__header-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; } .t-dialog__header .t-icon:not(.t-icon-close) { font-size: calc(var(--td-font-size-body-large) + 8px); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: var(--td-comp-margin-s); -ms-flex-negative: 0; flex-shrink: 0; } .t-dialog__header--fullscreen { background-color: var(--td-bg-color-secondarycontainer); min-height: var(--td-comp-size-xxxl); -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 0 var(--td-comp-paddingLR-xxl); } .t-dialog__header--fullscreen .t-dialog__header-content { -webkit-box-sizing: border-box; box-sizing: border-box; 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-dialog__body { color: var(--td-text-color-secondary); font: var(--td-font-body-medium); overflow: auto; padding: var(--td-comp-paddingTB-l) 0; word-break: break-word; } @-moz-document url-prefix() { .t-dialog__body { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body__icon, .t-dialog__body--icon { padding: var(--td-comp-paddingTB-l) 0; } .t-dialog__body--fullscreen { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl)); overflow: auto; } @-moz-document url-prefix() { .t-dialog__body--fullscreen { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__body--fullscreen::-webkit-scrollbar { width: 6px; height: 6px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb { border: 0px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 11px; } .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__body--fullscreen--without-footer { -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); height: calc(100% - var(--td-comp-size-xxxl)); overflow: auto; } .t-dialog__footer { width: 100%; text-align: right; padding: var(--td-comp-paddingTB-l) 0 0; } .t-dialog__footer .t-button + .t-button { margin-left: var(--td-comp-margin-s); } .t-dialog__footer--fullscreen { min-height: var(--td-comp-size-xxxxl); padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog--default { padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); } .t-dialog__close { font-size: calc(var(--td-font-size-body-large) + 4px); color: var(--td-text-color-secondary); display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(var(--td-font-size-body-large) + 4px); height: calc(var(--td-font-size-body-large) + 4px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: var(--td-radius-default); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs); } .t-dialog__close:hover { cursor: pointer; background: var(--td-bg-color-container-hover); } .t-dialog__close:active { background: var(--td-bg-color-container-active); } .t-dialog__close--fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; background: transparent; } .t-dialog__close--fullscreen:hover { cursor: pointer; background: var(--td-bg-color-secondarycontainer-hover); } .t-dialog__close--fullscreen:active { background: var(--td-bg-color-secondarycontainer-active); } .t-dialog.t-dialog--draggable:hover { cursor: move; } .t-dialog.t-dialog--draggable .t-dialog__header:hover, .t-dialog.t-dialog--draggable .t-dialog__body:hover, .t-dialog.t-dialog--draggable .t-dialog__footer:hover { cursor: auto; } .t-dialog__fullscreen { width: 100%; border-radius: 0; } .t-dialog__ctx { pointer-events: auto; outline: none; top: 0; left: 0; width: 100%; height: 100%; } .t-dialog__ctx.t-dialog__ctx--modeless { pointer-events: none; } .t-dialog__ctx.t-dialog__ctx--fixed { position: fixed; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--absolute { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask { position: absolute; } .t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap { position: absolute; } .t-dialog__ctx.t-is-visible { visibility: visible; } .t-dialog__ctx.t-is-hidden { visibility: hidden; } .t-dialog__ctx.t-is-display { display: block; } .t-dialog__ctx.t-not-display { display: none; } .t-dialog__ctx .t-dialog__mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--td-mask-active); pointer-events: auto; } .t-dialog__ctx .t-dialog__wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: auto; } @-moz-document url-prefix() { .t-dialog__ctx .t-dialog__wrap { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar { width: 8px; height: 8px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover, .t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-dialog__ctx .t-dialog__position { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; 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; -ms-flex-align: start; align-items: flex-start; padding-top: 20vh; } .t-dialog__ctx .t-dialog__position.t-dialog--center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-dialog__ctx .t-dialog__position_fullscreen { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; width: 100%; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-dialog__ctx .t-is-hidden { background: none; } .t-dialog__ctx .t-dialog { pointer-events: auto; z-index: 2500; } .t-dialog__ctx.t-dialog__ctx--modeless .t-dialog { -webkit-box-shadow: var(--td-shadow-3); box-shadow: var(--td-shadow-3); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup { font: var(--td-font-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; list-style: none; color: var(--td-text-color-primary); display: inline-block; z-index: 5500; } .t-popup__content { position: relative; background: var(--td-bg-color-container); -webkit-box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left); border-radius: var(--td-radius-medium); padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s); font-size: var(--td-font-size-body-medium); line-height: var(--td-line-height-body-medium); -webkit-box-sizing: border-box; box-sizing: border-box; word-break: break-all; } .t-popup__arrow { position: absolute; z-index: 1; width: 8px; height: 8px; } .t-popup__arrow::before { position: absolute; content: ""; width: 8px; height: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: var(--td-bg-color-container); } .t-popup[data-popper-placement^="top"] .t-popup__content { margin-bottom: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="top"] .t-popup__content--arrow { margin-bottom: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="bottom"] .t-popup__content { margin-top: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow { margin-top: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content { margin-right: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="left"] .t-popup__content--arrow { margin-right: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="left"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="right"] .t-popup__content { margin-left: var(--td-comp-margin-s); } .t-popup[data-popper-placement^="right"] .t-popup__content--arrow { margin-left: var(--td-comp-margin-l); } .t-popup[data-popper-placement^="right"] .t-popup__content--text { max-width: 480px; } .t-popup[data-popper-placement^="top"] .t-popup__arrow::before { border-top-left-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="top-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="top"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="top-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow { top: calc(-8px / 2); } .t-popup[data-popper-placement^="bottom"] .t-popup__arrow::before { border-bottom-right-radius: 100%; -webkit-box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); box-shadow: var(--td-shadow-inset-top), var(--td-shadow-inset-right); } .t-popup[data-popper-placement="bottom-start"] .t-popup__arrow { left: 8px; } .t-popup[data-popper-placement="bottom"] .t-popup__arrow { left: 50%; margin-left: calc(-8px / 2); } .t-popup[data-popper-placement="bottom-end"] .t-popup__arrow { left: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow { right: calc(-8px / 2); } .t-popup[data-popper-placement^="left"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); box-shadow: var(--td-shadow-inset-left), var(--td-shadow-inset-top); } .t-popup[data-popper-placement="left-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="left"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="left-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow { left: calc(-8px / 2); } .t-popup[data-popper-placement^="right"] .t-popup__arrow::before { -webkit-box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); box-shadow: var(--td-shadow-inset-right), var(--td-shadow-inset-bottom); } .t-popup[data-popper-placement="right-start"] .t-popup__arrow { top: 8px; } .t-popup[data-popper-placement="right"] .t-popup__arrow { top: 50%; margin-top: calc(-8px / 2); } .t-popup[data-popper-placement="right-end"] .t-popup__arrow { top: calc(100% - 8px * 2); } .t-popup--animation-enter, .t-popup--animation-enter-from, .t-popup--animation-exiting, .t-popup--animation-leave-to { opacity: 0; visibility: hidden; } .t-popup--animation-enter-to, .t-popup--animation-entering, .t-popup--animation-leave-from, .t-popup--animation-leave { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; } .t-popup--animation-enter-active { -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .t-popup--animation-leave-active { -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; animation: t-popup-animation-expand-in-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=top] { -webkit-animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-top 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-top { 0% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-out-top { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); clip-path: polygon(-20% 120%, 120% 120%, 120% 120%, -20% 120%); } } .t-popup--animation-expand-enter-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; animation: t-popup-animation-expand-in-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-in 0.2s linear; } .t-popup--animation-expand-leave-active[data-popper-placement^=bottom] { -webkit-animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); animation: t-popup-animation-expand-out-bottom 0.2s cubic-bezier(0.38, 0, 0.24, 1), t-fade-out 0.2s cubic-bezier(0, 0, 0.15, 1); } @-webkit-keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @keyframes t-popup-animation-expand-in-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } } @-webkit-keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } @keyframes t-popup-animation-expand-out-bottom { 0% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); } 100% { -webkit-clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); clip-path: polygon(-20% 0, 120% 0, 120% 0, -20% 0); } } .t-tooltip .t-popup__content { display: inline-block; border: 0; z-index: 5600; margin-bottom: 1px; max-width: 480px; word-break: break-word; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); } .t-tooltip--default .t-popup__content { color: var(--td-text-color-anti); background: var(--td-gray-color-13); -webkit-box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 0.5px 0 var(--td-gray-color-9), inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="left"] .t-popup__arrow:before { -webkit-box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset -0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="right"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 -0.5px 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="top"] .t-popup__arrow:before { -webkit-box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); box-shadow: inset 0 -0.5px 0 var(--td-gray-color-9), inset -0.5px 0 0 var(--td-gray-color-9); } .t-tooltip--default[data-popper-placement^="bottom"] .t-popup__arrow:before { -webkit-box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); box-shadow: inset 0.5px 0 0 var(--td-gray-color-9), inset 0 0.5px 0 var(--td-gray-color-9); } .t-tooltip--primary .t-popup__content { color: var(--td-brand-color); background: var(--td-brand-color-light); } .t-tooltip--success .t-popup__content { color: var(--td-success-color); background: var(--td-success-color-light); } .t-tooltip--danger .t-popup__content { color: var(--td-error-color); background: var(--td-error-color-light); } .t-tooltip--warning .t-popup__content { color: var(--td-warning-color); background: var(--td-warning-color-light); } .t-tooltip .t-popup__arrow { background: inherit; height: auto; } .t-tooltip .t-popup__arrow::before { background: inherit; } .t-tooltip--noshadow .t-popup__content, .t-tooltip--noshadow[data-popper-placement] .t-popup__arrow:before { -webkit-box-shadow: none; box-shadow: none; } :root { --td-screen-xs: 320px; --td-screen-sm: 768px; --td-screen-md: 992px; --td-screen-lg: 1200px; --td-screen-xl: 1400px; --td-screen-xxl: 1880px; } @-moz-document url-prefix() { .narrow-scrollbar { scrollbar-color: var(--td-scrollbar-color) transparent; scrollbar-width: thin; } } .narrow-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .narrow-scrollbar::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: content-box; background-color: var(--td-scrollbar-color); border-radius: 15px; } .narrow-scrollbar::-webkit-scrollbar-thumb:vertical:hover, .narrow-scrollbar::-webkit-scrollbar-thumb:horizontal:hover { background-color: var(--td-scrollbar-hover-color); } .t-fake-arrow path { -webkit-transition: d 0.2s; transition: d 0.2s; stroke: currentcolor; } .t-fake-arrow--active path { d: path("M3.75 10.2002L7.99274 5.7998L12.2361 10.0425"); } .t-slide-down-enter-active, .t-slide-down-leave-active { -webkit-transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1); transition: height 0.2s cubic-bezier(0.38, 0, 0.24, 1); } :root, :root[theme-mode="light"] { --td-brand-color-1: #f2f3ff; --td-brand-color-2: #d9e1ff; --td-brand-color-3: #b5c7ff; --td-brand-color-4: #8eabff; --td-brand-color-5: #618dff; --td-brand-color-6: #366ef4; --td-brand-color-7: #0052d9; --td-brand-color-8: #003cab; --td-brand-color-9: #002a7c; --td-brand-color-10: #001a57; --td-warning-color-1: #fff1e9; --td-warning-color-2: #ffd9c2; --td-warning-color-3: #ffb98c; --td-warning-color-4: #fa9550; --td-warning-color-5: #e37318; --td-warning-color-6: #be5a00; --td-warning-color-7: #954500; --td-warning-color-8: #713300; --td-warning-color-9: #532300; --td-warning-color-10: #3b1700; --td-error-color-1: #fff0ed; --td-error-color-2: #ffd8d2; --td-error-color-3: #ffb9b0; --td-error-color-4: #ff9285; --td-error-color-5: #f6685d; --td-error-color-6: #d54941; --td-error-color-7: #ad352f; --td-error-color-8: #881f1c; --td-error-color-9: #68070a; --td-error-color-10: #490002; --td-success-color-1: #e3f9e9; --td-success-color-2: #c6f3d7; --td-success-color-3: #92dab2; --td-success-color-4: #56c08d; --td-success-color-5: #2ba471; --td-success-color-6: #008858; --td-success-color-7: #006c45; --td-success-color-8: #005334; --td-success-color-9: #003b23; --td-success-color-10: #002515; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: #ffffff; --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-7); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-6); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-8); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.6); --td-mask-disabled: rgba(255, 255, 255, 0.6); --td-bg-color-page: var(--td-gray-color-2); --td-bg-color-container: #fff; --td-bg-color-container-hover: var(--td-gray-color-1); --td-bg-color-container-active: var(--td-gray-color-3); --td-bg-color-container-select: #fff; --td-bg-color-secondarycontainer: var(--td-gray-color-1); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2); --td-bg-color-secondarycontainer-active: var(--td-gray-color-4); --td-bg-color-component: var(--td-gray-color-3); --td-bg-color-component-hover: var(--td-gray-color-4); --td-bg-color-component-active: var(--td-gray-color-6); --td-bg-color-secondarycomponent: var(--td-gray-color-4); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5); --td-bg-color-secondarycomponent-active: var(--td-gray-color-6); --td-bg-color-component-disabled: var(--td-gray-color-2); --td-bg-color-specialcomponent: #fff; --td-text-color-primary: var(--td-font-gray-1); --td-text-color-secondary: var(--td-font-gray-2); --td-text-color-placeholder: var(--td-font-gray-3); --td-text-color-disabled: var(--td-font-gray-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-7); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-3); --td-component-stroke: var(--td-gray-color-3); --td-border-level-2-color: var(--td-gray-color-4); --td-component-border: var(--td-gray-color-4); --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 10px 1px rgba(0, 0, 0, 0.06), 0 5px 5px -3px rgba(0, 0, 0, 0.1); --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08); --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc; --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc; --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc; --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc; --td-table-shadow-color: rgba(0, 0, 0, 0.08); --td-scrollbar-color: rgba(0, 0, 0, 0.1); --td-scrollbar-hover-color: rgba(0, 0, 0, 0.3); --td-scroll-track-color: #fff; } :root[theme-mode="dark"] { --td-brand-color-1: #1b2f51; --td-brand-color-2: #173463; --td-brand-color-3: #143975; --td-brand-color-4: #103d88; --td-brand-color-5: #0d429a; --td-brand-color-6: #054bbe; --td-brand-color-7: #2667d4; --td-brand-color-8: #4582e6; --td-brand-color-9: #699ef5; --td-brand-color-10: #96bbf8; --td-warning-color-1: #4f2a1d; --td-warning-color-2: #582f21; --td-warning-color-3: #733c23; --td-warning-color-4: #a75d2b; --td-warning-color-5: #cf6e2d; --td-warning-color-6: #dc7633; --td-warning-color-7: #e8935c; --td-warning-color-8: #ecbf91; --td-warning-color-9: #eed7bf; --td-warning-color-10: #f3e9dc; --td-error-color-1: #472324; --td-error-color-2: #5e2a2d; --td-error-color-3: #703439; --td-error-color-4: #83383e; --td-error-color-5: #a03f46; --td-error-color-6: #c64751; --td-error-color-7: #de6670; --td-error-color-8: #ec888e; --td-error-color-9: #edb1b6; --td-error-color-10: #eeced0; --td-success-color-1: #193a2a; --td-success-color-2: #1a4230; --td-success-color-3: #17533d; --td-success-color-4: #0d7a55; --td-success-color-5: #059465; --td-success-color-6: #43af8a; --td-success-color-7: #46bf96; --td-success-color-8: #80d2b6; --td-success-color-9: #b4e1d3; --td-success-color-10: #deede8; --td-gray-color-1: #f3f3f3; --td-gray-color-2: #eee; --td-gray-color-3: #e8e8e8; --td-gray-color-4: #ddd; --td-gray-color-5: #c6c6c6; --td-gray-color-6: #a6a6a6; --td-gray-color-7: #8b8b8b; --td-gray-color-8: #777; --td-gray-color-9: #5e5e5e; --td-gray-color-10: #4b4b4b; --td-gray-color-11: #393939; --td-gray-color-12: #2c2c2c; --td-gray-color-13: #242424; --td-gray-color-14: #181818; --td-font-white-1: rgba(255, 255, 255, 0.9); --td-font-white-2: rgba(255, 255, 255, 0.55); --td-font-white-3: rgba(255, 255, 255, 0.35); --td-font-white-4: rgba(255, 255, 255, 0.22); --td-font-gray-1: rgba(0, 0, 0, 0.9); --td-font-gray-2: rgba(0, 0, 0, 0.6); --td-font-gray-3: rgba(0, 0, 0, 0.4); --td-font-gray-4: rgba(0, 0, 0, 0.26); --td-brand-color: var(--td-brand-color-8); --td-warning-color: var(--td-warning-color-5); --td-error-color: var(--td-error-color-6); --td-success-color: var(--td-success-color-5); --td-brand-color-hover: var(--td-brand-color-7); --td-brand-color-focus: var(--td-brand-color-2); --td-brand-color-active: var(--td-brand-color-9); --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-hover: var(--td-brand-color-2); --td-warning-color-hover: var(--td-warning-color-4); --td-warning-color-focus: var(--td-warning-color-2); --td-warning-color-active: var(--td-warning-color-6); --td-warning-color-disabled: var(--td-warning-color-3); --td-warning-color-light: var(--td-warning-color-1); --td-warning-color-light-hover: var(--td-warning-color-2); --td-error-color-hover: var(--td-error-color-5); --td-error-color-focus: var(--td-error-color-2); --td-error-color-active: var(--td-error-color-7); --td-error-color-disabled: var(--td-error-color-3); --td-error-color-light: var(--td-error-color-1); --td-error-color-light-hover: var(--td-error-color-2); --td-success-color-hover: var(--td-success-color-4); --td-success-color-focus: var(--td-success-color-2); --td-success-color-active: var(--td-success-color-6); --td-success-color-disabled: var(--td-success-color-3); --td-success-color-light: var(--td-success-color-1); --td-success-color-light-hover: var(--td-success-color-2); --td-mask-active: rgba(0, 0, 0, 0.4); --td-mask-disabled: rgba(0, 0, 0, 0.6); --td-bg-color-page: var(--td-gray-color-14); --td-bg-color-container: var(--td-gray-color-13); --td-bg-color-container-hover: var(--td-gray-color-12); --td-bg-color-container-active: var(--td-gray-color-10); --td-bg-color-container-select: var(--td-gray-color-9); --td-bg-color-secondarycontainer: var(--td-gray-color-12); --td-bg-color-secondarycontainer-hover: var(--td-gray-color-11); --td-bg-color-secondarycontainer-active: var(--td-gray-color-9); --td-bg-color-component: var(--td-gray-color-11); --td-bg-color-component-hover: var(--td-gray-color-10); --td-bg-color-component-active: var(--td-gray-color-9); --td-bg-color-secondarycomponent: var(--td-gray-color-10); --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9); --td-bg-color-secondarycomponent-active: var(--td-gray-color-8); --td-bg-color-component-disabled: var(--td-gray-color-12); --td-bg-color-specialcomponent: transparent; --td-text-color-primary: var(--td-font-white-1); --td-text-color-secondary: var(--td-font-white-2); --td-text-color-placeholder: var(--td-font-white-3); --td-text-color-disabled: var(--td-font-white-4); --td-text-color-anti: #fff; --td-text-color-brand: var(--td-brand-color-8); --td-text-color-link: var(--td-brand-color-8); --td-border-level-1-color: var(--td-gray-color-11); --td-component-stroke: var(--td-gray-color-11); --td-border-level-2-color: var(--td-gray-color-9); --td-component-border: var(--td-gray-color-9); --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12); --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.1), 0 5px 5px rgba(0, 0, 0, 0.16); --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.2); --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e; --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e; --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e; --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e; --td-table-shadow-color: rgba(0, 0, 0, 0.55); --td-scrollbar-color: rgba(255, 255, 255, 0.1); --td-scrollbar-hover-color: rgba(255, 255, 255, 0.3); --td-scroll-track-color: #333; } :root { --td-radius-small: 2px; --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 9px; --td-radius-extraLarge: 12px; --td-radius-round: 999px; --td-radius-circle: 50%; } :root { --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular; --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 20px; --td-font-size-headline-small: 24px; --td-font-size-headline-medium: 28px; --td-font-size-headline-large: 36px; --td-font-size-display-medium: 48px; --td-font-size-display-large: 64px; --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 28px; --td-line-height-headline-small: 32px; --td-line-height-headline-medium: 36px; --td-line-height-headline-large: 44px; --td-line-height-display-medium: 56px; --td-line-height-display-large: 72px; --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family); --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family); --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family); --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family); --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family); --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family); --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family); --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family); --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family); --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family); --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family); --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family); --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family); --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family); --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family); --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family); } :root { --td-size-1: 2px; --td-size-2: 4px; --td-size-3: 6px; --td-size-4: 8px; --td-size-5: 12px; --td-size-6: 16px; --td-size-7: 20px; --td-size-8: 24px; --td-size-9: 28px; --td-size-10: 32px; --td-size-11: 36px; --td-size-12: 40px; --td-size-13: 48px; --td-size-14: 56px; --td-size-15: 64px; --td-size-16: 72px; --td-comp-size-xxxs: var(--td-size-6); --td-comp-size-xxs: var(--td-size-7); --td-comp-size-xs: var(--td-size-8); --td-comp-size-s: var(--td-size-9); --td-comp-size-m: var(--td-size-10); --td-comp-size-l: var(--td-size-11); --td-comp-size-xl: var(--td-size-12); --td-comp-size-xxl: var(--td-size-13); --td-comp-size-xxxl: var(--td-size-14); --td-comp-size-xxxxl: var(--td-size-15); --td-comp-size-xxxxxl: var(--td-size-16); --td-pop-padding-s: var(--td-size-2); --td-pop-padding-m: var(--td-size-3); --td-pop-padding-l: var(--td-size-4); --td-pop-padding-xl: var(--td-size-5); --td-pop-padding-xxl: var(--td-size-6); --td-comp-paddingLR-xxs: var(--td-size-1); --td-comp-paddingLR-xs: var(--td-size-2); --td-comp-paddingLR-s: var(--td-size-4); --td-comp-paddingLR-m: var(--td-size-5); --td-comp-paddingLR-l: var(--td-size-6); --td-comp-paddingLR-xl: var(--td-size-8); --td-comp-paddingLR-xxl: var(--td-size-10); --td-comp-paddingTB-xxs: var(--td-size-1); --td-comp-paddingTB-xs: var(--td-size-2); --td-comp-paddingTB-s: var(--td-size-4); --td-comp-paddingTB-m: var(--td-size-5); --td-comp-paddingTB-l: var(--td-size-6); --td-comp-paddingTB-xl: var(--td-size-8); --td-comp-paddingTB-xxl: var(--td-size-10); --td-comp-margin-xxs: var(--td-size-1); --td-comp-margin-xs: var(--td-size-2); --td-comp-margin-s: var(--td-size-4); --td-comp-margin-m: var(--td-size-5); --td-comp-margin-l: var(--td-size-6); --td-comp-margin-xl: var(--td-size-7); --td-comp-margin-xxl: var(--td-size-8); --td-comp-margin-xxxl: var(--td-size-10); --td-comp-margin-xxxxl: var(--td-size-12); } .t-guide { 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-guide--lock { overflow: hidden; } .t-guide--absolute { position: absolute; } .t-guide--fixed { position: fixed; } .t-guide__overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999997; } .t-guide__highlight { z-index: 999998; -webkit-transition: 0.2s cubic-bezier(0, 0, 0.15, 1); transition: 0.2s cubic-bezier(0, 0, 0.15, 1); border-radius: var(--td-radius-default); } .t-guide__highlight--dialog { border-radius: var(--td-radius-large); } .t-guide__highlight--mask { -webkit-box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; box-shadow: 0 0 0 0 var(--td-mask-active), var(--td-mask-active) 0 0 0 5000px; } .t-guide__highlight--nomask { border-radius: var(--td-radius-medium); border: 2px solid var(--td-brand-color); -webkit-box-sizing: border-box; box-sizing: border-box; } .t-guide__reference { z-index: 999999; } .t-guide__wrapper { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 999999; padding-top: 20vh; } .t-guide__wrapper--center { padding-top: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__dialog { min-width: 320px; max-width: 500px; padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); border-radius: var(--td-radius-large); background: var(--td-bg-color-container); -webkit-animation: tGuideDialogFadeIn 0.3s ease-out; animation: tGuideDialogFadeIn 0.3s ease-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-guide__dialog--nomask { border: 1px solid var(--td-component-border); } .t-guide__dialog .t-guide__title { font: var(--td-font-title-medium); font-weight: 700; } .t-guide__dialog .t-guide__desc { margin-top: var(--td-comp-margin-l); font: var(--td-font-body-medium); } .t-guide__tooltip { padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-s); min-width: 240px; max-width: 600px; max-height: 300px; } .t-guide__title { text-align: left; color: var(--td-text-color-primary); font: var(--td-font-title-small); font-weight: 700; } .t-guide__desc { margin-top: var(--td-comp-margin-s); text-align: left; color: var(--td-text-color-secondary); font: var(--td-font-body-small); } .t-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__action button { margin-right: var(--td-comp-margin-s); } .t-guide__action button:last-child { margin-right: 0; } .t-guide__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-guide__footer--popup { margin-top: var(--td-comp-margin-l); } .t-guide__footer--dialog { margin-top: 24px; } .t-guide__footer--dialog .t-guide__action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .t-guide__counter { color: var(--td-text-color-placeholder); text-align: left; font: var(--td-font-body-small); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .t-guide__popup .t-guide__popup--content { background: none; -webkit-box-shadow: none; box-shadow: none; padding: 0; } @-webkit-keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes tGuideDialogFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=sourcemap/vendor_tdesign.375a10e4c810e1d71cbe.css.map*/