4337 lines
133 KiB
CSS
4337 lines
133 KiB
CSS
:host, :host[theme-mode='light'] {
|
|
--td-brand-color-1: #ecf2fe;
|
|
--td-brand-color-2: #d4e3fc;
|
|
--td-brand-color-3: #bbd3fb;
|
|
--td-brand-color-4: #96bbf8;
|
|
--td-brand-color-5: #699ef5;
|
|
--td-brand-color-6: #4787f0;
|
|
--td-brand-color-7: #266fe8;
|
|
--td-brand-color-8: #0052d9;
|
|
--td-brand-color-9: #0034b5;
|
|
--td-brand-color-10: #001f97;
|
|
--td-warning-color-1: #fef3e6;
|
|
--td-warning-color-2: #f9e0c7;
|
|
--td-warning-color-3: #f7c797;
|
|
--td-warning-color-4: #f2995f;
|
|
--td-warning-color-5: #ed7b2f;
|
|
--td-warning-color-6: #d35a21;
|
|
--td-warning-color-7: #ba431b;
|
|
--td-warning-color-8: #9e3610;
|
|
--td-warning-color-9: #842b0b;
|
|
--td-warning-color-10: #5a1907;
|
|
--td-error-color-1: #fdecee;
|
|
--td-error-color-2: #f9d7d9;
|
|
--td-error-color-3: #f8b9be;
|
|
--td-error-color-4: #f78d94;
|
|
--td-error-color-5: #f36d78;
|
|
--td-error-color-6: #e34d59;
|
|
--td-error-color-7: #c9353f;
|
|
--td-error-color-8: #b11f26;
|
|
--td-error-color-9: #951114;
|
|
--td-error-color-10: #680506;
|
|
--td-success-color-1: #e8f8f2;
|
|
--td-success-color-2: #bcebdc;
|
|
--td-success-color-3: #85dbbe;
|
|
--td-success-color-4: #48c79c;
|
|
--td-success-color-5: #00a870;
|
|
--td-success-color-6: #078d5c;
|
|
--td-success-color-7: #067945;
|
|
--td-success-color-8: #056334;
|
|
--td-success-color-9: #044f2a;
|
|
--td-success-color-10: #033017;
|
|
--td-gray-color-1: #f3f3f3;
|
|
--td-gray-color-2: #eee;
|
|
--td-gray-color-3: #e7e7e7;
|
|
--td-gray-color-4: #dcdcdc;
|
|
--td-gray-color-5: #c5c5c5;
|
|
--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: #383838;
|
|
--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-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-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-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-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-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-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-8);
|
|
--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, 8%),
|
|
0 2px 4px -1px rgba(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, 6%),
|
|
0 5px 5px -3px rgba(0, 0, 0, 10%);
|
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%),
|
|
0 8px 10px -5px rgba(0, 0, 0, 8%);
|
|
--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;
|
|
}
|
|
:host[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: #e7e7e7;
|
|
--td-gray-color-4: #dcdcdc;
|
|
--td-gray-color-5: #c5c5c5;
|
|
--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: #383838;
|
|
--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-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-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-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-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-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, 8%),
|
|
0 2px 4px rgba(0, 0, 0, 12%);
|
|
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%),
|
|
0 5px 5px rgba(0, 0, 0, 16%);
|
|
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%),
|
|
0 8px 10px rgba(0, 0, 0, 20%);
|
|
--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;
|
|
}
|
|
:host {
|
|
--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%;
|
|
}
|
|
:host {
|
|
--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);
|
|
}
|
|
.transmart-crx-btn {
|
|
-webkit-border-radius: 2px;
|
|
-moz-border-radius: 2px;
|
|
border-radius: 2px;
|
|
cursor: default;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
margin-right: 16px;
|
|
height: 27px;
|
|
line-height: 27px;
|
|
min-width: 54px;
|
|
outline: 0px;
|
|
padding: 0 8px;
|
|
}
|
|
.transmart-ctx-select {
|
|
width: 170px;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
background-color: #f5f5f5;
|
|
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
|
|
background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
|
|
background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
|
|
background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
|
|
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
|
|
color: #444;
|
|
border: 1px solid #dcdcdc;
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
.transmart-ctx-select:focus {
|
|
border: 1px solid #4d90fe;
|
|
outline: none;
|
|
}
|
|
.transmart-ctx-select:active {
|
|
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
background: #f8f8f8;
|
|
color: #333;
|
|
}
|
|
.transmart-ctx-select:focus-visible {
|
|
outline-offset: 0px;
|
|
}
|
|
.transmart-crx-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.transmart-crx-checkbox input {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
.transmart-crx-option-picker {
|
|
display: table-cell;
|
|
font-size: 13px;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-title {
|
|
margin: 10px 0;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button {
|
|
user-select: none;
|
|
outline: none;
|
|
padding: 5px 7px;
|
|
position: relative;
|
|
display: block;
|
|
margin-left: -7px;
|
|
margin-top: 6px;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button:hover .transmart-crx-option-radio {
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
|
|
border-color: #b6b6b6;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button-checked .transmart-crx-option-radio::after {
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
border-radius: 50%;
|
|
background: #606060;
|
|
border: 2px solid #606060;
|
|
box-sizing: border-box;
|
|
content: '';
|
|
display: block;
|
|
height: 7px;
|
|
left: 3px;
|
|
position: relative;
|
|
top: 3px;
|
|
width: 7px;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-radio {
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
border-radius: 50%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAIGNIUk0AAG2YAABzjgAA+3UAAITUAAB6swAA/2cAADBbAAAQhVDPV6EAAAC7SURBVDjL5ZS9DoMgFEZPxEU7yIYJMyYt+v6PZ5fPxnQArnFp+iUMwM3J/Wffd+4+/Cb0Sz0wAwuQgQ1YgQQE/X/UAp0EisAIOL073SPwkl0T1ANPYKCsUXZTDdrLgxrw0CD7vgSdFZpFEQglaFJYFj2AVILmU1Fa1QG5BF25pq3maWcEupqnSTmy5nQpQcPF6s8tfTre2afHiFomyrfOvpcHUTlzp/Y5z763LJQjFUHFy2o3+5b6v83/BisCjaXyoAL6AAAAAElFTkSuQmCC) -3px -3px;
|
|
background: rgba(255, 255, 255, 0);
|
|
border: 1px solid #c6c6c6;
|
|
height: 15px;
|
|
left: 7px;
|
|
margin: 0;
|
|
outline: none;
|
|
position: absolute;
|
|
text-align: left;
|
|
top: 6px;
|
|
width: 15px;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-label {
|
|
display: block;
|
|
cursor: default;
|
|
margin-left: 22px;
|
|
line-height: 16px;
|
|
}
|
|
.transmart-crx-option-picker .transmart-crx-option-radio-button .transmart-crx-option-tip {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
margin-left: 23px;
|
|
line-height: 15px;
|
|
color: #777;
|
|
font-size: 11px;
|
|
}
|
|
:host {
|
|
--td-screen-xs: 320px;
|
|
--td-screen-sm: 768px;
|
|
--td-screen-md: 992px;
|
|
--td-screen-lg: 1200px;
|
|
--td-screen-xl: 1400px;
|
|
--td-screen-xxl: 1880px;
|
|
}
|
|
.trans-ctx--narrow-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: transparent;
|
|
}
|
|
.trans-ctx--narrow-scrollbar::-webkit-scrollbar-thumb {
|
|
border-radius: var(--td-radius-medium);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
background-color: var(--td-scrollbar-color);
|
|
}
|
|
.trans-ctx--t-fake-arrow path {
|
|
-webkit-transition: d 0.2s;
|
|
transition: d 0.2s;
|
|
stroke: currentcolor;
|
|
}
|
|
.trans-ctx--t-fake-arrow--active path {
|
|
d: path('M3.75 10.2002L7.99274 5.7998L12.2361 10.0425');
|
|
}
|
|
|
|
.t-portal-wrapper .t-popup {
|
|
z-index: 9999999999;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'TencentSans';
|
|
src: url(../../static/fonts/TencentSans.woff2) format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.trans-ctx--banner-translate {
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font: 18px TencentSans;
|
|
color: #0052d9;
|
|
padding: 11px 5px;
|
|
}
|
|
.trans-ctx--banner-translate .trans-ctx--icon-title,
|
|
.trans-ctx--banner-translate .trans-ctx--icon-loading.t-loading {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.trans-ctx--banner-translate .trans-ctx--flag-lang,
|
|
.trans-ctx--banner-translate .trans-ctx--flag-show {
|
|
display: inline-block;
|
|
width: 30px;
|
|
text-align: center;
|
|
}
|
|
.trans-ctx--action-page-translate {
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 0;
|
|
padding: 0;
|
|
height: 110px;
|
|
background-color: #fff;
|
|
border: 1px solid #d9d9d9;
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
z-index: 999999;
|
|
transition: all 0.3s linear;
|
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 14px 2px;
|
|
}
|
|
.trans-ctx--action-page-translate:hover .trans-ctx--banner-translate,
|
|
.trans-ctx--action-page-translate:focus .trans-ctx--banner-translate,
|
|
.trans-ctx--action-page-translate.trans-ctx--focused .trans-ctx--banner-translate {
|
|
display: none;
|
|
}
|
|
.trans-ctx--action-page-translate:hover .trans-ctx--panel-page-translate,
|
|
.trans-ctx--action-page-translate:focus .trans-ctx--panel-page-translate,
|
|
.trans-ctx--action-page-translate.trans-ctx--focused .trans-ctx--panel-page-translate {
|
|
display: block;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--container-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-loading,
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-translate {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-loading .t-icon-loading,
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-translate .t-icon-loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-translate {
|
|
opacity: 0.65;
|
|
background-color: #0052d9;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--icon-translate:hover {
|
|
opacity: 1;
|
|
}
|
|
.trans-ctx--action-page-translate .trans-ctx--text-translate {
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
}
|
|
.trans-ctx--panel-page-translate {
|
|
display: none;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
transition: all 0.3s;
|
|
padding: 21px 24px;
|
|
}
|
|
.trans-ctx--panel-page-translate .trans-ctx--container-icon-close {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--panel-page-translate .trans-ctx--container-icon-close:hover {
|
|
background-color: #f3f3f3;
|
|
}
|
|
.trans-ctx--panel-page-translate .trans-ctx--icon-close {
|
|
font-size: 20px;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
}
|
|
.trans-ctx--panel-page-translate .trans-ctx--translator {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.trans-ctx--panel-page-translate .trans-ctx--lang-selector {
|
|
width: 130px;
|
|
margin-right: 10px;
|
|
}
|
|
.trans-ctx--btn-translate {
|
|
min-width: 90px;
|
|
}
|
|
.trans-ctx--btn-reset-translate {
|
|
width: 100%;
|
|
}
|
|
.trans-ctx--page-translate-options {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.trans-ctx--page-translate-options .trans-ctx--page-translate-options-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.trans-ctx--page-translate-options .trans-ctx--btn-close-page-translate {
|
|
margin-left: 30px;
|
|
color: #5f6368;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--radio-page-show-func.t-radio-group {
|
|
width: 100%;
|
|
margin: 4px 0;
|
|
}
|
|
.trans-ctx--radio-page-show-func.t-radio-group.t-size-m .t-radio-button {
|
|
height: 30px;
|
|
width: 33%;
|
|
justify-content: center;
|
|
}
|
|
.trans-ctx--btn-feedback {
|
|
margin-left: 6px;
|
|
font-size: 12px;
|
|
color: #5f6368;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--icon-setting {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-left: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--icon-setting > svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
.narrow-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: transparent;
|
|
}
|
|
.narrow-scrollbar::-webkit-scrollbar-thumb {
|
|
border-radius: var(--td-radius-medium);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
background-color: var(--td-scrollbar-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");
|
|
}
|
|
|
|
:root,
|
|
:root[theme-mode="light"] {
|
|
--td-brand-color-1: #ecf2fe;
|
|
--td-brand-color-2: #d4e3fc;
|
|
--td-brand-color-3: #bbd3fb;
|
|
--td-brand-color-4: #96bbf8;
|
|
--td-brand-color-5: #699ef5;
|
|
--td-brand-color-6: #4787f0;
|
|
--td-brand-color-7: #266fe8;
|
|
--td-brand-color-8: #0052d9;
|
|
--td-brand-color-9: #0034b5;
|
|
--td-brand-color-10: #001f97;
|
|
--td-warning-color-1: #fef3e6;
|
|
--td-warning-color-2: #f9e0c7;
|
|
--td-warning-color-3: #f7c797;
|
|
--td-warning-color-4: #f2995f;
|
|
--td-warning-color-5: #ed7b2f;
|
|
--td-warning-color-6: #d35a21;
|
|
--td-warning-color-7: #ba431b;
|
|
--td-warning-color-8: #9e3610;
|
|
--td-warning-color-9: #842b0b;
|
|
--td-warning-color-10: #5a1907;
|
|
--td-error-color-1: #fdecee;
|
|
--td-error-color-2: #f9d7d9;
|
|
--td-error-color-3: #f8b9be;
|
|
--td-error-color-4: #f78d94;
|
|
--td-error-color-5: #f36d78;
|
|
--td-error-color-6: #e34d59;
|
|
--td-error-color-7: #c9353f;
|
|
--td-error-color-8: #b11f26;
|
|
--td-error-color-9: #951114;
|
|
--td-error-color-10: #680506;
|
|
--td-success-color-1: #e8f8f2;
|
|
--td-success-color-2: #bcebdc;
|
|
--td-success-color-3: #85dbbe;
|
|
--td-success-color-4: #48c79c;
|
|
--td-success-color-5: #00a870;
|
|
--td-success-color-6: #078d5c;
|
|
--td-success-color-7: #067945;
|
|
--td-success-color-8: #056334;
|
|
--td-success-color-9: #044f2a;
|
|
--td-success-color-10: #033017;
|
|
--td-gray-color-1: #f3f3f3;
|
|
--td-gray-color-2: #eee;
|
|
--td-gray-color-3: #e7e7e7;
|
|
--td-gray-color-4: #dcdcdc;
|
|
--td-gray-color-5: #c5c5c5;
|
|
--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: #383838;
|
|
--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-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-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-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-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-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-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-8);
|
|
--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, 8%), 0 2px 4px -1px rgba(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, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
|
|
--td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
|
|
--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: #e7e7e7;
|
|
--td-gray-color-4: #dcdcdc;
|
|
--td-gray-color-5: #c5c5c5;
|
|
--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: #383838;
|
|
--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-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-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-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-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-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, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
|
|
--td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
|
|
--td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
|
|
--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);
|
|
}
|
|
|
|
@-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-font-size-headline-large);
|
|
}
|
|
.t-loading--lock {
|
|
overflow: hidden;
|
|
}
|
|
.t-loading.t-size-s {
|
|
font-size: var(--td-font-size-body-large);
|
|
}
|
|
.t-loading.t-size-l {
|
|
font-size: 56px;
|
|
}
|
|
.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%;
|
|
}
|
|
.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: 5px;
|
|
}
|
|
.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%;
|
|
background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
|
|
border-radius: var(--td-radius-circle);
|
|
/* stylelint-disable-next-line */
|
|
-webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
|
|
/* stylelint-disable-next-line */
|
|
mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
|
|
}
|
|
|
|
.t-select-polyfill {
|
|
border: 1px solid var(--td-border-level-2-color);
|
|
border-radius: var(--td-radius-default);
|
|
padding: 0 26px 0 4px;
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
}
|
|
.t-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;
|
|
position: relative;
|
|
width: 100%;
|
|
vertical-align: middle;
|
|
line-height: 30px;
|
|
background: var(--td-bg-color-specialcomponent);
|
|
-webkit-transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
transition: border-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
}
|
|
.t-select:hover:not(.t-is-disabled),
|
|
.t-select :active:not(.t-is-disabled) {
|
|
cursor: pointer;
|
|
border-color: var(--td-brand-color);
|
|
}
|
|
.t-select:hover:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear),
|
|
.t-select :active:not(.t-is-disabled) > .t-select__right-icon:not(.t-select__right-icon-clear) {
|
|
color: var(--td-brand-color);
|
|
opacity: 1;
|
|
}
|
|
.t-select.t-no-border {
|
|
line-height: 32px;
|
|
}
|
|
.t-select .t-select__placeholder {
|
|
margin-left: 8px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.t-select:not(.t-is-disabled) .t-select__placeholder {
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
.t-select .t-select__single {
|
|
margin-left: 4px;
|
|
display: block;
|
|
color: var(--td-text-color-primary);
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.t-select .t-select__right-icon {
|
|
-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-select .t-select__right-icon-polyfill {
|
|
position: absolute;
|
|
height: 100%;
|
|
margin: 0 8px;
|
|
right: 0;
|
|
top: 0;
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
.t-select .t-select__active-icon {
|
|
color: var(--td-brand-color);
|
|
}
|
|
.t-select .t-select__right-icon.t-is-visible {
|
|
-webkit-transform: scaleY(-1);
|
|
transform: scaleY(-1);
|
|
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
transition: -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
transition: transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
transition: transform 0.2s cubic-bezier(0.38, 0, 0.24, 1), -webkit-transform 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
/* IE */
|
|
-webkit-filter: flipv;
|
|
filter: flipv;
|
|
}
|
|
.t-select .t-select__left-icon {
|
|
position: absolute;
|
|
height: 100%;
|
|
margin: 0 8px;
|
|
left: 0;
|
|
top: 0;
|
|
color: var(--td-text-color-placeholder);
|
|
-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);
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.t-select .t-input__wrap {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.t-select .t-tag + .t-input__wrap {
|
|
margin-left: 4px;
|
|
}
|
|
.t-select .t-tag + .t-input__wrap .t-input__inner {
|
|
width: 100%;
|
|
}
|
|
.t-select .t-select__input .t-input {
|
|
height: auto;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
.t-select .t-select__input .t-input--focused {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
.t-select .t-select__input:focus,
|
|
.t-select .t-select__input :hover {
|
|
border: 0;
|
|
}
|
|
.t-select .t-select__input input {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
}
|
|
.t-select .t-select__input .t-input.t-input--prefix > .t-input__prefix {
|
|
font: var(--td-font-body-large);
|
|
}
|
|
.t-select .t-tag,
|
|
.t-select + .t-tag {
|
|
margin: 4px 4px 4px 0;
|
|
}
|
|
.t-select .t-tag {
|
|
height: 22px;
|
|
line-height: 20px;
|
|
}
|
|
.t-select.t-is-active:not(.t-is-disabled) {
|
|
border-color: var(--td-brand-color);
|
|
}
|
|
.t-select.t-is-active:not(.t-is-disabled):not(.t-no-border) {
|
|
-webkit-box-shadow: 0 0 0 2px var(--td-brand-color-focus);
|
|
box-shadow: 0 0 0 2px var(--td-brand-color-focus);
|
|
}
|
|
.t-select.t-is-active:not(.t-is-disabled) .t-select__right-icon:not(.t-select__right-icon-clear) {
|
|
color: var(--td-brand-color);
|
|
opacity: 1;
|
|
}
|
|
.t-select.t-has-prefix {
|
|
padding-left: 26px;
|
|
}
|
|
.t-select.t-no-border {
|
|
border: 0;
|
|
width: auto;
|
|
-webkit-transition: background-color 0.2s linear;
|
|
transition: background-color 0.2s linear;
|
|
}
|
|
.t-select.t-no-border:hover {
|
|
background-color: var(--td-bg-color-container-hover);
|
|
}
|
|
.t-select.t-no-border:active {
|
|
background-color: var(--td-bg-color-container-active);
|
|
}
|
|
.t-select.t-no-border > .t-select__single {
|
|
margin-right: 8px;
|
|
}
|
|
.t-select.t-size-l {
|
|
font: var(--td-font-body-large);
|
|
}
|
|
.t-select.t-size-l .t-select__input {
|
|
line-height: 38px;
|
|
height: 38px;
|
|
}
|
|
.t-select.t-size-l .t-select__input .t-input__inner {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
}
|
|
.t-select.t-size-l .t-tag.t-size-l {
|
|
height: 30px;
|
|
line-height: 28px;
|
|
}
|
|
.t-select.t-size-s {
|
|
font: var(--td-font-body-small);
|
|
}
|
|
.t-select.t-size-s .t-select__input {
|
|
line-height: 22px;
|
|
height: 22px;
|
|
}
|
|
.t-select.t-size-s .t-select__input .t-input__inner {
|
|
height: 22px;
|
|
line-height: 22px;
|
|
}
|
|
.t-select.t-size-s .t-tag.t-size-s {
|
|
height: 18px;
|
|
line-height: 16px;
|
|
}
|
|
.t-select.t-is-disabled {
|
|
cursor: not-allowed;
|
|
background-color: var(--td-bg-color-component-disabled);
|
|
color: var(--td-text-color-disabled);
|
|
border-color: var(--td-border-level-2-color);
|
|
}
|
|
.t-select.t-is-disabled > .t-select__right-icon {
|
|
color: var(--td-text-color-disabled);
|
|
}
|
|
.t-select.t-is-disabled > .t-select__left-icon {
|
|
color: var(--td-text-color-disabled);
|
|
}
|
|
.t-select.t-is-disabled > .t-select__single {
|
|
color: var(--td-text-color-disabled);
|
|
}
|
|
.t-select__wrap {
|
|
width: 100%;
|
|
}
|
|
.t-select__dropdown .t-popup__content {
|
|
scrollbar-color: var(--td-scrollbar-color);
|
|
scrollbar-width: thin;
|
|
margin: 8px 0;
|
|
padding: 0;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
-ms-scroll-chaining: none;
|
|
overscroll-behavior: contain;
|
|
-webkit-box-shadow: var(--td-shadow-2);
|
|
box-shadow: var(--td-shadow-2);
|
|
}
|
|
.t-select__dropdown .t-popup__content::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb {
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
background-color: var(--td-scrollbar-color);
|
|
border-radius: 15px;
|
|
}
|
|
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:vertical:hover,
|
|
.t-select__dropdown .t-popup__content::-webkit-scrollbar-thumb:horizontal:hover {
|
|
background-color: var(--td-scrollbar-hover-color);
|
|
}
|
|
.t-select__dropdown-inner .t-select__list,
|
|
.t-select__dropdown-inner .t-tree {
|
|
padding: 6px;
|
|
}
|
|
.t-select__dropdown-inner--size-s .t-select__list,
|
|
.t-select__dropdown-inner--size-s .t-tree {
|
|
padding: 4px;
|
|
}
|
|
.t-select__dropdown-inner--size-l .t-select__list,
|
|
.t-select__dropdown-inner--size-l .t-tree {
|
|
padding: 8px;
|
|
}
|
|
.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: 24px;
|
|
}
|
|
.t-select__empty {
|
|
text-align: center;
|
|
color: var(--td-text-color-disabled);
|
|
line-height: 32px;
|
|
padding: 0 8px;
|
|
}
|
|
.t-select__empty.t-size-l {
|
|
line-height: 40px;
|
|
}
|
|
.t-select__loading-tips.t-size-s {
|
|
line-height: 24px;
|
|
}
|
|
.t-select__loading-tips {
|
|
text-align: center;
|
|
line-height: 32px;
|
|
color: var(--td-text-color-disabled);
|
|
}
|
|
.t-select__loading-tips.t-size-l {
|
|
line-height: 40px;
|
|
}
|
|
.t-select-option-group + .t-select-option-group {
|
|
padding-top: 7px;
|
|
margin-top: 7px;
|
|
}
|
|
.t-select-option-group__divider + .t-select-option-group__divider {
|
|
border-top: 1px var(--td-border-level-1-color) solid;
|
|
}
|
|
ul.t-select-option-group__header,
|
|
.t-select-option-group__header {
|
|
color: var(--td-text-color-placeholder);
|
|
display: block;
|
|
height: 28px;
|
|
line-height: 20px;
|
|
padding: 0px 8px;
|
|
-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: 36px;
|
|
padding: 7px 12px;
|
|
}
|
|
.t-select-option-group__header.t-size-s {
|
|
height: 20px;
|
|
padding: 0 8px;
|
|
}
|
|
.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: 28px;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
padding: 0px 8px;
|
|
color: var(--td-text-color-primary);
|
|
-webkit-transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
|
|
-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: 36px;
|
|
padding: 7px 12px;
|
|
font: var(--td-font-body-large);
|
|
}
|
|
.t-select-option.t-size-m {
|
|
line-height: 22px;
|
|
}
|
|
.t-select-option.t-size-s {
|
|
height: 20px;
|
|
padding: 0 8px;
|
|
font: var(--td-font-body-small);
|
|
}
|
|
.t-select-option.t-is-selected {
|
|
color: var(--td-brand-color);
|
|
background-color: var(--td-brand-color-light);
|
|
-webkit-transition: all 0.2s linear;
|
|
transition: all 0.2s linear;
|
|
}
|
|
.t-select-option.t-is-selected .t-checkbox__label {
|
|
color: var(--td-brand-color);
|
|
}
|
|
.t-select-option.t-is-selected:hover {
|
|
background-color: var(--td-brand-color-light);
|
|
}
|
|
.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 {
|
|
border-color: var(--td-brand-color);
|
|
}
|
|
.t-select-option.t-select-option__hover .t-checkbox__label {
|
|
color: inherit;
|
|
}
|
|
.t-select-option + .t-select-option {
|
|
margin-top: 2px;
|
|
}
|
|
.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);
|
|
}
|
|
|
|
.content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content {
|
|
margin-bottom: 8px;
|
|
}
|
|
.content-placement-top .t-popup[data-popper-placement^="top"] .t-popup__content--arrow {
|
|
margin-bottom: 16px;
|
|
}
|
|
.content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content {
|
|
margin-top: 8px;
|
|
}
|
|
.content-placement-bottom .t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow {
|
|
margin-top: 16px;
|
|
}
|
|
.content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content {
|
|
margin-right: 8px;
|
|
}
|
|
.content-placement-left .t-popup[data-popper-placement^="left"] .t-popup__content--arrow {
|
|
margin-right: 16px;
|
|
}
|
|
.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: 8px;
|
|
}
|
|
.content-placement-right .t-popup[data-popper-placement^="right"] .t-popup__content--arrow {
|
|
margin-left: 16px;
|
|
}
|
|
.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: 4px 8px;
|
|
font-size: var(--td-font-size-body-medium);
|
|
line-height: 22px;
|
|
-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: 8px;
|
|
}
|
|
.t-popup[data-popper-placement^="top"] .t-popup__content--arrow {
|
|
margin-bottom: 16px;
|
|
}
|
|
.t-popup[data-popper-placement^="bottom"] .t-popup__content {
|
|
margin-top: 8px;
|
|
}
|
|
.t-popup[data-popper-placement^="bottom"] .t-popup__content--arrow {
|
|
margin-top: 16px;
|
|
}
|
|
.t-popup[data-popper-placement^="left"] .t-popup__content {
|
|
margin-right: 8px;
|
|
}
|
|
.t-popup[data-popper-placement^="left"] .t-popup__content--arrow {
|
|
margin-right: 16px;
|
|
}
|
|
.t-popup[data-popper-placement^="left"] .t-popup__content--text {
|
|
max-width: 480px;
|
|
}
|
|
.t-popup[data-popper-placement^="right"] .t-popup__content {
|
|
margin-left: 8px;
|
|
}
|
|
.t-popup[data-popper-placement^="right"] .t-popup__content--arrow {
|
|
margin-left: 16px;
|
|
}
|
|
.t-popup[data-popper-placement^="right"] .t-popup__content--text {
|
|
max-width: 480px;
|
|
}
|
|
.t-popup[data-popper-placement^="top"] .t-popup__arrow {
|
|
bottom: calc(-8px / 2);
|
|
}
|
|
.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);
|
|
}
|
|
.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);
|
|
}
|
|
.t-input {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
position: relative;
|
|
height: 32px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: var(--td-radius-default);
|
|
border-color: var(--td-border-level-2-color);
|
|
padding: 0 8px;
|
|
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: 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-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
line-height: 32px;
|
|
}
|
|
.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--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;
|
|
}
|
|
.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="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__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: 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.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);
|
|
}
|
|
.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-input--prefix > .t-input__prefix-icon {
|
|
padding-right: 8px;
|
|
}
|
|
.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;
|
|
font-size: var(--td-font-size-body-medium);
|
|
}
|
|
.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-icon {
|
|
padding-left: 8px;
|
|
}
|
|
.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;
|
|
font-size: var(--td-font-size-body-medium);
|
|
}
|
|
.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: 40px;
|
|
font: var(--td-font-body-large);
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
}
|
|
.t-input.t-size-s {
|
|
height: 24px;
|
|
font: var(--td-font-body-small);
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.t-input .t-input__prefix > .t-icon,
|
|
.t-input .t-input__suffix > .t-icon {
|
|
font-size: inherit;
|
|
}
|
|
.t-input .t-input__prefix > .t-icon {
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
.t-input .t-input__suffix > .t-icon {
|
|
color: var(--td-text-color-placeholder);
|
|
}
|
|
.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: 8px;
|
|
}
|
|
.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: 20px;
|
|
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-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 8px;
|
|
height: 24px;
|
|
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: 4px;
|
|
width: 16px;
|
|
height: 16px;
|
|
-ms-flex-negative: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.t-tag .t-tag__icon-close {
|
|
margin-right: 0;
|
|
margin-left: 8px;
|
|
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 ::-moz-selection {
|
|
background: transparent;
|
|
}
|
|
.t-tag ::selection {
|
|
background: transparent;
|
|
}
|
|
.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.t-tag--checked {
|
|
color: var(--td-text-color-anti);
|
|
background-color: var(--td-brand-color);
|
|
}
|
|
.t-tag--default.t-tag--checked:hover {
|
|
background-color: var(--td-brand-color-hover);
|
|
}
|
|
.t-tag--default:active {
|
|
cursor: default;
|
|
}
|
|
.t-tag--default.t-tag--check {
|
|
-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--default.t-tag--check:hover:not(.t-tag--checked):not(.t-tag--disabled) {
|
|
background-color: var(--td-bg-color-component-hover);
|
|
}
|
|
.t-tag--default.t-tag--disabled {
|
|
color: var(--td-text-color-disabled);
|
|
background-color: var(--td-bg-color-component-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
.t-tag--default.t-tag--disabled:hover {
|
|
color: var(--td-text-color-disabled);
|
|
background-color: var(--td-bg-color-component-disabled);
|
|
}
|
|
.t-tag--default.t-tag--disabled .t-icon:hover {
|
|
cursor: pointer;
|
|
}
|
|
.t-tag--default.t-tag--outline {
|
|
border-color: var(--td-border-level-2-color);
|
|
}
|
|
.t-tag--default.t-tag--light {
|
|
background-color: var(--td-gray-color-1);
|
|
}
|
|
.t-tag--default.t-tag--light-outline {
|
|
border-color: var(--td-border-level-2-color);
|
|
background-color: var(--td-gray-color-1);
|
|
}
|
|
.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-1);
|
|
}
|
|
.t-tag--success.t-tag--light-outline {
|
|
border-color: var(--td-success-color);
|
|
background-color: var(--td-success-color-1);
|
|
}
|
|
.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-1);
|
|
}
|
|
.t-tag--warning.t-tag--light-outline {
|
|
border-color: var(--td-warning-color);
|
|
background-color: var(--td-warning-color-1);
|
|
}
|
|
.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-1);
|
|
}
|
|
.t-tag--danger.t-tag--light-outline {
|
|
border-color: var(--td-error-color);
|
|
background-color: var(--td-error-color-1);
|
|
}
|
|
.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 {
|
|
fill: var(--td-font-white-1);
|
|
}
|
|
.t-tag--dark.t-tag:not(.t-tag--default) .t-tag__icon-close:hover {
|
|
fill: var(--td-font-white-2);
|
|
}
|
|
.t-tag.t-tag--outline {
|
|
background: transparent;
|
|
}
|
|
.t-tag.t-size-s {
|
|
padding: 0px 4px;
|
|
height: 22px;
|
|
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 12px;
|
|
height: 32px;
|
|
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;
|
|
}
|
|
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 {
|
|
margin-right: 4px;
|
|
-webkit-animation: t-fade-in 0.1s ease-in-out;
|
|
animation: t-fade-in 0.1s ease-in-out;
|
|
}
|
|
.t-tag-input .t-input {
|
|
padding-left: 4px;
|
|
overflow: hidden;
|
|
}
|
|
.t-tag-input .t-input.t-size-s {
|
|
padding-left: 2px;
|
|
}
|
|
.t-tag-input:hover .t-input__inner,
|
|
.t-tag-input .t-input--focused .t-input__inner {
|
|
min-width: 20px;
|
|
}
|
|
.t-tag-input .t-tag-input__prefix,
|
|
.t-tag-input .t-input__prefix:not(:empty) {
|
|
margin-left: 4px;
|
|
}
|
|
.t-tag-input .t-input--auto-width {
|
|
padding-right: 4px;
|
|
}
|
|
.t-tag-input__suffix-clear {
|
|
cursor: pointer;
|
|
}
|
|
.t-tag-input--break-line .t-input {
|
|
display: block;
|
|
height: auto;
|
|
padding-right: 24px;
|
|
}
|
|
.t-tag-input--break-line .t-input.t-input--prefix > .t-input__prefix {
|
|
display: inline;
|
|
text-align: left;
|
|
}
|
|
.t-tag-input--break-line .t-input .t-input__suffix-icon {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 0;
|
|
}
|
|
.t-tag-input__prefix {
|
|
width: -webkit-max-content;
|
|
width: -moz-max-content;
|
|
width: max-content;
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.t-select-input,
|
|
.t-select-input__wrap {
|
|
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;
|
|
}
|
|
/** 无边框模式 */
|
|
.t-select-input--borderless {
|
|
/** 无边框模式的多选 */
|
|
}
|
|
.t-select-input--borderless .t-input {
|
|
border: 0;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
-webkit-transition: background-color 0.2s linear;
|
|
transition: background-color 0.2s linear;
|
|
}
|
|
.t-select-input--borderless .t-input:hover {
|
|
background-color: var(--td-bg-color-container-hover);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
.t-select-input--borderless .t-input--focused {
|
|
background-color: var(--td-bg-color-container-hover);
|
|
}
|
|
.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible input {
|
|
display: inline-block;
|
|
}
|
|
.t-select-input--borderless.t-select-input--multiple:not(.t-select-input--empty).t-select-input--popup-visible .t-input {
|
|
background-color: var(--td-bg-color-container-hover);
|
|
}
|
|
.t-select-input--borderless.t-tag-input {
|
|
border: 0;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
-webkit-transition: background-color 0.2s linear;
|
|
transition: background-color 0.2s linear;
|
|
}
|
|
.t-select-input--borderless.t-tag-input:hover {
|
|
background-color: var(--td-bg-color-container-hover);
|
|
border-radius: var(--td-radius-default);
|
|
}
|
|
|
|
@keyframes t-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.t-icon {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
.t-icon::before {
|
|
font-family: unset;
|
|
}
|
|
.t-icon-loading {
|
|
animation: t-spin 1s linear infinite;
|
|
}
|
|
.t-icon {
|
|
fill: currentColor;
|
|
}
|
|
.t-icon.t-size-s,
|
|
i.t-size-s {
|
|
font-size: 14px;
|
|
}
|
|
.t-icon.t-size-m,
|
|
i.t-size-m {
|
|
font-size: 16px;
|
|
}
|
|
.t-icon.t-size-l,
|
|
i.t-size-l {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.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: 32px;
|
|
font: var(--td-font-body-medium);
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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: 32px;
|
|
font: var(--td-font-body-medium);
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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: 32px;
|
|
font: var(--td-font-body-medium);
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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: 32px;
|
|
font: var(--td-font-body-medium);
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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: 24px;
|
|
font: var(--td-font-body-small);
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
}
|
|
.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: 40px;
|
|
font: var(--td-font-body-large);
|
|
padding-left: 23px;
|
|
padding-right: 23px;
|
|
}
|
|
.t-button.t-size-l .t-icon,
|
|
.t-button.t-size-l .t-loading {
|
|
font-size: var(--td-font-size-title-large);
|
|
}
|
|
.t-button.t-size-full-width {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.t-button--shape-square {
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
.t-button--shape-square.t-size-s {
|
|
width: 24px;
|
|
padding: 0;
|
|
}
|
|
.t-button--shape-square.t-size-l {
|
|
width: 40px;
|
|
padding: 0;
|
|
}
|
|
.t-button--shape-round {
|
|
border-radius: var(--td-radius-round);
|
|
}
|
|
.t-button--shape-round.t-size-s {
|
|
border-radius: 12px;
|
|
}
|
|
.t-button--shape-round.t-size-l {
|
|
border-radius: 20px;
|
|
}
|
|
.t-button--shape-circle {
|
|
width: 32px;
|
|
padding: 0;
|
|
text-align: center;
|
|
border-radius: 16px;
|
|
}
|
|
.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: 24px;
|
|
border-radius: 12px;
|
|
}
|
|
.t-button--shape-circle.t-size-l {
|
|
width: 40px;
|
|
padding: 0;
|
|
border-radius: 20px;
|
|
}
|
|
.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-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);
|
|
}
|
|
|
|
.trans-ctx--icon-trans {
|
|
width: 20px;
|
|
padding: 2px;
|
|
border-radius: 2px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
display: none;
|
|
opacity: 0;
|
|
background-color: #0052d9;
|
|
}
|
|
.trans-ctx--icon-trans.trans-ctx--visible {
|
|
opacity: 1;
|
|
display: inline-block;
|
|
}
|
|
.trans-ctx--container-popup {
|
|
position: fixed;
|
|
opacity: 0;
|
|
z-index: 99999999;
|
|
display: none;
|
|
}
|
|
.trans-ctx--container-popup.trans-ctx--visible {
|
|
opacity: 1;
|
|
display: block;
|
|
}
|
|
|
|
.trans-ctx--panel-result {
|
|
position: relative;
|
|
width: 488px;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
display: none;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 23px -6px;
|
|
}
|
|
.trans-ctx--panel-result.trans-ctx--visible {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--container-title {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--title-text {
|
|
cursor: move;
|
|
margin-right: 10px;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--icon-close {
|
|
display: inline-block;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 17px;
|
|
width: 10px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--btn-more {
|
|
margin-left: 10px;
|
|
margin-right: 4px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
color: #0052d9;
|
|
text-decoration: underline;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--container-title .trans-ctx--btn-more .trans-ctx--icon-more {
|
|
position: relative;
|
|
top: 1px;
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--icon-setting {
|
|
position: relative;
|
|
top: 3.5px;
|
|
width: 18px;
|
|
height: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content {
|
|
padding: 16px;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--result-section:not(:last-child) {
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
color: #333;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--container-collapsed-text {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content-collapsed {
|
|
position: relative;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content-collapsed::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, #fff 99%);
|
|
pointer-events: none;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--btn-expand {
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
color: #0052d9;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content {
|
|
position: relative;
|
|
max-height: 280px;
|
|
padding-left: 4px;
|
|
line-height: 30px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content.trans-ctx--source {
|
|
max-height: 75px;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target {
|
|
position: relative;
|
|
max-height: 180px;
|
|
overflow: hidden;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target .trans-ctx--btn-expand {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
border: none;
|
|
background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 60%, #fff 100%);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--collapsed-target .trans-ctx--btn-expand .trans-ctx--icon-expand {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
font-size: 24px;
|
|
color: #0052d9;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--error-tip {
|
|
color: #e34d59;
|
|
}
|
|
.trans-ctx--panel-result .trans-ctx--content .trans-ctx--trs-content .trans-ctx--btn-retry {
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
color: #0052d9;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.trans-ctx--selector-lang {
|
|
width: 120px;
|
|
margin: 0 4px;
|
|
height: 28px;
|
|
line-height: 18px;
|
|
outline: none;
|
|
background-color: #fff;
|
|
border: solid 1px #b0bac5;
|
|
padding: 3px 6px;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
/* 清除默认的箭头样式 */
|
|
}
|
|
.trans-ctx--selector-lang:focus {
|
|
border: 1px solid #3582fb;
|
|
}
|
|
|
|
.trans-ctx--icon-copy {
|
|
position: relative;
|
|
top: 1.5px;
|
|
width: 14px;
|
|
height: auto;
|
|
color: rgba(0, 0, 0, 0.6);
|
|
cursor: pointer;
|
|
}
|
|
|