[class*='tiny-'] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[class*='tiny-'] :after,
[class*='tiny-'] :before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
[class*='tiny-'] a {
cursor: pointer;
background-image: none;
text-decoration: none;
outline: 0;
}
[class*='tiny-'] a:active,
[class*='tiny-'] a:focus,
[class*='tiny-'] a:hover {
outline: 0;
text-decoration: none;
}
[class*='tiny-'] dd,
[class*='tiny-'] dl,
[class*='tiny-'] dt,
[class*='tiny-'] li,
[class*='tiny-'] ol,
[class*='tiny-'] td,
[class*='tiny-'] th,
[class*='tiny-'] ul {
margin: 0;
padding: 0;
}
[class*='tiny-'] ol,
[class*='tiny-'] ul {
list-style: none;
}
[class*='tiny-'] audio,
[class*='tiny-'] canvas,
[class*='tiny-'] video {
display: inline-block;
}
[class*='tiny-'] audio:not([controls]) {
display: none;
height: 0;
}
[class*='tiny-'] mark {
background: #ff0;
color: #000;
}
[class*='tiny-'] pre {
white-space: pre-wrap;
}
[class*='tiny-'] sub,
[class*='tiny-'] sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
[class*='tiny-'] sup {
top: -0.5em;
}
[class*='tiny-'] sub {
bottom: -0.25em;
}
[class*='tiny-'] fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
[class*='tiny-'] legend {
border: 0;
padding: 0;
}
[class*='tiny-'] input::-ms-clear,
[class*='tiny-'] input::-ms-reveal {
display: none;
}
[class*='tiny-'] button::-moz-focus-inner,
[class*='tiny-'] input::-moz-focus-inner {
border: 0;
padding: 0;
}
[class*='tiny-'] textarea {
overflow: auto;
vertical-align: top;
}
[class*='tiny-'] table {
border-collapse: collapse;
border-spacing: 0;
}
[class*='tiny-'] .tiny-hide {
display: none;
}
[class*='tiny-'] .popper__arrow,
[class*='tiny-'] .popper__arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
@media (min-width: 768px) {
[class*='tiny-'] ::-webkit-scrollbar {
width: 4px;
height: 4px;
}
[class*='tiny-'] ::-webkit-scrollbar-track-piece {
background: #fafafa;
}
[class*='tiny-'] ::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 6px;
}
[class*='tiny-'] ::-webkit-scrollbar-thumb:hover {
background: #999;
}
[class*='tiny-'] ::-webkit-scrollbar-thumb:active {
background: #999;
}
[class*='tiny-'] .tiny-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[class*='tiny-'] .tiny-scrollbar::-webkit-scrollbar-track-piece {
background: 0 0;
border: 0;
}
[class*='tiny-'] .tiny-scrollbar::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 4px;
}
[class*='tiny-'] .tiny-scrollbar::-webkit-scrollbar-thumb:hover {
background: #999;
}
[class*='tiny-'] .tiny-scrollbar::-webkit-scrollbar-thumb:active {
background: #999;
}
[class*='tiny-'] .tiny-min-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
[class*='tiny-'] .tiny-min-scrollbar::-webkit-scrollbar-track-piece {
background: 0 0;
border: 0;
}
[class*='tiny-'] .tiny-min-scrollbar::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 2px;
}
[class*='tiny-'] .tiny-min-scrollbar::-webkit-scrollbar-thumb:hover {
background: #999;
}
[class*='tiny-'] .tiny-min-scrollbar::-webkit-scrollbar-thumb:active {
background: #999;
}
}
:root {
--ti-base-color-white: #fff;
--ti-base-color-brand-6: #5e7ce0;
--ti-base-color-brand-8: #344899;
--ti-base-color-brand-7: #526ecc;
--ti-base-color-brand-5: #7693f5;
--ti-base-color-brand-4: #96adfa;
--ti-base-color-brand-3: #beccfa;
--ti-base-color-brand-2: #e9edfa;
--ti-base-color-brand-1: #f2f5fc;
--ti-base-color-common-9: #181818;
--ti-base-color-common-8: #282b33;
--ti-base-color-common-7: #252b3a;
--ti-base-color-common-6: #464c59;
--ti-base-color-common-5: #575d6c;
--ti-base-color-common-4: #5c6173;
--ti-base-color-common-3: #8a8e99;
--ti-base-color-common-2: #adb0b8;
--ti-base-color-common-1: #dfe1e6;
--ti-base-color-bg-9: #b12220;
--ti-base-color-bg-8: #c7000b;
--ti-base-color-bg-7: #d64a52;
--ti-base-color-bg-6: #eef0f5;
--ti-base-color-bg-5: #f5f5f6;
--ti-base-color-bg-4: #fafafa;
--ti-base-color-bg-3: #ffffff;
--ti-base-color-bg-2: #ffffff;
--ti-base-color-bg-1: #ffffff;
--ti-base-color-error-4: #de504e;
--ti-base-color-error-3: #f66f6a;
--ti-base-color-error-2: #ffbcba;
--ti-base-color-error-1: #ffeeed;
--ti-base-color-success-4: #3ac295;
--ti-base-color-success-3: #50d4ab;
--ti-base-color-success-2: #acf2dc;
--ti-base-color-success-1: #edfff9;
--ti-base-color-warn-5: #e37d29;
--ti-base-color-warn-4: #fa9841;
--ti-base-color-warn-3: #fac20a;
--ti-base-color-warn-2: #ffd0a6;
--ti-base-color-warn-1: #fff3e8;
--ti-base-color-prompt-4: var(--ti-base-color-brand-7);
--ti-base-color-prompt-3: var(--ti-base-color-brand-6);
--ti-base-color-prompt-2: var(--ti-base-color-brand-3);
--ti-base-color-prompt-1: #ebf6ff;
--ti-base-color-prompt-icon-from: #7769e8;
--ti-base-color-prompt-icon-to: #58bbff;
--ti-base-color-icon-info: #6cbfff;
--ti-base-color-data-3: #a6dd82;
--ti-base-color-data-4: #f3689a;
--ti-base-color-data-5: #a97af8;
--ti-base-color-transparent: transparent;
--ti-common-color-success: var(--ti-base-color-success-3);
--ti-common-color-text-success: var(--ti-base-color-success-4);
--ti-common-color-success-bg: var(--ti-base-color-success-1);
--ti-common-color-success-border: var(--ti-base-color-success-2);
--ti-common-color-error: var(--ti-base-color-error-3);
--ti-common-color-error-text: var(--ti-base-color-error-4);
--ti-common-color-error-bg: var(--ti-base-color-error-1);
--ti-common-color-error-border: var(--ti-base-color-error-3);
--ti-common-color-error-border-secondary: var(--ti-base-color-error-2);
--ti-common-color-info: var(--ti-base-color-info-normal);
--ti-common-color-info-text: var(--ti-base-color-common-7);
--ti-common-color-info-bg: rgba(51, 51, 51, 0.06);
--ti-common-color-info-border: #d3d4d6;
--ti-common-color-warn: var(--ti-base-color-warn-4);
--ti-common-color-warn-text: var(--ti-base-color-warn-5);
--ti-common-color-warn-bg: var(--ti-base-color-warn-1);
--ti-common-color-warn-border: var(--ti-base-color-warn-2);
--ti-common-color-warn-secondary: var(--ti-base-color-warn-3);
--ti-common-color-prompt: var(--ti-base-color-prompt-3);
--ti-common-color-prompt-text: var(--ti-base-color-prompt-4);
--ti-common-color-prompt-bg: var(--ti-base-color-prompt-1);
--ti-common-color-prompt-border: var(--ti-base-color-prompt-2);
--ti-common-color-prompt-icon-from: var(--ti-base-color-prompt-icon-from);
--ti-common-color-prompt-icon-to: var(--ti-base-color-prompt-icon-to);
--ti-common-color-text-primary: var(--ti-base-color-common-7);
--ti-common-color-text-secondary: var(--ti-base-color-common-5);
--ti-common-color-text-weaken: var(--ti-base-color-common-3);
--ti-common-color-text-disabled: var(--ti-base-color-common-2);
--ti-common-color-text-darkbg: var(--ti-base-color-common-2);
--ti-common-color-text-darkbg-disabled: var(--ti-base-color-common-5);
--ti-common-color-text-link: var(--ti-base-color-brand-7);
--ti-common-color-text-link-hover: var(--ti-base-color-brand-8);
--ti-common-color-text-link-darkbg: var(--ti-base-color-brand-4);
--ti-common-color-text-link-darkbg-hover: var(--ti-base-color-brand-3);
--ti-common-color-text-highlight: var(--ti-base-color-brand-7);
--ti-common-color-text-white: var(--ti-base-color-white);
--ti-common-color-text-gray: var(--ti-base-color-white);
--ti-common-color-text-gray-disabled: var(--ti-base-color-common-4);
--ti-common-color-text-important: var(--ti-base-color-error-4);
--ti-common-color-icon-normal: var(--ti-base-color-common-5);
--ti-common-color-icon-hover: var(--ti-base-color-brand-6);
--ti-common-color-icon-active: var(--ti-base-color-brand-6);
--ti-common-color-icon-disabled: var(--ti-base-color-common-2);
--ti-common-color-icon-white: var(--ti-base-color-white);
--ti-common-color-icon-graybg-normal: var(--ti-base-color-common-2);
--ti-common-color-icon-graybg-hover: var(--ti-base-color-brand-6);
--ti-common-color-icon-graybg-active: var(--ti-base-color-brand-6);
--ti-common-color-icon-graybg-disabled: var(--ti-base-color-common-1);
--ti-common-color-icon-darkbg-normal: var(--ti-base-color-common-2);
--ti-common-color-icon-darkbg-hover: var(--ti-base-color-brand-5);
--ti-common-color-icon-darkbg-active: var(--ti-base-color-brand-5);
--ti-common-color-icon-darkbg-disabled: var(--ti-base-color-common-5);
--ti-common-color-icon-info: var(--ti-base-color-icon-info);
--ti-common-color-line-normal: var(--ti-base-color-common-2);
--ti-common-color-line-hover: var(--ti-base-color-common-5);
--ti-common-color-line-active: var(--ti-base-color-brand-6);
--ti-common-color-line-disabled: var(--ti-base-color-common-1);
--ti-common-color-line-dividing: var(--ti-base-color-common-1);
--ti-common-color-dash-line-normal: var(--ti-base-color-common-5);
--ti-common-color-dash-line-hover: var(--ti-base-color-brand-7);
--ti-common-color-bg-normal: var(--ti-base-color-bg-6);
--ti-common-color-bg-emphasize: var(--ti-base-color-brand-6);
--ti-common-color-bg-disabled: var(--ti-base-color-bg-5);
--ti-common-color-bg-hover: var(--ti-base-color-brand-8);
--ti-common-color-bg-gray: var(--ti-base-color-bg-4);
--ti-common-color-bg-secondary: var(--ti-base-color-common-2);
--ti-common-bg-primary: var(--ti-base-color-bg-8);
--ti-common-bg-primary-hover: var(--ti-base-color-bg-7);
--ti-common-bg-primary-active: var(--ti-base-color-bg-9);
--ti-common-bg-minor: var(--ti-base-color-bg-2);
--ti-common-bg-minor-hover: var(--ti-base-color-bg-1);
--ti-common-bg-minor-active: var(--ti-base-color-bg-3);
--ti-common-color-bg-white-normal: var(--ti-base-color-white);
--ti-common-color-bg-white-emphasize: var(--ti-base-color-brand-1);
--ti-common-color-bg-light-normal: var(--ti-base-color-brand-2);
--ti-common-color-bg-light-emphasize: var(--ti-base-color-brand-3);
--ti-common-color-bg-dark-normal: var(--ti-base-color-common-6);
--ti-common-color-bg-dark-emphasize: var(--ti-base-color-common-4);
--ti-common-color-bg-dark-active: var(--ti-common-color-bg-normal);
--ti-common-color-bg-dark-deep: var(--ti-base-color-common-6);
--ti-common-color-bg-dark-disabled: var(--ti-base-color-common-1);
--ti-common-color-bg-navigation: var(--ti-base-color-common-8);
--ti-common-color-bg-dark-select: var(--ti-base-color-common-9);
--ti-common-color-data-1: var(--ti-base-color-success-3);
--ti-common-color-data-2: var(--ti-base-color-icon-info);
--ti-common-color-data-3: var(--ti-base-color-data-3);
--ti-common-color-data-4: var(--ti-base-color-data-4);
--ti-common-color-data-5: var(--ti-base-color-data-5);
--ti-common-color-data-6: var(--ti-base-color-warn-3);
--ti-common-color-data-7: var(--ti-base-color-warn-4);
--ti-common-color-data-8: var(--ti-base-color-error-3);
--ti-common-color-transparent: var(--ti-base-color-transparent);
--ti-common-border-radius-normal: 2px;
--ti-common-border-radius-0: 0px;
--ti-common-border-radius-1: 4px;
--ti-common-border-radius-2: 8px;
--ti-common-border-radius-3: 50%;
--ti-common-font-size-base: 12px;
--ti-common-font-size-1: 14px;
--ti-common-font-size-2: 16px;
--ti-common-font-size-3: 18px;
--ti-common-font-size-4: 20px;
--ti-common-font-size-5: 24px;
--ti-common-font-size-6: 32px;
--ti-common-font-size-7: 36px;
--ti-common-line-height-number: 1.5;
--ti-common-space-base: 4px;
--ti-common-space-2x: calc(var(--ti-common-space-base) * 2);
--ti-common-space-3x: calc(var(--ti-common-space-base) * 3);
--ti-common-space-4x: calc(var(--ti-common-space-base) * 4);
--ti-common-space-5x: calc(var(--ti-common-space-base) * 5);
--ti-common-space-6x: calc(var(--ti-common-space-base) * 6);
--ti-common-space-8x: calc(var(--ti-common-space-base) * 8);
--ti-common-space-10x: calc(var(--ti-common-space-base) * 10);
--ti-common-space-0: 0px;
--ti-common-space-1: 1px;
--ti-common-space-6: 6px;
--ti-common-space-10: 10px;
--ti-common-shadow-1-up: 0 -1px 4px 0 rgba(0, 0, 0, 0.1);
--ti-common-shadow-1-down: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
--ti-common-shadow-1-left: -1px 0px 4px 0 rgba(0, 0, 0, 0.1);
--ti-common-shadow-1-right: 1px 0px 4px 0 rgba(0, 0, 0, 0.1);
--ti-common-shadow-2-up: 0 -2px 8px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-2-down: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-2-left: -2px 0 8px 0 rgba(238, 10, 10, 0.2);
--ti-common-shadow-2-right: 2px 0 8px 0 rgba(252, 5, 5, 0.2);
--ti-common-shadow-3-up: 0 -4px 16px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-3-down: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-3-left: -4px 0 16px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-3-right: 4px 0 16px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-4-up: 0 -8px 40px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-4-down: 0 8px 40px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-4-left: -8px 0 40px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-4-right: 8px 0 40px 0 rgba(0, 0, 0, 0.2);
--ti-common-shadow-error: 0 1px 3px 0 rgba(199, 54, 54, 0.25);
--ti-common-shadow-warn: 0 1px 3px 0 rgba(204, 100, 20, 0.25);
--ti-common-shadow-prompt: 0 1px 3px 0 rgba(70, 94, 184, 0.25);
--ti-common-shadow-success: 0 1px 3px 0 rgba(39, 176, 128, 0.25);
--ti-common-font-family: 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei',
'寰蒋闆呴粦', 'Microsoft JhengHei';
--ti-common-font-weight-1: 100;
--ti-common-font-weight-2: 200;
--ti-common-font-weight-3: 300;
--ti-common-font-weight-4: normal;
--ti-common-font-weight-5: 500;
--ti-common-font-weight-6: 600;
--ti-common-font-weight-7: bold;
--ti-common-font-weight-8: 800;
--ti-common-font-weight-9: 900;
--ti-common-border-weight-normal: 1px;
--ti-common-border-weight-1: 2px;
--ti-common-border-weight-2: 3px;
--ti-common-border-style-dashed: dashed;
--ti-common-border-style-dotted: dotted;
--ti-common-border-style-solid: solid;
--ti-common-size-base: 4px;
--ti-common-size-2x: calc(var(--ti-common-size-base) * 2);
--ti-common-size-3x: calc(var(--ti-common-size-base) * 3);
--ti-common-size-4x: calc(var(--ti-common-size-base) * 4);
--ti-common-size-5x: calc(var(--ti-common-size-base) * 5);
--ti-common-size-6x: calc(var(--ti-common-size-base) * 6);
--ti-common-size-7x: calc(var(--ti-common-size-base) * 7);
--ti-common-size-8x: calc(var(--ti-common-size-base) * 8);
--ti-common-size-9x: calc(var(--ti-common-size-base) * 9);
--ti-common-size-10x: calc(var(--ti-common-size-base) * 10);
--ti-common-size-11x: calc(var(--ti-common-size-base) * 11);
--ti-common-size-12x: calc(var(--ti-common-size-base) * 12);
--ti-common-size-13x: calc(var(--ti-common-size-base) * 13);
--ti-common-size-14x: calc(var(--ti-common-size-base) * 14);
--ti-common-size-15x: calc(var(--ti-common-size-base) * 15);
--ti-common-size-16x: calc(var(--ti-common-size-base) * 16);
--ti-common-size-17x: calc(var(--ti-common-size-base) * 17);
--ti-common-size-18x: calc(var(--ti-common-size-base) * 18);
--ti-common-size-19x: calc(var(--ti-common-size-base) * 19);
--ti-common-size-20x: calc(var(--ti-common-size-base) * 20);
--ti-common-size-21x: calc(var(--ti-common-size-base) * 21);
--ti-common-size-22x: calc(var(--ti-common-size-base) * 22);
--ti-common-size-23x: calc(var(--ti-common-size-base) * 23);
--ti-common-size-24x: calc(var(--ti-common-size-base) * 24);
--ti-common-size-25x: calc(var(--ti-common-size-base) * 25);
--ti-common-size-26x: calc(var(--ti-common-size-base) * 26);
--ti-common-size-27x: calc(var(--ti-common-size-base) * 27);
--ti-common-size-28x: calc(var(--ti-common-size-base) * 28);
--ti-common-size-29x: calc(var(--ti-common-size-base) * 29);
--ti-common-size-30x: calc(var(--ti-common-size-base) * 30);
--ti-common-size-31x: calc(var(--ti-common-size-base) * 31);
--ti-common-size-32x: calc(var(--ti-common-size-base) * 32);
--ti-common-size-33x: calc(var(--ti-common-size-base) * 33);
--ti-common-size-34x: calc(var(--ti-common-size-base) * 34);
--ti-common-size-35x: calc(var(--ti-common-size-base) * 35);
--ti-common-size-36x: calc(var(--ti-common-size-base) * 36);
--ti-common-size-37x: calc(var(--ti-common-size-base) * 37);
--ti-common-size-38x: calc(var(--ti-common-size-base) * 38);
--ti-common-size-39x: calc(var(--ti-common-size-base) * 39);
--ti-common-size-40x: calc(var(--ti-common-size-base) * 40);
--ti-common-size-41x: calc(var(--ti-common-size-base) * 41);
--ti-common-size-42x: calc(var(--ti-common-size-base) * 42);
--ti-common-size-43x: calc(var(--ti-common-size-base) * 43);
--ti-common-size-44x: calc(var(--ti-common-size-base) * 44);
--ti-common-size-45x: calc(var(--ti-common-size-base) * 45);
--ti-common-size-46x: calc(var(--ti-common-size-base) * 46);
--ti-common-size-47x: calc(var(--ti-common-size-base) * 47);
--ti-common-size-48x: calc(var(--ti-common-size-base) * 48);
--ti-common-size-49x: calc(var(--ti-common-size-base) * 49);
--ti-common-size-50x: calc(var(--ti-common-size-base) * 50);
--ti-common-size-0: 0px;
--ti-common-size-auto: auto;
--ti-base-color-primary-normal: var(--ti-base-color-brand-6);
--ti-base-color-primary-hover: var(--ti-base-color-brand-5);
--ti-base-color-primary-active: var(--ti-base-color-brand-5);
--ti-base-color-primary-disabled: var(--ti-common-color-bg-disabled);
--ti-base-color-primary-disabled-border: var(--ti-common-color-line-disabled);
--ti-base-color-primary-disabled-text: var(--ti-common-color-text-disabled);
--ti-base-color-success-normal: var(--ti-common-color-success);
--ti-base-color-success-hover: var(--ti-common-color-success-border);
--ti-base-color-success-active: var(--ti-common-color-success-border);
--ti-base-color-success-disabled: var(--ti-common-color-bg-disabled);
--ti-base-color-success-disabled-border: var(--ti-common-color-line-disabled);
--ti-base-color-success-disabled-text: var(--ti-common-color-text-disabled);
--ti-base-color-warning-normal: var(--ti-common-color-warn);
--ti-base-color-warning-hover: var(--ti-common-color-warn-secondary);
--ti-base-color-warning-active: var(--ti-common-color-warn-secondary);
--ti-base-color-warning-disabled: var(--ti-common-color-bg-disabled);
--ti-base-color-warning-disabled-border: var(--ti-common-color-line-disabled);
--ti-base-color-warning-disabled-text: var(--ti-common-color-text-disabled);
--ti-base-color-danger-normal: var(--ti-common-bg-primary);
--ti-base-color-danger-hover: var(--ti-common-bg-primary-hover);
--ti-base-color-danger-active: var(--ti-common-bg-primary-active);
--ti-base-color-danger-disabled: var(--ti-common-color-bg-disabled);
--ti-base-color-danger-disabled-border: var(--ti-common-color-line-disabled);
--ti-base-color-danger-disabled-text: var(--ti-common-color-text-disabled);
--ti-base-color-info-normal: var(--ti-base-color-common-7);
--ti-base-color-info-hover: #54657e;
--ti-base-color-info-active: #54657e;
--ti-base-color-info-disabled: var(--ti-common-color-bg-disabled);
--ti-base-color-info-disabled-border: var(--ti-common-color-line-disabled);
--ti-base-color-info-disabled-text: var(--ti-common-color-text-disabled);
--ti-base-color-border: var(--ti-base-color-common-2);
--ti-base-color-border-hover: var(--ti-base-color-common-5);
--ti-base-color-light: #fff;
--ti-base-color-hover-background: var(--ti-base-color-brand-1);
--ti-base-color-selected-background: var(--ti-base-color-brand-6);
--ti-base-color-selected-font-color: var(--ti-base-color-light);
--ti-base-size-height-normal: 30px;
--ti-base-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
--ti-base-dropdown-gap: 2px;
--ti-base-color-dark: #000;
--ti-base-color-secondary: #666;
--ti-base-color-placeholder: #999;
--ti-base-color-navigation-background: #2e3243;
--ti-base-radius-large: 3px;
--ti-base-radius-medium: 2px;
--ti-base-radius-small: 1px;
--ti-base-font-size: 12px;
--ti-base-font-size-normal: 1em;
--ti-base-font-size-large: 1.125em;
--ti-base-font-weight-bold: 700;
--ti-base-size-width-large: 130px;
--ti-base-size-width-medium: 120px;
--ti-base-size-width-normal: 80px;
--ti-base-size-width-small: 36px;
--ti-base-size-width-minor: 30px;
--ti-base-size-width-mini: 24px;
--ti-base-size-height-large: 48px;
--ti-base-size-height-medium: 42px;
--ti-base-size-height-small: 28px;
--ti-base-size-height-minor: 30px;
--ti-base-size-height-mini: 24px;
}
:root {
--ti-errortips-box-background: var(--ti-base-color-light);
--ti-errortips-body-color: #5a5e66;
--ti-errortips-body-font-size: var(--ti-common-font-size-1);
--ti-errortips-body-code-font-size: 100px;
--ti-errortips-body-code-color: #9ac7ef;
--ti-errortips-body-content-font-size: var(--ti-common-font-size-2);
--ti-errortips-body-bottom-font-weight: var(--ti-common-font-weight-8);
--ti-errortips-sso-box-background: var(--ti-base-color-light);
--ti-errortips-sso-body-color: #5a5e66;
--ti-errortips-sso-body-font-size: var(--ti-common-font-size-1);
--ti-errortips-not-sso-background: #dcdfe4;
--ti-errortips-not-sso-body-background: #f4f5f9;
--ti-errortips-not-sso-body-border-color: #d4d5d7;
--ti-errortips-not-sso-body-title-border-color: #b6babf;
--ti-errortips-not-sso-body-title-font-size: var(--ti-common-font-size-4);
--ti-errortips-not-sso-body-login-font-size: var(--ti-common-font-size-2);
--ti-errortips-not-sso-body-color: #5a5e66;
--ti-errortips-not-sso-body-input-border-color: var(--ti-base-color-bg-5);
--ti-errortips-not-sso-body-input-border-radius: var(--ti-common-border-radius-normal);
--ti-errortips-not-sso-body-input-placeholder: var(--ti-base-color-placeholder);
--ti-errortips-not-sso-body-input-hover: var(--ti-base-color-placeholder);
--ti-errortips-not-sso-body-input-focus: var(--ti-base-color-border);
--ti-errortips-not-sso-body-input-danger: var(--ti-base-color-bg-8);
--ti-errortips-not-sso-body-button-color: var(--ti-base-color-light);
--ti-errortips-not-sso-body-button-background: var(--ti-base-color-brand-6);
--ti-errortips-not-sso-body-button-border-radius: var(--ti-common-border-radius-normal);
--ti-errortips-not-sso-body-button-hover: var(--ti-base-color-brand-5);
--ti-errortips-not-sso-body-errmessage-color: #f00;
}
.aurora-popup__wrapper {
z-index: 2147483647 !important;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
}
.aurora-popup__wrapper .aurora-errortips__box {
position: absolute;
width: var(--ti-errortips-width);
min-height: var(--ti-errortips-min-height);
max-height: var(--ti-errortips-max-height);
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
background: var(--ti-errortips-box-background);
border: 1px solid transparent;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
text-align: center;
overflow-y: auto;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body {
height: 100%;
text-align: initial;
padding: 20px;
color: var(--ti-errortips-body-color);
font-size: var(--ti-errortips-body-font-size);
display: table;
margin: auto;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips .error-code {
font-size: var(--ti-errortips-body-code-font-size);
color: var(--ti-errortips-body-code-color);
margin: 0 auto -45px;
text-shadow: 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips .error-img {
width: 260px;
height: 180px;
margin: 0 auto;
background: url(../images/errortips-bg.png) no-repeat;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips .error-content {
font-size: var(--ti-errortips-body-content-font-size);
margin: 24px 0;
font-weight: 700;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips .error-bottom a {
font-weight: var(--ti-errortips-body-bottom-font-weight);
cursor: pointer;
}
.aurora-popup__wrapper .aurora-errortips__box .aurora-errortips__body .errortips .error-bottom span {
padding-right: 15px;
}
.aurora-popup__wrapper .aurora-sso__box {
position: absolute;
background: var(--ti-errortips-sso-box-background);
border: 1px solid transparent;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.aurora-popup__wrapper .aurora-sso__box .aurora-sso__body {
text-align: initial;
padding: 20px;
color: var(--ti-errortips-sso-body-color);
line-height: 32px;
font-size: var(--ti-errortips-sso-body-font-size);
}
.aurora-popup__wrapper .aurora-sso__box .aurora-sso__body .aurora-sso__body-iframe {
width: 350px;
height: 350px;
overflow: hidden;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.aurora-popup__wrapper .aurora-sso__box .aurora-sso__body .aurora-sso__body-iframe {
height: 460px;
}
}
@supports (-ms-ime-align: auto) {
.aurora-popup__wrapper .aurora-sso__box .aurora-sso__body .aurora-sso__body-iframe {
height: 460px;
}
}
.aurora-popup__wrapper.login-not-sso {
background: var(--ti-errortips-not-sso-background);
background-size: cover;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box {
width: 100%;
height: 100%;
overflow: hidden;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body {
width: 650px;
height: 400px;
background: var(--ti-errortips-not-sso-body-background);
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
border: 1px solid var(--ti-errortips-not-sso-body-border-color);
-webkit-box-shadow: 0 2px 4px #989a9e;
box-shadow: 0 2px 4px #989a9e;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .title {
background: -webkit-gradient(linear, left top, left bottom, from(#ecedf1), to(#dadde2));
background: linear-gradient(to bottom, #ecedf1, #dadde2);
border-bottom: 1px solid var(--ti-errortips-not-sso-body-title-border-color);
padding: 16px 20px;
font-size: var(--ti-errortips-not-sso-body-title-font-size);
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
font-size: var(--ti-errortips-not-sso-body-login-font-size);
margin-top: 28px;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login .form-item {
height: 60px;
line-height: 60px;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login .form-item td.label {
width: 30%;
text-align: right;
color: var(--ti-errortips-not-sso-body-color);
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login .form-item td.cell {
width: 70%;
text-align: left;
padding-left: 12px;
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login .form-item td.cell input {
border: 1px solid var(--ti-errortips-not-sso-body-input-border-color);
border-radius: var(--ti-errortips-not-sso-body-input-border-radius);
outline: 0;
width: 75%;
height: 40px;
line-height: 40px;
padding: 0 8px;
background: 0 0;
color: var(--ti-errortips-not-sso-body-color);
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
input::-webkit-input-placeholder {
color: var(--ti-errortips-not-sso-body-input-placeholder);
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
input:hover {
border-color: var(--ti-errortips-not-sso-body-input-placeholder);
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
input:focus::-webkit-input-placeholder {
color: var(--ti-errortips-not-sso-body-input-focus);
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
input.text-danger {
border-color: var(--ti-errortips-not-sso-body-input-danger);
}
.aurora-popup__wrapper.login-not-sso .aurora-not-sso__box .aurora-not-sso__body .tbl-login .form-item td.cell button {
width: 75%;
height: 40px;
line-height: 40px;
padding: 0 24px;
text-align: center;
color: var(--ti-errortips-not-sso-body-button-color);
background-color: var(--ti-errortips-not-sso-body-button-background);
border: none;
border-radius: var(--ti-errortips-not-sso-body-button-border-radius);
-webkit-transition: 0.3s;
transition: 0.3s;
outline: 0;
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
button:hover {
background-color: var(--ti-errortips-not-sso-body-button-hover);
}
.aurora-popup__wrapper.login-not-sso
.aurora-not-sso__box
.aurora-not-sso__body
.tbl-login
.form-item
td.cell
.errmessage {
color: var(--ti-errortips-not-sso-body-errmessage-color);
line-height: 20px;
}
.tiny-svg {
width: 1em;
height: 1em;
vertical-align: middle;
overflow: hidden;
display: inline-block;
}
.tiny-transition-alert-fade-enter,
.tiny-transition-alert-fade-enter-from,
.tiny-transition-alert-fade-leave-active {
opacity: 0;
}
.tiny-transition-alert-fade-leave-active {
-webkit-transition: opacity 0.3s ease-in;
transition: opacity 0.3s ease-in;
}
.tiny-alert {
--ti-alert-description-font-size: var(--ti-common-font-size-base);
--ti-alert-close-font-size: var(--ti-common-font-size-base);
--ti-alert-radius: var(--ti-common-border-radius-normal);
--ti-alert-title-color: var(--ti-base-color-info-normal);
--ti-alert-nomal-content-line-height: var(--ti-common-line-height-number);
--ti-alert-description-color: var(--ti-base-color-info-normal);
--ti-alert-opration-color: var(--ti-base-color-brand-7);
--ti-alert-warning-border-color: var(--ti-common-color-warn-border);
--ti-alert-warning-icon-color: var(--ti-common-color-warn);
--ti-alert-warning-link-color: var(--ti-common-color-warn-text);
--ti-alert-warning-bg-color: var(--ti-common-color-warn-bg);
--ti-alert-error-border-color: var(--ti-common-color-error-border-secondary);
--ti-alert-error-icon-color: var(--ti-common-color-error);
--ti-alert-error-link-color: var(--ti-common-color-error-text);
--ti-alert-error-bg-color: var(--ti-common-color-error-bg);
--ti-alert-success-border-color: var(--ti-common-color-success-border);
--ti-alert-success-icon-color: var(--ti-common-color-success);
--ti-alert-success-link-color: var(--ti-common-color-text-success);
--ti-alert-success-bg-color: var(--ti-common-color-success-bg);
--ti-alert-info-border-color: var(--ti-common-color-prompt-border);
--ti-alert-info-icon-color: var(--ti-common-color-prompt);
--ti-alert-info-link-color: var(--ti-common-color-prompt-text);
--ti-alert-info-bg-color: var(--ti-common-color-prompt-bg);
position: relative;
border: 1px solid;
border-radius: var(--ti-alert-radius);
}
.tiny-alert.tiny-alert--normal {
padding: 11px 16px;
margin: 8px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-alert.tiny-alert--normal .tiny-alert__content {
padding: 0 8px;
display: table-cell;
line-height: var(--ti-alert-nomal-content-line-height);
max-width: calc(100% - 30px);
}
.tiny-alert.tiny-alert--large {
padding: 18px 24px 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-alert.tiny-alert--large .tiny-alert__content {
padding-left: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tiny-alert.tiny-alert--large .tiny-alert__description {
margin-bottom: 6px;
margin-top: 12px;
line-height: 1;
}
.tiny-alert.tiny-alert--large .tiny-alert__description.is-hide {
margin: 0;
}
.tiny-alert.tiny-alert--large .tiny-alert__icon {
font-size: 24px;
vertical-align: top;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.tiny-alert.tiny-alert--large .tiny-alert__icon.tiny-alert__close {
font-size: 12px;
}
.tiny-alert.tiny-alert--large .tiny-alert__close {
top: 12px;
right: 12px;
-webkit-transform: none;
transform: none;
}
.tiny-alert.tiny-alert--success {
background: var(--ti-alert-success-bg-color);
border-color: var(--ti-alert-success-border-color);
color: var(--ti-alert-title-color);
}
.tiny-alert.tiny-alert--success hr {
border-top-color: var(--ti-alert-success-link-color);
}
.tiny-alert.tiny-alert--success .alert-link {
color: var(--ti-alert-success-link-color);
}
.tiny-alert.tiny-alert--success .tiny-alert__icon {
fill: var(--ti-alert-success-icon-color);
}
.tiny-alert.tiny-alert--info {
background: var(--ti-alert-info-bg-color);
border-color: var(--ti-alert-info-border-color);
color: var(--ti-alert-title-color);
}
.tiny-alert.tiny-alert--info hr {
border-top-color: var(--ti-alert-info-link-color);
}
.tiny-alert.tiny-alert--info .alert-link {
color: var(--ti-alert-info-link-color);
}
.tiny-alert.tiny-alert--info .tiny-alert__icon {
fill: var(--ti-alert-info-icon-color);
}
.tiny-alert.tiny-alert--warning {
background: var(--ti-alert-warning-bg-color);
border-color: var(--ti-alert-warning-border-color);
color: var(--ti-alert-title-color);
}
.tiny-alert.tiny-alert--warning hr {
border-top-color: var(--ti-alert-warning-link-color);
}
.tiny-alert.tiny-alert--warning .alert-link {
color: var(--ti-alert-warning-link-color);
}
.tiny-alert.tiny-alert--warning .tiny-alert__icon {
fill: var(--ti-alert-warning-icon-color);
}
.tiny-alert.tiny-alert--error {
background: var(--ti-alert-error-bg-color);
border-color: var(--ti-alert-error-border-color);
color: var(--ti-alert-title-color);
}
.tiny-alert.tiny-alert--error hr {
border-top-color: var(--ti-alert-error-link-color);
}
.tiny-alert.tiny-alert--error .alert-link {
color: var(--ti-alert-error-link-color);
}
.tiny-alert.tiny-alert--error .tiny-alert__icon {
fill: var(--ti-alert-error-icon-color);
}
.tiny-alert__icon {
font-size: 16px;
}
.tiny-alert.is-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
}
.tiny-alert .is-custom {
position: absolute;
top: 50%;
right: 12px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.tiny-alert .tiny-alert__close {
font-size: var(--ti-alert-close-font-size);
position: absolute;
top: 50%;
right: 12px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.tiny-alert .tiny-alert__content .tiny-alert__opration {
font-size: 12px;
color: var(--ti-alert-opration-color);
line-height: 1;
}
.tiny-alert .tiny-alert__content .tiny-alert__opration a {
font-size: 12px;
color: var(--ti-alert-opration-color);
}
.tiny-alert .tiny-alert__content .tiny-alert__opration a:not(:last-child) {
margin-right: 16px;
}
.tiny-alert .tiny-alert__title {
font-size: 16px;
color: var(--ti-alert-title-color);
font-weight: 700;
}
.tiny-alert .tiny-alert__description {
font-size: var(--ti-alert-description-font-size);
color: var(--ti-alert-description-color);
}
.tiny-alert p {
display: inline-block;
line-height: 16px;
padding-left: 8px;
}
.tiny-amount {
--ti-amount-icon-color: var(--ti-base-color-brand-6);
--ti-amount-icon-font-size: var(--ti-common-font-size-1);
width: 270px;
}
.tiny-amount .tiny-amount-input-icon .tiny-svg {
fill: var(--ti-amount-icon-color);
font-size: var(--ti-amount-icon-font-size);
}
.tiny-amount-popper {
width: 270px;
}
.tiny-amount-popper .popover-con .module:not(:last-child) {
margin-bottom: 12px;
}
.tiny-amount-popper .popover-con .module {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-amount-popper .popover-con .module .popover-left {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-right: 8px;
width: 30%;
text-align: right;
}
.tiny-amount-popper
.popover-con
.module
.popover-right:not(.tiny-input-prefix):not(.tiny-input-suffiX)
.tiny-input__inner {
padding: 0 8px;
}
.tiny-amount-popper .popover-con .module .popover-right.tiny-input {
display: inline-block;
}
.tiny-amount .tiny-input {
outline: 0;
}
.tiny-amount span.tiny-popover__reference {
width: 100%;
}
.tiny-area .tiny-select {
width: 270px;
margin-right: 10px;
}
.tiny-autocomplete {
--ti-autocomplete-suggestion-border-radius: var(--ti-common-border-radius-normal);
--ti-autocomplete-suggestion-border-color: var(--ti-base-color-white);
--ti-autocomplete-suggestion-bgcolor: var(--ti-base-color-light);
--ti-autocomplete-li-color: var(--ti-base-color-info-normal);
--ti-autocomplete-li-font-size: var(--ti-common-font-size-base);
--ti-autocomplete-li-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-autocomplete-li-select-bgcolor: var(--ti-base-color-selected-background);
--ti-autocomplete-li-selected-font-color: var(--ti-base-color-selected-font-color);
--ti-autocomplete-li-divider-border-color: var(--ti-base-color-dark);
--ti-autocomplete-li-height: 30px;
--ti-autocomplete-loading-color: var(--ti-base-color-placeholder);
position: relative;
display: inline-block;
}
.tiny-autocomplete-suggestion {
border: 1px solid var(--ti-autocomplete-suggestion-border-color);
border-radius: var(--ti-autocomplete-suggestion-border-radius);
background-color: var(--ti-autocomplete-suggestion-bgcolor);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: var(--ti-base-box-shadow);
box-shadow: var(--ti-base-box-shadow);
}
.tiny-autocomplete-suggestion__wrap {
max-height: 280px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-autocomplete-suggestion__wrap {
margin-bottom: -17px !important;
padding-bottom: 6px;
}
}
.tiny-autocomplete-suggestion__list {
margin: 0;
padding: 0;
}
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item {
padding: 0 8px;
margin: 0;
line-height: var(--ti-autocomplete-li-height);
color: var(--ti-autocomplete-li-color);
font-size: var(--ti-autocomplete-li-font-size);
list-style: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item.highlighted,
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item:hover {
background-color: var(--ti-autocomplete-li-hover-bgcolor);
}
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item.divider {
margin-top: 6px;
border-top: 1px solid var(--ti-autocomplete-li-divider-border-color);
}
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item.divider:last-child {
margin-bottom: -6px;
}
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item:only-of-type,
.tiny-autocomplete-suggestion .tiny-autocomplete-suggestion__list-item:only-of-type:hover {
background-color: var(--ti-autocomplete-li-select-bgcolor);
color: var(--ti-autocomplete-li-selected-font-color);
}
.tiny-autocomplete-suggestion.is-loading .tiny-autocomplete-suggestion__list-loading {
text-align: center;
height: 100px;
line-height: 100px;
font-size: var(--ti-common-font-size-4);
color: var(--ti-autocomplete-loading-color);
}
.tiny-autocomplete-suggestion.is-loading .tiny-autocomplete-suggestion__list-loading::after {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.tiny-autocomplete-suggestion.is-loading .tiny-autocomplete-suggestion__list-loading:hover {
background-color: #fff;
}
.tiny-autocomplete-suggestion.is-loading .tiny-icon-loading {
vertical-align: middle;
}
.tiny-autocomplete-suggestion.tiny-popper[x-placement^='bottom'] {
margin-top: var(--ti-base-dropdown-gap);
}
.tiny-badge {
--ti-badge-size: var(--ti-common-size-5x);
--ti-badge-font-size: 12px;
--ti-badge-font-weight: var(--ti-common-font-weight-7);
--ti-badge-border-raidus: 12px;
--ti-badge-color: var(--ti-base-color-light);
--ti-badge-bgcolor: var(--ti-base-color-error-3);
--ti-badge-link-hover-color: var(--ti-base-color-light);
--ti-badge-active-color: var(--ti-base-color-brand-6);
--ti-badge-active-bgcolor: var(--ti-base-color-light);
--ti-badge-primary-bgcolor: var(--ti-base-color-brand-6);
--ti-badge-success-bgcolor: var(--ti-base-color-success-normal);
--ti-badge-warning-bgcolor: var(--ti-base-color-warning-normal);
--ti-badge-danger-bgcolor: var(--ti-base-color-error-3);
--ti-badge-info-bgcolor: var(--ti-base-color-info-normal);
display: inline-block;
min-width: var(--ti-badge-size);
height: var(--ti-badge-size);
line-height: var(--ti-badge-size);
border-radius: var(--ti-badge-border-raidus);
padding: 0 4px;
font-size: var(--ti-badge-font-size);
font-weight: var(--ti-badge-font-weight);
color: var(--ti-badge-color);
background-color: var(--ti-badge-bgcolor);
vertical-align: baseline;
white-space: nowrap;
text-align: center;
}
.tiny-badge.tiny-badge--max {
padding: 0 6px;
border-radius: 10px;
}
.tiny-badge.tiny-badge--default {
width: 6px;
height: 6px;
min-width: auto;
background-color: var(--ti-badge-bgcolor);
display: inline-block;
vertical-align: top;
padding: 0;
border-radius: 50%;
}
.tiny-badge.tiny-badge--primary {
background-color: var(--ti-badge-primary-bgcolor);
}
.tiny-badge.tiny-badge--success {
background-color: var(--ti-badge-success-bgcolor);
}
.tiny-badge.tiny-badge--warning {
background-color: var(--ti-badge-warning-bgcolor);
}
.tiny-badge.tiny-badge--danger {
background-color: var(--ti-badge-danger-bgcolor);
}
.tiny-badge.tiny-badge--info {
background-color: var(--ti-badge-info-bgcolor);
}
.tiny-badge:empty {
display: none;
}
.btn .tiny-badge {
position: relative;
top: -1px;
}
.tiny-badge a,
.tiny-badge a:hover {
color: var(--ti-badge-color);
text-decoration: none;
}
a.badge:focus,
a.badge:hover {
color: var(--ti-badge-link-hover-color);
text-decoration: none;
cursor: pointer;
}
.nav-pills > .active > a > .badge,
a.list-group-item.active > .badge {
color: var(--ti-badge-active-color);
background-color: var(--ti-badge-active-bgcolor);
}
.nav-pills > li > a > .badge {
margin-left: 3px;
}
.tiny-breadcrumb {
--ti-breadcrumb-font-size: var(--ti-common-font-size-base);
--ti-breadcrumb-text-line-height: 1em;
--ti-breadcrumb-text-color: var(--ti-base-color-info-normal);
--ti-breadcrumb-separator-color: var(--ti-base-color-placeholder);
--ti-breadcrumb-text-hover-color: var(--ti-base-color-brand-6);
--ti-breadcrumb-text-font-weight: var(--ti-common-font-weight-7);
font-size: var(--ti-breadcrumb-font-size);
line-height: var(--ti-breadcrumb-text-line-height);
}
.tiny-breadcrumb:after,
.tiny-breadcrumb:before {
content: '';
display: table;
}
.tiny-breadcrumb:after {
clear: both;
}
.tiny-breadcrumb .tiny-breadcrumb__item {
cursor: pointer;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-breadcrumb .tiny-breadcrumb__item:last-child .tiny-breadcrumb__inner {
font-weight: var(--ti-breadcrumb-text-font-weight);
}
.tiny-breadcrumb .tiny-breadcrumb__item:last-child .tiny-breadcrumb__inner a {
cursor: text;
}
.tiny-breadcrumb .tiny-breadcrumb__item:last-child .tiny-breadcrumb__separator,
.tiny-breadcrumb .tiny-breadcrumb__item:last-child .tiny-breadcrumb__separator-cls {
display: none;
}
.tiny-breadcrumb .tiny-breadcrumb__inner {
vertical-align: middle;
}
.tiny-breadcrumb .tiny-breadcrumb__inner,
.tiny-breadcrumb .tiny-breadcrumb__inner a {
color: var(--ti-breadcrumb-text-color);
}
.tiny-breadcrumb .tiny-breadcrumb__inner:hover {
color: var(--ti-breadcrumb-text-hover-color);
}
.tiny-breadcrumb .tiny-breadcrumb__separator {
font-family: '\5B8B\4F53', sans-serif;
color: var(--ti-breadcrumb-separator-color);
padding: 0 4px;
vertical-align: middle;
}
.tiny-breadcrumb .tiny-breadcrumb__separator-cls {
font-size: var(--ti-breadcrumb-font-size);
fill: var(--ti-breadcrumb-separator-color);
margin: 0 4px;
vertical-align: middle;
}
.tiny-breadcrumb .tiny-breadcrumb__inner a:hover,
.tiny-breadcrumb .tiny-breadcrumb__item:last-child:hover {
color: var(--ti-breadcrumb-text-hover-color);
text-decoration: none;
}
.tiny-bulletin-board {
--ti-bulletin-board-title-font-size: var(--ti-common-font-size-3);
--ti-bulletin-board-title-font-weight: var(--ti-common-font-weight-7);
--ti-bulletin-board-title-color: var(--ti-base-color-info-normal);
--ti-bulletin-board-item-title-color: var(--ti-base-color-dark);
--ti-bulletin-board-item-date-color: var(--ti-base-color-placeholder);
--ti-bulletin-board-item-date-font-size: var(--ti-common-font-size-base);
--ti-bulletin-board-new-background: var(--ti-base-color-error-3);
--ti-bulletin-board-new-color: var(--ti-base-color-light);
--ti-bulletin-board-new-border-radius: var(--ti-common-border-radius-normal);
--ti-bulletin-board-more-color: var(--ti-base-color-brand-6);
--ti-bulletin-board-more-hover-color: var(--ti-base-color-brand-5);
--ti-bulletin-board-more-font-size: var(--ti-common-font-size-base);
--ti-bulletin-board-more-icon-font-size: var(--ti-common-font-size-1);
--ti-bulletin-board-tabs-item-color: var(--ti-base-color-info-normal);
--ti-bulletin-board-tabs-item-hover-color: var(--ti-base-color-brand-6);
--ti-bulletin-board-tabs-item-disabled-color: var(--ti-base-color-placeholder);
--ti-bulletin-board-tabs-header-border-color: var(--ti-base-color-border);
}
.tiny-bulletin-board__item {
margin-bottom: 12px;
}
.tiny-bulletin-board__item .tiny-bulletin-board__textTitle {
display: block;
color: var(--ti-bulletin-board-item-title-color);
margin-bottom: 2px;
font-size: var(--ti-common-font-size-base);
white-space: normal;
font-family: Helvetica, Arial, 'microsoft yahei';
line-height: initial;
}
.tiny-bulletin-board__item .tiny-bulletin-board__textTitle,
.tiny-bulletin-board__item .tiny-bulletin-board__textTitle:hover {
text-decoration: none;
}
.tiny-bulletin-board__item .tiny-bulletin-board__textDate {
color: var(--ti-bulletin-board-item-date-color);
font-size: var(--ti-bulletin-board-item-date-font-size);
}
.tiny-bulletin-board__title {
font-size: var(--ti-bulletin-board-title-font-size);
padding: 12px 0 8px 24px;
color: var(--ti-bulletin-board-title-color);
font-weight: var(--ti-bulletin-board-title-font-weight);
}
.tiny-bulletin-board__more {
text-align: right;
}
.tiny-bulletin-board__more .tiny-bulletin-board__more-link {
color: var(--ti-bulletin-board-more-color);
font-size: var(--ti-bulletin-board-more-font-size);
line-height: normal;
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;
}
.tiny-bulletin-board__more .tiny-bulletin-board__more-link .tiny-svg {
fill: var(--ti-bulletin-board-more-color);
font-size: var(--ti-bulletin-board-more-icon-font-size);
margin-left: 4px;
}
.tiny-bulletin-board__more .tiny-bulletin-board__more-link:hover {
text-decoration: none;
}
.tiny-bulletin-board__more .tiny-bulletin-board__more-link:hover .tiny-svg {
fill: var(--ti-bulletin-board-more-hover-color);
}
.tiny-bulletin-board__new {
background-color: var(--ti-bulletin-board-new-background);
color: var(--ti-bulletin-board-new-color);
border-radius: var(--ti-bulletin-board-new-border-radius);
min-width: 30px;
min-height: 16px;
line-height: 16px;
font-size: var(--ti-common-font-size-base);
display: inline-block;
font-family: '瀹嬩綋', cursive, Helvetica, Arial, 'microsoft yahei';
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs--left,
.tiny-bulletin-board .tiny-tabs .tiny-tabs--right,
.tiny-bulletin-board .tiny-tabs .tiny-tabs__content,
.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav-scroll,
.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav-wrap {
overflow: hidden;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap {
margin-bottom: -1px;
position: relative;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--ti-tabs-border-color);
z-index: 1;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__header .tiny-tabs__nav {
top: 1px;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
float: left;
z-index: 2;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item {
line-height: 36px;
height: 36px;
padding: 0 24px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
list-style: none;
font-size: var(--ti-common-font-size-1);
font-weight: 500;
color: var(--ti-bulletin-board-tabs-item-color);
position: relative;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:active,
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:focus {
outline: 0;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item:hover {
color: var(--ti-bulletin-board-tabs-item-hover-color);
cursor: pointer;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-active {
color: var(--ti-bulletin-board-tabs-item-hover-color);
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-disabled {
color: var(--ti-bulletin-board-tabs-item-disabled-color);
cursor: default;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-closable > div {
display: inline-block;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item.is-closable .icon-close {
display: initial;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin-left: 5px;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close:before {
-webkit-transform: scale(0.9);
transform: scale(0.9);
display: inline-block;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item .icon-close:hover {
background-color: #b4bccc;
color: #fff;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__item::before {
bottom: 0;
top: auto !important;
left: auto !important;
}
.tiny-bulletin-board .tiny-tabs .tiny-tabs__content {
padding: 12px 24px 24px;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card .tiny-tabs__header .tiny-tabs__nav {
border: none;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card .tiny-tabs__header .tiny-tabs__item {
border-left: none;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header {
border-bottom: 1px solid var(--ti-bulletin-board-tabs-header-border-color);
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item {
border-bottom: 1px solid transparent;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item:first-child {
border-left: none;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active {
border-bottom-color: #fff;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active.is-closable {
padding-left: 24px;
padding-right: 24px;
}
.tiny-bulletin-board .tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active:before {
position: absolute;
content: '';
width: 100%;
height: 3px;
background: var(--ti-bulletin-board-tabs-item-hover-color);
margin-left: -24px;
}
.tiny-button {
--ti-button-radius: var(--ti-common-border-radius-normal);
--ti-button-font-size: var(--ti-common-font-size-base);
--ti-button-plain-disabled-font-color: var(--ti-base-color-common-2);
--ti-button-size-normal-min-width: var(--ti-base-size-width-normal);
--ti-button-size-normal-max-width: var(--ti-base-size-width-medium);
--ti-button-size-normal-height: var(--ti-common-size-7x);
--ti-button-size-normal-padding: var(--ti-common-space-2x);
--ti-button-size-large-min-width: var(--ti-base-size-width-normal);
--ti-button-size-large-max-width: var(--ti-base-size-width-large);
--ti-button-size-large-height: var(--ti-base-size-height-large);
--ti-button-size-large-font-size: var(--ti-common-font-size-2);
--ti-button-size-large-padding: var(--ti-common-space-14);
--ti-button-size-medium-min-width: var(--ti-base-size-width-normal);
--ti-button-size-medium-max-width: var(--ti-base-size-width-large);
--ti-button-size-medium-height: var(--ti-base-size-height-medium);
--ti-button-size-medium-font-size: var(--ti-common-font-size-1);
--ti-button-size-medium-padding: var(--ti-common-space-3x);
--ti-button-size-small-min-width: var(--ti-base-size-width-normal);
--ti-button-size-small-max-width: var(--ti-base-size-width-medium);
--ti-button-size-small-height: var(--ti-base-size-height-small);
--ti-button-size-small-font-size: var(--ti-common-font-size-1);
--ti-button-size-small-padding: var(--ti-common-space-10);
--ti-button-size-mini-min-width: var(--ti-base-size-width-normal);
--ti-button-size-mini-max-width: var(--ti-base-size-width-medium);
--ti-button-size-mini-height: var(--ti-base-size-height-mini);
--ti-button-size-mini-font-size: var(--ti-common-font-size-base);
--ti-button-size-mini-padding: var(--ti-common-space-2x);
--ti-button-normal-color: var(--ti-base-color-common-7);
--ti-button-normal-border-color: var(--ti-base-color-border);
--ti-button-normal-background-color: var(--ti-base-color-light);
--ti-button-normal-hover-color: var(--ti-base-color-brand-6);
--ti-button-normal-hover-border-color: var(--ti-base-color-brand-6);
--ti-button-normal-hover-background-color: var(--ti-base-color-light);
--ti-button-normal-active-color: var(--ti-base-color-brand-6);
--ti-button-normal-active-border-color: var(--ti-base-color-brand-6);
--ti-button-normal-active-background-color: var(--ti-base-color-hover-background);
--ti-button-normal-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-normal-disabled-border-color: var(--ti-common-color-line-disabled);
--ti-button-normal-disabled-background-color: var(--ti-common-color-bg-disabled);
--ti-button-text-color: var(--ti-base-color-brand-6);
--ti-button-text-hover-color: var(--ti-base-color-brand-5);
--ti-button-text-active-color: var(--ti-base-color-primary-active);
--ti-button-text-disabled-color: var(--ti-base-color-placeholder);
--ti-button-primary-normal-color: var(--ti-base-color-primary-normal);
--ti-button-primary-hover-color: var(--ti-base-color-primary-hover);
--ti-button-primary-active-color: var(--ti-base-color-primary-active);
--ti-button-primary-disabled-bgcolor: var(--ti-base-color-primary-disabled);
--ti-button-primary-color: var(--ti-base-color-light);
--ti-button-primary-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-primary-disabled-border-color: var(--ti-base-color-primary-disabled-border);
--ti-button-primary-plain-bgcolor: rgba(24, 144, 255, 0.06);
--ti-button-primary-plain-disabled-bgcolor: rgba(191, 191, 191, 0.1);
--ti-button-success-normal-color: var(--ti-base-color-success-normal);
--ti-button-success-hover-color: var(--ti-base-color-success-hover);
--ti-button-success-active-color: var(--ti-base-color-success-active);
--ti-button-success-disabled-bgcolor: var(--ti-base-color-success-disabled);
--ti-button-success-color: var(--ti-base-color-light);
--ti-button-success-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-success-disabled-border-color: var(--ti-base-color-success-disabled-border);
--ti-button-success-plain-bgcolor: rgba(82, 196, 26, 0.06);
--ti-button-success-plain-disabled-bgcolor: rgba(166, 195, 185, 0.1);
--ti-button-warning-normal-color: var(--ti-base-color-warning-normal);
--ti-button-warning-hover-color: var(--ti-base-color-warning-hover);
--ti-button-warning-active-color: var(--ti-base-color-warning-active);
--ti-button-warning-disabled-bgcolor: var(--ti-base-color-warning-disabled);
--ti-button-warning-color: var(--ti-base-color-light);
--ti-button-warning-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-warning-disabled-border-color: var(--ti-base-color-warning-disabled-border);
--ti-button-warning-plain-bgcolor: rgba(250, 173, 20, 0.06);
--ti-button-warning-plain-disabled-bgcolor: rgba(211, 198, 162, 0.1);
--ti-button-danger-normal-color: var(--ti-base-color-danger-normal);
--ti-button-danger-hover-color: var(--ti-base-color-danger-hover);
--ti-button-danger-active-color: var(--ti-base-color-danger-active);
--ti-button-danger-disabled-bgcolor: var(--ti-base-color-danger-disabled);
--ti-button-danger-color: var(--ti-base-color-light);
--ti-button-danger-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-danger-disabled-border-color: var(--ti-base-color-danger-disabled-border);
--ti-button-danger-plain-bgcolor: rgba(245, 34, 45, 0.06);
--ti-button-danger-plain-disabled-bgcolor: rgba(216, 186, 181, 0.1);
--ti-button-info-normal-color: var(--ti-base-color-info-normal);
--ti-button-info-hover-color: var(--ti-base-color-info-hover);
--ti-button-info-active-color: var(--ti-base-color-info-active);
--ti-button-info-disabled-bgcolor: var(--ti-base-color-info-disabled);
--ti-button-info-color: var(--ti-base-color-light);
--ti-button-info-disabled-color: var(--ti-common-color-text-disabled);
--ti-button-info-disabled-border-color: var(--ti-base-color-info-disabled-border);
--ti-button-info-plain-bgcolor: rgba(51, 51, 51, 0.06);
--ti-button-info-plain-disabled-bgcolor: rgba(191, 191, 191, 0.1);
--ti-button-padding: 0 var(--ti-common-space-5x);
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: var(--ti-button-size-normal-height);
line-height: calc(var(--ti-button-size-normal-height) - 2px);
color: var(--ti-button-normal-color);
fill: var(--ti-button-normal-color);
font-size: var(--ti-button-font-size);
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-width: 1px;
border-style: solid;
border-color: var(--ti-button-normal-border-color);
-o-border-image: initial;
border-image: initial;
border-radius: var(--ti-button-radius);
background: var(--ti-button-normal-background-color);
padding: var(--ti-button-padding);
overflow: hidden;
-webkit-transition: border 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s;
transition: border 0.3s ease 0s, color 0.3s ease 0s, background 0.3s ease 0s;
outline: 0;
}
.tiny-button .tiny-svg {
vertical-align: text-top;
}
.tiny-button > img {
margin-right: 4px;
vertical-align: middle;
}
.tiny-button::-moz-focus-inner {
border: 0;
}
.tiny-button:focus,
.tiny-button:hover {
color: var(--ti-button-normal-hover-color);
fill: var(--ti-button-normal-hover-color);
border-color: var(--ti-button-normal-hover-border-color);
background-color: var(--ti-button-normal-hover-background-color);
}
.tiny-button.is-active,
.tiny-button.is-plain:active,
.tiny-button:active {
color: var(--ti-button-normal-active-color);
fill: var(--ti-button-normal-active-color);
border-color: var(--ti-button-normal-active-border-color);
background-color: var(--ti-button-normal-active-background-color);
}
.tiny-button.is-disabled,
.tiny-button.is-disabled:focus,
.tiny-button.is-disabled:hover {
cursor: not-allowed;
color: var(--ti-button-normal-disabled-color);
fill: var(--ti-button-normal-disabled-color);
border-color: var(--ti-button-normal-disabled-border-color);
background-color: var(--ti-button-normal-disabled-background-color);
}
.tiny-button.is-plain:focus,
.tiny-button.is-plain:hover {
color: var(--ti-button-normal-hover-color);
fill: var(--ti-button-normal-hover-color);
border-color: var(--ti-button-normal-hover-border-color);
background-color: var(--ti-button-normal-hover-background-color);
}
.tiny-button.is-disabled.is-plain,
.tiny-button.is-disabled.is-plain:focus,
.tiny-button.is-disabled.is-plain:hover {
color: var(--ti-button-normal-disabled-color);
fill: var(--ti-button-normal-disabled-color);
border-color: var(--ti-button-normal-disabled-border-color);
background-color: var(--ti-button-normal-disabled-background-color);
}
.tiny-button + .tiny-button {
margin-left: 8px;
}
.tiny-button.is-loading {
position: relative;
pointer-events: none;
overflow: initial;
}
.tiny-button.is-loading:before {
pointer-events: none;
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.35);
}
.tiny-button.is-loading .tiny-svg {
fill: var(--ti-button-info-color);
}
.tiny-button.is-loading.tiny-button--default .tiny-svg {
fill: var(--ti-button-normal-color);
}
.tiny-button.is-round {
border-radius: calc(var(--ti-button-size-normal-height, 30px) / 2);
}
.tiny-button.is-icon {
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;
}
.tiny-button:not(.is-circle) .tiny-svg.is-text {
margin-right: 8px;
}
.tiny-button:not(.is-circle).is-loading .tiny-svg {
margin-right: 4px;
margin-top: 2px;
}
.tiny-button.is-circle {
border-radius: 50%;
min-width: var(--ti-button-size-normal-height);
min-height: var(--ti-button-size-normal-height);
line-height: 1;
padding: var(--ti-button-size-normal-padding);
}
.tiny-button.is-circle.tiny-button--large {
min-width: var(--ti-button-size-large-height);
min-height: var(--ti-button-size-large-height);
height: auto;
line-height: 1;
padding: var(--ti-button-size-large-padding);
}
.tiny-button.is-circle.tiny-button--medium {
min-width: var(--ti-button-size-medium-height);
min-height: var(--ti-button-size-medium-height);
height: auto;
line-height: 1;
padding: var(--ti-button-size-medium-padding);
}
.tiny-button.is-circle.tiny-button--small {
min-width: var(--ti-button-size-small-height);
min-height: var(--ti-button-size-small-height);
height: auto;
line-height: 1;
padding: var(--ti-button-size-small-padding);
}
.tiny-button.is-circle.tiny-button--mini {
min-width: var(--ti-button-size-mini-height);
min-height: var(--ti-button-size-mini-height);
height: auto;
line-height: 1;
padding: var(--ti-button-size-mini-padding);
}
.tiny-button.tiny-button--primary {
color: var(--ti-button-primary-color);
fill: var(--ti-button-primary-color);
border-color: var(--ti-button-primary-normal-color);
background-color: var(--ti-button-primary-normal-color);
}
.tiny-button.tiny-button--primary:hover {
color: var(--ti-button-primary-color);
fill: var(--ti-button-primary-color);
border-color: var(--ti-button-primary-hover-color);
background-color: var(--ti-button-primary-hover-color);
}
.tiny-button.tiny-button--primary.is-active,
.tiny-button.tiny-button--primary:active,
.tiny-button.tiny-button--primary:focus {
color: var(--ti-button-primary-color);
fill: var(--ti-button-primary-color);
border-color: var(--ti-button-primary-active-color);
background-color: var(--ti-button-primary-active-color);
outline: 0;
}
.tiny-button.tiny-button--primary.is-disabled,
.tiny-button.tiny-button--primary.is-disabled:active,
.tiny-button.tiny-button--primary.is-disabled:focus,
.tiny-button.tiny-button--primary.is-disabled:hover {
color: var(--ti-button-primary-disabled-color);
fill: var(--ti-button-primary-disabled-color);
border-color: var(--ti-button-primary-disabled-border-color);
background-color: var(--ti-button-primary-disabled-bgcolor);
}
.tiny-button.tiny-button--primary.is-plain {
color: var(--ti-button-primary-normal-color);
fill: var(--ti-button-primary-normal-color);
border-color: var(--ti-button-primary-normal-color);
background-color: var(--ti-button-primary-plain-bgcolor);
}
.tiny-button.tiny-button--primary.is-plain:hover {
color: var(--ti-button-primary-color);
fill: var(--ti-button-primary-color);
border-color: var(--ti-button-primary-normal-color);
background-color: var(--ti-button-primary-normal-color);
}
.tiny-button.tiny-button--primary.is-plain.is-active,
.tiny-button.tiny-button--primary.is-plain:active,
.tiny-button.tiny-button--primary.is-plain:focus {
color: var(--ti-button-primary-color);
fill: var(--ti-button-primary-color);
border-color: var(--ti-button-primary-active-color);
background-color: var(--ti-button-primary-active-color);
outline: 0;
}
.tiny-button.tiny-button--primary.is-plain.is-disabled,
.tiny-button.tiny-button--primary.is-plain.is-disabled:active,
.tiny-button.tiny-button--primary.is-plain.is-disabled:focus,
.tiny-button.tiny-button--primary.is-plain.is-disabled:hover {
color: var(--ti-button-plain-disabled-font-color);
fill: var(--ti-button-primary-disabled-bgcolor);
border-color: var(--ti-button-primary-disabled-bgcolor);
background-color: var(--ti-button-primary-plain-disabled-bgcolor);
}
.tiny-button.tiny-button--success {
color: var(--ti-button-success-color);
fill: var(--ti-button-success-color);
border-color: var(--ti-button-success-normal-color);
background-color: var(--ti-button-success-normal-color);
}
.tiny-button.tiny-button--success:hover {
color: var(--ti-button-success-color);
fill: var(--ti-button-success-color);
border-color: var(--ti-button-success-hover-color);
background-color: var(--ti-button-success-hover-color);
}
.tiny-button.tiny-button--success.is-active,
.tiny-button.tiny-button--success:active,
.tiny-button.tiny-button--success:focus {
color: var(--ti-button-success-color);
fill: var(--ti-button-success-color);
border-color: var(--ti-button-success-active-color);
background-color: var(--ti-button-success-active-color);
outline: 0;
}
.tiny-button.tiny-button--success.is-disabled,
.tiny-button.tiny-button--success.is-disabled:active,
.tiny-button.tiny-button--success.is-disabled:focus,
.tiny-button.tiny-button--success.is-disabled:hover {
color: var(--ti-button-success-disabled-color);
fill: var(--ti-button-success-disabled-color);
border-color: var(--ti-button-success-disabled-border-color);
background-color: var(--ti-button-success-disabled-bgcolor);
}
.tiny-button.tiny-button--success.is-plain {
color: var(--ti-button-success-normal-color);
fill: var(--ti-button-success-normal-color);
border-color: var(--ti-button-success-normal-color);
background-color: var(--ti-button-success-plain-bgcolor);
}
.tiny-button.tiny-button--success.is-plain:hover {
color: var(--ti-button-success-color);
fill: var(--ti-button-success-color);
border-color: var(--ti-button-success-normal-color);
background-color: var(--ti-button-success-normal-color);
}
.tiny-button.tiny-button--success.is-plain.is-active,
.tiny-button.tiny-button--success.is-plain:active,
.tiny-button.tiny-button--success.is-plain:focus {
color: var(--ti-button-success-color);
fill: var(--ti-button-success-color);
border-color: var(--ti-button-success-active-color);
background-color: var(--ti-button-success-active-color);
outline: 0;
}
.tiny-button.tiny-button--success.is-plain.is-disabled,
.tiny-button.tiny-button--success.is-plain.is-disabled:active,
.tiny-button.tiny-button--success.is-plain.is-disabled:focus,
.tiny-button.tiny-button--success.is-plain.is-disabled:hover {
color: var(--ti-button-plain-disabled-font-color);
fill: var(--ti-button-success-disabled-bgcolor);
border-color: var(--ti-button-success-disabled-bgcolor);
background-color: var(--ti-button-success-plain-disabled-bgcolor);
}
.tiny-button.tiny-button--warning {
color: var(--ti-button-warning-color);
fill: var(--ti-button-warning-color);
border-color: var(--ti-button-warning-normal-color);
background-color: var(--ti-button-warning-normal-color);
}
.tiny-button.tiny-button--warning:hover {
color: var(--ti-button-warning-color);
fill: var(--ti-button-warning-color);
border-color: var(--ti-button-warning-hover-color);
background-color: var(--ti-button-warning-hover-color);
}
.tiny-button.tiny-button--warning.is-active,
.tiny-button.tiny-button--warning:active,
.tiny-button.tiny-button--warning:focus {
color: var(--ti-button-warning-color);
fill: var(--ti-button-warning-color);
border-color: var(--ti-button-warning-active-color);
background-color: var(--ti-button-warning-active-color);
outline: 0;
}
.tiny-button.tiny-button--warning.is-disabled,
.tiny-button.tiny-button--warning.is-disabled:active,
.tiny-button.tiny-button--warning.is-disabled:focus,
.tiny-button.tiny-button--warning.is-disabled:hover {
color: var(--ti-button-warning-disabled-color);
fill: var(--ti-button-warning-disabled-color);
border-color: var(--ti-button-warning-disabled-border-color);
background-color: var(--ti-button-warning-disabled-bgcolor);
}
.tiny-button.tiny-button--warning.is-plain {
color: var(--ti-button-warning-normal-color);
fill: var(--ti-button-warning-normal-color);
border-color: var(--ti-button-warning-normal-color);
background-color: var(--ti-button-warning-plain-bgcolor);
}
.tiny-button.tiny-button--warning.is-plain:hover {
color: var(--ti-button-warning-color);
fill: var(--ti-button-warning-color);
border-color: var(--ti-button-warning-normal-color);
background-color: var(--ti-button-warning-normal-color);
}
.tiny-button.tiny-button--warning.is-plain.is-active,
.tiny-button.tiny-button--warning.is-plain:active,
.tiny-button.tiny-button--warning.is-plain:focus {
color: var(--ti-button-warning-color);
fill: var(--ti-button-warning-color);
border-color: var(--ti-button-warning-active-color);
background-color: var(--ti-button-warning-active-color);
outline: 0;
}
.tiny-button.tiny-button--warning.is-plain.is-disabled,
.tiny-button.tiny-button--warning.is-plain.is-disabled:active,
.tiny-button.tiny-button--warning.is-plain.is-disabled:focus,
.tiny-button.tiny-button--warning.is-plain.is-disabled:hover {
color: var(--ti-button-plain-disabled-font-color);
fill: var(--ti-button-warning-disabled-bgcolor);
border-color: var(--ti-button-warning-disabled-bgcolor);
background-color: var(--ti-button-warning-plain-disabled-bgcolor);
}
.tiny-button.tiny-button--danger {
color: var(--ti-button-danger-color);
fill: var(--ti-button-danger-color);
border-color: var(--ti-button-danger-normal-color);
background-color: var(--ti-button-danger-normal-color);
}
.tiny-button.tiny-button--danger:hover {
color: var(--ti-button-danger-color);
fill: var(--ti-button-danger-color);
border-color: var(--ti-button-danger-hover-color);
background-color: var(--ti-button-danger-hover-color);
}
.tiny-button.tiny-button--danger.is-active,
.tiny-button.tiny-button--danger:active,
.tiny-button.tiny-button--danger:focus {
color: var(--ti-button-danger-color);
fill: var(--ti-button-danger-color);
border-color: var(--ti-button-danger-active-color);
background-color: var(--ti-button-danger-active-color);
outline: 0;
}
.tiny-button.tiny-button--danger.is-disabled,
.tiny-button.tiny-button--danger.is-disabled:active,
.tiny-button.tiny-button--danger.is-disabled:focus,
.tiny-button.tiny-button--danger.is-disabled:hover {
color: var(--ti-button-danger-disabled-color);
fill: var(--ti-button-danger-disabled-color);
border-color: var(--ti-button-danger-disabled-border-color);
background-color: var(--ti-button-danger-disabled-bgcolor);
}
.tiny-button.tiny-button--danger.is-plain {
color: var(--ti-button-danger-normal-color);
fill: var(--ti-button-danger-normal-color);
border-color: var(--ti-button-danger-normal-color);
background-color: var(--ti-button-danger-plain-bgcolor);
}
.tiny-button.tiny-button--danger.is-plain:hover {
color: var(--ti-button-danger-color);
fill: var(--ti-button-danger-color);
border-color: var(--ti-button-danger-normal-color);
background-color: var(--ti-button-danger-normal-color);
}
.tiny-button.tiny-button--danger.is-plain.is-active,
.tiny-button.tiny-button--danger.is-plain:active,
.tiny-button.tiny-button--danger.is-plain:focus {
color: var(--ti-button-danger-color);
fill: var(--ti-button-danger-color);
border-color: var(--ti-button-danger-active-color);
background-color: var(--ti-button-danger-active-color);
outline: 0;
}
.tiny-button.tiny-button--danger.is-plain.is-disabled,
.tiny-button.tiny-button--danger.is-plain.is-disabled:active,
.tiny-button.tiny-button--danger.is-plain.is-disabled:focus,
.tiny-button.tiny-button--danger.is-plain.is-disabled:hover {
color: var(--ti-button-plain-disabled-font-color);
fill: var(--ti-button-danger-disabled-bgcolor);
border-color: var(--ti-button-danger-disabled-bgcolor);
background-color: var(--ti-button-danger-plain-disabled-bgcolor);
}
.tiny-button.tiny-button--info {
color: var(--ti-button-info-color);
fill: var(--ti-button-info-color);
border-color: var(--ti-button-info-normal-color);
background-color: var(--ti-button-info-normal-color);
}
.tiny-button.tiny-button--info:hover {
color: var(--ti-button-info-color);
fill: var(--ti-button-info-color);
border-color: var(--ti-button-info-hover-color);
background-color: var(--ti-button-info-hover-color);
}
.tiny-button.tiny-button--info.is-active,
.tiny-button.tiny-button--info:active,
.tiny-button.tiny-button--info:focus {
color: var(--ti-button-info-color);
fill: var(--ti-button-info-color);
border-color: var(--ti-button-info-active-color);
background-color: var(--ti-button-info-active-color);
outline: 0;
}
.tiny-button.tiny-button--info.is-disabled,
.tiny-button.tiny-button--info.is-disabled:active,
.tiny-button.tiny-button--info.is-disabled:focus,
.tiny-button.tiny-button--info.is-disabled:hover {
color: var(--ti-button-info-disabled-color);
fill: var(--ti-button-info-disabled-color);
border-color: var(--ti-button-info-disabled-border-color);
background-color: var(--ti-button-info-disabled-bgcolor);
}
.tiny-button.tiny-button--info.is-plain {
color: var(--ti-button-info-normal-color);
fill: var(--ti-button-info-normal-color);
border-color: var(--ti-button-info-normal-color);
background-color: var(--ti-button-info-plain-bgcolor);
}
.tiny-button.tiny-button--info.is-plain:hover {
color: var(--ti-button-info-color);
fill: var(--ti-button-info-color);
border-color: var(--ti-button-info-normal-color);
background-color: var(--ti-button-info-normal-color);
}
.tiny-button.tiny-button--info.is-plain.is-active,
.tiny-button.tiny-button--info.is-plain:active,
.tiny-button.tiny-button--info.is-plain:focus {
color: var(--ti-button-info-color);
fill: var(--ti-button-info-color);
border-color: var(--ti-button-info-active-color);
background-color: var(--ti-button-info-active-color);
outline: 0;
}
.tiny-button.tiny-button--info.is-plain.is-disabled,
.tiny-button.tiny-button--info.is-plain.is-disabled:active,
.tiny-button.tiny-button--info.is-plain.is-disabled:focus,
.tiny-button.tiny-button--info.is-plain.is-disabled:hover {
color: var(--ti-button-plain-disabled-font-color);
fill: var(--ti-button-info-disabled-bgcolor);
border-color: var(--ti-button-info-disabled-bgcolor);
background-color: var(--ti-button-info-plain-disabled-bgcolor);
}
.tiny-button.tiny-button--text {
color: var(--ti-button-text-color);
font-size: var(--ti-common-font-size-1);
border-color: transparent;
background-color: transparent;
}
.tiny-button.tiny-button--text:hover {
color: var(--ti-button-text-hover-color);
border-color: transparent;
background-color: transparent;
}
.tiny-button.tiny-button--text.is-active,
.tiny-button.tiny-button--text:active,
.tiny-button.tiny-button--text:focus {
color: var(--ti-button-text-active-color);
border-color: transparent;
background-color: transparent;
}
.tiny-button.tiny-button--text.is-disabled,
.tiny-button.tiny-button--text.is-disabled:active,
.tiny-button.tiny-button--text.is-disabled:focus,
.tiny-button.tiny-button--text.is-disabled:hover {
color: var(--ti-button-text-disabled-color);
border-color: transparent;
background-color: transparent;
}
.tiny-button.tiny-button--large {
height: var(--ti-button-size-large-height);
line-height: var(--ti-button-size-large-height);
font-size: var(--ti-button-size-large-font-size);
}
.tiny-button.tiny-button--large.is-round {
border-radius: calc(var(--ti-button-size-large-height) / 2);
}
.tiny-button.tiny-button--large.is-circle {
border-radius: 50%;
}
.tiny-button.tiny-button--medium {
height: var(--ti-button-size-medium-height);
line-height: var(--ti-button-size-medium-height);
font-size: var(--ti-button-size-medium-font-size);
}
.tiny-button.tiny-button--medium.is-round {
border-radius: calc(var(--ti-button-size-medium-height) / 2);
}
.tiny-button.tiny-button--medium.is-circle {
border-radius: 50%;
}
.tiny-button.tiny-button--small {
height: var(--ti-button-size-small-height);
line-height: var(--ti-button-size-small-height);
font-size: var(--ti-button-size-small-font-size);
}
.tiny-button.tiny-button--small.is-round {
border-radius: calc(var(--ti-button-size-small-height) / 2);
}
.tiny-button.tiny-button--small.is-circle {
border-radius: 50%;
}
.tiny-button.tiny-button--mini {
height: var(--ti-button-size-mini-height);
line-height: var(--ti-button-size-mini-height);
font-size: var(--ti-button-size-mini-font-size);
}
.tiny-button.tiny-button--mini.is-round {
border-radius: calc(var(--ti-button-size-mini-height) / 2);
}
.tiny-button.tiny-button--mini.is-circle {
border-radius: 50%;
}
.tiny-icon-loading {
font-size: var(--ti-common-font-size-1);
line-height: 1;
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
@-webkit-keyframes rotating {
0% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
@keyframes rotating {
0% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.tiny-button-group {
--ti-button-group-border-color: var(--ti-base-color-border);
--ti-button-group-border-radius: var(--ti-common-border-radius-normal);
--ti-button-group-hover-border-color: var(--ti-base-color-brand-6);
--ti-button-group-info-border-color: rgba(255, 255, 255, 0.5);
--ti-button-group-disabled-color: var(--ti-common-color-bg-disabled);
--ti-button-group-item-background: var(--ti-base-color-light);
--ti-button-group-item-button-color: var(--ti-base-color-info-normal);
--ti-button-group-item-button-width: var(--ti-base-size-width-normal);
--ti-button-group-item-button-height: var(--ti-base-size-height-minor);
--ti-button-group-item-button-font-size: var(--ti-common-font-size-base);
--ti-button-group-item-button-disabled-background: var(--ti-common-color-bg-disabled);
--ti-button-group-item-button-disabled-border-color: var(--ti-base-color-border);
--ti-button-group-item-button-disabled-color: var(--ti-base-color-placeholder);
--ti-button-group-item-button-hover-background: var(--ti-base-color-brand-5);
--ti-button-group-item-button-hover-color: var(--ti-base-color-light);
--ti-button-group-item-button-plain-color: var(--ti-base-color-brand-6);
--ti-button-group-item-button-plain-background: rgba(24, 144, 255, 0.06);
--ti-button-group-item-button-plain-border-color: var(--ti-base-color-brand-6);
--ti-button-group-item-active-background: var(--ti-base-color-brand-6);
--ti-button-group-item-active-color: var(--ti-base-color-light);
display: inline-block;
vertical-align: middle;
}
.tiny-button-group:after,
.tiny-button-group:before {
content: '';
display: table;
}
.tiny-button-group:after {
clear: both;
}
.tiny-button-group .tiny-group-item {
display: inline-block;
vertical-align: middle;
}
.tiny-button-group .tiny-group-item li {
line-height: 28px;
background: var(--ti-button-group-item-background);
float: left;
position: relative;
}
.tiny-button-group .tiny-group-item li button {
border: 1px solid var(--ti-button-group-border-color);
display: block;
text-align: center;
color: var(--ti-button-group-item-button-color);
background: var(--ti-button-group-item-background);
min-width: var(--ti-button-group-item-button-width);
height: var(--ti-button-group-item-button-height);
padding: 0 8px;
text-decoration: none;
font-size: var(--ti-button-group-item-button-font-size);
outline: 0;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tiny-button-group .tiny-group-item li button.disabled,
.tiny-button-group .tiny-group-item li button[disabled] {
background: var(--ti-button-group-item-button-disabled-background);
border-color: var(--ti-button-group-item-button-disabled-border-color);
cursor: not-allowed;
color: var(--ti-button-group-item-button-disabled-color);
}
.tiny-button-group .tiny-group-item li button.plain,
.tiny-button-group .tiny-group-item li button[plain] {
background: 0 0;
}
.tiny-button-group .tiny-group-item li:hover {
z-index: 1;
}
.tiny-button-group .tiny-group-item li:hover button:not(.disabled) {
background: var(--ti-button-group-item-button-hover-background);
color: var(--ti-button-group-item-button-hover-color);
border-color: var(--ti-button-group-item-button-hover-background);
outline: 0;
}
.tiny-button-group .tiny-group-item li:hover button:not(.disabled).plain,
.tiny-button-group .tiny-group-item li:hover button:not(.disabled)[plain] {
color: var(--ti-button-group-item-button-plain-color);
background-color: var(--ti-button-group-item-button-plain-background);
border-color: var(--ti-button-group-item-button-plain-border-color);
}
.tiny-button-group .tiny-group-item li.active {
z-index: 1;
}
.tiny-button-group .tiny-group-item li.active:hover button:not(.disabled) {
background: var(--ti-button-group-item-button-hover-background);
border-color: var(--ti-button-group-item-button-hover-background);
}
.tiny-button-group .tiny-group-item li.active:hover button:not(.disabled).plain,
.tiny-button-group .tiny-group-item li.active:hover button:not(.disabled)[plain] {
background-color: var(--ti-button-group-item-button-plain-background);
}
.tiny-button-group .tiny-group-item li.active button:not(.disabled) {
background: var(--ti-button-group-item-active-background);
color: var(--ti-button-group-item-active-color);
border-color: var(--ti-button-group-item-active-background);
outline: 0;
}
.tiny-button-group .tiny-group-item li.active button:not(.disabled).plain,
.tiny-button-group .tiny-group-item li.active button:not(.disabled)[plain] {
color: var(--ti-button-group-item-active-background);
background: 0 0;
}
.tiny-button-group .tiny-group-item li:first-child button {
border-radius: var(--ti-common-border-radius-normal) 0 0 var(--ti-common-border-radius-normal);
}
.tiny-button-group .tiny-group-item li:last-child button {
border-radius: 0 var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0;
}
.tiny-button-group .tiny-group-item li:not(:last-child) {
margin-right: -1px;
}
.tiny-button-group > .tiny-button {
float: left;
position: relative;
}
.tiny-button-group > .tiny-button + .tiny-button {
margin-left: 0;
}
.tiny-button-group > .tiny-button:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: var(--ti-button-group-info-border-color);
}
.tiny-button-group > .tiny-button:first-child.tiny-button--default {
border-right-color: var(--ti-button-group-border-color);
}
.tiny-button-group > .tiny-button:first-child.tiny-button--default:active,
.tiny-button-group > .tiny-button:first-child.tiny-button--default:focus,
.tiny-button-group > .tiny-button:first-child.tiny-button--default:hover {
border-right-color: var(--ti-button-group-hover-border-color);
z-index: 1;
}
.tiny-button-group > .tiny-button:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: var(--ti-button-group-info-border-color);
}
.tiny-button-group > .tiny-button:last-child.tiny-button--default {
border-left-color: var(--ti-button-group-border-color);
}
.tiny-button-group > .tiny-button:last-child.tiny-button--default:active,
.tiny-button-group > .tiny-button:last-child.tiny-button--default:focus,
.tiny-button-group > .tiny-button:last-child.tiny-button--default:hover {
border-left-color: var(--ti-button-group-hover-border-color);
z-index: 1;
}
.tiny-button-group > .tiny-button:first-child:last-child {
border-radius: var(--ti-button-group-border-radius);
}
.tiny-button-group > .tiny-button:first-child:last-child.is-round {
border-radius: calc(var(--ti-button-size-normal-height, 30px) / 2);
}
.tiny-button-group > .tiny-button:first-child:last-child.is-circle {
border-radius: 50%;
}
.tiny-button-group > .tiny-button:not(:first-child):not(:last-child) {
border-radius: 0;
border-left-color: var(--ti-button-group-info-border-color);
border-right-color: var(--ti-button-group-info-border-color);
}
.tiny-button-group > .tiny-button:not(:first-child):not(:last-child).tiny-button--default {
border-left-color: var(--ti-button-group-border-color);
border-right-color: var(--ti-button-group-border-color);
}
.tiny-button-group > .tiny-button:not(:first-child):not(:last-child).tiny-button--default:active,
.tiny-button-group > .tiny-button:not(:first-child):not(:last-child).tiny-button--default:focus,
.tiny-button-group > .tiny-button:not(:first-child):not(:last-child).tiny-button--default:hover {
border-left-color: var(--ti-button-group-hover-border-color);
border-right-color: var(--ti-button-group-hover-border-color);
z-index: 1;
}
.tiny-button-group > .tiny-button:not(:last-child) {
margin-right: -1px;
}
.tiny-button-group > .tiny-button > .tiny-dropdown > .tiny-button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-color: var(--ti-button-group-info-border-color);
}
.tiny-transition-zoom-in-top-enter-active,
.tiny-transition-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.tiny-transition-zoom-in-top-enter,
.tiny-transition-zoom-in-top-enter-from,
.tiny-transition-zoom-in-top-leave-to {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.tiny-calendar {
--ti-calendar-bgcolor: var(--ti-base-color-light);
--ti-calendar-list-item-selected-font-color: var(--ti-base-color-light);
--ti-calendar-hover-color: var(--ti-base-color-brand-5);
--ti-calendar-border-color: var(--ti-base-color-border);
--ti-calendar-color-primary: var(--ti-base-color-brand-6);
--ti-calendar-background-color-primary: rgba(24, 144, 255, 0.1);
--ti-calendar-color-success: var(--ti-base-color-success-normal);
--ti-calendar-color-warning: var(--ti-base-color-warning-normal);
--ti-calendar-color-danger: var(--ti-base-color-bg-8);
--ti-calendar-color-info: var(--ti-base-color-info-normal);
--ti-calendar-tool-width: var(--ti-base-size-width-normal);
--ti-calendar-content-heard-font-size: var(--ti-common-font-size-1);
--ti-calendar-selected-border-radius: var(--ti-base-radius-large);
--ti-calendar-input-height: var(--ti-base-size-height-minor);
--ti-calendar-input-border-radius: var(--ti-common-border-radius-normal);
--ti-calendar-input-font-size: var(--ti-common-font-size-base);
--ti-calendar-list-item-height: var(--ti-base-size-height-minor);
--ti-calendar-list-item-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-calendar-list-item-selected-bgcolor: var(--ti-base-color-selected-background);
--ti-calendar-disabled-color: var(--ti-common-color-text-disabled);
--ti-calendar-disabled-info-color: var(--ti-base-color-bg-5);
--ti-calendar-disabled-success-color: var(--ti-base-color-bg-5);
--ti-calendar-disabled-warning-color: var(--ti-base-color-bg-5);
--ti-calendar-disabled-error-color: var(--ti-base-color-bg-5);
background: var(--ti-calendar-bgcolor);
overflow: hidden;
margin: 10px;
}
.tiny-calendar.is-popover.tiny-popover.tiny-popper {
padding: 0;
margin: 2px 0 0;
}
.tiny-calendar .tiny-calendar__header {
overflow: hidden;
margin-bottom: 12px;
}
.tiny-calendar .tiny-calendar__selected {
border: 1px solid var(--ti-calendar-color-primary);
background: var(--ti-calendar-background-color-primary);
padding: 8px;
color: var(--ti-calendar-color-info);
line-height: 140%;
border-radius: var(--ti-calendar-selected-border-radius);
margin-bottom: 8px;
}
.tiny-calendar .tiny-calendar__tool {
list-style: none;
overflow: hidden;
float: right;
margin-bottom: 8px;
}
.tiny-calendar .tiny-calendar__tool > li {
float: left;
margin-right: 8px;
}
.tiny-calendar .tiny-calendar__tool > li > span {
display: inline-block;
}
.tiny-calendar .tiny-calendar__tool > li:last-child {
margin-left: 16px;
margin-right: 0;
}
.tiny-calendar .tiny-calendar__input {
width: var(--ti-calendar-tool-width);
position: relative;
outline: 0;
}
.tiny-calendar .tiny-calendar__input > input {
width: 100%;
height: var(--ti-calendar-input-height);
line-height: var(--ti-calendar-input-height);
border: 1px solid var(--ti-calendar-border-color);
color: var(--ti-calendar-color-info);
border-radius: var(--ti-calendar-input-border-radius);
background: var(--ti-calendar-bgcolor);
font-size: var(--ti-calendar-input-font-size);
padding: 0 30px 0 8px;
display: block;
white-space: nowrap;
-webkit-transition: border 0.3s;
transition: border 0.3s;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-calendar .tiny-calendar__input > input.active,
.tiny-calendar .tiny-calendar__input > input:active,
.tiny-calendar .tiny-calendar__input > input:focus,
.tiny-calendar .tiny-calendar__input > input:hover,
.tiny-calendar .tiny-calendar__input > input[active] {
border: 1px solid var(--ti-calendar-color-primary);
}
.tiny-calendar .tiny-calendar__input > input[readonly] {
cursor: not-allowed;
}
.tiny-calendar .tiny-calendar__input-btn {
bottom: 0;
right: 4px;
position: absolute;
top: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
overflow: hidden;
font-size: var(--ti-common-font-size-base);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.tiny-calendar .tiny-calendar__input-btn svg {
fill: var(--ti-calendar-color-primary);
}
.tiny-calendar .tiny-calendar__input-btn svg:hover {
fill: var(--ti-calendar-hover-color);
}
.tiny-calendar .tiny-calendar__tabs {
list-style: none;
overflow: hidden;
}
.tiny-calendar .tiny-calendar__tabs > li {
position: relative;
float: left;
width: calc(var(--ti-calendar-tool-width) / 2);
height: var(--ti-calendar-input-height);
line-height: var(--ti-calendar-input-height);
border: 1px solid var(--ti-calendar-border-color);
text-align: center;
font-size: var(--ti-calendar-input-font-size);
font-weight: 500;
color: var(--ti-calendar-color-info);
cursor: pointer;
}
.tiny-calendar .tiny-calendar__tabs > li:first-child {
border-radius: 3px 0 0 3px;
}
.tiny-calendar .tiny-calendar__tabs > li:last-child {
margin-left: -1px;
border-radius: 0 3px 3px 0;
}
.tiny-calendar .tiny-calendar__tabs > li:hover {
color: var(--ti-calendar-color-primary);
}
.tiny-calendar .tiny-calendar__tabs > .active {
color: var(--ti-calendar-color-primary);
border: 1px solid var(--ti-calendar-color-primary);
z-index: 1;
}
.tiny-calendar .tiny-calendar__main {
width: 100%;
overflow: hidden;
}
.tiny-calendar .tiny-calendar__main table {
width: 100%;
}
.tiny-calendar .tiny-calendar__main table > tr > th {
line-height: 18px;
padding: 0 10px 5px 10px;
font-size: var(--ti-calendar-content-heard-font-size);
text-align: right;
width: 14.28571429%;
}
.tiny-calendar .tiny-calendar__main table > tr > td {
text-align: right;
padding: 0 5px 0 0;
}
.tiny-calendar .tiny-calendar__main.year table > tr > td {
width: 33.33333333%;
}
.tiny-calendar .tiny-calendar__day {
border-top: 3px solid var(--ti-calendar-border-color);
margin: 0 3px 5px 3px;
height: 100px;
padding: 5px;
}
.tiny-calendar .tiny-calendar__day.selected {
background: var(--ti-calendar-background-color-primary);
}
.tiny-calendar .tiny-calendar__day.selected .label {
color: var(--ti-calendar-color-primary);
}
.tiny-calendar .tiny-calendar__day:hover {
background: var(--ti-calendar-background-color-primary);
}
.tiny-calendar .tiny-calendar__day.disable {
color: var(--ti-calendar-disabled-color);
}
.tiny-calendar .tiny-calendar__day.disable .info:before {
background: var(--ti-calendar-disabled-info-color);
}
.tiny-calendar .tiny-calendar__day.disable .success:before {
background: var(--ti-calendar-disabled-success-color);
}
.tiny-calendar .tiny-calendar__day.disable .warning:before {
background: var(--ti-calendar-disabled-warning-color);
}
.tiny-calendar .tiny-calendar__day.disable .error:before {
background: var(--ti-calendar-disabled-error-color);
}
.tiny-calendar .tiny-calendar__day.this-month,
.tiny-calendar .tiny-calendar__day.today {
border-color: var(--ti-calendar-color-primary);
}
.tiny-calendar .tiny-calendar__events {
text-align: left;
height: calc(100% - 18px);
overflow-y: auto;
}
.tiny-calendar .tiny-calendar__events .event {
margin: 5px 10px;
cursor: pointer;
}
.tiny-calendar .tiny-calendar__events .event:before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
display: inline-block;
margin-right: 3px;
}
.tiny-calendar .tiny-calendar__events .info:before {
background: var(--ti-calendar-color-info);
}
.tiny-calendar .tiny-calendar__events .success:before {
background: var(--ti-calendar-color-success);
}
.tiny-calendar .tiny-calendar__events .warning:before {
background: var(--ti-calendar-color-warning);
}
.tiny-calendar .tiny-calendar__events .error:before {
background: var(--ti-calendar-color-danger);
}
.tiny-calendar__tip {
display: block;
min-width: 160px;
}
.tiny-calendar__tip-header {
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
padding: 5px 0;
font-size: var(--ti-calendar-content-heard-font-size);
}
.tiny-calendar__tip-year {
float: left;
}
.tiny-calendar__tip-hours {
float: right;
}
.tiny-calendar__tip-title {
margin: 5px 0;
font-weight: 700;
}
.tiny-calendar .tiny-calendar__selector {
width: var(--ti-calendar-tool-width);
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.tiny-calendar .tiny-calendar__list-item {
min-height: var(--ti-calendar-list-item-height);
line-height: var(--ti-calendar-list-item-height);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 8px;
color: var(--ti-calendar-color-info);
}
.tiny-calendar .tiny-calendar__list-item:hover {
cursor: pointer;
background: var(--ti-calendar-list-item-hover-bgcolor);
}
.tiny-calendar .tiny-calendar__list-item.is-selected {
background: var(--ti-calendar-list-item-selected-bgcolor);
color: var(--ti-calendar-list-item-selected-font-color);
}
.tiny-cards {
--ti-card-background: var(--ti-base-color-light);
--ti-card-drop-border-color: var(--ti-base-color-brand-6);
border-radius: 0;
background-color: var(--ti-card-background);
overflow: hidden;
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
}
.tiny-cards .tiny-cards_body {
padding: 12px 24px 24px;
}
.tiny-cards.card-layout {
border: none;
border-radius: 0;
overflow: hidden;
-webkit-box-shadow: none;
box-shadow: none;
position: relative;
-webkit-transition: height 0.2s ease;
transition: height 0.2s ease;
}
.tiny-cards.card-layout .tiny-cards_body {
padding: 0;
}
.tiny-cards.card-layout.drop-active {
border: 1px solid var(--ti-card-drop-border-color);
background-color: var(--ti-card-background);
}
.tiny-card-template {
--ti-card-background: var(--ti-base-color-light);
--ti-card-tool-icon-size: 16px;
--ti-card-tool-icon-color: var(--ti-base-color-brand-6);
--ti-card-tool-icon-hover-color: var(--ti-base-color-brand-5);
--ti-card-tool-icon-active-color: var(--ti-base-color-primary-active);
--ti-card-tool-selector-height: var(--ti-common-size-10x);
--ti-card-tool-selector-color: var(--ti-base-color-info-normal);
--ti-card-tool-selector-hover-color: var(--ti-base-color-brand-6);
--ti-card-tool-selector-hover-background: var(--ti-base-color-selected-background);
--ti-card-tool-selector-active-color: var(--ti-base-color-primary-active);
--ti-card-tool-selector-active-background: var(--ti-base-color-selected-background);
--ti-card-header-height: 46px;
--ti-card-header-border-color: var(--ti-base-color-border);
--ti-card-header-title-font-weight: var(--ti-common-font-weight-7);
--ti-card-header-title-font-size: var(--ti-common-font-size-1);
--ti-card-header-title-color: var(--ti-base-color-info-normal);
border-radius: 0;
background-color: var(--ti-card-background);
overflow: hidden;
position: relative;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
}
.tiny-card-template .tiny-card-template__header {
padding: 0 24px;
height: var(--ti-card-header-height);
line-height: var(--ti-card-header-height);
}
.tiny-card-template .tiny-card-template__header.is-line {
border-bottom: 1px solid var(--ti-card-header-border-color);
}
.tiny-card-template .tiny-card-template__title {
font-weight: var(--ti-card-header-title-font-weight);
font-size: var(--ti-card-header-title-font-size);
color: #333;
color: var(--ti-card-header-title-color);
float: left;
}
.tiny-card-template .tiny-card-template__tools:after,
.tiny-card-template .tiny-card-template__tools:before {
content: '';
display: table;
}
.tiny-card-template .tiny-card-template__tools:after {
clear: both;
}
.tiny-card-template .tiny-card-template__tools .tiny-icon {
font-size: var(--ti-card-tool-icon-size);
cursor: pointer;
}
.tiny-card-template .tiny-card-template__list {
overflow: hidden;
float: right;
}
.tiny-card-template .tiny-card-template__list > li {
height: var(--ti-card-header-height);
line-height: var(--ti-card-header-height);
float: left;
font-size: var(--ti-common-font-size-2);
margin: 0 12px 0 0;
}
.tiny-card-template .tiny-card-template__list > li svg {
fill: var(--ti-card-tool-icon-color);
cursor: pointer;
}
.tiny-card-template .tiny-card-template__list > li .tiny-icon {
color: var(--ti-card-tool-icon-color);
}
.tiny-card-template .tiny-card-template__list > li .tiny-icon:hover {
color: var(--ti-card-tool-icon-hover-color);
}
.tiny-card-template .tiny-card-template__list > li .tiny-icon:active {
color: var(--ti-card-tool-icon-active-color);
}
.tiny-card-template .tiny-card-template__list > li:last-child {
margin: 0;
}
.tiny-card-template .tiny-card-template__more {
position: absolute;
top: calc(var(--ti-card-header-height, 45px) - 1 * 1px);
right: 5px;
border: 1px solid var(--ti-card-header-border-color);
border-radius: 2px;
-webkit-box-shadow: var(--ti-base-box-shadow);
box-shadow: var(--ti-base-box-shadow);
background: var(--ti-card-background);
color: #333;
color: var(--ti-card-tool-selector-color);
margin-top: 2px;
}
.tiny-card-template .tiny-card-template__more:before {
content: '';
position: absolute;
display: block;
top: -5px;
right: 21px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px;
border-color: #fff #fff transparent transparent;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);
}
.tiny-card-template .tiny-card-template__more > ul > li {
height: var(--ti-card-tool-selector-height);
line-height: var(--ti-card-tool-selector-height);
padding: 0 18px;
color: var(--ti-card-tool-selector-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-card-template .tiny-card-template__more > ul > li .tiny-icon {
color: var(--ti-card-tool-icon-color);
margin-right: 10px;
}
.tiny-card-template .tiny-card-template__more > ul > li svg {
font-size: var(--ti-common-font-size-2);
}
.tiny-card-template .tiny-card-template__more > ul > li:hover {
cursor: pointer;
color: var(--ti-card-tool-selector-hover-color);
background: var(--ti-card-tool-selector-hover-background);
}
.tiny-card-template .tiny-card-template__more > ul > li:hover .tiny-icon {
color: var(--ti-card-tool-icon-hover-color);
}
.tiny-card-template .tiny-card-template__more > ul > li:active {
color: var(--ti-card-tool-selector-active-color);
background: var(--ti-card-tool-selector-active-background);
}
.tiny-card-template .tiny-card-template__more > ul > li:active .tiny-icon {
color: var(--ti-card-tool-icon-active-color);
}
.tiny-card-template .tiny-card-template__body {
padding: 12px 24px 24px;
}
.tiny-transition-carousel-arrow-left-enter,
.tiny-transition-carousel-arrow-left-enter-from,
.tiny-transition-carousel-arrow-left-leave-to {
opacity: 0;
left: 0;
}
.tiny-transition-carousel-arrow-left-enter-active {
-webkit-animation: animation-left 0.3s;
animation: animation-left 0.3s;
}
.tiny-transition-carousel-arrow-left-leave-active {
animation: animation-left 0.3s reverse;
}
.tiny-transition-carousel-arrow-right-enter,
.tiny-transition-carousel-arrow-right-enter-from,
.tiny-transition-carousel-arrow-right-leave-to {
opacity: 0;
right: 0;
}
.tiny-transition-carousel-arrow-right-enter-active {
-webkit-animation: animation-right 0.3s;
animation: animation-right 0.3s;
}
.tiny-transition-carousel-arrow-right-leave-active {
animation: animation-right 0.3s reverse;
}
@-webkit-keyframes animation-right {
0% {
opacity: 0;
right: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 16px;
}
}
@keyframes animation-right {
0% {
opacity: 0;
right: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 16px;
}
}
@-webkit-keyframes animation-left {
0% {
opacity: 0;
left: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 16px;
}
}
@keyframes animation-left {
0% {
opacity: 0;
left: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 16px;
}
}
.tiny-carousel {
--ti-carousel-arrow-height: var(--ti-base-size-height-minor);
--ti-carousel-arrow-width: var(--ti-base-size-width-minor);
--ti-carousel-arrow-font-size: var(--ti-common-font-size-base);
--ti-carousel-arrow-hover-color: rgba(0, 0, 0, 0.6);
--ti-carousel-arrow-background: rgba(0, 0, 0, 0.3);
--ti-carousel-arrow-box-shadow: none;
--ti-carousel-arrow-active-color: var(--ti-base-color-light);
--ti-carousel-indicators-background: rgba(3, 2, 2, 0.3);
--ti-carousel-indicators-radius: 13px;
--ti-carousel-indicators-height: var(--ti-common-size-4x);
--ti-carousel-indicators-radius-background: rgba(0, 0, 0, 0.3);
--ti-carousel-indicator-active-color: var(--ti-base-color-light);
--ti-carousel-indicator-button-width: var(--ti-common-size-2x);
--ti-carousel-indicator-button-height: var(--ti-common-size-2x);
--ti-carousel-indicator-button-color: #bfbfbf;
--ti-carousel-indicator-margin-right: 0;
--ti-carousel-indicator-active-width: var(--ti-common-size-3x);
--ti-carousel-indicator-padding: 0px 2px;
--ti-carousel-indicator-active-transition-property: none;
--ti-carousel-indicator-active-background-color: var(--ti-base-color-transparent);
--ti-carousel-indicator-active-button-width: var(--ti-carousel-indicator-button-width);
--ti-carousel-indicator-active-border-radius: var(--ti-carousel-indicators-radius);
--ti-carousel-indicator-active-transition: none;
--ti-carousel-outside-button-background: var(--ti-base-color-dark);
--ti-carousel-outside-button-active-background: var(--ti-base-color-secondary);
--ti-carousel-labels-button-font-size: var(--ti-common-font-size-base);
--ti-carousel-hover-opacity: 0.6;
overflow: hidden;
position: relative;
}
.tiny-carousel.tiny-carousel--card .tiny-carousel__indicators {
display: none;
}
.tiny-carousel__container {
position: relative;
height: 300px;
}
.tiny-carousel__container .tiny-carousel__arrow {
border: none;
outline: 0;
padding: 0;
margin: 0;
height: var(--ti-carousel-arrow-height);
width: var(--ti-carousel-arrow-width);
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: 50%;
-webkit-box-shadow: var(--ti-carousel-arrow-box-shadow);
box-shadow: var(--ti-carousel-arrow-box-shadow);
background-color: var(--ti-carousel-arrow-background);
color: var(--ti-carousel-indicator-active-color);
position: absolute;
top: 50%;
z-index: 3;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: var(--ti-carousel-arrow-font-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-carousel__container .tiny-carousel__arrow .tiny-svg {
fill: var(--ti-carousel-indicator-active-color);
}
.tiny-carousel__container .tiny-carousel__arrow.tiny-carousel__arrow-left {
left: 16px;
}
.tiny-carousel__container .tiny-carousel__arrow.tiny-carousel__arrow-right {
right: 16px;
}
.tiny-carousel__container .tiny-carousel__arrow:hover {
background-color: var(--ti-carousel-arrow-hover-color);
}
.tiny-carousel__container .tiny-carousel__arrow i {
cursor: pointer;
}
.tiny-carousel .tiny-carousel__indicators {
position: absolute;
list-style: none;
bottom: 8px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin: 0;
padding: 0 4px;
z-index: 2;
background: var(--ti-carousel-indicators-background);
border-radius: var(--ti-carousel-indicators-radius);
height: var(--ti-carousel-indicators-height);
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__indicator {
display: inline-block;
background-color: transparent;
padding: var(--ti-carousel-indicator-padding);
margin-right: var(--ti-carousel-indicator-margin-right);
cursor: pointer;
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__indicator:hover button {
opacity: var(--ti-carousel-hover-opacity);
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__indicator.is-active {
width: var(--ti-carousel-indicator-active-width);
background-color: var(--ti-carousel-indicator-active-background-color);
border-radius: var(--ti-carousel-indicator-active-border-radius);
-webkit-transition: var(--ti-carousel-indicator-active-transition);
transition: var(--ti-carousel-indicator-active-transition);
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__indicator.is-active button {
-webkit-transition-property: var(--ti-carousel-indicator-active-transition-property);
transition-property: var(--ti-carousel-indicator-active-transition-property);
-webkit-transition-timing-function: cubic-bezier(0.16, 0.75, 0.5, 1);
transition-timing-function: cubic-bezier(0.16, 0.75, 0.5, 1);
border-radius: var(--ti-carousel-indicator-active-border-radius);
background-color: var(--ti-carousel-indicator-active-color);
width: var(--ti-carousel-indicator-active-button-width);
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__indicator .tiny-carousel__button {
display: block;
width: var(--ti-carousel-indicator-button-width);
height: var(--ti-carousel-indicator-button-height);
background-color: var(--ti-carousel-indicator-button-color);
border: none;
outline: 0;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: 50%;
}
.tiny-carousel .tiny-carousel__indicators .tiny-carousel__button._radius {
height: 8px;
width: 8px;
border-radius: 50%;
background-color: var(--ti-carousel-indicators-radius-background);
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-outside {
bottom: 26px;
text-align: center;
position: static;
-webkit-transform: none;
transform: none;
margin-top: 16px;
background: 0 0;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-outside button {
background-color: var(--ti-carousel-outside-button-background);
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-outside .tiny-carousel__indicator:hover button {
opacity: 0.6;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-outside .tiny-carousel__indicator.is-active button {
background-color: var(--ti-carousel-outside-button-active-background);
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-labels {
left: 0;
right: 0;
-webkit-transform: none;
transform: none;
text-align: center;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-labels .tiny-carousel__button {
padding: 2px 18px;
font-size: var(--ti-carousel-labels-button-font-size);
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-labels .tiny-carousel__indicator {
padding: 6px 4px;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-title {
left: auto;
right: 12px;
bottom: 3px;
-webkit-transform: none;
transform: none;
background: 0 0;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-vertical {
left: 12px;
right: 0;
bottom: 50%;
width: 16px;
height: 56px;
-webkit-transform: translateY(50%);
transform: translateY(50%);
padding: 2px 4px;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-vertical .tiny-carousel__indicator {
display: block;
margin: 4px 0;
padding: 0;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-vertical .tiny-carousel__indicator:first-child {
padding-left: 0;
}
.tiny-carousel .tiny-carousel__indicators.tiny-carousel__indicators-vertical .tiny-carousel__indicator:last-child {
padding-right: 0;
}
.tiny-carousel .tiny-carousel__indicators:not(.tiny-carousel__indicators-vertical) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-carousel {
--ti-carousel-item-title-height: var(--ti-base-size-height-small);
--ti-carousel-item-title-color: var(--ti-base-color-light);
--ti-carousel-item-title-background: rgba(0, 0, 0, 0.3);
--ti-carousel-item-title-span-font-size: var(--ti-common-font-size-base);
--ti-carousel-mask-background: var(--ti-base-color-light);
}
.tiny-carousel__item,
.tiny-carousel__mask {
position: absolute;
height: 100%;
top: 0;
left: 0;
}
.tiny-carousel__item {
width: 100%;
display: inline-block;
overflow: hidden;
z-index: 0;
}
.tiny-carousel__item .item-title {
position: absolute;
bottom: 0;
height: var(--ti-carousel-item-title-height);
width: 100%;
line-height: var(--ti-carousel-item-title-height);
color: var(--ti-carousel-item-title-color, #fff);
text-align: left;
background: var(--ti-carousel-item-title-background);
}
.tiny-carousel__item .item-title span {
padding: 0 12px;
font-size: var(--ti-carousel-item-title-span-font-size);
width: 80%;
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.tiny-carousel__item.is-active {
z-index: 2;
}
.tiny-carousel__item.is-animating {
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.tiny-carousel__item--card {
width: 50%;
-webkit-transition: -webkit-transform 0.4s ease-in-out;
transition: -webkit-transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out;
transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.tiny-carousel__item--card.is-in-stage {
cursor: pointer;
z-index: 1;
}
.tiny-carousel__item--card.is-in-stage.is-hover .tiny-carousel__mask,
.tiny-carousel__item--card.is-in-stage:hover .tiny-carousel__mask {
opacity: 0.12;
}
.tiny-carousel__item--card.is-active {
z-index: 2;
}
.tiny-carousel__mask {
width: 100%;
background-color: var(--ti-carousel-mask-background);
opacity: 0.24;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.tiny-cascader {
--ti-cascader-font-size: var(--ti-common-font-size-1);
--ti-cascader-hover-border-color: var(--ti-base-color-common-5);
--ti-cascader-focus-border-color: var(--ti-base-color-brand-6);
--ti-cascader-border-radius: var(--ti-common-border-radius-1);
--ti-cascader-icon-color: #909399;
--ti-cascader-medium-font-size: var(--ti-common-font-size-1);
--ti-cascader-medium-line-height: 36px;
--ti-cascader-small-line-height: 32px;
--ti-cascader-mini-line-height: 28px;
--ti-cascader-small-font-size: 13px;
--ti-cascader-mini-font-size: var(--ti-common-font-size-base, 12px);
--ti-cascader-disabled-color: #c0c4cc;
--ti-cascader-dropdown-background: var(--ti-base-color-light);
--ti-cascader-dropdown-border-color: #e4e7ed;
--ti-cascader-tag-background: #f0f2f5;
--ti-cascader-tag-icon-bgcolor: #c0c4cc;
--ti-cascader-tag-icon-color: var(--ti-base-color-light);
--ti-cascader-tag-icon-hover-bgcolor: #909399;
--ti-cascader-list-color: #606266;
--ti-cascader-item-height: var(--ti-base-size-height-minor);
--ti-cascader-item-hover-background: #f5f7fa;
--ti-cascader-item-checked-color: var(--ti-base-color-brand-5);
--ti-cascader-empty-text-color: #c0c4cc;
--ti-cascader-search-input-color: var(--ti-base-color-info-normal);
--ti-cascader-search-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-cascader-dropdown-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-cascader-width: '100%';
display: inline-block;
position: relative;
font-size: var(--ti-cascader-font-size);
}
.tiny-cascader:not(.is-disabled):hover .tiny-input__inner {
cursor: pointer;
border-color: var(--ti-cascader-hover-border-color);
}
.tiny-cascader .tiny-input {
cursor: pointer;
}
.tiny-cascader .tiny-input .tiny-input__inner {
text-overflow: ellipsis;
}
.tiny-cascader .tiny-input .tiny-input__inner:focus {
border-color: var(--ti-cascader-focus-border-color);
}
.tiny-cascader .tiny-input.is-focus .tiny-input__inner {
border-color: var(--ti-cascader-focus-border-color);
}
.tiny-cascader .tiny-input .tiny-icon-arrow-down {
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
font-size: var(--ti-cascader-font-size);
}
.tiny-cascader .tiny-input .tiny-icon-arrow-down.is-reverse {
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
.tiny-cascader .tiny-input .tiny-icon-circle-close:hover {
color: var(--ti-cascader-icon-color);
}
.tiny-cascader--medium {
font-size: var(--ti-cascader-medium-font-size);
line-height: var(--ti-cascader-medium-line-height);
}
.tiny-cascader--small {
font-size: var(--ti-cascader-small-font-size);
line-height: var(--ti-cascader-small-line-height);
}
.tiny-cascader--mini {
font-size: var(--ti-cascader-mini-font-size);
line-height: var(--ti-cascader-mini-line-height);
}
.tiny-cascader.is-disabled .tiny-cascader__label {
z-index: 2;
color: var(--ti-cascader-disabled-color);
}
.tiny-cascader__dropdown {
--ti-cascader-font-size: var(--ti-common-font-size-1);
--ti-cascader-hover-border-color: var(--ti-base-color-common-5);
--ti-cascader-focus-border-color: var(--ti-base-color-brand-6);
--ti-cascader-border-radius: var(--ti-common-border-radius-1);
--ti-cascader-icon-color: #909399;
--ti-cascader-medium-font-size: var(--ti-common-font-size-1);
--ti-cascader-medium-line-height: 36px;
--ti-cascader-small-line-height: 32px;
--ti-cascader-mini-line-height: 28px;
--ti-cascader-small-font-size: 13px;
--ti-cascader-mini-font-size: var(--ti-common-font-size-base, 12px);
--ti-cascader-disabled-color: #c0c4cc;
--ti-cascader-dropdown-background: var(--ti-base-color-light);
--ti-cascader-dropdown-border-color: #e4e7ed;
--ti-cascader-tag-background: #f0f2f5;
--ti-cascader-tag-icon-bgcolor: #c0c4cc;
--ti-cascader-tag-icon-color: var(--ti-base-color-light);
--ti-cascader-tag-icon-hover-bgcolor: #909399;
--ti-cascader-list-color: #606266;
--ti-cascader-item-height: var(--ti-base-size-height-minor);
--ti-cascader-item-hover-background: #f5f7fa;
--ti-cascader-item-checked-color: var(--ti-base-color-brand-5);
--ti-cascader-empty-text-color: #c0c4cc;
--ti-cascader-search-input-color: var(--ti-base-color-info-normal);
--ti-cascader-search-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-cascader-dropdown-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-cascader-width: '100%';
margin: 5px 0;
font-size: var(--ti-cascader-font-size);
background: var(--ti-cascader-dropdown-background);
border: 1px solid var(--ti-cascader-dropdown-border-color);
border-radius: var(--ti-cascader-border-radius);
-webkit-box-shadow: var(--ti-cascader-dropdown-box-shadow);
box-shadow: var(--ti-cascader-dropdown-box-shadow);
}
.tiny-cascader__dropdown.is-auto-size {
background: 0 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-cascader__dropdown.is-auto-size .tiny-cascader-panel {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tiny-cascader__dropdown.is-auto-size .tiny-cascader-menu {
border: 1px solid #e4e7ed;
background: #fff;
}
.tiny-cascader__dropdown.is-auto-size .tiny-cascader-menu:not(:first-child) {
margin-left: -1px;
}
.tiny-cascader__dropdown.is-auto-size .tiny-cascader-menu .tiny-cascader-menu__wrap {
height: auto;
padding-bottom: 6px;
max-height: 220px;
}
.tiny-cascader__tags {
position: absolute;
left: 0;
right: 30px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
line-height: normal;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-cascader__tags .tiny-tag {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
margin: 2px 0 2px 6px;
text-overflow: ellipsis;
background: var(--ti-cascader-tag-background);
}
.tiny-cascader__tags .tiny-tag:not(.is-hit) {
border-color: transparent;
}
.tiny-cascader__tags .tiny-tag > span {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-cascader__tags .tiny-tag > span {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-cascader__tags .tiny-tag .tiny-tag__close {
-ms-flex-negative: 0;
flex-shrink: 0;
}
}
.tiny-cascader__tags .tiny-tag .tiny-icon-close {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
background-color: var(--ti-cascader-tag-icon-bgcolor);
color: var(--ti-cascader-tag-icon-color);
}
.tiny-cascader__tags .tiny-tag .tiny-icon-close:hover {
background-color: var(--ti-cascader-tag-icon-hover-bgcolor);
}
.tiny-cascader__suggestion-panel {
border-radius: var(--ti-cascader-border-radius);
}
.tiny-cascader__suggestion-list {
max-height: 204px;
margin: 0;
padding: 6px 0;
font-size: var(--ti-cascader-font-size);
color: var(--ti-cascader-list-color);
text-align: center;
}
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--ti-cascader-item-height);
padding: 0 8px;
font-size: var(--ti-common-font-size-base);
color: var(--ti-cascader-search-input-color);
text-align: left;
outline: 0;
cursor: pointer;
}
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item:focus,
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item:hover {
background: var(--ti-cascader-item-hover-background);
}
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item.is-checked {
color: var(--ti-cascader-item-checked-color);
font-weight: 700;
}
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item.is-checked .icon-check {
fill: var(--ti-cascader-item-checked-color);
}
.tiny-cascader__suggestion-panel .tiny-cascader__suggestion-item > span {
margin-right: 10px;
}
.tiny-cascader__empty-text {
margin: 10px 0;
color: var(--ti-cascader-empty-text-color);
}
.tiny-cascader__search-input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 24px;
min-width: 60px;
margin-left: 2px;
padding-left: 8px;
color: var(--ti-cascader-search-input-color);
font-size: var(--ti-common-font-size-base);
border: none;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-cascader__search-input::-moz-placeholder {
color: var(--ti-cascader-search-input-placeholder-color);
opacity: 1;
}
.tiny-cascader__search-input:-ms-input-placeholder {
color: var(--ti-cascader-search-input-placeholder-color);
}
.tiny-cascader__search-input::-webkit-input-placeholder {
color: var(--ti-cascader-search-input-placeholder-color);
}
.tiny-cascader__search-input::-ms-input-placeholder {
color: var(--ti-cascader-search-input-placeholder-color);
}
.tiny-cascader__search-input::placeholder {
color: var(--ti-cascader-search-input-placeholder-color);
}
.tiny-cascader-multiple {
width: var(--ti-cascader-width);
}
.tiny-cascader-menu {
--ti-cascader-menu-color: var(--ti-base-color-info-normal);
--ti-cascader-menu-border-color: #e4e7ed;
--ti-cascader-menu-empty-text-color: #c0c4cc;
--ti-cascader-menu-list-padding: 0;
--ti-cascader-menu-width: 180px;
min-width: var(--ti-cascader-menu-width);
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: var(--ti-cascader-menu-color);
border-right: solid 1px var(--ti-cascader-menu-border-color);
}
.tiny-cascader-menu:last-child {
border-right: none;
}
.tiny-cascader-menu:last-child .tiny-cascader-node {
padding-right: 20px;
}
.tiny-cascader-menu .tiny-cascader-menu__wrap {
height: 204px;
}
.tiny-cascader-menu .tiny-cascader-menu__list {
position: relative;
min-height: 100%;
margin: 0;
list-style: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--ti-cascader-menu-list-padding);
}
.tiny-cascader-menu__hover-zone {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tiny-cascader-menu__empty-text {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
color: var(--ti-cascader-menu-empty-text-color);
}
.tiny-cascader-node {
--ti-cascader-node-hover-bgcolor: var(--ti-base-color-brand-1);
--ti-cascader-node-hover-color: var(--ti-base-color-brand-6);
--ti-cascader-node-font-color: var(--ti-base-color-white);
--ti-cascader-node-selectable-hover-bgcolor: var(--ti-base-color-selected-background);
--ti-cascader-node-selectable-font-color: var(--ti-base-color-selected-font-color);
--ti-cascader-node-disabled-color: var(--ti-base-color-placeholder);
--ti-cascader-node-icon-font-size: var(--ti-common-font-size-1);
--ti-cascader-node-icon-color: #bfbfbf;
--ti-cascader-node-prefix-display: 'inline-block';
--ti-cascader-node-label-padding: 0 10px;
}
.tiny-cascader-node.is-selectable.in-active-path {
color: var(--ti-cascader-node-font-color);
}
.tiny-cascader-node.in-active-path,
.tiny-cascader-node.is-active {
background: var(--ti-cascader-node-selectable-hover-bgcolor);
color: var(--ti-cascader-node-selectable-font-color);
}
.tiny-cascader-node.in-active-path,
.tiny-cascader-node.in-active-path:hover,
.tiny-cascader-node.is-active,
.tiny-cascader-node.is-active:hover {
background: var(--ti-cascader-node-selectable-hover-bgcolor);
}
.tiny-cascader-node:not(.is-disabled):not(.in-active-path):not(.is-active):focus,
.tiny-cascader-node:not(.is-disabled):not(.in-active-path):not(.is-active):hover {
background: var(--ti-cascader-node-hover-bgcolor);
color: var(--ti-cascader-node-hover-color);
}
.tiny-cascader-node:not(.is-disabled) {
cursor: pointer;
}
.tiny-cascader-node.is-disabled {
color: var(--ti-cascader-node-disabled-color);
fill: var(--ti-cascader-node-disabled-color);
background-color: var(--ti-cascader-node-disabled-bgcolor);
cursor: not-allowed;
}
.tiny-cascader-node__postfix,
.tiny-cascader-node__prefix {
font-size: var(--ti-cascader-node-icon-font-size);
fill: var(--ti-cascader-node-icon-color);
}
.tiny-cascader-node__prefix {
position: absolute;
left: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: var(--ti-cascader-node-prefix-display) !important;
}
.tiny-cascader-node__postfix {
position: absolute;
top: 50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tiny-cascader-node__label {
max-width: 360px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: var(--ti-cascader-node-label-padding);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-cascader-node__label {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.tiny-cascader-node > .tiny-radio {
margin-right: var(--ti-common-space-base);
}
.tiny-cascader-node > .tiny-radio .tiny-radio__label {
padding-left: 0;
}
.tiny-cascader-node > .tiny-checkbox {
margin-right: var(--ti-common-space-base);
}
.tiny-cascader-panel {
--ti-cascader-panel-border-radius: var(--ti-common-border-radius-normal);
--ti-cascader-panel-border-color: var(--ti-base-color-border);
--ti-cascader-panel-font-size: var(--ti-common-font-size-base);
--ti-cascader-panel-node-height: var(--ti-base-size-height-minor);
--ti-cascader-panel-node-gap: 0;
--ti-cascader-panel-node-label-padding: 0 30px 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: var(--ti-cascader-panel-border-radius);
font-size: var(--ti-cascader-panel-font-size);
}
.tiny-cascader-panel.is-bordered {
border: 1px solid var(--ti-cascader-panel-border-color);
border-radius: var(--ti-cascader-panel-border-radius);
}
.tiny-cascader-panel .tiny-cascader-node {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: var(--ti-cascader-panel-node-label-padding);
height: var(--ti-cascader-panel-node-height);
line-height: var(--ti-cascader-panel-node-height);
outline: 0;
border-radius: var(--ti-common-border-radius-normal);
margin-top: var(--ti-cascader-panel-node-gap);
}
.tiny-chart {
--ti-chart-core-data-empty-color: #888;
--ti-chart-core-data-empty-font-size: var(--ti-common-font-size-1);
--ti-chart-core-data-empty-bgcolor: rgba(255, 255, 255, 0.9);
}
.tiny-chart-data-empty {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--ti-chart-core-data-empty-bgcolor);
color: var(--ti-chart-core-data-empty-color);
font-size: var(--ti-chart-core-data-empty-font-size);
}
.tiny-chart-component-loading {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: var(--ti-chart-core-data-empty-bgcolor);
}
.tiny-chart-component-loading .circular {
width: 42px;
height: 42px;
-webkit-animation: loading-rotate 2s linear infinite;
animation: loading-rotate 2s linear infinite;
}
.tiny-chart-component-loading .path {
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #20a0ff;
stroke-linecap: round;
}
.tiny-chart-mask-status {
-webkit-filter: blur(1px);
filter: blur(1px);
}
@-webkit-keyframes loading-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.tiny-checkbox {
--ti-checkbox-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-font-size: var(--ti-common-font-size-base);
--ti-checkbox-background-color: var(--ti-base-color-brand-2);
--ti-checkbox-bg-color: var(--ti-base-color-white);
--ti-checkbox-shadow-color: #dfe1e6;
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
--ti-checkbox-hover-color: var(--ti-base-color-common-7);
--ti-checkbox-checked-color: var(--ti-base-color-brand-6);
--ti-checkbox-disabled-color: var(--ti-base-color-placeholder);
--ti-checkbox-disabled-bgcolor: var(--ti-base-color-bg-5);
--ti-checkbox-disabled-border-color: var(--ti-base-color-bg-5);
--ti-checkbox-button-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-button-checked-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-inner-border-color: var(--ti-base-color-light);
--ti-checkbox-bg-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color: var(--ti-common-color-line-normal);
--ti-checkbox-border-color-hover: var(--ti-base-color-brand-6);
--ti-checkbox-icon-height: 8px;
--ti-checkbox-icon-width: 4px;
--ti-checkbox-icon-left: 4.5px;
--ti-checkbox-icon-top: 0;
--ti-checkbox-bg-color-disable: var(--ti-base-color-bg-5);
--ti-checkbox-border-color-unchecked-disabled: var(--ti-base-color-common-1);
--ti-checkbox-label-color-disabled: var(--ti-base-color-common-2);
--ti-checkbox-bg-color-hover: var(--ti-base-color-brand-3);
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--ti-checkbox-font-color);
font-weight: 500;
font-size: 0;
white-space: nowrap;
margin-right: 30px;
outline: 0;
cursor: pointer;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-checkbox:last-of-type {
margin-right: 0;
}
.tiny-checkbox.is-bordered {
padding: 9px 20px 9px 10px;
border-radius: 2px;
border: 1px solid var(--ti-checkbox-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: normal;
height: 40px;
}
.tiny-checkbox.is-bordered + .tiny-checkbox.is-bordered {
margin-left: 10px;
}
.tiny-checkbox.is-bordered.is-checked {
border-color: var(--ti-checkbox-checked-color);
}
.tiny-checkbox.is-bordered.is-disabled {
border-color: var(--ti-checkbox-border-color-unchecked-disabled);
color: var(--ti-checkbox-bg-color-disable);
pointer-events: none;
cursor: not-allowed;
}
.tiny-checkbox.is-bordered.is-disabled .tiny-checkbox__inner,
.tiny-checkbox.is-bordered.is-disabled .tiny-checkbox__inner:hover {
border-color: var(--ti-checkbox-border-color-unchecked-disabled);
cursor: not-allowed;
}
.tiny-checkbox.is-bordered.is-disabled.is-checked {
border-color: var(--ti-checkbox-bg-color-disable);
}
.tiny-checkbox.is-bordered.is-disabled.is-checked .tiny-checkbox__inner,
.tiny-checkbox.is-bordered.is-disabled.is-checked .tiny-checkbox__inner:hover {
background-color: var(--ti-checkbox-bg-color-disable);
border-color: var(--ti-checkbox-bg-color-disable);
}
.tiny-checkbox.is-bordered.is-disabled.is-checked .tiny-checkbox__inner::after,
.tiny-checkbox.is-bordered.is-disabled.is-checked .tiny-checkbox__inner:hover::after {
border-color: var(--ti-checkbox-border-color-unchecked-disabled);
}
.tiny-checkbox.is-bordered.tiny-checkbox--medium {
padding: 7px 20px 7px 10px;
border-radius: 4px;
height: 36px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--medium .tiny-checkbox__label {
line-height: 17px;
font-size: var(--ti-common-font-size-1);
}
.tiny-checkbox.is-bordered.tiny-checkbox--medium .tiny-checkbox__inner {
height: 14px;
width: 14px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--small {
padding: 5px 15px 5px 10px;
border-radius: 3px;
height: 32px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--small .tiny-checkbox__label {
line-height: 15px;
font-size: var(--ti-common-font-size-base);
}
.tiny-checkbox.is-bordered.tiny-checkbox--small .tiny-checkbox__inner {
height: 12px;
width: 12px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--small .tiny-checkbox__inner::after {
height: 6px;
width: 2px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--mini {
padding: 3px 15px 3px 10px;
border-radius: 3px;
height: 28px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--mini .tiny-checkbox__label {
line-height: 12px;
font-size: var(--ti-common-font-size-base);
}
.tiny-checkbox.is-bordered.tiny-checkbox--mini .tiny-checkbox__inner {
height: 12px;
width: 12px;
}
.tiny-checkbox.is-bordered.tiny-checkbox--mini .tiny-checkbox__inner::after {
height: 6px;
width: 2px;
}
.tiny-checkbox__input {
position: relative;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
outline: 0;
line-height: 1;
cursor: pointer;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-checkbox__input {
display: inline-block;
}
}
@supports (-ms-ime-align: auto) {
.tiny-checkbox__input {
display: inline-block;
}
}
.tiny-checkbox__input .tiny-checkbox__inner svg {
fill: var(--ti-checkbox-border-color);
}
.tiny-checkbox__input .tiny-checkbox__inner:hover svg {
fill: var(--ti-checkbox-hover-color);
}
.tiny-checkbox__input.is-disabled .tiny-checkbox__inner {
background-color: var(--ti-checkbox-bg-color-disable);
border-color: var(--ti-checkbox-border-color-unchecked-disabled);
cursor: not-allowed;
}
.tiny-checkbox__input.is-disabled .tiny-checkbox__inner svg {
fill: var(--ti-checkbox-border-color-unchecked-disabled);
}
.tiny-checkbox__input.is-disabled .tiny-checkbox__inner + .tiny-checkbox__label {
cursor: not-allowed;
}
.tiny-checkbox__input.is-disabled.is-checked .tiny-checkbox__inner,
.tiny-checkbox__input.is-disabled.is-checked .tiny-checkbox__inner:hover {
background-color: var(--ti-checkbox-label-color-disabled);
border-color: var(--ti-checkbox-label-color-disabled);
}
.tiny-checkbox__input.is-disabled.is-checked .tiny-checkbox__inner::after,
.tiny-checkbox__input.is-disabled.is-checked .tiny-checkbox__inner:hover::after {
border-color: var(--ti-checkbox-bg-color-disable);
}
.tiny-checkbox__input.is-disabled.is-indeterminate .tiny-checkbox__inner,
.tiny-checkbox__input.is-disabled.is-indeterminate .tiny-checkbox__inner:hover {
background-color: var(--ti-checkbox-label-color-disabled);
border-color: var(--ti-checkbox-label-color-disabled);
}
.tiny-checkbox__input.is-disabled.is-indeterminate .tiny-checkbox__inner::before,
.tiny-checkbox__input.is-disabled.is-indeterminate .tiny-checkbox__inner:hover::before {
background-color: var(--ti-checkbox-bg-color-disable);
border-color: var(--ti-checkbox-bg-color-disable);
}
.tiny-checkbox__input.is-disabled + span.tiny-checkbox__label {
color: var(--ti-checkbox-label-color-disabled);
cursor: not-allowed;
}
.tiny-checkbox__input.is-checked .tiny-checkbox__inner::after {
-webkit-transform: rotate(45deg) scaleY(1);
transform: rotate(45deg) scaleY(1);
}
.tiny-checkbox__input.is-indeterminate .tiny-checkbox__inner::before {
content: '';
position: absolute;
display: block;
border-radius: 1px;
background-color: #fff;
height: 6px;
width: 6px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.tiny-checkbox__input.is-indeterminate .tiny-checkbox__inner::after {
display: none;
}
.tiny-checkbox__input.is-checked .tiny-checkbox__inner,
.tiny-checkbox__input.is-indeterminate .tiny-checkbox__inner {
background-color: var(--ti-checkbox-bg-color-checked);
border-color: var(--ti-checkbox-border-color-checked);
}
.tiny-checkbox__input.is-checked .tiny-checkbox__inner:hover,
.tiny-checkbox__input.is-indeterminate .tiny-checkbox__inner:hover {
background-color: var(--ti-checkbox-bg-color-checked);
border-color: var(--ti-checkbox-border-color-checked);
}
.tiny-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid var(--ti-checkbox-border-color);
border-radius: var(--ti-common-border-radius-normal);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 16px;
height: 16px;
background-color: var(--ti-checkbox-bg-color);
outline: 0;
z-index: 1;
-webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.tiny-checkbox__inner:hover {
border-color: var(--ti-checkbox-border-color-hover);
}
.tiny-checkbox__inner::after {
-webkit-box-sizing: content-box;
box-sizing: content-box;
content: '';
border: 1px solid #fff;
border-width: 0 2px 2px 0;
border-left: 0;
border-top: 0;
height: var(--ti-checkbox-icon-height);
width: var(--ti-checkbox-icon-width);
position: absolute;
left: var(--ti-checkbox-icon-left);
top: var(--ti-checkbox-icon-top);
-webkit-transform: rotate(45deg) scaleY(0);
transform: rotate(45deg) scaleY(0);
-webkit-transition: -webkit-transform 0.15s ease-in 50ms;
transition: -webkit-transform 0.15s ease-in 50ms;
transition: transform 0.15s ease-in 50ms;
transition: transform 0.15s ease-in 50ms, -webkit-transform 0.15s ease-in 50ms;
-webkit-transform-origin: center;
transform-origin: center;
}
.tiny-checkbox__original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1;
}
.tiny-checkbox__label {
padding-left: 8px;
font-size: var(--ti-checkbox-font-size);
}
.tiny-checkbox-button {
--ti-checkbox-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-font-size: var(--ti-common-font-size-base);
--ti-checkbox-background-color: var(--ti-base-color-brand-2);
--ti-checkbox-bg-color: var(--ti-base-color-white);
--ti-checkbox-shadow-color: #dfe1e6;
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
--ti-checkbox-hover-color: var(--ti-base-color-common-7);
--ti-checkbox-checked-color: var(--ti-base-color-brand-6);
--ti-checkbox-disabled-color: var(--ti-base-color-placeholder);
--ti-checkbox-disabled-bgcolor: var(--ti-base-color-bg-5);
--ti-checkbox-disabled-border-color: var(--ti-base-color-bg-5);
--ti-checkbox-button-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-button-checked-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-inner-border-color: var(--ti-base-color-light);
--ti-checkbox-bg-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color: var(--ti-common-color-line-normal);
--ti-checkbox-border-color-hover: var(--ti-base-color-brand-6);
--ti-checkbox-icon-height: 8px;
--ti-checkbox-icon-width: 4px;
--ti-checkbox-icon-left: 4.5px;
--ti-checkbox-icon-top: 0;
--ti-checkbox-bg-color-disable: var(--ti-base-color-bg-5);
--ti-checkbox-border-color-unchecked-disabled: var(--ti-base-color-common-1);
--ti-checkbox-label-color-disabled: var(--ti-base-color-common-2);
--ti-checkbox-bg-color-hover: var(--ti-base-color-brand-3);
position: relative;
display: inline-block;
}
.tiny-checkbox-button:first-child .tiny-checkbox-button__inner {
border-radius: var(--ti-common-border-radius-normal) 0 0 var(--ti-common-border-radius-normal);
}
.tiny-checkbox-button:last-child .tiny-checkbox-button__inner {
border-radius: 0 var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0;
}
.tiny-checkbox-button.is-checked .tiny-checkbox-button__inner {
color: var(--ti-checkbox-button-checked-font-color);
border-color: var(--ti-checkbox-checked-color);
-webkit-box-shadow: -1px 0 0 0 var(--ti-checkbox-shadow-color);
box-shadow: -1px 0 0 0 var(--ti-checkbox-shadow-color);
}
.tiny-checkbox-button.is-checked:first-child .tiny-checkbox-button__inner {
border-left-color: var(--ti-checkbox-checked-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-checkbox-button.is-disabled .tiny-checkbox-button__inner {
color: var(--ti-checkbox-disabled-color);
cursor: not-allowed;
background-image: none;
background-color: var(--ti-checkbox-disabled-border-color);
border-color: var(--ti-checkbox-border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-checkbox-button.is-disabled:first-child .tiny-checkbox-button__inner {
border-left-color: var(--ti-checkbox-border-color);
}
.tiny-checkbox-button__inner {
position: relative;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
outline: 0;
line-height: 1;
font-weight: 500;
cursor: pointer;
background: var(--ti-checkbox-background-color);
border-left: 0;
border: 1px solid #e9edfa;
color: var(--ti-checkbox-button-font-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 2px;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 12px 20px;
font-size: var(--ti-common-font-size-2);
min-width: 80px;
border-radius: 0;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-checkbox-button__inner.is-round {
padding: 12px 20px;
}
.tiny-checkbox-button__inner:hover {
background: var(--ti-checkbox-bg-color-hover);
color: var(--ti-checkbox-hover-color);
}
.tiny-checkbox-button__original {
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
z-index: -1;
}
.tiny-checkbox-button--medium .tiny-checkbox-button__inner {
padding: 10px 20px;
font-size: var(--ti-common-font-size-1);
border-radius: 0;
}
.tiny-checkbox-button--medium .tiny-checkbox-button__inner.is-round {
padding: 10px 20px;
}
.tiny-checkbox-button--small .tiny-checkbox-button__inner {
padding: 8px 15px;
font-size: var(--ti-common-font-size-base);
border-radius: 0;
}
.tiny-checkbox-button--small .tiny-checkbox-button__inner.is-round {
padding: 8px 15px;
}
.tiny-checkbox-button--mini .tiny-checkbox-button__inner {
padding: 5px 15px;
font-size: var(--ti-common-font-size-base);
border-radius: 0;
}
.tiny-checkbox-button--mini .tiny-checkbox-button__inner.is-round {
padding: 5px 15px;
}
.tiny-checkbox-group {
--ti-checkbox-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-font-size: var(--ti-common-font-size-base);
--ti-checkbox-background-color: var(--ti-base-color-brand-2);
--ti-checkbox-bg-color: var(--ti-base-color-white);
--ti-checkbox-shadow-color: #dfe1e6;
--ti-checkbox-border-radius: var(--ti-common-border-radius-normal);
--ti-checkbox-hover-color: var(--ti-base-color-common-7);
--ti-checkbox-checked-color: var(--ti-base-color-brand-6);
--ti-checkbox-disabled-color: var(--ti-base-color-placeholder);
--ti-checkbox-disabled-bgcolor: var(--ti-base-color-bg-5);
--ti-checkbox-disabled-border-color: var(--ti-base-color-bg-5);
--ti-checkbox-button-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-button-checked-font-color: var(--ti-base-color-info-normal);
--ti-checkbox-inner-border-color: var(--ti-base-color-light);
--ti-checkbox-bg-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color-checked: var(--ti-base-color-brand-6);
--ti-checkbox-border-color: var(--ti-common-color-line-normal);
--ti-checkbox-border-color-hover: var(--ti-base-color-brand-6);
--ti-checkbox-icon-height: 8px;
--ti-checkbox-icon-width: 4px;
--ti-checkbox-icon-left: 4.5px;
--ti-checkbox-icon-top: 0;
--ti-checkbox-bg-color-disable: var(--ti-base-color-bg-5);
--ti-checkbox-border-color-unchecked-disabled: var(--ti-base-color-common-1);
--ti-checkbox-label-color-disabled: var(--ti-base-color-common-2);
--ti-checkbox-bg-color-hover: var(--ti-base-color-brand-3);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-checkbox-group.is-vertical {
display: inline-block;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 0;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox:not(:last-child) {
margin-bottom: 8px;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox-button {
display: block;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox-button:first-child .tiny-checkbox-button__inner {
border-radius: 2px 2px 0 0;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox-button:last-child .tiny-checkbox-button__inner {
border-radius: 0 0 2px 2px;
}
.tiny-checkbox-group.is-vertical .tiny-checkbox-button.is-checked .tiny-checkbox-button__inner {
-webkit-box-shadow: 0 -1px 0 0 var(--ti-checkbox-shadow-color);
box-shadow: 0 -1px 0 0 var(--ti-checkbox-shadow-color);
border-color: var(--ti-checkbox-checked-color);
}
.tiny-checkbox-group.is-vertical .tiny-checkbox-button.is-checked.is-disabled .tiny-checkbox-button__inner {
-webkit-box-shadow: 0 -1px 0 0 var(--ti-checkbox-border-color);
box-shadow: 0 -1px 0 0 var(--ti-checkbox-border-color);
border-color: var(--ti-checkbox-border-color);
background: var(--ti-checkbox-disabled-bgcolor);
}
.tiny- {
--ti-collapse-border-color: var(--ti-base-color-border);
}
.tiny-fade-in-linear-enter-active,
.tiny-fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.tiny-fade-in-linear-enter,
.tiny-fade-in-linear-enter-from,
.tiny-fade-in-linear-leave,
.tiny-fade-in-linear-leave-active,
.tiny-fade-in-linear-leave-from {
opacity: 0;
}
.tiny-fade-in-enter-active,
.tiny-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tiny-fade-in-enter,
.tiny-fade-in-enter-from,
.tiny-fade-in-leave-active {
opacity: 0;
}
.tiny-zoom-in-center-enter-active,
.tiny-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tiny-zoom-in-center-enter,
.tiny-zoom-in-center-enter-from,
.tiny-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.tiny-zoom-in-top-enter-active,
.tiny-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.tiny-zoom-in-top-enter,
.tiny-zoom-in-top-enter-from,
.tiny-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.tiny-zoom-in-bottom-enter-active,
.tiny-zoom-in-bottom-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.tiny-zoom-in-bottom-enter,
.tiny-zoom-in-bottom-leave-active,
.tiny-zoom-in-left-enter-from {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.tiny-zoom-in-left-enter-active,
.tiny-zoom-in-left-leave-active {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.tiny-zoom-in-left-enter,
.tiny-zoom-in-left-enter-from,
.tiny-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45);
}
.tiny-list-enter-active,
.tiny-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s;
}
.tiny-list-enter,
.tiny-list-enter-from,
.tiny-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.tiny-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.collapse-transition {
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.fade-in-linear-enter,
.fade-in-linear-enter-from,
.fade-in-linear-leave,
.fade-in-linear-leave-active,
.fade-in-linear-leave-from {
opacity: 0;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.tiny-collapse-item {
--ti-collapse-item-color: var(--ti-base-color-info-normal);
--ti-collapse-item-icon-color: var(--ti-common-color-icon-normal);
--ti-collapse-item-bgcolor: var(--ti-base-color-light);
--ti-collapse-item-border-color: var(--ti-base-color-border);
--ti-collapse-item-disabled-color: var(--ti-base-color-placeholder);
--ti-collapse-item-header-font-size: var(--ti-common-font-size-base);
--ti-collapse-item-header-focus-color: var(--ti-base-color-brand-5);
--ti-collapse-item-arrow-font-size: var(--ti-common-font-size-base);
--ti-collapse-item-arrow-hover-color: var(--ti-base-color-info-normal);
--ti-collapse-item-content-font-size: var(--ti-common-font-size-base);
--ti-collapse-item-header-bgcolor: var(--ti-base-color-brand-1);
--ti-collapse-item-space-between: var(--ti-common-space-2x);
--ti-collapse-item-bg-color: var(--ti-common-color-bg-white-normal);
--ti-collapse-item-border: 1px solid var(--ti-common-color-line-dividing);
--ti-collapse-item-border-radius: var(--ti-common-border-radius-normal);
--ti-collapse-item-icon-fs: var(--ti-common-font-size-2);
--ti-collapse-item-header-padding: 0 var(--ti-common-space-4x);
--ti-collapse-item-content-border-top: 1px solid var(--ti-common-color-line-dividing);
margin-top: var(--ti-collapse-item-space-between);
background-color: var(--ti-collapse-item-bg-color);
border: var(--ti-collapse-item-border);
border-radius: var(--ti-collapse-item-border-radius);
}
.tiny-collapse-item:last-child {
margin-bottom: -1px;
}
.tiny-collapse-item.is-disabled .tiny-collapse-item__header {
color: var(--ti-collapse-item-disabled-color);
cursor: not-allowed;
}
.tiny-collapse-item.is-disabled .tiny-collapse-item__arrow {
fill: var(--ti-collapse-item-disabled-color);
}
.tiny-collapse-item__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 34px;
line-height: 34px;
background-color: var(--ti-collapse-item-header-bgcolor);
color: var(--ti-collapse-item-color);
font-size: var(--ti-collapse-item-header-font-size);
font-family: Helvetica, Arial, 'microsoft yahei';
outline: 0;
cursor: pointer;
-webkit-transition: border-bottom-color 0.3s;
transition: border-bottom-color 0.3s;
border-radius: var(--ti-common-border-radius-normal);
padding: var(--ti-collapse-item-header-padding);
}
.tiny-collapse-item__header.focusing:focus:not(:hover) {
color: var(--ti-collapse-item-header-focus-color);
}
.tiny-collapse-item__header.is-active {
border-bottom-color: transparent;
}
.tiny-collapse-item__header svg {
font-size: var(--ti-collapse-item-icon-fs);
fill: var(--ti-collapse-item-icon-color);
}
.tiny-collapse-item__arrow {
font-size: var(--ti-collapse-item-arrow-font-size);
margin-right: 12px;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.tiny-collapse-item__arrow.is-active {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.tiny-collapse-item__arrow.is-active,
.tiny-collapse-item__arrow:hover {
fill: var(--ti-collapse-item-arrow-hover-color);
}
.tiny-collapse-item__wrap {
will-change: height;
background-color: var(--ti-collapse-item-bgcolor);
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-collapse-item__content {
padding: 12px 16px;
font-size: var(--ti-collapse-item-content-font-size);
color: var(--ti-collapse-item-color);
border-top: var(--ti-collapse-item-content-border-top);
line-height: 1.76923077;
}
.tiny-container .tiny-container__aside,
.tiny-container .tiny-container__footer,
.tiny-container .tiny-container__header,
.tiny-container .tiny-container__main {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}
.tiny-container .tiny-container__main {
overflow-y: auto;
}
.tiny-container .tiny-container__footer {
top: auto;
width: auto;
}
.credit-card-item {
max-width: 430px;
height: 270px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item {
max-width: 310px;
height: 220px;
width: 90%;
}
}
@media screen and (max-width: 360px) {
.credit-card-item {
height: 180px;
}
}
.credit-card-item.-active .credit-card-item__side.-front {
-webkit-transform: perspective(1000px) rotateY(180deg) rotateX(0) rotateZ(0);
transform: perspective(1000px) rotateY(180deg) rotateX(0) rotateZ(0);
}
.credit-card-item.-active .credit-card-item__side.-back {
-webkit-transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);
transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);
}
.credit-card-item__focus {
position: absolute;
z-index: 3;
border-radius: 5px;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
opacity: 0;
pointer-events: none;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.65);
}
.credit-card-item__focus:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #08142f;
height: 100%;
border-radius: 5px;
-webkit-filter: blur(25px);
filter: blur(25px);
opacity: 0.5;
}
.credit-card-item__focus.-active {
opacity: 1;
}
.credit-card-item__side {
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
-webkit-transform: perspective(2000px) rotateY(0) rotateX(0) rotate(0);
transform: perspective(2000px) rotateY(0) rotateX(0) rotate(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
}
.credit-card-item__side.-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: perspective(2000px) rotateY(-180deg) rotateX(0) rotate(0);
transform: perspective(2000px) rotateY(-180deg) rotateX(0) rotate(0);
z-index: 2;
padding: 0;
height: 100%;
}
.credit-card-item__side.-back .credit-card-item__cover {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.credit-card-item__bg {
max-width: 100%;
display: block;
max-height: 100%;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.credit-card-item__cover {
position: absolute;
height: 100%;
background-color: #1c1d27;
background-image: linear-gradient(147deg, #354fce 0, #0c296b 74%);
left: 0;
top: 0;
width: 100%;
border-radius: 15px;
overflow: hidden;
}
.credit-card-item__cover:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(6, 2, 29, 0.45);
}
.credit-card-item__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px;
padding: 0 10px;
}
@media screen and (max-width: 480px) {
.credit-card-item__top {
margin-bottom: 25px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__top {
margin-bottom: 15px;
}
}
.credit-card-item__chip {
width: 60px;
}
@media screen and (max-width: 480px) {
.credit-card-item__chip {
width: 50px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__chip {
width: 40px;
}
}
.credit-card-item__type {
height: 45px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
max-width: 100px;
margin-left: auto;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item__type {
height: 40px;
max-width: 90px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__type {
height: 30px;
}
}
.credit-card-item__typeImg {
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
-o-object-position: top right;
object-position: top right;
}
.credit-card-item__info {
color: #fff;
width: 100%;
max-width: calc(100% - 85px);
padding: 10px 15px;
font-weight: 500;
display: block;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__info {
padding: 10px;
}
}
.credit-card-item__holder {
opacity: 0.7;
font-size: 13px;
margin-bottom: 6px;
}
@media screen and (max-width: 480px) {
.credit-card-item__holder {
font-size: var(--ti-common-font-size-base);
margin-bottom: 5px;
}
}
.credit-card-item__wrapper {
padding: 25px 15px;
position: relative;
z-index: 4;
height: 100%;
text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (max-width: 480px) {
.credit-card-item__wrapper {
padding: 20px 10px;
}
}
.credit-card-item__name {
font-size: var(--ti-common-font-size-3);
line-height: 1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
}
@media screen and (max-width: 480px) {
.credit-card-item__name {
font-size: var(--ti-common-font-size-2);
}
}
.credit-card-item__nameItem {
display: inline-block;
min-width: 8px;
position: relative;
}
.credit-card-item__number {
font-weight: 500;
line-height: 1;
color: #fff;
font-size: 27px;
margin-bottom: 25px;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__number {
font-size: 21px;
margin-bottom: 15px;
padding: 10px 10px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__number {
font-size: 19px;
margin-bottom: 10px;
padding: 10px 10px;
}
}
.credit-card-item__numberItem {
width: 16px;
display: inline-block;
}
.credit-card-item__numberItem.-active {
width: 30px;
}
@media screen and (max-width: 480px) {
.credit-card-item__numberItem {
width: 13px;
}
.credit-card-item__numberItem.-active {
width: 16px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__numberItem {
width: 12px;
}
.credit-card-item__numberItem.-active {
width: 8px;
}
}
.credit-card-item__content {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.credit-card-item__date {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: var(--ti-common-font-size-3);
margin-left: auto;
padding: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 80px;
white-space: nowrap;
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__date {
font-size: var(--ti-common-font-size-2);
}
}
.credit-card-item__dateItem {
position: relative;
}
.credit-card-item__dateItem span {
width: 22px;
display: inline-block;
}
.credit-card-item__dateTitle {
opacity: 0.7;
font-size: 13px;
padding-bottom: 6px;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item__dateTitle {
font-size: var(--ti-common-font-size-base);
padding-bottom: 5px;
}
}
.credit-card-item__band {
background: rgba(0, 0, 19, 0.8);
width: 100%;
height: 50px;
margin-top: 30px;
position: relative;
z-index: 2;
}
@media screen and (max-width: 480px) {
.credit-card-item__band {
margin-top: 20px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__band {
height: 40px;
margin-top: 10px;
}
}
.credit-card-item__cvv {
text-align: right;
position: relative;
z-index: 2;
padding: 15px;
}
.credit-card-item__cvv .credit-card-item__type {
opacity: 0.7;
}
@media screen and (max-width: 360px) {
.credit-card-item__cvv {
padding: 10px 15px;
}
}
.credit-card-item__cvvTitle {
padding-right: 10px;
font-size: 15px;
font-weight: 500;
color: #fff;
margin-bottom: 5px;
}
.credit-card-item__cvvBand {
height: 45px;
background: #fff;
margin-bottom: 30px;
text-align: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-right: 10px;
color: #1a3b5d;
font-size: var(--ti-common-font-size-3);
border-radius: 4px;
-webkit-box-shadow: 0 10px 20px -7px rgba(32, 56, 117, 0.35);
box-shadow: 0 10px 20px -7px rgba(32, 56, 117, 0.35);
}
@media screen and (max-width: 480px) {
.credit-card-item__cvvBand {
height: 40px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__cvvBand {
margin-bottom: 15px;
}
}
.credit-card-form {
max-width: 570px;
margin: auto;
width: 100%;
font-family: arial;
}
@media screen and (max-width: 576px) {
.credit-card-form {
margin: 0 auto;
}
}
.credit-card-form__inner {
background: #fff;
-webkit-box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
border-radius: 10px;
padding: 35px;
padding-top: 180px;
}
@media screen and (max-width: 480px) {
.credit-card-form__inner {
padding: 25px;
padding-top: 165px;
}
}
@media screen and (max-width: 360px) {
.credit-card-form__inner {
padding: 15px;
padding-top: 165px;
}
}
.credit-card-form__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
@media screen and (max-width: 480px) {
.credit-card-form__row {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
}
.credit-card-form__col {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
margin-right: 35px;
}
.credit-card-form__col:last-child {
margin-right: 0;
}
@media screen and (max-width: 480px) {
.credit-card-form__col {
margin-right: 0;
-webkit-box-flex: unset;
-ms-flex: unset;
flex: unset;
width: 100%;
margin-bottom: 20px;
}
.credit-card-form__col:last-child {
margin-bottom: 0;
}
}
.credit-card-form__col.-cvv {
max-width: 150px;
}
@media screen and (max-width: 480px) {
.credit-card-form__col.-cvv {
max-width: initial;
}
}
.credit-card-form__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.credit-card-form__group .credit-card-input__input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 15px;
outline: 0;
}
.credit-card-form__group .credit-card-input__input:last-child {
margin-right: 0;
}
.credit-card-form__group select::-ms-expand {
display: none;
}
.credit-card-form__button {
width: 100%;
height: 55px;
background: #2364d2;
border: none;
border-radius: 5px;
font-size: 22px;
font-weight: 500;
-webkit-box-shadow: 3px 10px 20px 0 rgba(35, 100, 210, 0.3);
box-shadow: 3px 10px 20px 0 rgba(35, 100, 210, 0.3);
color: #fff;
margin-top: 20px;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-form__button {
margin-top: 10px;
}
}
.credit-card-item {
max-width: 430px;
height: 270px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item {
max-width: 310px;
height: 220px;
width: 90%;
}
}
@media screen and (max-width: 360px) {
.credit-card-item {
height: 180px;
}
}
.credit-card-item.-active .card-item__side.-front {
-webkit-transform: perspective(1000px) rotateY(180deg) rotateX(0) rotateZ(0);
transform: perspective(1000px) rotateY(180deg) rotateX(0) rotateZ(0);
}
.credit-card-item.-active .card-item__side.-back {
-webkit-transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);
transform: perspective(1000px) rotateY(0) rotateX(0) rotateZ(0);
}
.credit-card-item__focus {
position: absolute;
z-index: 3;
border-radius: 5px;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
opacity: 0;
pointer-events: none;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.65);
}
.credit-card-item__focus:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #08142f;
height: 100%;
border-radius: 5px;
-webkit-filter: blur(25px);
filter: blur(25px);
opacity: 0.5;
}
.credit-card-item__focus.-active {
opacity: 1;
}
.credit-card-item__side {
border-radius: 15px;
overflow: hidden;
-webkit-box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
-webkit-transform: perspective(2000px) rotateY(0) rotateX(0) rotate(0);
transform: perspective(2000px) rotateY(0) rotateX(0) rotate(0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
}
.credit-card-item__side.-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-transform: perspective(2000px) rotateY(-180deg) rotateX(0) rotate(0);
transform: perspective(2000px) rotateY(-180deg) rotateX(0) rotate(0);
z-index: 2;
padding: 0;
height: 100%;
}
.credit-card-item__side.-back .card-item__cover {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.credit-card-item__bg {
max-width: 100%;
display: block;
max-height: 100%;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.credit-card-item__cover {
position: absolute;
height: 100%;
background-color: #1c1d27;
background-image: linear-gradient(147deg, #354fce 0, #0c296b 74%);
left: 0;
top: 0;
width: 100%;
border-radius: 15px;
overflow: hidden;
}
.credit-card-item__cover:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(6, 2, 29, 0.45);
}
.credit-card-item__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-bottom: 40px;
padding: 0 10px;
}
@media screen and (max-width: 480px) {
.credit-card-item__top {
margin-bottom: 25px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__top {
margin-bottom: 15px;
}
}
.credit-card-item__chip {
width: 60px;
}
@media screen and (max-width: 480px) {
.credit-card-item__chip {
width: 50px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__chip {
width: 40px;
}
}
.credit-card-item__type {
height: 45px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
max-width: 100px;
margin-left: auto;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item__type {
height: 40px;
max-width: 90px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__type {
height: 30px;
}
}
.credit-card-item__typeImg {
max-width: 100%;
-o-object-fit: contain;
object-fit: contain;
max-height: 100%;
-o-object-position: top right;
object-position: top right;
}
.credit-card-item__info {
color: #fff;
width: 100%;
max-width: calc(100% - 85px);
padding: 10px 15px;
font-weight: 500;
display: block;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__info {
padding: 10px;
}
}
.credit-card-item__holder {
opacity: 0.7;
font-size: 13px;
margin-bottom: 6px;
}
@media screen and (max-width: 480px) {
.credit-card-item__holder {
font-size: var(--ti-common-font-size-base);
margin-bottom: 5px;
}
}
.credit-card-item__wrapper {
padding: 25px 15px;
position: relative;
z-index: 4;
height: 100%;
text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (max-width: 480px) {
.credit-card-item__wrapper {
padding: 20px 10px;
}
}
.credit-card-item__name {
font-size: var(--ti-common-font-size-3);
line-height: 1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
}
@media screen and (max-width: 480px) {
.credit-card-item__name {
font-size: var(--ti-common-font-size-2);
}
}
.credit-card-item__nameItem {
display: inline-block;
min-width: 8px;
position: relative;
}
.credit-card-item__number {
font-weight: 500;
line-height: 1;
color: #fff;
font-size: 27px;
margin-bottom: 25px;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__number {
font-size: 21px;
margin-bottom: 15px;
padding: 10px 10px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__number {
font-size: 19px;
margin-bottom: 10px;
padding: 10px 10px;
}
}
.credit-card-item__numberItem {
width: 16px;
display: inline-block;
}
.credit-card-item__numberItem.-active {
width: 30px;
}
@media screen and (max-width: 480px) {
.credit-card-item__numberItem {
width: 13px;
}
.credit-card-item__numberItem.-active {
width: 16px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__numberItem {
width: 12px;
}
.credit-card-item__numberItem.-active {
width: 8px;
}
}
.credit-card-item__content {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.credit-card-item__date {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: var(--ti-common-font-size-3);
margin-left: auto;
padding: 10px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 80px;
white-space: nowrap;
-ms-flex-negative: 0;
flex-shrink: 0;
cursor: pointer;
}
@media screen and (max-width: 480px) {
.credit-card-item__date {
font-size: var(--ti-common-font-size-2);
}
}
.credit-card-item__dateItem {
position: relative;
}
.credit-card-item__dateItem span {
width: 22px;
display: inline-block;
}
.credit-card-item__dateTitle {
opacity: 0.7;
font-size: 13px;
padding-bottom: 6px;
width: 100%;
}
@media screen and (max-width: 480px) {
.credit-card-item__dateTitle {
font-size: var(--ti-common-font-size-base);
padding-bottom: 5px;
}
}
.credit-card-item__band {
background: rgba(0, 0, 19, 0.8);
width: 100%;
height: 50px;
margin-top: 30px;
position: relative;
z-index: 2;
}
@media screen and (max-width: 480px) {
.credit-card-item__band {
margin-top: 20px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__band {
height: 40px;
margin-top: 10px;
}
}
.credit-card-item__cvv {
text-align: right;
position: relative;
z-index: 2;
padding: 15px;
}
.credit-card-item__cvv .card-item__type {
opacity: 0.7;
}
@media screen and (max-width: 360px) {
.credit-card-item__cvv {
padding: 10px 15px;
}
}
.credit-card-item__cvvTitle {
padding-right: 10px;
font-size: 15px;
font-weight: 500;
color: #fff;
margin-bottom: 5px;
}
.credit-card-item__cvvBand {
height: 45px;
background: #fff;
margin-bottom: 30px;
text-align: right;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding-right: 10px;
color: #1a3b5d;
font-size: var(--ti-common-font-size-3);
border-radius: 4px;
-webkit-box-shadow: 0 10px 20px -7px rgba(32, 56, 117, 0.35);
box-shadow: 0 10px 20px -7px rgba(32, 56, 117, 0.35);
}
@media screen and (max-width: 480px) {
.credit-card-item__cvvBand {
height: 40px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 360px) {
.credit-card-item__cvvBand {
margin-bottom: 15px;
}
}
.credit-card-list {
margin-bottom: -130px;
}
@media screen and (max-width: 480px) {
.credit-card-list {
margin-bottom: -120px;
}
}
.credit-card-input {
margin-bottom: 20px;
position: relative;
}
.credit-card-input__label {
font-size: var(--ti-common-font-size-1);
margin-bottom: 5px;
font-weight: 500;
color: #1a3b5d;
width: 100%;
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.credit-card-input__input {
width: 100%;
height: 50px;
border-radius: 5px;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid #ced6e0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
font-size: var(--ti-common-font-size-3);
padding: 5px 15px;
background: 0 0;
color: #1a3b5d;
outline: 0;
}
.credit-card-input__input:focus,
.credit-card-input__input:hover {
border-color: #3d9cff;
}
.credit-card-input__input:focus {
-webkit-box-shadow: 0 10px 20px -13px rgba(32, 56, 117, 0.35);
box-shadow: 0 10px 20px -13px rgba(32, 56, 117, 0.35);
}
.credit-card-input__input.-select {
-webkit-appearance: none;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC);
background-size: 12px;
background-position: 90% center;
background-repeat: no-repeat;
padding-right: 30px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
cursor: pointer;
}
.credit-card-input__eye {
position: absolute;
width: 1em;
height: 1em;
font-size: var(--ti-common-font-size-5);
border-radius: 50%;
top: 42px;
right: 10px;
opacity: 0.75;
color: #8c9cae;
cursor: pointer;
padding: 0;
background: 0 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
border: 2px solid currentColor;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
outline: 0;
}
.credit-card-input__eye:before {
content: '';
position: absolute;
background: #fff;
width: 0.35em;
height: 0.35em;
top: 6px;
left: 6px;
z-index: 2;
border-radius: 50%;
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.credit-card-input__eye:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
background: currentColor;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.credit-card-input__eye.-active:not(:disabled),
.credit-card-input__eye:hover:not(:disabled) {
color: #2364d2;
opacity: 1;
}
.credit-card-input__eye.-active::after,
.credit-card-input__eye.-active::before {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.credit-card-input__eye:disabled {
cursor: not-allowed;
opacity: 0.4;
}
.slide-fade-up-enter-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
position: relative;
}
.slide-fade-up-leave-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
position: absolute;
}
.slide-fade-up-enter {
opacity: 0;
-webkit-transform: translateY(15px);
transform: translateY(15px);
pointer-events: none;
}
.slide-fade-up-leave-to {
opacity: 0;
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
pointer-events: none;
}
.slide-fade-right-enter-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
position: relative;
}
.slide-fade-right-leave-active {
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
position: absolute;
}
.slide-fade-right-enter {
opacity: 0;
-webkit-transform: translateX(10px) rotate(45deg);
transform: translateX(10px) rotate(45deg);
pointer-events: none;
}
.slide-fade-right-leave-to {
opacity: 0;
-webkit-transform: translateX(-10px) rotate(45deg);
transform: translateX(-10px) rotate(45deg);
pointer-events: none;
}
.github-btn {
position: absolute;
right: 40px;
bottom: 50px;
text-decoration: none;
padding: 15px 25px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 30px -6px rgba(36, 52, 70, 0.65);
box-shadow: 0 4px 30px -6px rgba(36, 52, 70, 0.65);
background: #24292e;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
font-size: var(--ti-common-font-size-2);
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 500px) {
.github-btn:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36);
box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36);
}
}
@media screen and (max-width: 700px) {
.github-btn {
position: relative;
bottom: auto;
right: auto;
margin-top: 20px;
}
.github-btn:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36);
box-shadow: 0 17px 20px -6px rgba(36, 52, 70, 0.36);
}
}
.tiny-crop {
--ti-crop-drag-box-background: var(--ti-base-color-light);
--ti-crop-modal-background: var(--ti-base-color-dark);
--ti-crop-view-box-outline-color: var(--ti-base-color-brand-6);
--ti-crop-center-background: #eeeeee;
--ti-crop-face-background: var(--ti-base-color-light);
--ti-crop-line-background: var(--ti-base-color-brand-6);
--ti-crop-point-background: var(--ti-base-color-brand-6);
--ti-crop-opration-height: var(--ti-base-size-height-minor);
--ti-crop-opration-background: rgba(55, 55, 55, 0.3);
--ti-crop-opration-span-background: rgba(0, 0, 0, 0.5);
--ti-crop-opration-span-color: var(--ti-base-color-light);
--ti-crop-opration-span-hover-background: rgba(0, 0, 0, 0.8);
--ti-crop-modal-mask-background: rgba(55, 55, 55, 0.5);
--ti-crop-moda-close-background: rgba(0, 0, 0, 0.5);
--ti-crop-moda-close-icon-color: var(--ti-base-color-light);
--ti-crop-nopic-background: rgba(0, 0, 0, 0.3);
--ti-crop-nopic-center-color: rgba(255, 255, 255, 0.6);
}
.tiny-crop .cropper-container {
direction: ltr;
font-size: 0;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-crop .cropper-container img {
display: block;
height: 100%;
image-orientation: 0deg;
max-height: none !important;
max-width: none !important;
min-height: 0 !important;
min-width: 0 !important;
width: 100%;
}
.tiny-crop .cropper-canvas,
.tiny-crop .cropper-crop-box,
.tiny-crop .cropper-drag-box,
.tiny-crop .cropper-modal,
.tiny-crop .cropper-wrap-box {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.tiny-crop .cropper-canvas,
.tiny-crop .cropper-wrap-box {
overflow: hidden;
}
.tiny-crop .cropper-drag-box {
background-color: var(--ti-crop-drag-box-background);
opacity: 0;
}
.tiny-crop .cropper-modal {
background-color: var(--ti-crop-modal-background);
opacity: 0.5;
}
.tiny-crop .cropper-view-box {
display: block;
height: 100%;
outline-color: rgba(51, 153, 255, 0.75);
outline: 1px solid var(--ti-crop-view-box-outline-color);
overflow: hidden;
width: 100%;
}
.tiny-crop .cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
}
.tiny-crop .cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: 33.33333%;
left: 0;
top: 33.33333%;
width: 100%;
}
.tiny-crop .cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: 33.33333%;
top: 0;
width: 33.33333%;
}
.tiny-crop .cropper-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
}
.tiny-crop .cropper-center:after,
.tiny-crop .cropper-center:before {
background-color: var(--ti-crop-center-background);
content: ' ';
display: block;
position: absolute;
}
.tiny-crop .cropper-center:before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
.tiny-crop .cropper-center:after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
.tiny-crop .cropper-face,
.tiny-crop .cropper-line,
.tiny-crop .cropper-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
.tiny-crop .cropper-face {
background-color: var(--ti-crop-face-background);
left: 0;
top: 0;
}
.tiny-crop .cropper-line {
background-color: var(--ti-crop-line-background);
}
.tiny-crop .cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
.tiny-crop .cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
.tiny-crop .cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
.tiny-crop .cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
.tiny-crop .cropper-point {
background-color: var(--ti-crop-point-background);
height: 5px;
opacity: 0.75;
width: 5px;
}
.tiny-crop .cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.tiny-crop .cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.tiny-crop .cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.tiny-crop .cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.tiny-crop .cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.tiny-crop .cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.tiny-crop .cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.tiny-crop .cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
height: 20px;
opacity: 1;
right: -3px;
width: 20px;
}
@media (min-width: 768px) {
.tiny-crop .cropper-point.point-se {
height: 15px;
width: 15px;
}
}
@media (min-width: 992px) {
.tiny-crop .cropper-point.point-se {
height: 10px;
width: 10px;
}
}
@media (min-width: 1200px) {
.tiny-crop .cropper-point.point-se {
height: 5px;
opacity: 0.75;
width: 5px;
}
}
.tiny-crop .cropper-point.point-se:before {
background-color: var(--ti-crop-point-background);
bottom: -50%;
content: ' ';
display: block;
height: 200%;
opacity: 0;
position: absolute;
right: -50%;
width: 200%;
}
.tiny-crop .cropper-invisible {
opacity: 0;
}
.tiny-crop .cropper-bg {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}
.tiny-crop .cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.tiny-crop .cropper-hidden {
display: none !important;
}
.tiny-crop .cropper-move {
cursor: move;
}
.tiny-crop .cropper-crop {
cursor: crosshair;
}
.tiny-crop .cropper-disabled .cropper-drag-box,
.tiny-crop .cropper-disabled .cropper-face,
.tiny-crop .cropper-disabled .cropper-line,
.tiny-crop .cropper-disabled .cropper-point {
cursor: not-allowed;
}
.tiny-crop .img-container {
margin: auto;
overflow: hidden;
}
.tiny-crop .img-container > img {
max-width: 100%;
}
.tiny-crop .opration {
height: var(--ti-crop-opration-height);
line-height: var(--ti-crop-opration-height);
text-align: center;
background-color: var(--ti-crop-opration-background);
position: relative;
}
.tiny-crop .opration span {
width: 26px;
height: 26px;
margin: 0 2px;
display: inline-block;
color: var(--ti-crop-opration-span-color);
cursor: pointer;
border-radius: 50%;
background-color: var(--ti-crop-opration-span-background);
}
.tiny-crop .opration span:hover {
background-color: var(--ti-crop-opration-span-hover-background);
width: 28px;
height: 28px;
}
.tiny-crop .opration span.tiny-icon::before {
position: relative;
}
.tiny-crop .crop-modal-mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: var(--ti-crop-modal-mask-background);
height: 100%;
z-index: 1000;
}
.tiny-crop .crop-modal-warp {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.tiny-crop .crop-modal {
position: relative;
top: 100px;
margin: 0 auto 50px;
background: #fff;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
}
.tiny-crop .moda-close {
position: absolute;
top: -40px;
right: -40px;
width: 80px;
height: 80px;
cursor: pointer;
border-radius: 50%;
background-color: var(--ti-crop-moda-close-background);
}
.tiny-crop .moda-close .tiny-icon {
top: 45px;
left: 16px;
color: var(--ti-crop-moda-close-icon-color);
z-index: 9999999;
}
.tiny-crop .img-preview-box {
position: fixed;
top: 100px;
}
.tiny-crop .img-preview {
height: 9rem;
width: 16rem;
overflow: hidden;
}
@media (max-width: 768px) {
.tiny-crop .preview-lg {
display: none;
}
}
@media (max-width: 600px) {
.tiny-crop .preview-md {
display: none;
}
}
.tiny-crop .preview-lg {
height: 9rem;
width: 16rem;
margin-top: 4px;
}
.tiny-crop .preview-md {
height: 4.5rem;
width: 8rem;
margin-top: 4px;
}
.tiny-crop .preview-sm {
height: 2.25rem;
width: 4rem;
margin-top: 4px;
}
.tiny-crop .img-preview > img {
max-width: 100%;
}
.tiny-crop .nopic {
height: 200px;
text-align: center;
background: var(--ti-crop-nopic-background);
}
.tiny-crop .nopic-center {
position: relative;
font-size: 50px;
color: var(--ti-crop-nopic-center-color);
cursor: pointer;
top: 50px;
}
.tiny-crop input[type='file'] {
display: none;
}
.tiny-crop {
position: fixed;
height: 100%;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
top: 0;
left: 0;
z-index: 1000;
background: rgba(97, 97, 97, 0.5);
}
.tiny-crop__dialog-content__handle {
width: 652px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 26px;
margin: 10px 0 20px;
}
.tiny-crop__dialog-content__handle__button {
width: 268px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tiny-crop__dialog {
width: 652px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
z-index: 1001;
}
.tiny-crop__dialog-cropper {
width: 652px;
height: 300px;
overflow: hidden;
}
.tiny-crop__dialog-content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 10px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-crop__dialog-content__crop {
width: 314px;
height: 200px;
border: 1px solid #393939;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: gray;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-crop__dialog-content__crop img {
height: 100%;
width: 100%;
}
.tiny-croppreview {
position: fixed;
top: calc(100% - 50% - 150px);
left: calc(100% - 50% + 336px);
height: 300px;
width: 300px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 1002;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.iconButton {
border-radius: 50%;
background: #616161;
height: 26px;
width: 26px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.iconButton .iconButtonset {
fill: #fff;
height: 12px;
width: 12px;
}
.iconButton:hover {
background: #272727;
}
.croppreview {
height: 100%;
width: 100%;
}
.croppreviewb {
width: 214px;
height: 140px;
overflow: hidden;
background: #fff;
}
.croppreviewm {
width: 114px;
height: 80px;
overflow: hidden;
background: #fff;
}
.croppreviews {
width: 84px;
height: 60px;
overflow: hidden;
background: #fff;
}
.tiny-dept {
--ti-dept-label-font-size: var(--ti-common-font-size-base);
--ti-dept-label-color: var(--ti-base-color-info-normal);
--ti-dept-label-font-weight: var(--ti-common-font-weight-7);
--ti-dept-selected-info-color: var(--ti-base-color-brand-6);
--ti-dept-selected-info-background: #f1f1f1;
--ti-dept-selected-info-border-radius: var(--ti-base-radius-large);
}
.tiny-dept__search {
margin-bottom: 12px;
}
.tiny-dept__label,
.tiny-dept__text {
font-size: var(--ti-dept-label-font-size);
color: var(--ti-dept-label-color);
font-weight: var(--ti-dept-label-font-weight);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-dept__label {
text-align: right;
}
.tiny-dept__label.is-selected {
text-align: left;
margin-bottom: 4px;
}
.tiny-dept__selected-info {
color: var(--ti-dept-selected-info-color);
font-size: var(--ti-dept-label-font-size);
background: var(--ti-dept-selected-info-background);
padding: 5px;
border-radius: var(--ti-dept-selected-info-border-radius);
}
.tiny-dept__item {
margin-bottom: 12px;
}
.tiny-dept__item .tiny-dept__label.tiny-col,
.tiny-dept__search .tiny-dept__label.tiny-col {
line-height: 30px;
padding-left: 0;
padding-right: 8px;
}
.tiny-dept__item .tiny-dept__label.tiny-col + .tiny-col,
.tiny-dept__search .tiny-dept__label.tiny-col + .tiny-col {
padding: 0;
}
.tiny-dept .tiny-input__inner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-dept .tiny-input__icon {
vertical-align: middle;
fill: var(--ti-dept-selected-info-color);
}
.tiny-grid-modal__box {
--ti-detail-page-color: var(--ti-base-color-info-normal);
--ti-detail-page-font-size: var(--ti-common-font-size-base);
--ti-detail-page-header-font-size: var(--ti-common-font-size-1);
--ti-detail-page-header-border-color: var(--ti-base-color-border);
--ti-detail-page-header-seticon-color: var(--ti-base-color-brand-6);
--ti-detail-page-header-seticon-hover-color: var(--ti-base-color-brand-5);
--ti-detail-page-header-seticon-font-size: var(--ti-common-font-size-2);
--ti-detail-page-content-item-color: var(--ti-base-color-placeholder);
--ti-detail-dialog-header-background: #f1f1f1;
--ti-detail-dialog-content-item-hover-background: var(--ti-base-color-hover-background);
--ti-detail-dialog-active-background: #e9f4fd;
}
.tiny-detail-page {
width: 100%;
height: 700px;
font-size: var(--ti-detail-page-font-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-detail-page .tiny-detail-page__header {
width: 100%;
height: 40px;
color: var(--ti-detail-page-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid var(--ti-detail-page-header-border-color);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-detail-page .tiny-detail-page__header span {
font-size: var(--ti-detail-page-header-font-size);
font-weight: 700;
}
.tiny-detail-page .tiny-detail-page__header-icon {
line-height: 1;
cursor: pointer;
}
.tiny-detail-page .tiny-detail-page__header-icon .setIconStyle {
font-size: var(--ti-detail-page-header-seticon-font-size);
fill: var(--ti-detail-page-header-seticon-color);
}
.tiny-detail-page .tiny-detail-page__header-icon .setIconStyle:hover {
fill: var(--ti-detail-page-header-seticon-hover-color);
}
.tiny-detail-page .tiny-detail-page__content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-detail-page .tiny-detail-page__content-item {
width: 100%;
height: 40px;
line-height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-detail-page .tiny-detail-page__content-item .tiny-detail-page__content-item-span {
color: var(--ti-detail-page-content-item-color);
margin-right: 2px;
}
.tiny-detail-dialog {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 12px;
}
.tiny-detail-dialog .tiny-detail-dialog__header {
width: 100%;
height: 40px;
border-bottom: 1px solid var(--ti-detail-page-header-border-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: var(--ti-detail-dialog-header-background);
padding-left: 8px;
}
.tiny-detail-dialog .tiny-detail-dialog__header > span {
width: 50%;
font-weight: 700;
border-right: 1px solid var(--ti-detail-page-header-border-color);
}
.tiny-detail-dialog .tiny-detail-dialog__header-check {
width: 130px;
}
.tiny-detail-dialog .tiny-detail-dialog__header-check span {
font-weight: 700;
}
.tiny-detail-dialog .tiny-detail-dialog__content {
width: 100%;
min-height: 225px;
max-height: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow-y: auto;
border-bottom: 1px solid var(--ti-detail-page-header-border-color);
}
.tiny-detail-dialog .tiny-detail-dialog__content-item {
width: 100%;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-left: 8px;
}
.tiny-detail-dialog .tiny-detail-dialog__content-item:hover {
background: var(--ti-detail-dialog-content-item-hover-background);
}
.tiny-detail-dialog .tiny-detail-dialog__footer {
margin-top: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-detail-dialog .active {
background: var(--ti-detail-dialog-active-background);
}
.tiny-dialog-box {
--ti-dialogbox-background: var(--ti-base-color-light);
--ti-dialogbox-border-radius: var(--ti-common-border-radius-normal);
--ti-dialogbox-head-border-color: var(--ti-base-color-border);
--ti-dialogbox-head-font-color: var(--ti-base-color-placeholder);
--ti-dialogbox-head-padding: 32px 32px 28px;
--ti-dialogbox-head-title-font-size: var(--ti-common-font-size-3);
--ti-dialogbox-head-title-font-weight: var(--ti-common-font-weight-7);
--ti-dialogbox-head-title-color: var(--ti-base-color-info-normal);
--ti-dialogbox-head-font-icon-color: #c4c4c4;
--ti-dialogbox-head-font-icon-size: 14px;
--ti-dialogbox-head-font-icon-hover: var(--ti-base-color-brand-6);
--ti-dialogbox-head-body-color: #5a5e66;
--ti-dialogbox-head-body-font-size: var(--ti-common-font-size-1);
--ti-dialogbox-close-icon-color: var(--ti-base-color-common-5);
--ti-dialogbox-close-icon-color-hover: var(--ti-base-color-brand-6);
--ti-dialogbox-box-body-font-size: var(--ti-common-font-size-base);
--ti-dialogbox-box-body-color: var(--ti-base-color-common-5);
--ti-dialogbox-box-body-padding: 0 32px;
--ti-dialogbox-box-body-margin-bottom: 12px;
--ti-dialogbox-btn-background-color-hover: none;
--ti-dialogbox-box-shadow: var(--ti-common-shadow-4-down);
--ti-dialogbox-btn-position-top: 18px;
position: absolute;
background: var(--ti-dialogbox-background);
border: 1px solid transparent;
border-radius: var(--ti-dialogbox-border-radius);
-webkit-box-shadow: var(--ti-dialogbox-box-shadow);
box-shadow: var(--ti-dialogbox-box-shadow);
overflow: hidden;
}
.tiny-dialog-box__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
}
.tiny-dialog-box.is-fullscreen {
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.tiny-dialog-box.is-center .tiny-dialog-box__footer,
.tiny-dialog-box.is-center .tiny-dialog-box__header {
text-align: center;
}
.tiny-dialog-box .tiny-dialog-box__header {
padding: var(--ti-dialogbox-head-padding);
background: var(--ti-dialogbox-background);
font-weight: var(--ti-dialogbox-head-title-font-weight);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__title {
font-size: var(--ti-dialogbox-head-title-font-size);
color: var(--ti-dialogbox-head-title-color);
font-weight: var(--ti-dialogbox-head-title-font-weight);
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn {
border: none;
background: 0 0;
padding: 0;
line-height: 1;
position: absolute;
top: var(--ti-dialogbox-btn-position-top);
right: 20px;
cursor: pointer;
height: 32px;
width: 32px;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn:hover {
background-color: var(--ti-dialogbox-btn-background-color-hover);
border-radius: 4px;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn + .tiny-dialog-box__headerbtn {
margin-left: 8px;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn:focus {
outline: 0;
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__close {
fill: var(--ti-dialogbox-close-icon-color);
font-size: var(--ti-dialogbox-head-font-icon-size);
}
.tiny-dialog-box .tiny-dialog-box__header .tiny-dialog-box__headerbtn .tiny-dialog-box__close:hover {
fill: var(--ti-dialogbox-close-icon-color-hover);
}
.tiny-dialog-box .tiny-dialog-box__body {
text-align: left;
padding: var(--ti-dialogbox-box-body-padding);
margin-bottom: var(--ti-dialogbox-box-body-margin-bottom);
color: var(--ti-dialogbox-box-body-color);
font-size: var(--ti-dialogbox-box-body-font-size);
overflow: auto;
max-height: 65vh;
}
.tiny-dialog-box .tiny-dialog-box__body .tiny-upload {
overflow: hidden;
}
.tiny-dialog-box .tiny-dialog-box__body > span {
max-height: 120px;
overflow-y: auto;
}
.tiny-dialog-box .tiny-dialog-box__body .tiny-dept__search {
line-height: 30px;
}
.tiny-dialog-box.is-fullscreen .tiny-dialog-box__body {
max-height: calc(100vh - 94px);
}
.tiny-dialog-box .tiny-dialog-box__footer {
text-align: inherit;
padding: 28px 32px 32px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-dialog-box .tiny-dialog-box__footer .tiny-toolbar .tiny-button {
margin: 0 4px;
}
.tiny-dialog-box__scroll-lock {
overflow: hidden;
}
.v-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.3;
background: #000;
}
.v-modal-enter {
-webkit-animation: v-modal-in 0.2s ease;
animation: v-modal-in 0.2s ease;
}
.v-modal-leave {
-webkit-animation: v-modal-out 0.2s ease forwards;
animation: v-modal-out 0.2s ease forwards;
}
@-webkit-keyframes v-modal-in {
0% {
opacity: 0;
}
}
@keyframes v-modal-in {
0% {
opacity: 0;
}
}
@-webkit-keyframes v-modal-out {
100% {
opacity: 0;
}
}
@keyframes v-modal-out {
100% {
opacity: 0;
}
}
.dialog-slideRight-enter-active {
-webkit-animation: slideRight 0.5s ease-in forwards;
animation: slideRight 0.5s ease-in forwards;
}
.dialog-slideRight-leave-active {
-webkit-animation: slideRightout 0.5s ease-in forwards;
animation: slideRightout 0.5s ease-in forwards;
}
@-webkit-keyframes slideRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
50% {
opacity: 0.6;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideRight {
0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
50% {
opacity: 0.6;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideRightout {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
opacity: 0.6;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes slideRightout {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
opacity: 0.6;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.dialog-fade-enter-active {
-webkit-animation: dialog-fade-in 0.3s;
animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
-webkit-animation: dialog-fade-out 0.3s;
animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@media (max-width: 480px) {
.tiny-dialog-box {
width: 100% !important;
top: 0 !important;
left: 0 !important;
}
}
.tiny-drop-roles .user-icon {
float: right;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 10px;
}
.tiny-dropdown {
display: inline-block;
position: relative;
font-size: var(--ti-common-font-size-base);
}
.tiny-dropdown .tiny-button-group {
display: block;
}
.tiny-dropdown .tiny-button-group .tiny-button {
float: none;
}
.tiny-dropdown .tiny-dropdown__caret-button {
padding-left: 5px;
padding-right: 5px;
position: relative;
border-left: none;
min-width: 24px;
}
.tiny-dropdown .tiny-dropdown__caret-button:before {
content: '';
position: absolute;
display: block;
width: 1px;
top: 5px;
bottom: 5px;
left: 0;
background: #fff;
}
.tiny-dropdown .tiny-dropdown__caret-button.tiny-button--default:before {
background: #d9d9d9;
}
.tiny-dropdown .tiny-dropdown__caret-button.tiny-button--default:hover:before {
background-color: #1890ff;
}
.tiny-dropdown .tiny-dropdown__caret-button:hover:not(.is-disabled):before {
top: 0;
bottom: 0;
}
.tiny-dropdown .tiny-dropdown__caret-button svg {
padding-left: 0;
margin: 0 3px;
}
.tiny-dropdown .tiny-dropdown-selfdefine:focus:active,
.tiny-dropdown .tiny-dropdown-selfdefine:focus:not(.focusing) {
outline-width: 0;
}
.tiny-dropdown [disabled] {
cursor: not-allowed;
color: #bbb;
}
.tiny-dropdown-menu__item {
--ti-dropdown-menu-item-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-dropdown-menu-item-hover-color: var(--ti-base-color-brand-6);
--ti-dropdown-menu-item-active-bgcolor: var(--ti-base-color-brand-6);
--ti-dropdown-menu-item-active-color: var(--ti-base-color-white);
--ti-dropdown-menu-item-disabled-color: var(--ti-common-color-text-disabled);
--ti-dropdown-menu-item-color: #333;
--ti-dropdown-menu-item-height: 30px;
--ti-dropdown-menu-item-padding: 0 20px;
--ti-dropdown-menu-item-border-radius: 0;
list-style: none;
line-height: var(--ti-dropdown-menu-item-height);
padding: var(--ti-dropdown-menu-item-padding) !important;
margin: 0;
font-size: var(--ti-common-font-size-base);
color: var(--ti-dropdown-menu-item-color);
cursor: pointer;
outline: 0;
}
.tiny-dropdown-menu__item:focus,
.tiny-dropdown-menu__item:not(.is-disabled):hover {
background-color: var(--ti-dropdown-menu-item-hover-bgcolor);
color: var(--ti-dropdown-menu-item-hover-color);
border-radius: var(--ti-dropdown-menu-item-border-radius);
}
.tiny-dropdown-menu__item:focus svg,
.tiny-dropdown-menu__item:not(.is-disabled):hover svg {
fill: var(--ti-dropdown-menu-item-hover-color);
}
.tiny-dropdown-menu__item:not(.is-disabled):active {
background-color: var(--ti-dropdown-menu-item-active-bgcolor);
color: var(--ti-dropdown-menu-item-active-color);
border-radius: var(--ti-dropdown-menu-item-border-radius);
}
.tiny-dropdown-menu__item:not(.is-disabled):active svg {
fill: var(--ti-dropdown-menu-item-active-color);
}
.tiny-dropdown-menu__item svg {
margin-right: 5px;
margin-top: -2px;
}
.tiny-dropdown-menu__item.is-disabled {
cursor: default;
color: var(--ti-dropdown-menu-item-disabled-color);
pointer-events: none;
}
.tiny-dropdown-menu__item--divided {
position: relative;
margin-top: 6px;
border-top: 1px solid #e4e7ed;
}
.tiny-dropdown-menu__item--divided:before {
content: '';
height: 6px;
display: block;
margin: 0 -20px;
background-color: #fff;
}
.tiny-dropdown-menu {
--ti-dropdown-menu-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
--ti-dropdown-menu-gap: 0;
--ti-dropdown-menu-padding: 4px 0;
position: absolute;
top: 0;
left: 0;
z-index: 10;
padding: var(--ti-dropdown-menu-padding);
background-color: var(--ti-common-color-bg-white-normal);
border-radius: var(--ti-common-border-radius-normal);
-webkit-box-shadow: var(--ti-dropdown-menu-box-shadow);
box-shadow: var(--ti-dropdown-menu-box-shadow);
}
.tiny-dropdown-menu.tiny-popper .popper__arrow,
.tiny-dropdown-menu.tiny-popper .popper__arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tiny-dropdown-menu.tiny-popper .popper__arrow {
border-width: 6px;
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}
.tiny-dropdown-menu.tiny-popper .popper__arrow::after {
content: ' ';
border-width: 6px;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='top'] {
margin-bottom: var(--ti-dropdown-menu-gap);
}
.tiny-dropdown-menu.tiny-popper[x-placement^='top'] .popper__arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border-top-color: #d9d9d9;
border-bottom-width: 0;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='top'] .popper__arrow:after {
bottom: 1px;
margin-left: -6px;
border-top-color: #fff;
border-bottom-width: 0;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='bottom'] {
margin-top: var(--ti-dropdown-menu-gap);
}
.tiny-dropdown-menu.tiny-popper[x-placement^='bottom'] .popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #d9d9d9;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='bottom'] .popper__arrow:after {
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='right'] {
margin-left: 12px;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='right'] .popper__arrow {
top: 50%;
left: -6px;
margin-bottom: 3px;
border-right-color: #d9d9d9;
border-left-width: 0;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='right'] .popper__arrow:after {
bottom: -6px;
left: 1px;
border-right-color: #fff;
border-left-width: 0;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='left'] {
margin-right: 12px;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='left'] .popper__arrow {
top: 50%;
right: -6px;
margin-bottom: 3px;
border-right-width: 0;
border-left-color: #d9d9d9;
}
.tiny-dropdown-menu.tiny-popper[x-placement^='left'] .popper__arrow:after {
right: 1px;
bottom: -6px;
margin-left: -6px;
border-right-width: 0;
border-left-color: #fff;
}
.tiny-dropdown-menu--medium {
padding: 6px 0;
}
.tiny-dropdown-menu--medium .tiny-dropdown-menu__item {
line-height: 30px;
padding: 0 17px;
font-size: var(--ti-common-font-size-1);
}
.tiny-dropdown-menu--medium .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided {
margin-top: 6px;
}
.tiny-dropdown-menu--medium .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided:before {
height: 6px;
margin: 0 -17px;
}
.tiny-dropdown-menu--small {
padding: 6px 0;
}
.tiny-dropdown-menu--small .tiny-dropdown-menu__item {
line-height: 27px;
padding: 0 15px;
font-size: 13px;
}
.tiny-dropdown-menu--small .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided {
margin-top: 4px;
}
.tiny-dropdown-menu--small .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided:before {
height: 4px;
margin: 0 -15px;
}
.tiny-dropdown-menu--mini {
padding: 3px 0;
}
.tiny-dropdown-menu--mini .tiny-dropdown-menu__item {
line-height: 24px;
padding: 0 10px;
font-size: var(--ti-common-font-size-base);
}
.tiny-dropdown-menu--mini .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided {
margin-top: 3px;
}
.tiny-dropdown-menu--mini .tiny-dropdown-menu__item.tiny-dropdown-menu__item--divided:before {
height: 3px;
margin: 0 -10px;
}
.tiny-espace {
--ti-espace-font-size: 26px;
--ti-espace-color: var(--ti-base-color-brand-6);
--ti-espace-hover-color: var(--ti-base-color-brand-5);
}
.tiny-espace .item-call,
.tiny-espace .item-email,
.tiny-espace .item-talk {
margin: 0 8px 0 0;
line-height: 1;
}
.tiny-espace .item-call .tiny-svg,
.tiny-espace .item-email .tiny-svg,
.tiny-espace .item-talk .tiny-svg {
fill: var(--ti-espace-color);
font-size: var(--ti-espace-font-size);
}
.tiny-espace .item-call:hover .tiny-svg,
.tiny-espace .item-email:hover .tiny-svg,
.tiny-espace .item-talk:hover .tiny-svg {
fill: var(--ti-espace-hover-color);
}
.tiny-fall-menu {
--ti-fallmenu-menu-height: var(--ti-base-size-height-large);
--ti-fallmenu-background-normal: var(--ti-base-color-brand-6);
--ti-fallmenu-background-hover: var(--ti-base-color-brand-5);
--ti-fallmenu-icon-font-size: var(--ti-common-font-size-base);
--ti-fallmenu-slot-color: var(--ti-base-color-light);
--ti-fallmenu-title-font-size: var(--ti-common-font-size-2);
--ti-fallmenu-box-title-color: var(--ti-base-color-placeholder);
--ti-fallmenu-box-font-color: var(--ti-base-color-brand-6);
--ti-fallmenu-box-font-size: var(--ti-common-font-size-1);
--ti-fallmenu-box-title-height: var(--ti-base-size-height-small);
--ti-fallmenu-box-content-height: 26px;
--ti-fallmenu-box-hover-color: var(--ti-base-color-primary-active);
}
.tiny-fall-menu .tiny-fall-menu__wrap {
background: var(--ti-fallmenu-background-normal);
padding: 0 24px;
}
.tiny-fall-menu .tiny-fall-menu__nav {
height: var(--ti-fallmenu-menu-height);
margin: 0 auto;
position: relative;
}
.tiny-fall-menu .tiny-fall-menu__subnav {
overflow: hidden;
}
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left,
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right {
color: var(--ti-fallmenu-slot-color);
cursor: pointer;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: var(--ti-fallmenu-icon-font-size);
line-height: 1;
}
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left svg,
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right svg {
fill: #fff;
}
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left {
left: -12px;
}
.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right {
right: -12px;
}
.tiny-fall-menu .tiny-fall-menu__list {
position: relative;
min-width: 4000px;
left: 0;
-webkit-transition: left 0.4s;
transition: left 0.4s;
}
.tiny-fall-menu .tiny-fall-menu__list .fall-hide {
opacity: 0;
}
.tiny-fall-menu .tiny-fall-menu__list ul:after,
.tiny-fall-menu .tiny-fall-menu__list ul:before {
content: '';
display: table;
}
.tiny-fall-menu .tiny-fall-menu__list ul:after {
clear: both;
}
.tiny-fall-menu .tiny-fall-menu__list li {
float: left;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-fall-menu .tiny-fall-menu__list a {
float: left;
display: block;
width: auto;
padding: 0 12px;
height: var(--ti-fallmenu-menu-height);
text-align: center;
text-decoration: none;
font-weight: 400;
line-height: var(--ti-fallmenu-menu-height);
font-size: var(--ti-fallmenu-title-font-size);
color: var(--ti-fallmenu-slot-color);
}
.tiny-fall-menu .tiny-fall-menu__list a.now,
.tiny-fall-menu .tiny-fall-menu__list a:hover {
color: var(--ti-fallmenu-slot-color);
background: var(--ti-fallmenu-background-hover);
text-decoration: none;
}
.tiny-fall-menu .tiny-fall-menu__list a.now:before {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 0;
border-color: #fff transparent;
top: 34px;
left: 42%;
}
.tiny-fall-menu .tiny-fall-menu__box {
position: absolute;
left: 0;
top: var(--ti-fallmenu-menu-height);
width: 100%;
background: var(--ti-fallmenu-slot-color);
overflow: hidden;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity: 0;
}
.tiny-fall-menu .tiny-fall-menu__box .contbox {
overflow: hidden;
}
.tiny-fall-menu .tiny-fall-menu__box .cont {
min-width: 120px;
padding: 18px 20px;
}
.tiny-fall-menu .tiny-fall-menu__box .sublist li {
float: left;
width: 100%;
}
.tiny-fall-menu .tiny-fall-menu__box .sublist li h3.mcate-item-hd {
font-size: var(--ti-fallmenu-box-font-size);
border-bottom: 0 solid #ccc;
color: var(--ti-fallmenu-box-title-color);
font-weight: 400;
margin: 0;
}
.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd {
margin-top: 18px;
}
.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd a {
margin: 8px 0 0 0;
font-size: var(--ti-common-font-size-base);
color: var(--ti-fallmenu-box-font-color);
text-decoration: none;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd a:hover {
color: var(--ti-fallmenu-box-hover-color);
}
.tiny-fall-menu .tiny-fall-menu__box.active,
.tiny-fall-menu .tiny-fall-menu__box:hover {
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: 1px 1px 5px 1px #d9d9d9;
box-shadow: 1px 1px 5px 1px #d9d9d9;
opacity: 1;
}
@-webkit-keyframes leftArrow {
0% {
left: -17px;
}
50% {
left: -13px;
}
100% {
left: -17px;
}
}
@keyframes leftArrow {
0% {
left: -17px;
}
50% {
left: -13px;
}
100% {
left: -17px;
}
}
@-webkit-keyframes rightArrow {
0% {
right: -17px;
}
50% {
right: -13px;
}
100% {
right: -17px;
}
}
@keyframes rightArrow {
0% {
right: -17px;
}
50% {
right: -13px;
}
100% {
right: -17px;
}
}
.tiny-upload--thumb__head {
cursor: pointer;
color: #343434;
font-size: var(--ti-common-font-size-1);
}
.tiny-upload--thumb__head .thumb-icon {
margin-right: 8px;
fill: #999;
}
.tiny-upload--thumb__head span {
vertical-align: middle;
}
.tiny-upload--thumb__body .thumb-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-upload--thumb__body .thumb-item:not(:last-child) {
padding-bottom: 8px;
}
.tiny-upload--thumb__body .thumb-item-name {
padding: 4px 8px;
color: #333;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-upload--thumb__body .thumb-success-icon {
fill: #52c41a;
}
.tiny-upload--thumb__body .close-icon,
.tiny-upload--thumb__body .download-icon,
.tiny-upload--thumb__body .refres-icon {
fill: #7c7c7c;
cursor: pointer;
}
.tiny-upload--thumb__body .thumb-icon + .thumb-icon {
margin-left: 8px;
}
.tiny-float-bar {
--ti-floatbar-border-color: var(--ti-base-color-border);
--ti-floatbar-radius: var(--ti-base-radius-small);
--ti-floatbar-font-size: var(--ti-common-font-size-1);
--ti-floatbar-list-background: var(--ti-base-color-light);
--ti-floatbar-list-color: var(--ti-base-color-info-normal);
--ti-floatbar-list-hover-background: rgba(24, 144, 255, 0.06);
--ti-floatbar-list-hover-color: var(--ti-base-color-brand-6);
position: fixed;
top: 50%;
right: 10px;
z-index: 99999;
border: 1px solid var(--ti-floatbar-border-color);
-webkit-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
border-radius: var(--ti-floatbar-radius);
overflow: hidden;
background: var(--ti-floatbar-list-background);
}
.tiny-float-bar ul li {
display: block;
background: var(--ti-floatbar-list-background);
color: var(--ti-floatbar-list-color);
font-size: var(--ti-floatbar-font-size);
min-width: 80px;
min-height: 40px;
line-height: 40px;
text-align: center;
}
.tiny-float-bar ul li:hover {
background: var(--ti-floatbar-list-hover-background);
}
.tiny-float-bar ul li a {
width: 100%;
height: 100%;
color: var(--ti-floatbar-list-color);
cursor: pointer;
outline: 0;
}
.tiny-float-bar ul li a:focus,
.tiny-float-bar ul li a:hover {
color: var(--ti-floatbar-list-hover-color);
text-decoration: none;
}
.tiny-form {
--ti-form-item-margin-right: 10px;
width: 100%;
overflow: hidden;
}
.tiny-form div {
outline: 0;
}
.tiny-form--inline .tiny-form-item,
.tiny-form--inline .tiny-form-item__content {
display: inline-block;
vertical-align: top;
}
.tiny-form--inline .tiny-form-item {
margin-right: var(--ti-form-item-margin-right);
}
.tiny-form--inline .tiny-form-item__label {
float: none;
display: inline-block;
}
.tiny-form--inline .tiny-form--label-top .tiny-form-item__content {
display: block;
}
.tiny-form--label-left .tiny-form-item__label {
text-align: left;
}
.tiny-form--label-top .tiny-form-item__label {
float: none;
display: inline-block;
text-align: left;
line-height: 1;
padding: 0 0 8px;
}
.tiny-form--label-top .tiny-form-item {
margin-bottom: 16px;
}
.tiny-form--label-top .tiny-form {
margin-bottom: 16px;
}
.tiny-form--inline.tiny-form--label-top .tiny-form-item {
margin-bottom: 16px;
margin-right: 64px;
}
.tiny-form--inline.tiny-form--label-top .tiny-form-item__label {
display: block;
text-align: left;
}
.tiny-form__valid.tiny-tooltip.tiny-tooltip__popper {
padding: 7px 4px;
}
.tiny-form__valid.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='top'] .popper__arrow {
bottom: -4px;
}
.tiny-form__valid.tiny-tooltip.tiny-tooltip__popper[x-placement^='top'] {
margin-bottom: 6px;
}
.tiny-form__valid.tiny-tooltip.tiny-tooltip__popper[x-placement^='bottom'] {
margin-top: 6px;
}
.tiny-form-item {
--ti-form-item-small-line-height: 36px;
--ti-form-item-medium-line-height: 42px;
--ti-form-item-mini-line-height: 24px;
--ti-form-item-label-line-height: var(--ti-base-size-height-minor);
--ti-form-item-label-font-size: var(--ti-common-font-size-1);
--ti-form-item-label-color: var(--ti-base-color-info-normal);
--ti-form-item-error-font-size: var(--ti-common-font-size-base);
--ti-form-item-error-color: var(--ti-base-color-error-3);
--ti-form-item-error-bgcolor: var(--ti-base-color-error-1);
margin-bottom: 12px;
}
.tiny-form-item:after,
.tiny-form-item:before {
content: '';
display: table;
}
.tiny-form-item:after {
clear: both;
}
.tiny-form-item .tiny-form-item {
margin-bottom: 0;
}
.tiny-form-item.tiny-form-item--mini,
.tiny-form-item.tiny-form-item--small {
margin-bottom: 8px;
}
.tiny-form-item--medium .tiny-form-item__label {
height: var(--ti-form-item-medium-line-height);
line-height: var(--ti-form-item-medium-line-height);
}
.tiny-form-item--small .tiny-form-item__label {
height: var(--ti-form-item-small-line-height);
line-height: var(--ti-form-item-small-line-height);
}
.tiny-form-item--small .tiny-form-item__error {
padding-top: 2px;
}
.tiny-form-item--mini .tiny-form-item__label {
height: var(--ti-form-item-mini-line-height);
line-height: var(--ti-form-item-mini-line-height);
}
.tiny-form-item--medium .tiny-form-item__content .tiny-checkbox,
.tiny-form-item--medium .tiny-form-item__content .tiny-radio {
line-height: 42px;
}
.tiny-form-item--medium .tiny-form-item__content .tiny-input .tiny-input__inner {
height: 42px;
line-height: 42px;
}
.tiny-form-item--small .tiny-form-item__content .tiny-checkbox,
.tiny-form-item--small .tiny-form-item__content .tiny-radio {
line-height: 36px;
}
.tiny-form-item--small .tiny-form-item__content .tiny-input .tiny-input__inner {
height: 36px;
line-height: 36px;
}
.tiny-form-item--mini .tiny-form-item__content .tiny-checkbox,
.tiny-form-item--mini .tiny-form-item__content .tiny-radio {
line-height: 24px;
}
.tiny-form-item--mini .tiny-form-item__content .tiny-input .tiny-input__inner {
height: 24px;
line-height: 24px;
}
.tiny-form-item--mini .tiny-form-item__error {
padding-top: 1px;
}
.tiny-form-item__label-wrap {
float: left;
}
.tiny-form-item__label-wrap .tiny-form-item__label {
display: inline-block;
float: none;
}
.tiny-form-item__label {
text-align: right;
vertical-align: middle;
float: left;
font-size: var(--ti-form-item-label-font-size);
color: var(--ti-form-item-label-color);
height: var(--ti-form-item-label-line-height);
line-height: var(--ti-form-item-label-line-height);
padding-right: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.tiny-form-item__content {
position: relative;
font-size: var(--ti-form-item-label-font-size);
}
.tiny-form-item__content:after,
.tiny-form-item__content:before {
content: '';
display: table;
}
.tiny-form-item__content:after {
clear: both;
}
.tiny-form-item__content .tiny-input {
display: inline-block;
}
.tiny-form-item__content .tiny-input.tiny-range-editor.tiny-input__inner {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.tiny-form-item__content .tiny-input.tiny-input-group {
display: inline-table;
}
.tiny-form-item__content .tiny-input-group {
vertical-align: top;
}
.tiny-form-item__content .tiny-button + .tiny-button {
margin-left: 8px;
}
.tiny-form-item__content .tiny-checkbox,
.tiny-form-item__content .tiny-radio {
line-height: 30px;
}
.tiny-form-item__content .tiny-date-editor--daterange.tiny-input,
.tiny-form-item__content .tiny-date-editor--daterange.tiny-input__inner,
.tiny-form-item__content .tiny-date-editor--timerange.tiny-input,
.tiny-form-item__content .tiny-date-editor--timerange.tiny-input__inner,
.tiny-form-item__content .tiny-numeric {
width: 100%;
}
.tiny-form-item__error {
color: var(--ti-form-item-error-color);
font-size: var(--ti-form-item-error-font-size);
line-height: 1;
padding-top: 4px;
position: absolute;
top: 100%;
left: 0;
}
.tiny-form-item__error--inline {
position: relative;
top: auto;
left: auto;
display: inline-block;
margin-left: 10px;
}
.tiny-form-item.is-required:not(.is-no-asterisk) .tiny-form-item__label-wrap > .tiny-form-item__label:before,
.tiny-form-item.is-required:not(.is-no-asterisk) > .tiny-form-item__label:before {
content: '*';
color: var(--ti-form-item-error-color);
margin-right: 4px;
}
.tiny-form-item.is-error .tiny-input__inner,
.tiny-form-item.is-error .tiny-input__inner:focus,
.tiny-form-item.is-error .tiny-textarea__inner,
.tiny-form-item.is-error .tiny-textarea__inner:focus {
border-color: var(--ti-form-item-error-color);
background-color: var(--ti-form-item-error-bgcolor);
}
.tiny-form-item.is-error .tiny-input-group__append .tiny-input__inner,
.tiny-form-item.is-error .tiny-input-group__prepend .tiny-input__inner {
border-color: transparent;
}
.tiny-form-item.is-error .tiny-input__validateIcon {
color: var(--ti-form-item-error-color);
}
.tiny-form-item.is-error .tiny-numeric__input-inner,
.tiny-form-item.is-error .tiny-numeric__input-inner:focus {
border-color: #f5222d;
}
.tiny-form-item--feedback .tiny-input__validateIcon {
display: inline-block;
}
.tiny-form-item .tiny-input__validateIcon {
display: none;
}
.tiny-zoom-in-top-enter-active,
.tiny-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.tiny-zoom-in-top-enter,
.tiny-zoom-in-top-enter-from,
.tiny-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.tiny-gantt {
width: 100%;
height: 500px;
}
.container {
padding-right: 10px;
margin-right: auto;
padding-left: 10px;
margin-left: auto;
}
.container:after,
.container:before {
content: '';
display: table;
}
.container:after {
clear: both;
}
@media (min-width: 768px) {
.container {
width: 788px;
}
}
@media (min-width: 992px) {
.container {
width: 1012px;
}
}
@media (min-width: 1200px) {
.container {
width: 1220px;
}
}
@media (min-width: 1920px) {
.container {
width: 1940px;
}
}
.row {
margin-left: -10px;
margin-right: -10px;
}
.row:after,
.row:before {
content: '';
display: table;
}
.row:after {
clear: both;
}
.row h3 {
margin-left: 10px;
}
.tiny-filter .row {
overflow: hidden;
}
.tiny-filter .row .title {
margin-left: 10px;
}
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.col-xs-11 {
width: 91.66666667%;
}
.col-xs-10 {
width: 83.33333333%;
}
.col-xs-9 {
width: 75%;
}
.col-xs-8 {
width: 66.66666667%;
}
.col-xs-7 {
width: 58.33333333%;
}
.col-xs-6 {
width: 50%;
}
.col-xs-5 {
width: 41.66666667%;
}
.col-xs-4 {
width: 33.33333333%;
}
.col-xs-3 {
width: 25%;
}
.col-xs-2 {
width: 16.66666667%;
}
.col-xs-1 {
width: 8.33333333%;
}
.col-xs-push-12 {
left: 100%;
}
.col-xs-push-11 {
left: 91.66666667%;
}
.col-xs-push-10 {
left: 83.33333333%;
}
.col-xs-push-9 {
left: 75%;
}
.col-xs-push-8 {
left: 66.66666667%;
}
.col-xs-push-7 {
left: 58.33333333%;
}
.col-xs-push-6 {
left: 50%;
}
.col-xs-push-5 {
left: 41.66666667%;
}
.col-xs-push-4 {
left: 33.33333333%;
}
.col-xs-push-3 {
left: 25%;
}
.col-xs-push-2 {
left: 16.66666667%;
}
.col-xs-push-1 {
left: 8.33333333%;
}
.col-xs-push-0 {
left: 0;
}
.col-xs-pull-12 {
right: 100%;
}
.col-xs-pull-11 {
right: 91.66666667%;
}
.col-xs-pull-10 {
right: 83.33333333%;
}
.col-xs-pull-9 {
right: 75%;
}
.col-xs-pull-8 {
right: 66.66666667%;
}
.col-xs-pull-7 {
right: 58.33333333%;
}
.col-xs-pull-6 {
right: 50%;
}
.col-xs-pull-5 {
right: 41.66666667%;
}
.col-xs-pull-4 {
right: 33.33333333%;
}
.col-xs-pull-3 {
right: 25%;
}
.col-xs-pull-2 {
right: 16.66666667%;
}
.col-xs-pull-1 {
right: 8.33333333%;
}
.col-xs-pull-0 {
right: 0;
}
.col-xs-offset-12 {
margin-left: 100%;
}
.col-xs-offset-11 {
margin-left: 91.66666667%;
}
.col-xs-offset-10 {
margin-left: 83.33333333%;
}
.col-xs-offset-9 {
margin-left: 75%;
}
.col-xs-offset-8 {
margin-left: 66.66666667%;
}
.col-xs-offset-7 {
margin-left: 58.33333333%;
}
.col-xs-offset-6 {
margin-left: 50%;
}
.col-xs-offset-5 {
margin-left: 41.66666667%;
}
.col-xs-offset-4 {
margin-left: 33.33333333%;
}
.col-xs-offset-3 {
margin-left: 25%;
}
.col-xs-offset-2 {
margin-left: 16.66666667%;
}
.col-xs-offset-1 {
margin-left: 8.33333333%;
}
.col-xs-offset-0 {
margin-left: 0;
}
@media (min-width: 768px) {
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666667%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.66666667%;
}
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: 0;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: 0;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
}
@media (min-width: 992px) {
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
float: left;
}
.col-md-12 {
width: 100%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-9 {
width: 75%;
}
.col-md-8 {
width: 66.66666667%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-6 {
width: 50%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-3 {
width: 25%;
}
.col-md-2 {
width: 16.66666667%;
}
.col-md-1 {
width: 8.33333333%;
}
.col-md-push-12 {
left: 100%;
}
.col-md-push-11 {
left: 91.66666667%;
}
.col-md-push-10 {
left: 83.33333333%;
}
.col-md-push-9 {
left: 75%;
}
.col-md-push-8 {
left: 66.66666667%;
}
.col-md-push-7 {
left: 58.33333333%;
}
.col-md-push-6 {
left: 50%;
}
.col-md-push-5 {
left: 41.66666667%;
}
.col-md-push-4 {
left: 33.33333333%;
}
.col-md-push-3 {
left: 25%;
}
.col-md-push-2 {
left: 16.66666667%;
}
.col-md-push-1 {
left: 8.33333333%;
}
.col-md-push-0 {
left: 0;
}
.col-md-pull-12 {
right: 100%;
}
.col-md-pull-11 {
right: 91.66666667%;
}
.col-md-pull-10 {
right: 83.33333333%;
}
.col-md-pull-9 {
right: 75%;
}
.col-md-pull-8 {
right: 66.66666667%;
}
.col-md-pull-7 {
right: 58.33333333%;
}
.col-md-pull-6 {
right: 50%;
}
.col-md-pull-5 {
right: 41.66666667%;
}
.col-md-pull-4 {
right: 33.33333333%;
}
.col-md-pull-3 {
right: 25%;
}
.col-md-pull-2 {
right: 16.66666667%;
}
.col-md-pull-1 {
right: 8.33333333%;
}
.col-md-pull-0 {
right: 0;
}
.col-md-offset-12 {
margin-left: 100%;
}
.col-md-offset-11 {
margin-left: 91.66666667%;
}
.col-md-offset-10 {
margin-left: 83.33333333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-offset-8 {
margin-left: 66.66666667%;
}
.col-md-offset-7 {
margin-left: 58.33333333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-offset-5 {
margin-left: 41.66666667%;
}
.col-md-offset-4 {
margin-left: 33.33333333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-offset-2 {
margin-left: 16.66666667%;
}
.col-md-offset-1 {
margin-left: 8.33333333%;
}
.col-md-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1200px) {
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9 {
float: left;
}
.col-lg-12 {
width: 100%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-8 {
width: 66.66666667%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-2 {
width: 16.66666667%;
}
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-push-12 {
left: 100%;
}
.col-lg-push-11 {
left: 91.66666667%;
}
.col-lg-push-10 {
left: 83.33333333%;
}
.col-lg-push-9 {
left: 75%;
}
.col-lg-push-8 {
left: 66.66666667%;
}
.col-lg-push-7 {
left: 58.33333333%;
}
.col-lg-push-6 {
left: 50%;
}
.col-lg-push-5 {
left: 41.66666667%;
}
.col-lg-push-4 {
left: 33.33333333%;
}
.col-lg-push-3 {
left: 25%;
}
.col-lg-push-2 {
left: 16.66666667%;
}
.col-lg-push-1 {
left: 8.33333333%;
}
.col-lg-push-0 {
left: 0;
}
.col-lg-pull-12 {
right: 100%;
}
.col-lg-pull-11 {
right: 91.66666667%;
}
.col-lg-pull-10 {
right: 83.33333333%;
}
.col-lg-pull-9 {
right: 75%;
}
.col-lg-pull-8 {
right: 66.66666667%;
}
.col-lg-pull-7 {
right: 58.33333333%;
}
.col-lg-pull-6 {
right: 50%;
}
.col-lg-pull-5 {
right: 41.66666667%;
}
.col-lg-pull-4 {
right: 33.33333333%;
}
.col-lg-pull-3 {
right: 25%;
}
.col-lg-pull-2 {
right: 16.66666667%;
}
.col-lg-pull-1 {
right: 8.33333333%;
}
.col-lg-pull-0 {
right: 0;
}
.col-lg-offset-12 {
margin-left: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66666667%;
}
.col-lg-offset-10 {
margin-left: 83.33333333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66666667%;
}
.col-lg-offset-7 {
margin-left: 58.33333333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66666667%;
}
.col-lg-offset-4 {
margin-left: 33.33333333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66666667%;
}
.col-lg-offset-1 {
margin-left: 8.33333333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
}
@media (min-width: 1920px) {
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9 {
float: left;
}
.col-xl-12 {
width: 100%;
}
.col-xl-11 {
width: 91.66666667%;
}
.col-xl-10 {
width: 83.33333333%;
}
.col-xl-9 {
width: 75%;
}
.col-xl-8 {
width: 66.66666667%;
}
.col-xl-7 {
width: 58.33333333%;
}
.col-xl-6 {
width: 50%;
}
.col-xl-5 {
width: 41.66666667%;
}
.col-xl-4 {
width: 33.33333333%;
}
.col-xl-3 {
width: 25%;
}
.col-xl-2 {
width: 16.66666667%;
}
.col-xl-1 {
width: 8.33333333%;
}
.col-xl-push-12 {
left: 100%;
}
.col-xl-push-11 {
left: 91.66666667%;
}
.col-xl-push-10 {
left: 83.33333333%;
}
.col-xl-push-9 {
left: 75%;
}
.col-xl-push-8 {
left: 66.66666667%;
}
.col-xl-push-7 {
left: 58.33333333%;
}
.col-xl-push-6 {
left: 50%;
}
.col-xl-push-5 {
left: 41.66666667%;
}
.col-xl-push-4 {
left: 33.33333333%;
}
.col-xl-push-3 {
left: 25%;
}
.col-xl-push-2 {
left: 16.66666667%;
}
.col-xl-push-1 {
left: 8.33333333%;
}
.col-xl-push-0 {
left: 0;
}
.col-xl-pull-12 {
right: 100%;
}
.col-xl-pull-11 {
right: 91.66666667%;
}
.col-xl-pull-10 {
right: 83.33333333%;
}
.col-xl-pull-9 {
right: 75%;
}
.col-xl-pull-8 {
right: 66.66666667%;
}
.col-xl-pull-7 {
right: 58.33333333%;
}
.col-xl-pull-6 {
right: 50%;
}
.col-xl-pull-5 {
right: 41.66666667%;
}
.col-xl-pull-4 {
right: 33.33333333%;
}
.col-xl-pull-3 {
right: 25%;
}
.col-xl-pull-2 {
right: 16.66666667%;
}
.col-xl-pull-1 {
right: 8.33333333%;
}
.col-xl-pull-0 {
right: 0;
}
.col-xl-offset-12 {
margin-left: 100%;
}
.col-xl-offset-11 {
margin-left: 91.66666667%;
}
.col-xl-offset-10 {
margin-left: 83.33333333%;
}
.col-xl-offset-9 {
margin-left: 75%;
}
.col-xl-offset-8 {
margin-left: 66.66666667%;
}
.col-xl-offset-7 {
margin-left: 58.33333333%;
}
.col-xl-offset-6 {
margin-left: 50%;
}
.col-xl-offset-5 {
margin-left: 41.66666667%;
}
.col-xl-offset-4 {
margin-left: 33.33333333%;
}
.col-xl-offset-3 {
margin-left: 25%;
}
.col-xl-offset-2 {
margin-left: 16.66666667%;
}
.col-xl-offset-1 {
margin-left: 8.33333333%;
}
.col-xl-offset-0 {
margin-left: 0;
}
}
[class*='tiny-grid-icon__'] {
display: inline-block;
vertical-align: middle;
position: relative;
direction: ltr;
font-family: var(--ti-grid-font-family);
}
.tiny-grid-icon__zoomin {
width: 0.8em;
height: 0.8em;
margin: 0.1em;
border-width: 0.1em;
border-style: solid;
border-color: inherit;
}
.tiny-grid-icon__zoomout {
width: 1em;
height: 1em;
line-height: 1em;
position: relative;
}
.tiny-grid-icon__zoomout:before {
content: '';
position: absolute;
right: 0;
width: 0.7em;
border-style: solid;
top: 0;
border-width: 0.1em;
height: 0.7em;
border-color: inherit;
}
.tiny-grid-icon__zoomout:after {
content: '';
position: absolute;
bottom: 0.1em;
background-color: #fff;
left: 0.1em;
border-style: solid;
width: 0.7em;
border-width: 0.1em;
height: 0.7em;
border-color: inherit;
}
.tiny-grid-icon__menu {
width: 0.22em;
height: 0.22em;
-webkit-box-shadow: 0 -0.4em 0, -0.4em -0.4em 0, 0.4em -0.4em 0, 0 0 0 1em inset, -0.4em 0 0, 0.4em 0 0, 0 0.4em 0,
-0.4em 0.4em 0, 0.4em 0.4em 0;
box-shadow: 0 -0.4em 0, -0.4em -0.4em 0, 0.4em -0.4em 0, 0 0 0 1em inset, -0.4em 0 0, 0.4em 0 0, 0 0.4em 0,
-0.4em 0.4em 0, 0.4em 0.4em 0;
margin: 0.58em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tiny-grid-icon__caret-bottom,
.tiny-grid-icon__caret-left,
.tiny-grid-icon__caret-right,
.tiny-grid-icon__caret-top {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__caret-bottom:before,
.tiny-grid-icon__caret-left:before,
.tiny-grid-icon__caret-right:before,
.tiny-grid-icon__caret-top:before {
content: '';
left: 0;
bottom: 0.25em;
border-right-color: transparent;
position: absolute;
border-width: 0.5em;
border-style: solid;
border-top-color: transparent;
border-bottom-color: inherit;
border-left-color: transparent;
-webkit-transition: border 0.1s ease-in-out;
transition: border 0.1s ease-in-out;
}
.tiny-grid-icon__caret-bottom {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.tiny-grid-icon__caret-left {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.tiny-grid-icon__caret-right {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.tiny-grid-icon__arrow-top {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-grid-icon__arrow-top:before {
content: '';
position: absolute;
top: 0.38em;
left: 0.12em;
width: 0.5em;
height: 0.5em;
border-width: 0.1em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__arrow-bottom {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.tiny-grid-icon__arrow-bottom:before {
content: '';
position: absolute;
top: 0.38em;
left: 0.12em;
width: 0.5em;
height: 0.5em;
border-width: 0.1em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__arrow-left {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tiny-grid-icon__arrow-left:before {
content: '';
position: absolute;
top: 0.38em;
left: 0.12em;
width: 0.5em;
height: 0.5em;
border-width: 0.1em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__arrow-right {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tiny-grid-icon__arrow-right:before {
content: '';
position: absolute;
top: 0.38em;
left: 0.12em;
width: 0.5em;
height: 0.5em;
border-width: 0.1em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__d-arrow-top {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-grid-icon__d-arrow-top:before {
content: '';
position: absolute;
top: 0.24em;
left: 0.26em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-right-color: inherit;
border-top-color: inherit;
border-left-color: transparent;
border-bottom-color: transparent;
}
.tiny-grid-icon__d-arrow-top:after {
content: '';
position: absolute;
top: 0.42em;
left: 0.1em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__d-arrow-bottom {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.tiny-grid-icon__d-arrow-bottom:before {
content: '';
position: absolute;
top: 0.24em;
left: 0.26em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-right-color: inherit;
border-top-color: inherit;
border-left-color: transparent;
border-bottom-color: transparent;
}
.tiny-grid-icon__d-arrow-bottom:after {
content: '';
position: absolute;
top: 0.42em;
left: 0.1em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__d-arrow-left {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.tiny-grid-icon__d-arrow-left:before {
content: '';
position: absolute;
top: 0.24em;
left: 0.26em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-right-color: inherit;
border-top-color: inherit;
border-left-color: transparent;
border-bottom-color: transparent;
}
.tiny-grid-icon__d-arrow-left:after {
content: '';
position: absolute;
top: 0.42em;
left: 0.1em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__d-arrow-right {
width: 1em;
height: 1em;
line-height: 1em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tiny-grid-icon__d-arrow-right:before {
content: '';
position: absolute;
top: 0.24em;
left: 0.26em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-right-color: inherit;
border-top-color: inherit;
border-left-color: transparent;
border-bottom-color: transparent;
}
.tiny-grid-icon__d-arrow-right:after {
content: '';
position: absolute;
top: 0.42em;
left: 0.1em;
width: 0.5em;
height: 0.5em;
border-width: 0.08em;
border-style: solid;
border-top-color: inherit;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: inherit;
}
.tiny-grid-icon__funnel {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__funnel:before {
content: '';
border-top-color: inherit;
position: absolute;
border-bottom-color: transparent;
top: 0.1em;
border-right-color: transparent;
left: 0;
border-left-color: transparent;
border-width: 0.5em;
border-style: solid;
}
.tiny-grid-icon__funnel:after {
content: '';
position: absolute;
left: 0.4em;
top: 0.5em;
width: 0;
height: 0.4em;
border-width: 0 0.2em 0 0;
border-style: solid;
border-right-color: inherit;
}
.tiny-grid-icon__edit-outline {
width: 1em;
height: 1em;
line-height: 1em;
border-radius: 0.2em;
border-width: 0.1em;
border-style: solid;
border-color: inherit;
}
.tiny-grid-icon__edit-outline:before {
content: '';
position: absolute;
top: -0.1em;
right: -0.1em;
width: 0.4em;
height: 0.4em;
background-color: #fff;
}
.tiny-grid-icon__edit-outline:after {
content: '';
position: absolute;
left: 0.15em;
top: 0.12em;
width: 0.9em;
height: 0;
border-radius: 0.2em;
border-width: 0 0 0.15em 0;
border-style: solid;
border-color: inherit;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-grid-icon__more {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__more:before {
content: '...';
position: absolute;
top: 0;
left: 0.1em;
line-height: 0.5em;
font-weight: 700;
}
.tiny-grid-icon__close {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__close:after,
.tiny-grid-icon__close:before {
content: '';
position: absolute;
left: 0;
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-style: solid;
border-width: 0;
}
.tiny-grid-icon__close:before {
width: 1em;
border-bottom-width: 0.1em;
top: 0.45em;
}
.tiny-grid-icon__close:after {
height: 1em;
border-right-width: 0.1em;
left: 0.45em;
}
.tiny-grid-icon__refresh {
width: 1em;
height: 1em;
line-height: 1em;
border-style: solid;
border-width: 0.1em;
border-right-color: transparent !important;
border-radius: 50%;
border-left-color: transparent !important;
}
.tiny-grid-icon__refresh:after {
right: 50%;
bottom: 0;
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
}
.tiny-grid-icon__refresh:before {
left: 50%;
top: 0;
-webkit-transform: translateX(50%) rotate(-45deg);
transform: translateX(50%) rotate(-45deg);
}
.tiny-grid-icon__refresh:after,
.tiny-grid-icon__refresh:before {
content: '';
position: absolute;
border-left-color: transparent;
width: 0;
border-right-color: transparent;
height: 0;
border-bottom-color: transparent;
border-width: 0.25em;
border-style: solid;
}
.tiny-grid-icon__refresh.roll {
-webkit-animation: rollCircle 1s infinite linear;
animation: rollCircle 1s infinite linear;
}
.tiny-grid-icon__question {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__question:before {
content: '';
border-radius: 50%;
border-width: 0.5em;
border-style: solid;
border-color: inherit;
position: absolute;
top: 0;
left: 0;
}
.tiny-grid-icon__question:after {
position: absolute;
color: #fff;
color: var(--ti-grid-light-color, #fff);
font-size: 0.7em;
display: inline-block;
top: 0;
left: 0;
width: inherit;
height: inherit;
text-align: center;
font-weight: 700;
content: '?';
}
.tiny-grid-icon__info {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__info:before {
content: '';
border-radius: 50%;
border-width: 0.5em;
border-style: solid;
border-color: inherit;
position: absolute;
top: 0;
left: 0;
}
.tiny-grid-icon__info:after {
position: absolute;
color: #fff;
color: var(--ti-grid-light-color, #fff);
font-size: 0.7em;
display: inline-block;
top: 0;
left: 0;
width: inherit;
height: inherit;
text-align: center;
font-weight: 700;
content: '!';
-webkit-transform: rotate(180deg) translateY(1px);
transform: rotate(180deg) translateY(1px);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid-icon__info:after {
font-size: var(--ti-common-font-size-1);
}
}
@media screen and (-ms-ime-align: auto) {
.tiny-grid-icon__info:after {
font-size: var(--ti-common-font-size-1);
}
}
.tiny-grid-icon__warning {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__warning:before {
content: '';
border-radius: 50%;
border-width: 0.5em;
border-style: solid;
border-color: inherit;
position: absolute;
top: 0;
left: 0;
}
.tiny-grid-icon__warning:after {
position: absolute;
color: #fff;
color: var(--ti-grid-light-color, #fff);
font-size: 0.7em;
display: inline-block;
top: 0;
left: 0;
width: inherit;
height: inherit;
text-align: center;
font-weight: 700;
content: '!';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid-icon__warning:after {
font-size: var(--ti-common-font-size-1);
}
}
@media screen and (-ms-ime-align: auto) {
.tiny-grid-icon__warning:after {
font-size: var(--ti-common-font-size-1);
}
}
.tiny-grid-icon__success {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__success:before {
content: '';
border-radius: 50%;
border-width: 0.5em;
border-style: solid;
border-color: inherit;
position: absolute;
top: 0;
left: 0;
}
.tiny-grid-icon__success:after {
content: '';
position: absolute;
height: 0.55em;
width: 0.3em;
left: 0.35em;
top: 0.15em;
border-width: 0.1em;
border-style: solid;
border-color: #fff;
border-left: 0;
border-top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tiny-grid-icon__error {
width: 1em;
height: 1em;
line-height: 1em;
}
.tiny-grid-icon__error:before {
content: '';
border-radius: 50%;
border-width: 0.5em;
border-style: solid;
border-color: inherit;
position: absolute;
top: 0;
left: 0;
}
.tiny-grid-icon__error:after {
position: absolute;
color: #fff;
color: var(--ti-grid-light-color, #fff);
font-size: 0.7em;
display: inline-block;
top: 0;
left: 0;
width: inherit;
height: inherit;
text-align: center;
font-weight: 700;
content: '\2716';
}
@-webkit-keyframes rollCircle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rollCircle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.tiny-grid__animat .tiny-grid-filter__btn:after,
.tiny-grid__animat .tiny-grid-filter__btn:before,
.tiny-grid__animat .tiny-grid-sort__asc-btn:after,
.tiny-grid__animat .tiny-grid-sort__asc-btn:before,
.tiny-grid__animat .tiny-grid-sort__desc-btn:after,
.tiny-grid__animat .tiny-grid-sort__desc-btn:before {
-webkit-transition: border 0.1s ease-in-out;
transition: border 0.1s ease-in-out;
}
.tiny-grid__animat .tiny-grid__expand-icon {
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.tiny-grid__animat .tiny-grid-input__wrapper .tiny-grid-input {
-webkit-transition: border 0.1s ease-in-out;
transition: border 0.1s ease-in-out;
}
.tiny-grid__animat .tiny-grid-tree__node-btn {
-webkit-transition: -webkit-transform 0.1s ease-in-out;
transition: -webkit-transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out;
transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}
.tiny-grid__animat .tiny-grid-checkbox > input:checked + span,
.tiny-grid__animat .tiny-grid-radio > input:checked + span {
-webkit-transition: background-color 0.1s ease-in-out;
transition: background-color 0.1s ease-in-out;
}
.tiny-grid {
position: relative;
overflow: hidden;
font-size: var(--ti-grid-font-size);
color: var(--ti-grid-font-color);
font-family: var(--ti-grid-font-family);
background-color: var(--ti-grid-light-color);
}
.tiny-grid.show__head .tiny-grid__fixed-left-wrapper .tiny-grid__body-wrapper:before,
.tiny-grid.show__head .tiny-grid__fixed-right-wrapper .tiny-grid__body-wrapper:before {
display: none;
}
.tiny-grid.show__foot.scroll__x .tiny-grid__body-wrapper {
overflow-x: auto;
}
.tiny-grid.show__foot.scroll__y .tiny-grid__body-wrapper.fixed-left__wrapper,
.tiny-grid.show__foot.scroll__y .tiny-grid__body-wrapper.fixed-right__wrapper {
padding-bottom: 12px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid.show__foot.scroll__y .tiny-grid__body-wrapper.fixed-left__wrapper .tiny-grid__body,
.tiny-grid.show__foot.scroll__y .tiny-grid__body-wrapper.fixed-right__wrapper .tiny-grid__body {
padding-bottom: 17px;
}
}
.tiny-grid.column__highlight .tiny-grid-header__column:not(.col__index):hover {
background-color: var(--ti-grid-column-hover-background-color);
}
.tiny-grid.size__medium .tiny-grid-body__column:not(.col__ellipsis),
.tiny-grid.size__medium .tiny-grid-footer__column:not(.col__ellipsis),
.tiny-grid.size__medium .tiny-grid-header__column:not(.col__ellipsis) {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid.size__medium .tiny-grid-body__column,
.tiny-grid.size__medium .tiny-grid-footer__column {
height: var(--ti-grid-medium-column-height, 46px);
}
.tiny-grid.size__medium .tiny-grid-loading .tiny-grid__spinner {
width: 50px;
height: 50px;
}
.tiny-grid.size__medium .tiny-grid-default-input,
.tiny-grid.size__medium .tiny-grid-default-select,
.tiny-grid.size__medium .tiny-grid-default-textarea,
.tiny-grid.size__medium .tiny-grid-input__wrapper {
height: var(--ti-grid-medium-column-height, 46px);
}
.tiny-grid.size__medium .tiny-grid-header__column .tiny-grid-resizable {
height: var(--ti-grid-medium-column-height, 46px);
}
.tiny-grid.size__small {
font-size: var(--ti-grid-font-size);
}
.tiny-grid.size__small .tiny-grid-body__column:not(.col__ellipsis),
.tiny-grid.size__small .tiny-grid-footer__column:not(.col__ellipsis),
.tiny-grid.size__small .tiny-grid-header__column:not(.col__ellipsis) {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid.size__small .tiny-grid-body__column,
.tiny-grid.size__small .tiny-grid-footer__column {
height: var(--ti-grid-small-column-height, 30px);
}
.tiny-grid.size__small .tiny-grid-loading .tiny-grid__spinner {
width: 44px;
height: 44px;
}
.tiny-grid.size__small .tiny-grid-default-input,
.tiny-grid.size__small .tiny-grid-default-select,
.tiny-grid.size__small .tiny-grid-default-textarea,
.tiny-grid.size__small .tiny-grid-input__wrapper {
height: var(--ti-grid-small-column-height, 30px);
}
.tiny-grid.size__small .tiny-grid-header__column .tiny-grid-resizable {
height: var(--ti-grid-small-column-height, 30px);
}
.tiny-grid.size__mini {
font-size: var(--ti-grid-font-size);
}
.tiny-grid.size__mini .tiny-grid-body__column:not(.col__ellipsis),
.tiny-grid.size__mini .tiny-grid-footer__column:not(.col__ellipsis),
.tiny-grid.size__mini .tiny-grid-header__column:not(.col__ellipsis) {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid.size__mini .tiny-grid-body__column,
.tiny-grid.size__mini .tiny-grid-footer__column {
height: var(--ti-grid-mini-column-height, 26px);
}
.tiny-grid.size__mini .tiny-grid-loading .tiny-grid__spinner {
width: 38px;
height: 38px;
}
.tiny-grid.size__mini .tiny-grid-default-input,
.tiny-grid.size__mini .tiny-grid-default-select,
.tiny-grid.size__mini .tiny-grid-default-textarea,
.tiny-grid.size__mini .tiny-grid-input__wrapper {
height: var(--ti-grid-mini-column-height, 26px);
}
.tiny-grid.size__mini .tiny-grid-header__column .tiny-grid-resizable {
height: var(--ti-grid-mini-column-height, 26px);
}
.tiny-grid .fixed__hidden {
visibility: hidden;
}
.tiny-grid table {
border-spacing: 0;
border-collapse: separate;
table-layout: fixed;
}
.tiny-grid.tiny-grid__stripe .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
background-color: var(--ti-grid-row-striped-background-color);
}
.tiny-grid.tiny-grid__stripe .tiny-grid-body__row.row__selected:not(.row__hover):nth-child(2n) {
background-color: rgba(47, 143, 232, 0.1);
}
.tiny-grid.tiny-grid__stripe .tiny-grid-body__row.row__selected:not(.row__hover):nth-child(2n + 1) {
background-color: rgba(47, 143, 232, 0.15);
}
.tiny-grid.tiny-grid__stripe.mark-insert .tiny-grid-body__row.row__new {
background-color: #f2f5fc;
}
.tiny-grid.tiny-grid__border:after,
.tiny-grid.tiny-grid__border:before {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 0;
z-index: 1;
}
.tiny-grid.tiny-grid__border:before {
top: 0;
border-top: 1px solid var(--ti-grid-border-color);
}
.tiny-grid.tiny-grid__border:after {
bottom: 0;
border-bottom: 1px solid var(--ti-grid-border-color);
}
.tiny-grid.tiny-grid__border .tiny-grid__header {
border: 0;
border-spacing: 0;
border-collapse: separate;
}
.tiny-grid.tiny-grid__border .tiny-grid-body__column,
.tiny-grid.tiny-grid__border .tiny-grid-footer__column,
.tiny-grid.tiny-grid__border .tiny-grid-header__column {
background-image: -webkit-gradient(
linear,
right top,
left top,
from(var(--ti-grid-border-color)),
to(var(--ti-grid-border-color))
),
-webkit-gradient(linear, left top, left bottom, from(var(--ti-grid-border-color)), to(var(--ti-grid-border-color)));
background-image: linear-gradient(-90deg, var(--ti-grid-border-color), var(--ti-grid-border-color)),
linear-gradient(-180deg, var(--ti-grid-border-color), var(--ti-grid-border-color));
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 100% 0, 100% 100%;
border: none;
}
.tiny-grid.tiny-grid__border .tiny-grid__fixed-left-wrapper .tiny-grid-body__column {
border-right-color: var(--ti-grid-border-color);
}
.tiny-grid.tiny-grid__border .tiny-grid__body-wrapper,
.tiny-grid.tiny-grid__border .tiny-grid__fixed-left-body-wrapper,
.tiny-grid.tiny-grid__border .tiny-grid__fixed-right-body-wrapper {
border-bottom: none;
}
.tiny-grid.tiny-grid__border .tiny-grid__fixed-left-wrapper::before,
.tiny-grid.tiny-grid__border .tiny-grid__fixed-right-wrapper::before {
border-top-width: 1px;
}
.tiny-grid.tiny-grid__border .tiny-grid__border-line:after,
.tiny-grid.tiny-grid__border .tiny-grid__border-line:before {
content: '';
position: absolute;
top: 0;
width: 0;
height: 100%;
z-index: 1;
}
.tiny-grid.tiny-grid__border .tiny-grid__border-line:before {
left: 0;
border-left: 1px solid var(--ti-grid-border-color);
}
.tiny-grid.tiny-grid__border .tiny-grid__border-line:after {
right: 0;
border-right: 1px solid var(--ti-grid-border-color);
}
.tiny-grid.tiny-grid__checked {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tiny-grid.tiny-grid__checked .tiny-grid-body__column.col__index,
.tiny-grid.tiny-grid__checked .tiny-grid-header__column.col__index {
text-align: center;
cursor: default;
}
.tiny-grid.tiny-grid__checked .tiny-grid-header__column.col__index .tiny-grid-cell {
visibility: hidden;
}
.tiny-grid.tiny-grid__checked .tiny-grid-body__column.col__index {
background-color: var(--ti-grid-header-background-color);
}
.tiny-grid.tiny-grid__checked .tiny-grid-body__column.col__index.col__index-checked {
background-color: #dcdcdc;
}
.tiny-grid .tiny-grid__footer-wrapper,
.tiny-grid .tiny-grid__header-wrapper {
overflow-x: hidden;
overflow-y: hidden;
}
.tiny-grid .tiny-grid__footer-wrapper {
border: 1px solid var(--ti-grid-border-color);
border-bottom: none;
overflow: hidden !important;
}
.tiny-grid .tiny-grid__footer-wrapper .tiny-grid-footer__row .tiny-grid-cell.cell__summary {
font-weight: 700;
text-align: right;
}
.tiny-grid .tiny-grid__fixed-left-wrapper,
.tiny-grid .tiny-grid__fixed-right-wrapper {
width: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background-color: var(--ti-grid-light-color);
}
.tiny-grid .tiny-grid__fixed-left-wrapper:before,
.tiny-grid .tiny-grid__fixed-right-wrapper:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
border-top: 0 solid var(--ti-grid-border-color);
z-index: 1;
}
.tiny-grid .tiny-grid__fixed-left-wrapper .tiny-grid__body-wrapper,
.tiny-grid .tiny-grid__fixed-right-wrapper .tiny-grid__body-wrapper {
overflow-x: hidden;
border-bottom: none;
}
.tiny-grid .tiny-grid__fixed-left-wrapper {
left: 0;
width: 200px;
border-right: 0 solid var(--ti-grid-border-color);
}
.tiny-grid .tiny-grid__fixed-left-wrapper.scrolling__middle {
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
}
.tiny-grid .tiny-grid__fixed-right-wrapper {
right: 0;
}
.tiny-grid .tiny-grid__fixed-right-wrapper.scrolling__middle {
-webkit-box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.12);
}
.tiny-grid .tiny-grid__body-wrapper,
.tiny-grid .tiny-grid__footer-wrapper,
.tiny-grid .tiny-grid__header-wrapper {
position: relative;
}
.tiny-grid .tiny-grid__body-wrapper.fixed-left__wrapper,
.tiny-grid .tiny-grid__body-wrapper.fixed-right__wrapper,
.tiny-grid .tiny-grid__footer-wrapper.fixed-left__wrapper,
.tiny-grid .tiny-grid__footer-wrapper.fixed-right__wrapper,
.tiny-grid .tiny-grid__header-wrapper.fixed-left__wrapper,
.tiny-grid .tiny-grid__header-wrapper.fixed-right__wrapper {
position: absolute;
top: 0;
}
.tiny-grid .tiny-grid__body-wrapper.fixed-left__wrapper,
.tiny-grid .tiny-grid__footer-wrapper.fixed-left__wrapper,
.tiny-grid .tiny-grid__header-wrapper.fixed-left__wrapper {
left: 0;
}
.tiny-grid .tiny-grid__body-wrapper.fixed-right__wrapper,
.tiny-grid .tiny-grid__footer-wrapper.fixed-right__wrapper,
.tiny-grid .tiny-grid__header-wrapper.fixed-right__wrapper {
right: 0;
overflow-y: auto;
}
.tiny-grid .tiny-grid__header-wrapper.fixed-right__wrapper {
-ms-overflow-style: none;
}
.tiny-grid.tiny-grid-cell__resize * {
cursor: col-resize;
}
.tiny-grid .tiny-grid-body__row {
background-color: var(--ti-grid-row-odd-background-color);
}
.tiny-grid .tiny-grid-body__row.row__hover {
background-color: var(--ti-grid-row-hover-background-color);
}
.tiny-grid .tiny-grid-body__row.row__current {
background-color: var(--ti-grid-row-hover-background-color);
}
.tiny-grid .tiny-grid-body__column,
.tiny-grid .tiny-grid-footer__column,
.tiny-grid .tiny-grid-header__column {
text-align: left;
}
.tiny-grid .tiny-grid-body__column:not(.col__ellipsis),
.tiny-grid .tiny-grid-footer__column:not(.col__ellipsis),
.tiny-grid .tiny-grid-header__column:not(.col__ellipsis) {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid .tiny-grid-body__column.col__current,
.tiny-grid .tiny-grid-footer__column.col__current,
.tiny-grid .tiny-grid-header__column.col__current {
background-color: var(--ti-grid-column-current-background-color);
}
.tiny-grid .tiny-grid-body__column.col__center,
.tiny-grid .tiny-grid-footer__column.col__center,
.tiny-grid .tiny-grid-header__column.col__center {
text-align: center;
}
.tiny-grid .tiny-grid-body__column.col__right,
.tiny-grid .tiny-grid-footer__column.col__right,
.tiny-grid .tiny-grid-header__column.col__right {
text-align: right;
}
.tiny-grid .tiny-grid-body__column.col__ellipsis:not(.col__actived) .tiny-grid-cell,
.tiny-grid .tiny-grid-footer__column.col__ellipsis:not(.col__actived) .tiny-grid-cell,
.tiny-grid .tiny-grid-header__column.col__ellipsis:not(.col__actived) .tiny-grid-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-grid .tiny-grid-body__column.col__ellipsis:not(.col__actived) .tiny-grid-cell > .tiny-grid-checkbox,
.tiny-grid .tiny-grid-footer__column.col__ellipsis:not(.col__actived) .tiny-grid-cell > .tiny-grid-checkbox,
.tiny-grid .tiny-grid-header__column.col__ellipsis:not(.col__actived) .tiny-grid-cell > .tiny-grid-checkbox {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 0;
}
.tiny-grid .tiny-grid-header__column {
height: var(--ti-grid-header-column-height);
}
.tiny-grid .tiny-grid-body__column,
.tiny-grid .tiny-grid-footer__column {
height: var(--ti-grid-default-column-height, 42px);
border-bottom: 1px solid var(--ti-grid-border-color);
}
.tiny-grid .tiny-grid-body__row .tiny-grid-body__column.hideTypeClass .tiny-grid-cell,
.tiny-grid .tiny-grid-header__row .tiny-grid-header__column.hideTypeClass .tiny-grid-cell {
padding: 0;
}
.tiny-grid .tiny-grid-cell {
line-height: 120%;
white-space: normal;
-ms-word-break: break-all;
word-break: break-word;
}
.tiny-grid .tiny-grid-cell .tiny-grid-checkbox {
vertical-align: bottom;
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-boole,
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate {
width: 100%;
position: relative;
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-boole .icon-yes {
fill: var(--ti-grid-success-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-boole .icon-close {
fill: var(--ti-grid-error-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-chart {
opacity: 0.6;
background-color: var(--ti-grid-success-color);
height: 30px;
line-height: 30px;
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-chart.tiny-grid__chart-completed {
background-color: var(--ti-grid-success-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-chart.tiny-grid__chart-danger {
background-color: var(--ti-grid-error-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-chart.tiny-grid__chart-warning {
background-color: var(--ti-grid-warning-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-chart.tiny-grid__chart-normal {
background-color: var(--ti-grid-primary-color);
}
.tiny-grid .tiny-grid-cell .tiny-grid__data-rate .tiny-grid__rate-text {
position: absolute;
left: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tiny-grid .tiny-grid-body__x-space {
width: 100%;
height: 1px;
margin-bottom: -1px;
}
.tiny-grid .tiny-grid-body__y-space {
width: 0;
float: left;
}
.tiny-grid .tiny-grid-sort-wrapper {
position: absolute;
right: 4px;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
width: 20px;
height: 28px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid .tiny-grid-sort-wrapper {
top: 4px;
margin: 0;
}
}
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-icon__caret-top:before {
bottom: 0.1em;
}
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__asc-btn,
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__desc-btn {
height: 16px;
line-height: 16px;
display: block;
font-size: var(--ti-grid-header-icon-font-size);
fill: var(--ti-grid-column-icon-border-color);
cursor: pointer;
}
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__asc-btn:hover,
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__desc-btn:hover {
fill: var(--ti-grid-font-color);
}
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__asc-btn.sort__active,
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__desc-btn.sort__active {
fill: var(--ti-grid-primary-color);
}
.tiny-grid .tiny-grid-sort-wrapper .tiny-grid-sort__desc-btn {
margin-top: -2px;
}
.tiny-grid .tiny-grid__resizable-bar {
display: none;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
z-index: 4;
}
.tiny-grid .tiny-grid__resizable-bar:before {
content: '';
display: block;
height: 100%;
background-color: #d9dddf;
}
.tiny-grid .tiny-grid-tree__indent {
display: inline-block;
}
.tiny-grid .tiny-grid-tree-wrapper {
display: inline-block;
vertical-align: bottom;
width: 18px;
cursor: pointer;
}
.tiny-grid .tiny-grid-tree-wrapper.is__active .tiny-grid-tree__node-btn {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.tiny-grid .tiny-grid-tree-wrapper .tiny-grid-tree__node-btn {
font-size: var(--ti-grid-font-size);
color: #939599;
}
.tiny-grid .tiny-grid-tree-wrapper .tiny-grid-tree__node-btn:hover {
color: var(--ti-grid-font-color);
}
.tiny-grid .tiny-grid__expanded {
display: inline-block;
text-align: center;
cursor: pointer;
}
.tiny-grid .tiny-grid__expanded .tiny-grid__expand-icon {
display: inline-block;
width: 8px;
height: 8px;
border: 1px solid #666;
vertical-align: middle;
border-width: 1px 1px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: transparent;
}
.tiny-grid .tiny-grid__expanded.expand__active .tiny-grid__expand-icon {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.tiny-grid .tiny-grid-body__expanded-column {
border-bottom: 1px solid var(--ti-grid-border-color);
}
.tiny-grid .tiny-grid-body__expanded-cell {
padding: 20px;
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column {
height: 43px;
line-height: inherit;
}
.tiny-grid.tiny-grid-editable.size__medium .tiny-grid-body__column {
height: var(--ti-grid-medium-column-height, 46px);
}
.tiny-grid.tiny-grid-editable.size__small .tiny-grid-body__column {
height: var(--ti-grid-small-column-height, 30px);
}
.tiny-grid.tiny-grid-editable.size__mini .tiny-grid-body__column {
height: var(--ti-grid-mini-column-height, 26px);
}
.tiny-grid .tiny-grid-body__column.col__ellipsis,
.tiny-grid .tiny-grid-footer__column.col__ellipsis,
.tiny-grid .tiny-grid-header__column.col__ellipsis {
line-height: inherit;
}
.tiny-grid .tiny-grid-body__column.col__ellipsis .tiny-grid-cell__ellipsis,
.tiny-grid .tiny-grid-body__column.col__ellipsis .tiny-grid-cell__title,
.tiny-grid .tiny-grid-body__column.col__ellipsis .tiny-grid-cell__tooltip,
.tiny-grid .tiny-grid-footer__column.col__ellipsis .tiny-grid-cell__ellipsis,
.tiny-grid .tiny-grid-footer__column.col__ellipsis .tiny-grid-cell__title,
.tiny-grid .tiny-grid-footer__column.col__ellipsis .tiny-grid-cell__tooltip,
.tiny-grid .tiny-grid-header__column.col__ellipsis .tiny-grid-cell__ellipsis,
.tiny-grid .tiny-grid-header__column.col__ellipsis .tiny-grid-cell__title,
.tiny-grid .tiny-grid-header__column.col__ellipsis .tiny-grid-cell__tooltip {
padding: 0 8px;
}
.tiny-grid.size__medium .tiny-grid-body__column.col__ellipsis,
.tiny-grid.size__medium .tiny-grid-footer__column.col__ellipsis,
.tiny-grid.size__medium .tiny-grid-header__column.col__ellipsis {
height: var(--ti-grid-medium-column-height, 46px);
}
.tiny-grid.size__small .tiny-grid-body__column.col__ellipsis,
.tiny-grid.size__small .tiny-grid-footer__column.col__ellipsis,
.tiny-grid.size__small .tiny-grid-header__column.col__ellipsis {
height: var(--ti-grid-small-column-height, 30px);
}
.tiny-grid.size__mini .tiny-grid-body__column.col__ellipsis,
.tiny-grid.size__mini .tiny-grid-footer__column.col__ellipsis,
.tiny-grid.size__mini .tiny-grid-header__column.col__ellipsis {
height: var(--ti-grid-mini-column-height, 26px);
}
.tiny-grid.is__loading .tiny-grid__empty-block {
visibility: hidden;
}
.tiny-grid .tiny-grid__empty-block {
display: none;
opacity: 0;
height: 100%;
min-height: 60px;
padding: 60px 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.tiny-grid .tiny-grid__empty-block.is__visible {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
opacity: 1;
}
.tiny-grid .tiny-grid__empty-block.is__visible.is__center {
opacity: 0;
}
.tiny-grid .empty-center-block {
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
position: absolute;
width: 100%;
height: calc(100% - 60px);
}
.tiny-grid .empty-center-block .tiny-grid__empty-text {
width: 100%;
}
.tiny-grid .tiny-grid__empty-img {
width: 100%;
height: 100px;
margin: 0;
background: var(--ti-table-nodata-td-bg-img-url) 50% no-repeat;
}
.tiny-grid .tiny-grid__empty-text {
display: block;
margin-top: 8px;
width: 50%;
}
.tiny-grid .tiny-grid-body__column.col__selected:not(.col__checked) {
-webkit-box-shadow: inset 0 0 0 2px var(--ti-grid-primary-color);
box-shadow: inset 0 0 0 2px var(--ti-grid-primary-color);
}
.tiny-grid .tiny-grid-body__column.col__actived,
.tiny-grid .tiny-grid-body__column.col__dirty,
.tiny-grid .tiny-grid-body__column.col__selected {
position: relative;
}
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-cell__valid {
width: 320px;
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
pointer-events: none;
z-index: 9;
}
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-cell__valid .tiny-grid-cell__valid-msg {
display: inline-block;
border-radius: 4px;
padding: 8px 12px;
color: var(--ti-grid-light-color);
background-color: var(--ti-grid-error-color);
pointer-events: auto;
}
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-default-input,
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-default-select,
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-default-textarea {
border-color: var(--ti-grid-error-color);
}
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-grid-input__wrapper > .tiny-grid-input {
border-color: var(--ti-grid-error-color);
}
.tiny-grid .tiny-grid-body__column.col__valid-error .tiny-input__inner {
border-color: var(--ti-grid-error-color);
}
.tiny-grid .tiny-grid-body__row:first-child .tiny-grid-cell__valid {
bottom: auto;
top: calc(100% + 4px);
}
.tiny-grid .tiny-grid__body-wrapper.body__wrapper.is__scrollload {
overflow-y: hidden;
position: static;
}
.tiny-grid .is__scrollload .tiny-grid-body__y-space {
position: absolute;
right: 0;
width: 12px;
overflow-y: scroll;
}
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight .tiny-grid-body__column.col__actived {
-webkit-box-shadow: inset 0 0 0 2px var(--ti-grid-primary-color);
box-shadow: inset 0 0 0 2px var(--ti-grid-primary-color);
}
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight .tiny-grid-body__column.col__actived.col__valid-error {
-webkit-box-shadow: inset 0 0 0 2px var(--ti-grid-error-color);
box-shadow: inset 0 0 0 2px var(--ti-grid-error-color);
}
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight
.tiny-grid-body__column.col__actived
.tiny-grid-cell
.tiny-grid-default-input,
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight
.tiny-grid-body__column.col__actived
.tiny-grid-cell
.tiny-grid-default-textarea {
border: 0;
padding: 0;
}
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight
.tiny-grid-body__column.col__actived
.tiny-grid-cell
.tiny-grid-input__wrapper
.tiny-grid-input,
.tiny-grid.tiny-grid-editable.tiny-grid-cell__highlight
.tiny-grid-body__column.col__actived
.tiny-grid-cell
.tiny-grid-input__wrapper
.tiny-grid-textarea {
border: 0;
padding: 0;
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column.col__actived {
padding: var(--ti-table-td-padding, 2px 8px);
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column.col__ellipsis {
padding: 0;
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column.col__ellipsis.col__actived {
padding: 0;
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column.col__dirty:before {
content: '';
top: -5px;
left: -5px;
position: absolute;
border-width: 5px;
border-style: solid;
border-color: transparent var(--ti-grid-error-color) transparent transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.tiny-grid.tiny-grid-editable .tiny-grid-body__column.col__dirty.col__valid-success:before {
border-color: transparent var(--ti-grid-success-color) transparent transparent;
}
.tiny-grid.tiny-grid-editable .tiny-grid__body-wrapper .tiny-grid-editor .tiny-select-dropdown {
left: 0 !important;
}
.tiny-grid.tiny-fullscreen-full {
z-index: 1000;
position: fixed;
overflow: auto;
background: var(--ti-grid-light-color);
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 8px;
}
.tiny-grid .tiny-grid-default-input,
.tiny-grid .tiny-grid-default-select,
.tiny-grid .tiny-grid-default-textarea,
.tiny-grid__filter-wrapper .tiny-grid-default-input,
.tiny-grid__filter-wrapper .tiny-grid-default-select,
.tiny-grid__filter-wrapper .tiny-grid-default-textarea {
outline: 0;
padding: 0 8px;
height: 30px;
width: 100%;
color: var(--ti-grid-font-color);
border-radius: 2px;
border: 1px solid var(--ti-grid-border-color);
}
.tiny-grid .tiny-grid-default-input:focus,
.tiny-grid .tiny-grid-default-select:focus,
.tiny-grid .tiny-grid-default-textarea:focus,
.tiny-grid__filter-wrapper .tiny-grid-default-input:focus,
.tiny-grid__filter-wrapper .tiny-grid-default-select:focus,
.tiny-grid__filter-wrapper .tiny-grid-default-textarea:focus {
border: 1px solid var(--ti-grid-primary-color);
}
.tiny-grid .tiny-grid-editor,
.tiny-grid__filter-wrapper .tiny-grid-editor {
width: 100%;
height: 30px;
line-height: 30px;
color: var(--ti-grid-font-color);
}
.tiny-grid .tiny-grid-editor .tiny-input,
.tiny-grid__filter-wrapper .tiny-grid-editor .tiny-input {
width: 100%;
}
.tiny-grid .tiny-grid-editor .tiny-select,
.tiny-grid__filter-wrapper .tiny-grid-editor .tiny-select {
z-index: 1;
}
.tiny-grid .tiny-grid-default-textarea,
.tiny-grid__filter-wrapper .tiny-grid-default-textarea {
resize: none;
vertical-align: middle;
}
.tiny-grid .tiny-grid-input__wrapper,
.tiny-grid__filter-wrapper .tiny-grid-input__wrapper {
width: 100%;
display: block;
}
.tiny-grid .tiny-grid-input__wrapper .tiny-grid-input,
.tiny-grid .tiny-grid-input__wrapper .tiny-grid-textarea,
.tiny-grid__filter-wrapper .tiny-grid-input__wrapper .tiny-grid-input,
.tiny-grid__filter-wrapper .tiny-grid-input__wrapper .tiny-grid-textarea {
padding: 0 2px;
}
.tiny-grid .tiny-grid-input__wrapper .tiny-grid-textarea,
.tiny-grid__filter-wrapper .tiny-grid-input__wrapper .tiny-grid-textarea {
resize: none;
}
.tiny-grid__filter-wrapper .tiny-grid-default-input,
.tiny-grid__filter-wrapper .tiny-grid-default-textarea {
padding: 0 10px;
}
.tiny-grid-hidden-column {
display: none;
}
.tiny-grid .tiny-pager,
.tiny-grid + .tiny-pager {
padding-top: 24px;
}
.tiny-grid .tiny-grid__header th.col__gutter {
width: 0;
}
.tiny-grid .tiny-grid__header .tiny-grid-header__column.col__ellipsis.is__sortable .tiny-grid-cell {
padding-right: 28px;
}
.tiny-grid__header-wrapper {
background-color: var(--ti-grid-header-background-color);
}
.tiny-grid__header-wrapper .tiny-grid__repair {
position: absolute;
left: 0;
bottom: 0;
height: 0;
border-bottom: 1px solid var(--ti-grid-border-color);
}
.tiny-grid-header__column {
position: relative;
font-size: var(--ti-grid-font-size);
color: var(--ti-grid-font-color);
}
.tiny-grid-header__column.is__sortable .tiny-grid-cell {
padding-right: 20px;
}
.tiny-grid-header__column.is__editable .tiny-grid-cell {
padding-left: 20px;
}
.tiny-grid-header__column.col__title-checked {
background-color: #dcdcdc;
}
.tiny-grid-header__column.col__title-checked .tiny-grid-edit-icon.tiny-grid-icon__edit-outline:before {
background-color: #dcdcdc;
}
.tiny-grid-header__column.col__ellipsis .tiny-grid-edit-icon {
position: static;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tiny-grid-header__column.col__ellipsis.is__editable .tiny-grid-required-icon {
margin-left: 20px;
}
.tiny-grid-header__column.col__ellipsis.is__editable .tiny-grid-required-icon + .tiny-grid-edit-icon {
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tiny-grid-header__column .tiny-grid-required-icon {
display: inline-block;
color: var(--ti-grid-error-color);
line-height: 14px;
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-header__column .tiny-grid-required-icon:before {
content: '*';
width: 10px;
height: 10px;
display: block;
}
.tiny-grid-header__column .tiny-grid-edit-icon {
position: absolute;
left: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
font-size: var(--ti-common-font-size-2);
margin-right: 4px;
fill: var(--ti-grid-column-icon-border-color);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid-header__column .tiny-grid-edit-icon {
top: 18px;
}
}
.tiny-grid-header__column .tiny-grid-resizable,
.tiny-grid-header__column .tiny-grid-thead-partition {
position: absolute;
right: 0;
-webkit-transform: translateX(50%);
transform: translateX(50%);
bottom: 0;
top: 0;
margin: auto;
width: 14px;
height: 28px;
text-align: center;
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-grid-header__column .tiny-grid-resizable,
.tiny-grid-header__column .tiny-grid-thead-partition {
margin: 0;
}
}
.tiny-grid-header__column .tiny-grid-resizable.is__line:after,
.tiny-grid-header__column .tiny-grid-resizable.is__line:before,
.tiny-grid-header__column .tiny-grid-thead-partition.is__line:after,
.tiny-grid-header__column .tiny-grid-thead-partition.is__line:before {
content: '';
display: inline-block;
vertical-align: middle;
}
.tiny-grid-header__column .tiny-grid-resizable.is__line:before,
.tiny-grid-header__column .tiny-grid-thead-partition.is__line:before {
width: 1px;
height: 100%;
background-color: #fff;
}
.tiny-grid-header__column .tiny-grid-resizable.is__line:after,
.tiny-grid-header__column .tiny-grid-thead-partition.is__line:after {
width: 0;
height: 100%;
}
.tiny-grid-header__column .tiny-grid-resizable.is__line:hover:before,
.tiny-grid-header__column .tiny-grid-thead-partition.is__line:hover:before {
background-color: var(--ti-grid-icon-fill-active-hover);
}
.tiny-grid-header__column .tiny-grid-resizable {
cursor: col-resize;
}
.tiny-grid-header__column .tiny-grid-checkbox > input:not(:checked) + .tiny-grid-checkbox__icon:hover {
border-color: var(--ti-grid-border-color);
}
.tiny-grid-header__column .tiny-grid-checkbox.is__indeterminate > input + .tiny-grid-checkbox__icon:hover {
border-color: var(--ti-grid-primary-color);
}
.tiny-grid__fixed-left-wrapper .tiny-grid-header__column .tiny-grid-resizable {
right: 1px;
}
.tiny-grid__fixed-right-wrapper .tiny-grid-header__column .tiny-grid-resizable {
right: auto;
left: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tiny-grid__header .tiny-grid-cell__header-suffix {
position: relative;
min-height: 16px;
}
.tiny-grid__header .tiny-grid-cell__header-suffix .suffix-icon-1 {
position: absolute;
right: 12px;
}
.tiny-grid__header .tiny-grid-cell__header-suffix .suffix-icon-0 {
position: absolute;
right: 0;
}
.tiny-grid__header
.col__ellipsis.is__editable.is__sortable.is__filter
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip {
padding-right: 28px;
}
.tiny-grid__header
.col__ellipsis.is__editable.is__filter:not(.is__sortable)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip,
.tiny-grid__header
.col__ellipsis.is__editable.is__sortable:not(.is__filter)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip {
padding-right: 14px;
}
.tiny-grid__header
.col__ellipsis:not(.is__sortable):not(.is__filter)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip {
padding-right: 8px;
}
.tiny-grid__header
.col__ellipsis.is__sortable.is__filter:not(.is__editable)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip {
padding-right: 26px;
}
.tiny-grid__header
.col__ellipsis.is__filter:not(.is__sortable):not(.is__editable)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip,
.tiny-grid__header
.col__ellipsis.is__sortable:not(.is__filter):not(.is__editable)
.tiny-grid-cell__header-suffix.tiny-grid-cell__tooltip {
padding-right: 12px;
}
.tiny-grid__body-wrapper,
.tiny-grid__fixed-left-body-wrapper,
.tiny-grid__fixed-right-body-wrapper {
overflow-y: auto;
overflow-x: auto;
}
.tiny-grid__borders .tiny-grid-border-bottom,
.tiny-grid__borders .tiny-grid-border-left,
.tiny-grid__borders .tiny-grid-border-right,
.tiny-grid__borders .tiny-grid-border-top {
position: absolute;
background-color: var(--ti-grid-primary-color);
}
.tiny-grid__borders .tiny-grid-checked-borders .tiny-grid-border-bottom,
.tiny-grid__borders .tiny-grid-checked-borders .tiny-grid-border-top {
height: var(--ti-grid-column-checked-border-width);
}
.tiny-grid__borders .tiny-grid-checked-borders .tiny-grid-border-left,
.tiny-grid__borders .tiny-grid-checked-borders .tiny-grid-border-right {
width: var(--ti-grid-column-checked-border-width);
}
.tiny-grid__borders .tiny-grid-copyed-borders .tiny-grid-border-bottom,
.tiny-grid__borders .tiny-grid-copyed-borders .tiny-grid-border-top {
height: calc(var(--ti-grid-column-checked-border-width) + 1px);
}
.tiny-grid__borders .tiny-grid-copyed-borders .tiny-grid-border-left,
.tiny-grid__borders .tiny-grid-copyed-borders .tiny-grid-border-right {
width: calc(var(--ti-grid-column-checked-border-width) + 1px);
}
.tiny-grid__borders .tiny-grid-copyed-borders > span {
background: repeating-linear-gradient(
135deg,
transparent,
transparent 3px,
var(--ti-grid-primary-color) 3px,
var(--ti-grid-primary-color) 9px
);
-webkit-animation: shine 1s infinite linear;
animation: shine 1s infinite linear;
}
.tiny-grid-body__row .tiny-grid-body__column.col__checked {
position: relative;
background-color: var(--ti-grid-column-current-background-color);
border-right-color: var(--ti-grid-column-checked-border-color);
border-bottom-color: var(--ti-grid-column-checked-border-color);
}
.tiny-grid-body__row .tiny-grid-body__column.col__selected {
background-color: var(--ti-grid-light-color);
}
.tiny-grid-body__row .tiny-grid-body__column .tiny-numeric {
width: 100%;
}
@-webkit-keyframes shine {
0% {
background-position: -1px -1px;
}
100% {
background-position: -12px -12px;
}
}
@keyframes shine {
0% {
background-position: -1px -1px;
}
100% {
background-position: -12px -12px;
}
}
.tiny-grid__footer-wrapper {
margin-top: -1px;
background-color: var(--ti-grid-light-color);
}
.tiny-grid__footer-wrapper.body__wrapper {
overflow-x: auto;
}
.tiny-grid-filter-wrapper {
padding: 0 4px;
vertical-align: middle;
display: inline-block;
line-height: 15px;
}
.tiny-grid-filter-wrapper.is__active .tiny-grid-filter__btn {
fill: var(--ti-grid-primary-hover-color);
}
.tiny-grid-filter-wrapper .tiny-grid-filter__btn {
font-size: var(--ti-common-font-size-base);
fill: #999;
cursor: pointer;
vertical-align: middle;
}
.tiny-grid-filter-wrapper .tiny-grid-filter__btn:hover {
fill: var(--ti-grid-primary-hover-color);
}
.filter__active .tiny-grid-filter-wrapper .tiny-grid-filter__btn {
fill: var(--ti-grid-primary-color);
}
.tiny-grid__filter-wrapper {
display: none;
position: absolute;
min-width: 270px;
border-radius: var(--ti-grid-border-radius);
border: 1px solid var(--ti-grid-popup-border-color);
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
font-size: var(--ti-common-font-size-base);
z-index: 4000;
}
.tiny-grid__filter-wrapper.filter__active {
display: block;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body {
padding: 0;
list-style-type: none;
background-color: var(--ti-grid-light-color);
overflow-x: hidden;
overflow-y: auto;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel {
margin: 0;
width: 100%;
padding: 12px 8px 8px;
border-bottom: solid 1px var(--ti-grid-border-color);
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel.filter-panel__default {
padding: 8px 20px 4px;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel.filter-panel__clear,
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel.filter-panel__default {
padding-left: 0;
padding-right: 0;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__clear
.tiny-grid__filter-option,
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__default
.tiny-grid__filter-option {
cursor: pointer;
padding-left: 16px;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__clear
.tiny-grid__filter-option:hover,
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__default
.tiny-grid__filter-option:hover {
background-color: var(--ti-grid-primary-hover-color);
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__clear
.tiny-grid__filter-option:hover
a,
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__default
.tiny-grid__filter-option:hover
a {
color: var(--ti-grid-light-color);
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel.filter-panel__enum {
padding-top: 4px;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options {
max-height: 170px;
overflow: auto;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-empty {
text-align: center;
line-height: 30px;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-option {
height: 28px;
line-height: 28px;
padding: 0 8px;
max-width: 240px;
width: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-option.selected {
background-color: var(--ti-grid-header-background-color);
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-option
svg {
font-size: var(--ti-common-font-size-2);
fill: var(--ti-grid-normal-color);
margin-right: 8px;
outline: 0;
vertical-align: middle;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-option
svg:hover {
fill: var(--ti-grid-primary-hover-color);
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel.filter-panel__enum
.tiny-grid__filter-options
.tiny-grid__filter-option
svg.is-checked {
fill: var(--ti-grid-primary-color);
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel .tiny-grid__filter-option {
margin: 0;
height: 24px;
line-height: 24px;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .tiny-grid__filter-panel .tiny-grid__filter-option a {
color: var(--ti-grid-font-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios {
margin-bottom: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios
label.tiny-grid-radio {
width: auto;
display: inline-block;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios
label.tiny-grid-radio
.tiny-grid-radio__label {
color: var(--ti-grid-font-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: auto;
max-width: 80%;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios
label.tiny-grid-radio
+ .tiny-grid-radio {
margin-left: 0;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios
label.tiny-grid-radio:nth-child(2) {
text-align: center;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__radios
label.tiny-grid-radio:nth-child(3) {
text-align: right;
}
.tiny-grid__filter-wrapper
.tiny-grid__filter-body
.tiny-grid__filter-panel
.tiny-grid__filter-option.filter-option__btns {
margin: 8px 0 16px;
text-align: center;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .filter-option__input > input {
width: 100%;
border: solid 1px #bdbdbd;
border-radius: var(--ti-grid-border-radius);
outline: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: inherit;
height: 30px;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-body .filter-option__input > input:focus {
border: 1px solid var(--ti-grid-primary-color);
}
.tiny-grid__filter-wrapper .tiny-grid__filter-footer {
border-top: 1px solid var(--ti-grid-popup-border-color);
padding: 8px;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-footer button {
background-color: transparent;
padding: 0 3px;
border: 0;
font-size: 13px;
color: var(--ti-grid-font-color);
cursor: pointer;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-footer button:focus {
outline: 0;
}
.tiny-grid__filter-wrapper .tiny-grid__filter-footer button:hover {
color: var(--ti-grid-primary-color);
}
.tiny-grid__filter-wrapper .tiny-grid__filter-footer button.is__disabled {
color: var(--ti-grid-column-icon-border-color);
cursor: not-allowed;
}
.tiny-grid-loading {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
background-color: var(--ti-grid-loading-background-color);
}
.tiny-grid-loading .tiny-grid-loading__wrap {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tiny-grid-loading .tiny-grid-loading__wrap.tiny-loading__spinner {
margin-top: 0;
}
.tiny-grid-loading .tiny-grid-loading__round {
width: 46px;
height: 46px;
position: relative;
margin: 0 auto;
background: -webkit-gradient(linear, left bottom, left top, from(transparent), to(transparent));
background: linear-gradient(to top, transparent, transparent);
}
.tiny-grid-loading .tiny-grid-loading__round span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
background: linear-gradient(#000, #000);
position: absolute;
-webkit-animation: load 1.04s ease infinite;
animation: load 1.04s ease infinite;
}
@-webkit-keyframes load {
0% {
opacity: 10;
}
100% {
opacity: 0.1;
}
}
@keyframes load {
0% {
opacity: 10;
}
100% {
opacity: 0.1;
}
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(1) {
top: 68%;
left: 68%;
animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(2) {
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(3) {
top: 10%;
left: 68%;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(5) {
top: 10%;
left: 12%;
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(4) {
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(8) {
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(6) {
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.tiny-grid-loading .tiny-grid-loading__round span:nth-child(7) {
top: 68%;
left: 12%;
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
.tiny-grid .tiny-grid-body__row.row__pending {
color: var(--ti-grid-error-color);
text-decoration: line-through;
cursor: no-drop;
}
.tiny-grid .tiny-grid-body__row.row__pending .tiny-grid-body__column {
position: relative;
}
.tiny-grid .tiny-grid-body__row.row__pending .tiny-grid-body__column:after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 0;
border-bottom: 1px solid var(--ti-grid-error-color);
z-index: 1;
}
.tiny-grid.mark-insert .tiny-grid-body__row.row__new {
background-color: #f2f5fc;
}
.tiny-grid-menu__clild-wrapper,
.tiny-grid-menu__wrapper {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 5000;
font-size: var(--ti-grid-font-size);
background-color: var(--ti-grid-light-color);
border: 1px solid var(--ti-grid-popup-border-color);
-webkit-box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
padding: 0 1px;
color: var(--ti-grid-font-color);
font-family: var(--ti-grid-font-family);
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-grid-menu__clild-wrapper.show,
.tiny-grid-menu__wrapper.show {
display: block;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper {
margin: 0;
padding: 0;
list-style-type: none;
border-bottom: 1px solid var(--ti-grid-border-color);
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li {
position: relative;
margin: 1px 0;
border: 1px solid transparent;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li:last-child,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li:last-child,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li:last-child,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li:last-child {
border: 0;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li.link__active,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li.link__active,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li.link__active,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li.link__active {
color: #2b2b2b;
background-color: #c5c5c5;
border-color: #c5c5c5;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li.link__disabled .tiny-grid-menu__link,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li.link__disabled .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li.link__disabled .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li.link__disabled .tiny-grid-menu__link {
color: var(--ti-grid-font-color);
cursor: initial;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li.link__disabled.link__active,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li.link__disabled.link__active,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li.link__disabled.link__active,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li.link__disabled.link__active {
border-color: #c0c1c2;
background-color: #eee;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper li.link__disabled.link__active:hover,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper li.link__disabled.link__active:hover,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper li.link__disabled.link__active:hover,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper li.link__disabled.link__active:hover {
background-color: inherit;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link {
display: block;
padding: 0 30px;
min-width: 120px;
max-width: 180px;
line-height: 26px;
color: var(--ti-grid-font-color);
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix {
position: absolute;
top: 5px;
margin-right: 5px;
font-size: var(--ti-common-font-size-2);
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-prefix {
left: 5px;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-suffix {
right: 5px;
}
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild,
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__option-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild,
.tiny-grid-menu__wrapper
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild,
.tiny-grid-menu__wrapper
.tiny-grid-menu__option-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild {
top: 8px;
}
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild:before,
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__option-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild:before,
.tiny-grid-menu__wrapper
.tiny-grid-menu__clild-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild:before,
.tiny-grid-menu__wrapper
.tiny-grid-menu__option-wrapper
.tiny-grid-menu__link
.tiny-grid-menu__link-suffix.suffix__haschild:before {
position: absolute;
content: '';
border: 4px solid transparent;
border-left-color: #727272;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-content,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-content,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-content,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__link .tiny-grid-menu__link-content {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__clild-wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link,
.tiny-grid-menu__wrapper .tiny-grid-menu__option-wrapper .tiny-grid-menu__clild-wrapper .tiny-grid-menu__link {
max-width: 180px;
padding: 0 20px 0 30px;
}
.tiny-grid-menu__clild-wrapper {
display: none;
z-index: 5100;
top: 0;
left: 100%;
}
.tiny-grid-custom {
width: 100%;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head {
white-space: nowrap;
margin: 0;
overflow: hidden;
height: var(--ti-grid-custom-head-height);
width: 100%;
position: relative;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul {
height: var(--ti-grid-custom-head-height);
border-bottom: 1px solid var(--ti-grid-border-color);
list-style: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul li {
float: left;
margin-right: -1px;
cursor: pointer;
line-height: 28px;
padding: 0 20px;
color: var(--ti-grid-font-color);
min-width: 90px;
height: var(--ti-grid-custom-head-height);
line-height: var(--ti-grid-custom-head-height);
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-head ul li.tiny-grid-custom__tabs-selected {
color: var(--ti-grid-primary-color);
border-bottom: 3px solid var(--ti-grid-primary-color);
font-weight: 700;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body {
overflow-y: auto;
border: 0;
padding: 12px 0;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-grid-custom__alert {
position: relative;
border: 1px solid;
border-radius: var(--ti-grid-border-radius);
height: var(--ti-grid-custom-body-list-height);
line-height: var(--ti-grid-custom-body-list-height);
padding-left: 8px;
overflow: hidden;
background: var(--ti-grid-row-hover-background-color);
border-color: #91d5ff;
color: var(--ti-grid-font-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__alert
.tiny-svg {
font-size: var(--ti-common-font-size-3);
fill: var(--ti-grid-primary-color);
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-grid-custom__alert p {
display: inline-block;
line-height: 16px;
padding-left: 8px;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid-custom__tabs-body .tabs-body-item .tiny-grid-custom__setting {
border-bottom: 1px solid var(--ti-grid-border-color);
padding: 12px 0 24px;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item {
font-size: var(--ti-grid-font-size);
padding: 10px 8px;
overflow: hidden;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon {
font-size: 0;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.icon {
display: inline-block;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.icon:not(:last-child) {
margin-right: 12px;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg {
font-size: var(--ti-common-font-size-1);
fill: var(--ti-grid-normal-color);
cursor: pointer;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg:hover {
fill: var(--ti-grid-primary-disabled-color);
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.lock,
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.open,
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.sort {
fill: var(--ti-grid-primary-color);
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.lock:hover,
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.open:hover,
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.sort:hover {
fill: var(--ti-grid-primary-hover-color);
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting
.setting-item
.setting-icon
.tiny-svg.is-visible {
visibility: hidden;
pointer-events: none;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting.other-setting {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting.other-setting
.setting-item
span.label {
width: 26%;
display: inline-block;
text-align: right;
padding-right: 24px;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting.other-setting
.setting-item
span.selection {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting.other-setting
.setting-item
span.selection
.tiny-grid-radio {
margin-right: 10px;
margin-left: 0 !important;
}
.tiny-grid-custom
.tiny-grid-custom__tabs
.tiny-grid-custom__tabs-body
.tabs-body-item
.tiny-grid-custom__setting.other-setting
.setting-item
span.selection
.tiny-grid-radio__label {
height: 16px;
line-height: 18px;
}
.tiny-grid-custom .tiny-grid-custom__tabs .tiny-grid__body-wrapper {
max-height: 45vh;
border-bottom: 0;
}
.tiny-grid-custom .tiny-grid-custom__footer {
margin: 12px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-grid-custom-switch {
margin-top: 8px;
padding-bottom: 12px;
border-bottom: 1px solid #d9d9d9;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__title {
margin-bottom: 12px;
font-weight: 400;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__title .tiny-svg {
font-size: var(--ti-common-font-size-3);
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__title .tiny-alert__description {
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__label {
text-align: right;
position: relative;
top: 2px;
padding-right: 3px;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__content {
position: relative;
top: -4px;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn {
fill: #1890ff;
font-size: var(--ti-common-font-size-1);
cursor: pointer;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn:hover {
fill: #096dd9;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn--disabled,
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn--disabled:hover {
fill: #bfbfbf;
cursor: not-allowed;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn + .tiny-grid-custom-switch__icon-btn {
margin-left: 12px;
}
.tiny-grid-custom-switch .tiny-grid-custom-switch__icon-btn:first-child {
margin-left: 20px;
}
.tiny-grid-custom-switch__dialog-box .tiny-grid-custom-switch__confirm-btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 85%;
}
.tiny-grid-custom-switch__dialog-box .tiny-grid-custom-switch__del-tip {
text-align: center;
}
.tiny-grid-modal__wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: var(--ti-grid-font-size);
color: var(--ti-grid-font-color);
font-family: var(--ti-grid-font-family);
-webkit-transition: top 0.4s;
transition: top 0.4s;
}
.tiny-grid-modal__wrapper.active {
display: block;
}
.tiny-grid-modal__wrapper.is__visible.is__mask:before {
background-color: rgba(0, 0, 0, 0.5);
}
.tiny-grid-modal__wrapper.is__visible.type__message .tiny-grid-modal__box {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tiny-grid-modal__wrapper.is__visible:not(.type__message) .tiny-grid-modal__box:not(.is__drag) {
top: 15vh;
-webkit-transition: top 0.3s ease-in, opacity 0.4s ease-in;
transition: top 0.3s ease-in, opacity 0.4s ease-in;
}
.tiny-grid-modal__wrapper.is__visible .tiny-grid-modal__box {
opacity: 1;
visibility: visible;
}
.tiny-grid-modal__wrapper:not(.lock__view) {
pointer-events: none;
}
.tiny-grid-modal__wrapper.lock__scroll {
overflow: hidden;
}
.tiny-grid-modal__wrapper:not(.lock__scroll) {
overflow: auto;
}
.tiny-grid-modal__wrapper.is__mask:before,
.tiny-grid-modal__wrapper.lock__view:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: auto;
}
.tiny-grid-modal__wrapper.is__mask:before {
background-color: rgba(0, 0, 0, 0);
}
.tiny-grid-modal__wrapper.is__animat.is__mask:before {
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.tiny-grid-modal__wrapper.is__animat.type__message .tiny-grid-modal__box:not(.is__drag) {
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.tiny-grid-modal__wrapper.size__mini,
.tiny-grid-modal__wrapper.size__small {
font-size: var(--ti-grid-font-size);
}
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__box,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__box {
padding: 6px 0;
}
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__body,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__body {
padding: 4px 14px 10px 14px;
}
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__footer,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__footer {
padding: 4px 14px 8px 14px;
}
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__header,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__header {
font-size: var(--ti-grid-modal-header-font-size);
padding: 6px 30px 8px 14px;
}
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__close-btn,
.tiny-grid-modal__wrapper.size__mini .tiny-grid-modal__zoom-btn,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__close-btn,
.tiny-grid-modal__wrapper.size__small .tiny-grid-modal__zoom-btn {
font-size: var(--ti-grid-modal-small-btn-font-size);
top: 10px;
}
.tiny-grid-modal__wrapper.type__alert .tiny-grid-modal__body,
.tiny-grid-modal__wrapper.type__confirm .tiny-grid-modal__body,
.tiny-grid-modal__wrapper.type__message .tiny-grid-modal__body {
white-space: normal;
word-wrap: break-word;
word-break: break-all;
}
.tiny-grid-modal__wrapper.type__message {
text-align: center;
}
.tiny-grid-modal__wrapper.type__message .tiny-grid-modal__box {
display: inline-block;
padding: 2px 0;
margin-top: 0;
width: auto;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
.tiny-grid-modal__wrapper.type__message .tiny-grid-modal__box .tiny-grid-modal__body:after {
content: '';
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.tiny-grid-modal__wrapper.type__message .tiny-grid-modal__box .tiny-grid-modal__content {
max-width: 800px;
float: left;
}
.tiny-grid-modal__wrapper.type__message .tiny-grid-modal__status-wrapper {
font-size: var(--ti-grid-modal-small-btn-font-size);
padding-right: 10px;
}
.tiny-grid-modal__wrapper.type__alert .tiny-grid-modal__box,
.tiny-grid-modal__wrapper.type__confirm .tiny-grid-modal__box,
.tiny-grid-modal__wrapper.type__modal .tiny-grid-modal__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
left: 50%;
top: 0;
-webkit-box-shadow: var(--ti-grid-modal-box-shadow);
box-shadow: var(--ti-grid-modal-box-shadow);
border: 1px solid var(--ti-grid-modal-border-color);
}
.tiny-grid-modal__wrapper.type__alert .tiny-grid-modal__box .tiny-grid-modal__header,
.tiny-grid-modal__wrapper.type__confirm .tiny-grid-modal__box .tiny-grid-modal__header,
.tiny-grid-modal__wrapper.type__modal .tiny-grid-modal__box .tiny-grid-modal__header {
cursor: move;
}
.tiny-grid-modal__wrapper.type__modal .tiny-grid-modal__body {
overflow: auto;
}
.tiny-grid-modal__wrapper.type__modal .tiny-grid-modal__body .tiny-grid-modal__content {
overflow: auto;
}
.tiny-grid-modal__wrapper.type__alert .tiny-grid-modal__status-wrapper,
.tiny-grid-modal__wrapper.type__confirm .tiny-grid-modal__status-wrapper {
font-size: var(--ti-grid-modal-alert-font-size);
padding: 0 10px 0 2px;
}
.tiny-grid-modal__wrapper.status__info .tiny-grid-modal__status-wrapper {
color: var(--ti-grid-primary-color);
}
.tiny-grid-modal__wrapper.status__question .tiny-grid-modal__status-wrapper,
.tiny-grid-modal__wrapper.status__warning .tiny-grid-modal__status-wrapper {
color: var(--ti-grid-warning-color);
}
.tiny-grid-modal__wrapper.status__success .tiny-grid-modal__status-wrapper {
color: var(--ti-grid-success-color);
}
.tiny-grid-modal__wrapper.status__error .tiny-grid-modal__status-wrapper {
color: var(--ti-grid-error-color);
}
.tiny-grid-modal__wrapper.status__loading .tiny-grid-modal__status-wrapper {
color: var(--ti-grid-modal-loading-color);
}
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__box .tiny-grid-modal__header {
cursor: default;
}
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .sb-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .sest-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .st-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .swlb-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .swst-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .wl-resize,
.tiny-grid-modal__wrapper.is__maximize .tiny-grid-modal__resize .wr-resize {
display: none;
}
.tiny-grid-modal__box {
width: 420px;
background-color: var(--ti-grid-modal-box-background-color);
border: 1px solid var(--ti-grid-modal-box-border-color);
font-size: var(--ti-grid-modal-header-font-size);
text-align: left;
pointer-events: auto;
visibility: hidden;
opacity: 0;
}
.tiny-grid-modal__box.is__drag {
cursor: move;
}
.tiny-grid-modal__box.is__drag .tiny-grid-modal__body:after,
.tiny-grid-modal__box.is__drag .tiny-grid-modal__footer:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tiny-grid-modal__box.is__drag .tiny-grid-modal__body {
overflow: hidden;
}
.tiny-grid-modal__box.is__drag .tiny-grid-modal__body .tiny-grid-modal__content {
overflow: hidden;
}
.tiny-grid-modal__status-wrapper {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-grid-modal__status-icon {
font-style: normal;
}
.tiny-grid-modal__content {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.tiny-grid-modal__body,
.tiny-grid-modal__footer,
.tiny-grid-modal__header {
position: relative;
}
.tiny-grid-modal__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: 24px;
}
.tiny-grid-modal__header {
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: var(--ti-grid-modal-header-font-size);
font-weight: 700;
padding: 9px 40px 10px 24px;
border-bottom: 1px solid var(--ti-grid-border-color);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tiny-grid-modal__close-btn,
.tiny-grid-modal__zoom-btn {
font-size: var(--ti-grid-modal-header-font-size);
position: absolute;
right: 24px;
top: 13px;
z-index: 1;
color: var(--ti-grid-modal-btn-color);
fill: var(--ti-grid-modal-btn-color);
cursor: pointer;
}
.tiny-grid-modal__close-btn:hover,
.tiny-grid-modal__zoom-btn:hover {
color: var(--ti-grid-primary-color);
fill: var(--ti-grid-primary-color);
}
.tiny-grid-modal__zoom-btn {
right: 44px;
border-color: #c0c4cc;
}
.tiny-grid-modal__zoom-btn:hover {
border-color: #606266;
}
.tiny-grid-modal__footer {
-ms-flex-negative: 0;
flex-shrink: 0;
text-align: center;
padding: 0 24px 24px;
}
.tiny-grid-modal__resize .sb-resize,
.tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__resize .sest-resize,
.tiny-grid-modal__resize .st-resize,
.tiny-grid-modal__resize .swlb-resize,
.tiny-grid-modal__resize .swst-resize,
.tiny-grid-modal__resize .wl-resize,
.tiny-grid-modal__resize .wr-resize {
position: absolute;
z-index: 100;
}
.tiny-grid-modal__resize .wl-resize,
.tiny-grid-modal__resize .wr-resize {
width: 8px;
height: 100%;
top: 0;
cursor: w-resize;
}
.tiny-grid-modal__resize .wl-resize {
left: -3px;
}
.tiny-grid-modal__resize .wr-resize {
right: -3px;
}
.tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__resize .sest-resize,
.tiny-grid-modal__resize .swlb-resize,
.tiny-grid-modal__resize .swst-resize {
width: 10px;
height: 10px;
z-index: 101;
}
.tiny-grid-modal__resize .sest-resize,
.tiny-grid-modal__resize .swst-resize {
top: -8px;
}
.tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__resize .swlb-resize {
bottom: -8px;
}
.tiny-grid-modal__resize .sest-resize,
.tiny-grid-modal__resize .swlb-resize {
cursor: sw-resize;
}
.tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__resize .swst-resize {
cursor: se-resize;
}
.tiny-grid-modal__resize .swlb-resize,
.tiny-grid-modal__resize .swst-resize {
left: -8px;
}
.tiny-grid-modal__resize .selb-resize,
.tiny-grid-modal__resize .sest-resize {
right: -8px;
}
.tiny-grid-modal__resize .sb-resize,
.tiny-grid-modal__resize .st-resize {
width: 100%;
height: 8px;
left: 0;
cursor: s-resize;
}
.tiny-grid-modal__resize .st-resize {
top: -3px;
}
.tiny-grid-modal__resize .sb-resize {
bottom: -3px;
}
.tiny-grid-toolbar {
padding: 12px 0;
}
.tiny-grid-toolbar:after {
content: '';
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.tiny-grid-toolbar svg {
fill: var(--ti-grid-primary-color);
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-toolbar.is__loading {
position: relative;
}
.tiny-grid-toolbar.is__loading:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: var(--ti-grid-loading-background-color);
}
.tiny-grid-toolbar.size__mini,
.tiny-grid-toolbar.size__small {
padding: 8px 0;
}
.tiny-grid-toolbar.size__medium .tiny-grid-custom__setting-btn,
.tiny-grid-toolbar.size__medium .tiny-grid-refresh__btn {
font-size: 17px;
}
.tiny-grid-toolbar.size__small .tiny-grid-custom__setting-btn,
.tiny-grid-toolbar.size__small .tiny-grid-refresh__btn {
font-size: 15px;
}
.tiny-grid-toolbar.size__mini .tiny-grid-custom__setting-btn,
.tiny-grid-toolbar.size__mini .tiny-grid-refresh__btn {
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-toolbar .tiny-grid-custom__wrapper,
.tiny-grid-toolbar .tiny-grid-fullscreen__wrapper,
.tiny-grid-toolbar .tiny-grid-refresh__wrapper,
.tiny-grid-toolbar .tiny-grid-tools__wrapper {
float: right;
width: 30px;
height: 30px;
line-height: 30px;
border: solid 1px var(--ti-grid-border-color);
border-radius: 3px;
text-align: center;
margin: 0 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-grid-toolbar .tiny-grid-custom__wrapper {
position: relative;
}
.tiny-grid-toolbar .tiny-grid-custom__wrapper.is__active .tiny-grid-custom__setting-btn {
border-color: var(--ti-grid-primary-color);
}
.tiny-grid-toolbar .tiny-grid-custom__wrapper.is__active .tiny-grid-custom__option-wrapper {
display: block;
}
.tiny-grid-toolbar .tiny-grid-custom__setting-btn,
.tiny-grid-toolbar .tiny-grid-fullscreen__btn,
.tiny-grid-toolbar .tiny-grid-refresh__btn {
font-size: var(--ti-common-font-size-2);
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tiny-grid-toolbar .tiny-grid-custom__setting-btn:hover,
.tiny-grid-toolbar .tiny-grid-fullscreen__btn:hover,
.tiny-grid-toolbar .tiny-grid-refresh__btn:hover {
border-color: var(--ti-grid-primary-color);
}
.tiny-grid-toolbar .tiny-grid-custom__setting-btn > i,
.tiny-grid-toolbar .tiny-grid-fullscreen__btn > i,
.tiny-grid-toolbar .tiny-grid-refresh__btn > i {
display: block;
color: var(--ti-grid-primary-color);
line-height: 28px;
}
.tiny-grid-toolbar .tiny-grid-custom__option-wrapper {
display: none;
position: absolute;
right: 0;
text-align: left;
background-color: var(--ti-grid-light-color);
z-index: 19;
max-height: 210px;
overflow: auto;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.tiny-grid-toolbar .tiny-grid-custom__option-wrapper .tiny-grid-custom__option {
padding: 5px 5px;
border: 1px solid var(--ti-grid-border-color);
border-radius: 2px;
font-weight: 700;
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-toolbar .tiny-grid-custom__option-wrapper .tiny-grid-custom__option > .tiny-grid-checkbox {
display: block;
padding: 5px;
margin: 0;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-grid__select-toolbar {
position: absolute;
background-color: var(--ti-base-color-light);
}
.tiny-grid__select-toolbar .tiny-grid-toolbar {
padding: 2px 0 2px 6px;
}
.tiny-grid-checkbox {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.tiny-grid-checkbox.size__mini,
.tiny-grid-checkbox.size__small {
font-size: var(--ti-grid-font-size);
}
.tiny-grid-checkbox.size__mini > input + .tiny-grid-checkbox__icon,
.tiny-grid-checkbox.size__small > input + .tiny-grid-checkbox__icon {
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-checkbox + .tiny-grid-checkbox {
margin-left: 10px;
}
.tiny-grid-checkbox > input {
display: none;
}
.tiny-grid-checkbox > input + .tiny-grid-checkbox__icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
border: 1px solid var(--ti-grid-border-color);
background-color: #fff;
vertical-align: middle;
border-radius: var(--ti-grid-border-radius);
font-size: var(--ti-common-font-size-2);
}
.tiny-grid-checkbox > input + .tiny-grid-checkbox__icon:before {
content: '';
position: absolute;
}
.tiny-grid-checkbox > input + .tiny-grid-checkbox__icon:hover {
border-color: var(--ti-grid-primary-hover-color);
}
.tiny-grid-checkbox > input + .tiny-grid-checkbox__icon + .tiny-grid-checkbox__label {
display: none;
}
.tiny-grid-checkbox > input + .tiny-grid-checkbox__icon > svg.icon-checked-sur {
display: none;
}
.tiny-grid-checkbox > input:checked + .tiny-grid-checkbox__icon {
border: none;
}
.tiny-grid-checkbox > input:checked + .tiny-grid-checkbox__icon + .tiny-grid-checkbox__label {
color: var(--ti-grid-primary-color);
}
.tiny-grid-checkbox > input:checked + .tiny-grid-checkbox__icon > svg {
display: block;
fill: var(--ti-grid-primary-color);
}
.tiny-grid-checkbox.is__indeterminate > input:not(:checked) + .tiny-grid-checkbox__icon {
border: none;
}
.tiny-grid-checkbox.is__indeterminate > input:not(:checked) + .tiny-grid-checkbox__icon > svg {
fill: var(--ti-grid-primary-color);
}
.tiny-grid-checkbox.is__disabled {
cursor: not-allowed;
}
.tiny-grid-checkbox.is__disabled > input + .tiny-grid-checkbox__icon {
border-color: var(--ti-grid-border-color);
background-color: var(--ti-grid-input-disabled-color);
}
.tiny-grid-checkbox.is__disabled > input + .tiny-grid-checkbox__icon:before {
border-color: var(--ti-grid-input-disabled-color);
}
.tiny-grid-checkbox.is__disabled > input + .tiny-grid-checkbox__icon + .tiny-grid-checkbox__label {
color: var(--ti-grid-border-color);
}
.tiny-grid-checkbox.is__disabled > input:checked + .tiny-grid-checkbox__icon {
border-color: var(--ti-grid-disabled-color);
background-color: var(--ti-grid-disabled-color);
}
.tiny-grid-checkbox .tiny-grid-checkbox__label {
padding-left: 5px;
vertical-align: middle;
display: inline-block;
}
.tiny-grid-radio {
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
.tiny-grid-radio.size__mini,
.tiny-grid-radio.size__small {
font-size: var(--ti-grid-font-size);
}
.tiny-grid-radio.size__mini > input + .tiny-grid-radio__icon,
.tiny-grid-radio.size__small > input + .tiny-grid-radio__icon {
font-size: var(--ti-common-font-size-1);
}
.tiny-grid-radio.is__disabled {
cursor: not-allowed;
}
.tiny-grid-radio.is__disabled > input + .tiny-grid-radio__icon {
border-color: var(--ti-grid-border-color);
background-color: var(--ti-grid-input-disabled-color);
}
.tiny-grid-radio.is__disabled > input + .tiny-grid-radio__icon:before {
border-color: var(--ti-grid-input-disabled-color);
background-color: var(--ti-grid-input-disabled-color);
}
.tiny-grid-radio.is__disabled > input + .tiny-grid-radio__icon + .tiny-grid-radio__label {
color: var(--ti-grid-border-color);
}
.tiny-grid-radio.is__disabled > input + .tiny-grid-radio__icon:hover {
border-color: var(--ti-grid-border-color);
}
.tiny-grid-radio.is__disabled > input:checked + .tiny-grid-radio__icon {
border-color: var(--ti-grid-disabled-color);
background-color: var(--ti-grid-disabled-color);
}
.tiny-grid-radio > input {
display: none;
}
.tiny-grid-radio > input + .tiny-grid-radio__icon {
position: relative;
display: inline-block;
width: 1em;
height: 1em;
border: 1px solid var(--ti-grid-border-color);
background-color: #fff;
vertical-align: middle;
border-radius: 50%;
font-size: var(--ti-common-font-size-2);
}
.tiny-grid-radio > input + .tiny-grid-radio__icon:hover {
border-color: var(--ti-grid-primary-hover-color);
}
.tiny-grid-radio > input:checked + .tiny-grid-radio__icon {
background-color: var(--ti-grid-primary-color);
border-color: var(--ti-grid-primary-color);
}
.tiny-grid-radio > input:checked + .tiny-grid-radio__icon:before {
content: '';
position: absolute;
border-width: 0.15em;
border-style: solid;
border-color: #fff;
background-color: #fff;
border-radius: 50%;
height: 0.4em;
width: 0.4em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tiny-grid-radio > input:checked + .tiny-grid-radio__icon + .tiny-grid-radio__label {
color: var(--ti-grid-primary-color);
}
.tiny-grid-radio .tiny-grid-radio__label {
padding-left: 5px;
vertical-align: middle;
display: inline-block;
}
.tiny-grid-radio + .tiny-grid-radio {
margin-left: 10px;
}
.tiny-grid-input__wrapper {
font-size: var(--ti-common-font-size-base);
font-size: var(--ti-grid-font-size, 12px);
display: inline-block;
}
.tiny-grid-input__wrapper.type__textarea {
width: 100%;
}
.tiny-grid-input__wrapper .tiny-grid-input,
.tiny-grid-input__wrapper .tiny-grid-textarea {
border-radius: 4px;
outline: 0;
padding: 4px 8px;
width: 100%;
color: var(--ti-grid-font-color);
border: 1px solid var(--ti-grid-border-color);
background-color: #fff;
}
.tiny-grid-input__wrapper .tiny-grid-input:focus,
.tiny-grid-input__wrapper .tiny-grid-textarea:focus {
border: 1px solid var(--ti-grid-primary-color);
}
.tiny-grid-input__wrapper .tiny-grid-input[disabled],
.tiny-grid-input__wrapper .tiny-grid-textarea[disabled] {
cursor: not-allowed;
background-color: var(--ti-grid-input-disabled-color);
}
.tiny-grid-input__wrapper .tiny-grid-input {
height: 32px;
}
.tiny-grid-input__wrapper .tiny-grid-textarea {
height: 100%;
}
.tiny-grid-input__wrapper.size__medium .tiny-grid-input {
height: 36px;
}
.tiny-grid-input__wrapper.size__small .tiny-grid-input {
height: 32px;
}
.tiny-grid-input__wrapper.size__mini .tiny-grid-input {
height: 28px;
}
.tiny-grid-button {
position: relative;
text-align: center;
background-color: var(--ti-grid-light-color);
outline: 0;
font-size: var(--ti-grid-font-size);
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.tiny-grid-button.is__disabled {
color: var(--ti-grid-primary-disabled-color);
}
.tiny-grid-button.is__disabled:not(.is__loading) {
cursor: no-drop;
}
.tiny-grid-button:not(.is__disabled) {
color: var(--ti-grid-primary-color);
cursor: pointer;
}
.tiny-grid-button.is__loading:before {
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border-radius: inherit;
background-color: hsla(0, 0%, 100%, 0.35);
pointer-events: none;
}
.tiny-grid-button.type__text {
text-decoration: none;
border: 0;
background-color: transparent;
}
.tiny-grid-button.type__text:not(.is__disabled):hover {
color: var(--ti-grid-primary-hover-color);
}
.tiny-grid-button.type__button {
padding: 0 12px;
line-height: 28px;
border: 1px solid var(--ti-grid-border-color);
border-radius: 2px;
}
.tiny-grid-button.type__button.theme__primary {
color: var(--ti-grid-light-color);
border-color: var(--ti-grid-primary-color);
background-color: var(--ti-grid-primary-color);
}
.tiny-grid-button.type__button.theme__primary:not(.is__disabled):hover {
color: var(--ti-grid-light-color);
background-color: var(--ti-grid-primary-hover-color);
border-color: var(--ti-grid-primary-hover-color);
}
.tiny-grid-button.type__button.theme__primary:not(.is__disabled):active {
color: var(--ti-grid-light-color);
background-color: var(--ti-grid-primary-active-color);
border-color: var(--ti-grid-primary-active-color);
}
.tiny-grid-button.type__button:not(.theme__primary):not(.is__disabled):hover {
color: var(--ti-grid-primary-color);
border-color: var(--ti-grid-primary-color);
}
.tiny-grid-button.type__button:not(.theme__primary):not(.is__disabled):active {
color: var(--ti-grid-primary-active-color);
border-color: var(--ti-grid-primary-active-color);
}
.tiny-grid-button.type__button.size__medium {
padding: 0 14px;
line-height: 28px;
}
.tiny-grid-button.type__button.size__small {
padding: 0 12px;
line-height: 26px;
}
.tiny-grid-button.type__button.size__mini {
padding: 0 10px;
line-height: 24px;
}
.tiny-grid-button.size__mini,
.tiny-grid-button.size__small {
font-size: var(--ti-common-font-size-base);
}
.tiny-grid-button + .tiny-grid-button,
.tiny-grid-button + .tiny-grid-button__dropdown {
margin-left: 8px;
}
.tiny-grid-button + .tiny-grid-button.size__medium,
.tiny-grid-button + .tiny-grid-button__dropdown.size__medium {
margin-left: 8px;
}
.tiny-grid-button + .tiny-grid-button.size__small,
.tiny-grid-button + .tiny-grid-button__dropdown.size__small {
margin-left: 6px;
}
.tiny-grid-button + .tiny-grid-button.size__mini,
.tiny-grid-button + .tiny-grid-button__dropdown.size__mini {
margin-left: 4px;
}
.tiny-grid-button__loading-icon {
margin-right: 5px;
}
.tiny-grid-button__dropdown,
.tiny-grid-button__wrapper {
display: inline-block;
}
.tiny-grid-button__dropdown {
position: relative;
}
.tiny-grid-button__dropdown + .tiny-grid-button,
.tiny-grid-button__dropdown + .tiny-grid-button__dropdown {
margin-left: 8px;
}
.tiny-grid-button__dropdown + .tiny-grid-button.size__medium,
.tiny-grid-button__dropdown + .tiny-grid-button__dropdown.size__medium {
margin-left: 8px;
}
.tiny-grid-button__dropdown + .tiny-grid-button.size__small,
.tiny-grid-button__dropdown + .tiny-grid-button__dropdown.size__small {
margin-left: 6px;
}
.tiny-grid-button__dropdown + .tiny-grid-button.size__mini,
.tiny-grid-button__dropdown + .tiny-grid-button__dropdown.size__mini {
margin-left: 4px;
}
.tiny-grid-button__dropdown.is__active > .tiny-grid-button.theme__primary {
color: var(--ti-grid-light-color);
background-color: var(--ti-grid-primary-hover-color);
border-color: var(--ti-grid-primary-hover-color);
}
.tiny-grid-button__dropdown.is__active > .tiny-grid-button:not(.is__disabled):not(.theme__primary) {
color: var(--ti-grid-primary-color);
border-color: var(--ti-grid-primary-color);
}
.tiny-grid-button__dropdown.is__active .tiny-grid-button__dropdown-wrapper {
display: block;
}
.tiny-grid-button__dropdown.is__active .tiny-grid-button__dropdown-arrow {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.tiny-grid-button__dropdown.is__active .tiny-grid-button__dropdown-arrow.tiny-grid-icon__arrow-bottom {
margin-top: -2px;
}
.tiny-grid-button__dropdown .tiny-grid-button__dropdown-arrow {
font-size: var(--ti-common-font-size-base);
margin-left: 5px;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
}
.tiny-grid-button__dropdown .tiny-grid-button__dropdown-wrapper {
display: none;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
margin-top: 5px;
z-index: 100;
padding: 5px;
background-color: var(--ti-grid-light-color);
border-radius: 4px;
border: 1px solid var(--ti-grid-border-color);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.tiny-grid-button__dropdown .tiny-grid-button__dropdown-wrapper > .tiny-grid-button {
margin: 0;
display: block;
width: 100%;
border: 0;
}
.tiny-grid-button__dropdown .tiny-grid-button__dropdown-wrapper > .tiny-grid-button.type__text {
padding: 2px 8px;
}
.tiny-grid-button__wrapper .tiny-input {
width: 270px;
}
.tiny-grid-button__wrapper .tiny-button,
.tiny-grid-button__wrapper .tiny-input {
vertical-align: middle;
}
.tiny-grid__tooltip-wrapper {
display: none;
position: absolute;
top: -100%;
left: -100%;
font-size: var(--ti-grid-font-size);
max-width: 400px;
border-radius: 4px;
padding: 8px 12px;
white-space: normal;
word-break: break-word;
-webkit-box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.2);
color: var(--ti-grid-font-color);
font-family: var(--ti-grid-font-family);
pointer-events: none;
z-index: 4000;
}
.tiny-grid__tooltip-wrapper.is__visible {
display: block;
}
.tiny-grid__tooltip-wrapper.is__arrow .tiny-grid__tooltip-arrow {
display: block;
}
.tiny-grid__tooltip-wrapper.placement__top .tiny-grid__tooltip-arrow {
bottom: -12px;
}
.tiny-grid__tooltip-wrapper.placement__top .tiny-grid__tooltip-arrow:before {
top: -7px;
}
.tiny-grid__tooltip-wrapper.placement__bottom .tiny-grid__tooltip-arrow {
top: -12px;
}
.tiny-grid__tooltip-wrapper.placement__bottom .tiny-grid__tooltip-arrow:before {
top: -4px;
}
.tiny-grid__tooltip-wrapper.theme__light {
background-color: var(--ti-grid-tooltip-light-background-color);
border: 1px solid var(--ti-grid-border-color);
}
.tiny-grid__tooltip-wrapper.theme__light.placement__top .tiny-grid__tooltip-arrow {
border-top-color: var(--ti-grid-border-color);
}
.tiny-grid__tooltip-wrapper.theme__light.placement__top .tiny-grid__tooltip-arrow:before {
border-top-color: var(--ti-grid-tooltip-light-background-color);
}
.tiny-grid__tooltip-wrapper.theme__light.placement__bottom .tiny-grid__tooltip-arrow {
border-bottom-color: var(--ti-grid-border-color);
}
.tiny-grid__tooltip-wrapper.theme__light.placement__bottom .tiny-grid__tooltip-arrow:before {
border-bottom-color: var(--ti-grid-tooltip-light-background-color);
}
.tiny-grid__tooltip-wrapper.theme__dark {
background: var(--ti-grid-tooltip-dark-background-color);
color: var(--ti-grid-light-color);
}
.tiny-grid__tooltip-wrapper.theme__dark.placement__top .tiny-grid__tooltip-arrow {
border-top-color: var(--ti-grid-tooltip-dark-background-color);
}
.tiny-grid__tooltip-wrapper.theme__dark.placement__top .tiny-grid__tooltip-arrow:before {
border-top-color: var(--ti-grid-tooltip-dark-background-color);
}
.tiny-grid__tooltip-wrapper.theme__dark.placement__bottom .tiny-grid__tooltip-arrow {
border-bottom-color: var(--ti-grid-tooltip-dark-background-color);
}
.tiny-grid__tooltip-wrapper.theme__dark.placement__bottom .tiny-grid__tooltip-arrow:before {
border-bottom-color: var(--ti-grid-tooltip-dark-background-color);
}
.tiny-grid__tooltip-wrapper .tiny-grid__tooltip-arrow {
display: none;
position: absolute;
border-color: transparent;
border-width: 6px;
border-style: solid;
left: 50%;
}
.tiny-grid__tooltip-wrapper .tiny-grid__tooltip-arrow:before {
content: '';
position: absolute;
border-color: transparent;
border-width: 5px;
border-style: solid;
left: -5px;
}
.tiny-grid__tooltip-wrapper.tiny-grid__valid-error {
background-color: var(--ti-grid-error-color);
color: var(--ti-grid-light-color);
}
.tiny-grid {
--ti-grid-font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif;
--ti-grid-font-color: var(--ti-base-color-info-normal);
--ti-grid-light-color: var(--ti-base-color-light);
--ti-grid-error-color: var(--ti-base-color-bg-8);
--ti-grid-success-color: var(--ti-base-color-success-normal);
--ti-grid-warning-color: var(--ti-base-color-warning-normal);
--ti-grid-disabled-color: var(--ti-base-color-bg-5);
--ti-grid-normal-color: var(--ti-base-color-placeholder);
--ti-grid-font-size: var(--ti-common-font-size-base);
--ti-grid-border-color: var(--ti-common-color-line-dividing);
--ti-grid-border-radius: var(--ti-common-border-radius-normal);
--ti-grid-header-background-color: var(--ti-common-color-bg-white-emphasize);
--ti-grid-primary-color: var(--ti-base-color-brand-6);
--ti-grid-primary-hover-color: var(--ti-base-color-brand-5);
--ti-grid-primary-active-color: var(--ti-base-color-primary-active);
--ti-grid-primary-disabled-color: #b1b1b1;
--ti-grid-header-column-height: var(--ti-base-size-height-small);
--ti-grid-medium-column-height: 52px;
--ti-grid-default-column-height: 42px;
--ti-grid-small-column-height: 40px;
--ti-grid-mini-column-height: 30px;
--ti-grid-custom-head-height: 40px;
--ti-grid-custom-body-list-height: var(--ti-base-size-height-small);
--ti-icon-fill-active-hover: #fff;
--ti-grid-input-disabled-color: #f5f5f5;
--ti-grid-popup-border-color: #ebeef5;
--ti-grid-row-odd-background-color: #fff;
--ti-grid-row-striped-background-color: #fafafa;
--ti-grid-row-hover-background-color: var(--ti-base-color-hover-background);
--ti-grid-column-hover-background-color: #d7effb;
--ti-grid-column-current-background-color: var(--ti-base-color-hover-background);
--ti-grid-column-icon-border-color: var(--ti-base-color-common-1);
--ti-grid-column-checked-border-width: 2px;
--ti-grid-column-checked-border-color: #d4d4d4;
--ti-grid-loading-background-color: rgba(0, 0, 0, 0.2);
--ti-grid-tooltip-dark-background-color: #303133;
--ti-grid-tooltip-light-background-color: var(--ti-base-color-light);
--ti-grid-modal-loading-color: #78b1eb;
--ti-grid-modal-alert-font-size: 22px;
--ti-grid-modal-header-font-size: var(--ti-common-font-size-1);
--ti-grid-modal-small-btn-font-size: var(--ti-common-font-size-2);
--ti-grid-modal-box-background-color: var(--ti-base-color-light);
--ti-grid-modal-box-border-color: #ebeef5;
--ti-grid-modal-btn-color: #c4c4c4;
--ti-grid-modal-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
--ti-grid-modal-border-color: rgba(0, 0, 0, 0.2);
--ti-table-td-padding: 2px 8px;
--ti-table-th-spacing-line-color: var(--ti-common-color-text-white);
--ti-grid-header-icon-font-size: var(--ti-common-font-size-2);
--ti-table-nodata-td-bg-img-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAFPr3GUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAADPNJREFUeNqUULENwCAMK0wsSDmBk3oCn/UFegR7N84oH6SAoAISFdWShwQbRxaIuDFoSzE/SEaIzAycgY2quBNNiawnfYl7iOGkEAJRTDsrf/yecQwJAEAUWmvS0ltdjJEYlFL9eA4J3nticM71477llhIB17hKo9WQaVbi2dBoO6Gb3x8BhE1DAFRxA7ocI1LCwxcXjMhpiFCk/YcpdoCJvH37FkXFlStXUDSAFO8HsVavXs3w69cvFMXCwsIMu3btwkz7Hz9+xBoxjx49wlQsKSmJ4VA2NjY0lyOBZ8+egWlgssUaQyDFB3BF35s3b1D4pOQmeE5iJKQQRLCgC6DZgmIIQABhSxsw7PCfOHAAlxnYBCkBCUQn1Fu3bjF8+fKF4dy5cwwpKSkMc+bMAcf38+fPwfKurq4M8vLyOMMQa+xs3boVbIC3tzfWxIMMQBYKCQkxBAUFYY3NAHRRkMEBAQHgtI2nfAHnBRsbG4Z3795hzWkgw9djk3n9+jVm8kYDoFyJo+KB551GdEFQWMJ8QAiIiooyGBkZYU+8uHIEqJr4/v07To0wy1lZWRlERESwmo03taCnDlAEgyIblnJAAMTGlVrwlcbkAqzpHFdrgKjqGJsgQADWqxjHQRgI2lEqGn8h10F5NS3iO1F+cj0PoM0DaE6iRbwA6SQekDRUIHE3lhKZZRfMwUhuzHq9LLOzy1L5u+tOyv2yduaIqLVEQYqvjakYOfvzjtxyF2gu4qfaj5FGjLHHrHEaxeOqocDnp/UnaXWWZavEzfNc5PTJHUDdSH0APRdsreo9qFbHceydVIgYznCiNFKh6bpODcOgwjCc6TQ0/IWqqmyX6ft+1jBmPIYBDMuyXI22rmtxhDlLh2g6ED0u9AXrGJNV27YqiqKJYwpjjLXl9JkraeuUAh+I9kOMfE3T+EfMIU3TWSqSJFFFUYh98MY9wGu6QEsKgmCyJzl19fhflbdg89ZjSOWVyyt47fa7F9ALMZMIo4P2/V/YAk1ZoY9yytFNH+FU4jEMPjc4/OYCWmqmrnAbZv/jb/1Ih34FYM6KURuGoajieAwkF8jQwVlsqLdshq5eSm7Q3iBX6QmKfYIO3jKkFzD4CM0eaMGQzbR9wko/qSV9K3HaB4IEK9b395f+ey/c9t81Zq0mdcXadW1ONgRpje9iODx9jzWrUM54hUMCtVmZ6L6NQ107YNn+2rUfhiKIQ+L5ouQzz3MRRZEIgkBKQ2WVUOo3mUw6r+E76Ak+2/QsieunZFxkPZqUMlJcgd9zGuIJ4GccM12ZHnO324nNZiOWy6XwfV9SJ2aGrNjv95JroOkmSSIWi4Vp+pb6P7c28Q7+gYDH47F0KzmanAOYBwDoG3g4Ax/I9IttlpIlQNM01rtS+kepts5sUBlP05QT9BSZvu+TGbWI8a5T+ymJ8kKZqUx3upEO5/QvgDDTRUxvBoDZZHJdUGZIwuFw6FVSXst2rMDxptSAbSMi0ygLjQ10PA7n87nchFAOfTa2p+s6pwjD8OhG2zYialoNk/hFEiAoELTJC+tqLm+cifTfkjiOZaZ0sG0+XY0zceMTAm3thtgoVVXJo8/zvF7Z6SoPKFh1KjGRySS7mN1FUchxDsqy/MyyrM9PXk18ms0/6ro28g7aLOg1g6TUYUX7iY5Pxy09/A8Ycc/pqp38+MfBjlyVyzUVzIpDK/p0xBl5+rsLBZmRe444AQNfAjBvBbdtBDFwdfBPjyQNCEkFKcF2BUEaEOwKknTiVBClAcWpIPZP+jk//ewOFOunl+M5HA3qsLsc3u35NMDCEGzvDSgulxzyPJbO4X1zSZ09r9PI738/rwVLyi4JuksIX3tEvLtGghhcQhDcJKzZFefNnq7cg4UUvKeFD9+f0JoiKUH6bbPpl4Ejx7YxTO+DOMYl82hZPWfpi5FuxTdWKlFlCP8Y+fp+8rgHYu79keQdUVeJWfpYCIurXFmWpvOL5XJZT0jojgaKAqSfkoLq30nHH4AkJjMNJN4F1drVpOlIgYGV1WpVP5jR7iSHljkq/MRnp0o1iV3jT57KpS+66njSTg5BTZUxKCWJdbg5D9wjGxfxdUPa1Uh07F3Q3b35fM6UYLVvU6Rl5kl6wbon3IewSA2bzaZehCH+4uzRYo0myk4jMIopVqwZnsBHidNXngdBERobJ566TxRTxNwUINnKIARE+FRYwx6YxvDMMYiARefTophixWZENGkmymAPDCvDEPp/CFxQpGEtPQrLanKz2cz0aVgbpHHQSXyiSe92uzCdTk1RXQvqOalXIgXCHAzSHq7sXW6JpWEVWKdkjMbBhqUHIZ26FPpAvrXYuFOpwvbgQTnALazQCJL6JQCPpU+8pBn3yPVaNOkO4Q64rfr4YwrSusg1gJxi+oHu4u5uWe6hQ6PVtWJcLYJF1ehsJpDgI3pst1sz5CGXwLJCHtzDebEADyBNTbPgoMCKGIK0SiUhzbgYSHv77CD9wIY9WBpAc78EJEY7SH/TIe+n9deYDtjv97WlSwBFsLgHZkYceuILaTOnxnWLB63X62yW5ynZkDShE9x+oysV6mKF7c2ARWmJPV646svlLJDtOPigTHZ7NQ/57MjqgO85sQZF2y9mFxS7cBmv5hHLZVyaR0LLuwvGpM0r40BdSpEO4XhG3KJDhRXzdYyEy5AYCKtYPxqB8KJrajoZwcc/WLc0k+VBTf38CmQfGyOZaQWbml43G94OeOCKtuRC6wKaMLkKiXPlgjx6tJnlzeprx1X8r/26aZf1X4D2zienjRgK4yZCQmwIbFmNlAMk3USwSnKCcoPCEXqD3qDlBKQ3oCdowpJVWLPJEeACqPqN/EZmOjOZ2M+TyZ8njaBFcuxvnj8/29970brQ97XEvr0b+7MbYZ7MrHvP6obhMaxJoMc2Av7WksX2t10KZtsO9MDuM0ZmO2xud8uLbQD6xnpJ12y3vdvZ99gmoBPbob7ZTXuxDrTcFNC88QezX1YZ4msDvY8ABwO+DtBt0iW3xb7UXTzrAH1uQ6D+AddSDid0fQsBuvaR3sGqdepVQBem6AcFqvO5eX19/fR/HAzzSOq/xt+kLlLRhWGdmkkBVpqHXQb0LNZGg4SYk5OTdZNb1AwRIcXUuNwZjaIMcW4KJHedpkDGu3jILNoUyJiUD8vPLEUbFW3r86e7Uw2Q5Y6IqxWuXfLl+dpiaCJFpQGd8HtJHTcfsKfGud10qQNu+RnSusuXJGfTcWiCjEUupfv9fjqgTXq0vHjq9HCxjTaCh36L4qSkpp2PfbdrXQY02+ggSbpwH1ZU/Enqd0ZejGrNNrl5RT6BQ/CQuspPalsCvIcSvczS+5eOE2GoWJ3E9rYYgLI4I/j6+PjIKEQ8X8l+CUfjzV9DW6ODeLRIlhBH5utJhRgyEFcphLKoSl1U1U+0Bfkqv6LAk89QnHVgmxybmhLvVeYKHwAbXqbzeAp1KagGliSJV9uiWy8CDXGzL3UUpeCLoyjT2+2xWTPNoszQ70hiOAsfFOJqMEM4umxmhNIU4iscwp017ktUtHFHM2aWUEm8AuCZ3p6qxszKhOKrBORFRsQDiLwkRJDoZCXaiEAbWbjX0WxNOij6QiIaqIOBDIfDrIpeSNsuR/usAQL02dlZE/xcumFR8Wg0kTwu6M/Pz0HhHd7rnmn4giGFpzHKqLhHEFsDtNtBBsRmpajCvoZH+9BG3oibG+BnfaClk3ge+S/i4Vp5XZPJJKUh2vNt0w3v4GcoBIeI6c0C9B+NODoPtFCGRB4oi9lt+XI0bVKWCUDg516v5wWKG96xg5XjgMhAp19zMY1BHxJ5HB0dpdEHmxkG6HPABAhIygWM/L99jX7RPxdoX0dYYWleCLcC79pAC9gsNrkvMVnb8OCiSsY+cbREHbR5enraBD+D7eOxc3L3oE0fAA0YDIRpGpLpDD9rGlxPZOTyMx4e4WQxvXGROBr6eNH2ahZEMaiDg/+AXDIV47BInEBAjbTtNhbTqQu00dqK53la4uk2GvyMZ0t8HgHoDNP8nSF/+KvxCXgwZ9QSrzIozhbkUnXTRhYnjiDb7wj9+lT1quhyVg1sjPNeavkyKBbFy8vL1hz8X11dpSFnzYQ2b5DLgE53p0ZZlUQZm6enp/R3bqCvr68bv9JyZxlxPUBHsEL1UpWug73z0ihKcFmIWAwZcKieo0qzUfU3Ppsc1QgvmRU1MSWKpTqSMHUhzQ7ayi8wqCtyTOx06B4w/c+LB0Yxl2xpqeTugG1mdw69rg4lPYXot2Z/NdJeYvTQ1IqBDWO6e0ARYxOQSBR6lbWw0+fC5FL6d2iRu7BjDMrWipH+Rqd+bHGkcm/7/6bZaBMJnWPb8bbmG85t/2ZRz1U2kKJ8bhdTnqbTNeQ0bartsW0EelW8PnCe8zVmwtyCt3CeZVsG9g+URCM796dvBgAAAABJRU5ErkJggg==');
}
.tiny-hrapprover {
--ti-hrapprover-error-border-color: var(--ti-base-color-bg-8);
--ti-hrapprover-table-color: var(--ti-base-color-info-normal);
--ti-hrapprover-table-font-size: var(--ti-common-font-size-base);
--ti-hrapprover-tr-bgcolor: #fafafa;
--ti-hrapprover-tr-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-hrapprover-tr-odd-bgcolor: var(--ti-base-color-light);
--ti-hrapprover-th-height: var(--ti-base-size-height-small);
--ti-hrapprover-thead-border-color: var(--ti-base-color-border);
--ti-hrapprover-thead-bgcolor: #f1f1f1;
}
.tiny-hrapprover .tiny-hrapprover__list {
height: 180px;
margin-top: 10px;
overflow: auto;
}
.tiny-hrapprover .tiny-hrapprover__error {
border: solid 1px var(--ti-hrapprover-error-border-color);
}
.tiny-hrapprover table tbody tr {
color: var(--ti-hrapprover-table-color);
background: var(--ti-hrapprover-tr-bgcolor);
}
.tiny-hrapprover table tbody tr:hover {
background: var(--ti-hrapprover-tr-hover-bgcolor);
}
.tiny-hrapprover table tbody tr:nth-child(odd) {
background: var(--ti-hrapprover-tr-odd-bgcolor);
}
.tiny-hrapprover table tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.tiny-hrapprover table th {
border-left: none;
padding: 2px 0 2px 8px;
height: var(--ti-hrapprover-th-height);
}
.tiny-hrapprover table td {
padding: 2px 0 2px 8px;
height: var(--ti-hrapprover-th-height);
font-size: var(--ti-hrapprover-table-font-size);
}
.tiny-hrapprover table thead {
border-bottom: 1px solid var(--ti-hrapprover-thead-border-color);
text-align: left;
background: var(--ti-hrapprover-thead-bgcolor);
color: var(--ti-hrapprover-table-color);
}
.tiny-hrapprover table thead th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ti-hrapprover-table-font-size);
color: var(--ti-hrapprover-table-color);
}
.tiny-hrapprover .tiny-input__suffix .tiny-input__icon {
vertical-align: middle;
}
.tiny-image {
--ti-image-error-font-size: var(--ti-common-font-size-1);
--ti-image-error-color: #c0c4cc;
--ti-image-error-background: #f5f7fa;
position: relative;
display: inline-block;
overflow: hidden;
}
.tiny-image__inner {
vertical-align: top;
}
.tiny-image__inner-center {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
}
.tiny-image__error {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--ti-image-error-font-size);
color: var(--ti-image-error-color);
vertical-align: middle;
}
.tiny-image__preview {
cursor: pointer;
}
.tiny-image__error,
.tiny-image__placeholder {
background: var(--ti-image-error-background);
}
.tiny-image__error,
.tiny-image__inner,
.tiny-image__placeholder {
width: 100%;
height: 100%;
}
.viewer-fade-enter-active {
-webkit-animation: viewer-fade-in 0.3s;
animation: viewer-fade-in 0.3s;
}
.viewer-fade-leave-active {
-webkit-animation: viewer-fade-out 0.3s;
animation: viewer-fade-out 0.3s;
}
@-webkit-keyframes viewer-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes viewer-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes viewer-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes viewer-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
.tiny-image {
--ti-image-viewer-color: var(--ti-base-color-light);
--ti-image-viewer-actions-inner-color: var(--ti-base-color-light);
--ti-image-viewer-close-font-size: var(--ti-common-font-size-4);
--ti-image-viewer-close-bgcolor: #606266;
--ti-image-viewer-close-top: 40px;
--ti-image-viewer-close-right: 40px;
--ti-image-viewer-close-width: 40px;
--ti-image-viewer-close-height: 40px;
--ti-image-viewer-close-bgcolor-hover: #606266;
--ti-image-viewer-actions-border-radius: 22px;
--ti-image-viewer-actions-inner-font-size: 23px;
--ti-image-viewer-actions-width: 282px;
--ti-image-viewer-actions-height: 44px;
--ti-image-viewer-actions-bottom: 30px;
--ti-image-viewer-actions-inner-justify-content: space-around;
--ti-image-viewer-next-font-size: var(--ti-common-font-size-5);
--ti-image-viewer-next-width: 44px;
--ti-image-viewer-next-height: 44px;
--ti-image-viewer-mask-background: none;
--ti-image-viewer-btn-opacity: 0.8;
--ti-image-viewer-mask-bgcolor: #000;
}
.tiny-image .tiny-image-viewer__wrapper {
background: var(--ti-image-viewer-mask-background);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tiny-image .tiny-image-viewer__btn {
position: absolute;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
opacity: var(--ti-image-viewer-btn-opacity);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-image .tiny-image-viewer__btn svg {
fill: var(--ti-image-viewer-color);
}
.tiny-image .tiny-image-viewer__close {
top: var(--ti-image-viewer-close-top);
right: var(--ti-image-viewer-close-right);
width: var(--ti-image-viewer-close-width);
height: var(--ti-image-viewer-close-height);
font-size: var(--ti-image-viewer-close-font-size);
background-color: var(--ti-image-viewer-close-bgcolor);
}
.tiny-image .tiny-image-viewer__close:hover {
cursor: pointer;
background-color: var(--ti-image-viewer-close-bgcolor-hover);
}
.tiny-image .tiny-image-viewer__canvas {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-image .tiny-image-viewer__actions {
left: 50%;
bottom: var(--ti-image-viewer-actions-bottom);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: var(--ti-image-viewer-actions-width);
height: var(--ti-image-viewer-actions-height);
padding: 0 23px;
background-color: var(--ti-image-viewer-close-bgcolor);
border-radius: var(--ti-image-viewer-actions-border-radius);
}
.tiny-image .tiny-image-viewer__actions-inner {
width: 100%;
height: 100%;
text-align: justify;
cursor: default;
font-size: var(--ti-image-viewer-actions-inner-font-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: var(--ti-image-viewer-actions-inner-justify-content);
-ms-flex-pack: var(--ti-image-viewer-actions-inner-justify-content);
justify-content: var(--ti-image-viewer-actions-inner-justify-content);
}
.tiny-image .tiny-image-viewer__actions-inner svg {
fill: var(--ti-image-viewer-actions-inner-color);
margin-right: 20px;
}
.tiny-image .tiny-image-viewer__actions-inner svg:hover {
cursor: pointer;
}
.tiny-image .tiny-image-viewer__next,
.tiny-image .tiny-image-viewer__prev {
top: 50%;
width: var(--ti-image-viewer-next-width);
height: var(--ti-image-viewer-next-height);
font-size: var(--ti-image-viewer-next-font-size);
background-color: var(--ti-image-viewer-close-bgcolor);
}
.tiny-image .tiny-image-viewer__next:hover,
.tiny-image .tiny-image-viewer__prev:hover {
cursor: pointer;
background-color: var(--ti-image-viewer-close-bgcolor-hover);
}
.tiny-image .tiny-image-viewer__prev {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 40px;
}
.tiny-image .tiny-image-viewer__next {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 40px;
text-indent: 2px;
}
.tiny-image .tiny-image-viewer__mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.5;
background: var(--ti-image-viewer-mask-bgcolor);
}
.tiny-transition-icon-out-in-enter-active {
-webkit-animation: bounce-in 0.3s;
animation: bounce-in 0.3s;
}
.tiny-transition-icon-out-in-leave-active {
animation: bounce-in 0.3s reverse;
}
.tiny-transition-icon-scale-in-enter-active {
-webkit-animation: scale-in 0.3s;
animation: scale-in 0.3s;
}
.tiny-transition-icon-scale-in-leave-active {
animation: scale-in 0.3s reverse;
}
@-webkit-keyframes bounce-in {
0% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
50% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
@keyframes bounce-in {
0% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
50% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
100% {
-webkit-transform: translateY(-50%) scale(1);
transform: translateY(-50%) scale(1);
}
}
@-webkit-keyframes scale-in {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scale-in {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.tiny-textarea {
--ti-input-color: var(--ti-base-color-info-normal);
--ti-input-bgcolor: var(--ti-base-color-light);
--ti-input-font-size: var(--ti-common-font-size-base);
--ti-input-height: var(--ti-base-size-height-normal);
--ti-input-border-radius: var(--ti-common-border-radius-normal);
--ti-input-border-color: var(--ti-base-color-border);
--ti-input-hover-border-color: var(--ti-base-color-border-hover);
--ti-input-active-border-color: var(--ti-base-color-brand-5);
--ti-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-input-disabled-color: var(--ti-base-color-placeholder);
--ti-input-medium-height: var(--ti-base-size-height-medium);
--ti-input-small-height: var(--ti-base-size-height-small);
--ti-input-mini-height: var(--ti-base-size-height-mini);
--ti-input-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-input-disabled-border-color: var(--ti-common-color-line-disabled);
--ti-input-exceed-color: var(--ti-base-color-bg-8);
--ti-input-clear-color: #c0c4cc;
--ti-input-icon-font-size: var(--ti-common-font-size-1);
--ti-input-icon-close-color: #bfbfbf;
--ti-input-clear-color-hover: var(--ti-base-color-brand-6);
position: relative;
display: inline-block;
width: 100%;
vertical-align: bottom;
font-size: var(--ti-input-font-size);
}
.tiny-textarea.is-disabled .tiny-textarea__inner {
background-color: var(--ti-input-disabled-bgcolor);
border-color: var(--ti-input-border-color);
color: var(--ti-input-disabled-color);
cursor: not-allowed;
}
.tiny-textarea.is-disabled .tiny-textarea__inner::-moz-placeholder {
color: var(--ti-input-placeholder-color);
opacity: 1;
}
.tiny-textarea.is-disabled .tiny-textarea__inner:-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea.is-disabled .tiny-textarea__inner::-webkit-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea.is-disabled .tiny-textarea__inner::-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea.is-disabled .tiny-textarea__inner::placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea.is-exceed .tiny-textarea__inner {
border-color: var(--ti-input-exceed-color);
}
.tiny-textarea.is-exceed .tiny-input__count {
color: var(--ti-input-exceed-color);
}
.tiny-textarea .tiny-input__count {
color: #909399;
background: var(--ti-input-bgcolor);
font-size: var(--ti-input-font-size);
position: absolute;
bottom: 5px;
right: 16px;
}
.tiny-textarea__inner {
display: block;
width: 100%;
min-height: 60px;
min-height: calc(var(--ti-input-height, 30px) * 2);
color: var(--ti-input-color);
border: 1px solid var(--ti-input-border-color);
border-radius: var(--ti-input-border-radius);
background: var(--ti-input-bgcolor);
padding: 8px;
line-height: 1.5;
font-size: inherit;
resize: vertical;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-textarea__inner::-moz-placeholder {
color: var(--ti-input-placeholder-color);
opacity: 1;
}
.tiny-textarea__inner:-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea__inner::-webkit-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea__inner::-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea__inner::placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-textarea__inner:hover {
border-color: var(--ti-input-hover-border-color);
}
.tiny-textarea__inner:focus {
border-color: var(--ti-input-active-border-color);
}
.tiny-textarea__inner:focus,
.tiny-textarea__inner:hover {
outline: 0;
}
.tiny-input {
--ti-input-color: var(--ti-base-color-info-normal);
--ti-input-bgcolor: var(--ti-base-color-light);
--ti-input-font-size: var(--ti-common-font-size-base);
--ti-input-height: var(--ti-base-size-height-normal);
--ti-input-border-radius: var(--ti-common-border-radius-normal);
--ti-input-border-color: var(--ti-base-color-border);
--ti-input-hover-border-color: var(--ti-base-color-border-hover);
--ti-input-active-border-color: var(--ti-base-color-brand-5);
--ti-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-input-disabled-color: var(--ti-base-color-placeholder);
--ti-input-medium-height: var(--ti-base-size-height-medium);
--ti-input-small-height: var(--ti-base-size-height-small);
--ti-input-mini-height: var(--ti-base-size-height-mini);
--ti-input-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-input-disabled-border-color: var(--ti-common-color-line-disabled);
--ti-input-exceed-color: var(--ti-base-color-bg-8);
--ti-input-clear-color: #c0c4cc;
--ti-input-icon-font-size: var(--ti-common-font-size-1);
--ti-input-icon-close-color: #bfbfbf;
--ti-input-clear-color-hover: var(--ti-base-color-brand-6);
position: relative;
font-size: var(--ti-input-font-size);
display: inline-table;
width: 100%;
}
.tiny-input::-webkit-scrollbar {
z-index: 11;
width: 6px;
}
.tiny-input::-webkit-scrollbar:horizontal {
height: 6px;
}
.tiny-input::-webkit-scrollbar-thumb {
border-radius: 5px;
width: 6px;
background: #b4bccc;
}
.tiny-input::-webkit-scrollbar-corner {
background: #fff;
}
.tiny-input::-webkit-scrollbar-track {
background: #fff;
}
.tiny-input::-webkit-scrollbar-track-piece {
background: #fff;
width: 6px;
}
.tiny-input.is-exceed .tiny-input__suffix .tiny-input__count {
color: var(--ti-input-exceed-color);
}
.tiny-input.is-disabled .tiny-input__inner {
cursor: not-allowed;
border: 1px solid var(--ti-input-disabled-border-color);
color: var(--ti-input-disabled-color);
background: var(--ti-input-disabled-bgcolor);
}
.tiny-input.is-disabled .tiny-input__inner::-moz-placeholder {
color: #999;
opacity: 1;
}
.tiny-input.is-disabled .tiny-input__inner:-ms-input-placeholder {
color: #999;
}
.tiny-input.is-disabled .tiny-input__inner::-webkit-input-placeholder {
color: #999;
}
.tiny-input.is-disabled .tiny-input__inner::-ms-input-placeholder {
color: #999;
}
.tiny-input.is-disabled .tiny-input__inner::placeholder {
color: #999;
}
.tiny-input.is-disabled .tiny-input__icon {
cursor: not-allowed;
}
.tiny-input.is-disabled .tiny-input__icon.tiny-svg,
.tiny-input.is-disabled .tiny-input__icon.tiny-svg:hover {
fill: var(--ti-input-disabled-color);
}
.tiny-input.is-disabled .tiny-input__prefix .tiny-svg,
.tiny-input.is-disabled .tiny-input__prefix .tiny-svg:hover,
.tiny-input.is-disabled .tiny-input__suffix .tiny-svg,
.tiny-input.is-disabled .tiny-input__suffix .tiny-svg:hover {
fill: var(--ti-input-disabled-color);
}
.tiny-input.is-exceed .tiny-input__inner {
border-color: var(--ti-input-exceed-color);
}
.tiny-input .tiny-input__clear {
font-size: var(--ti-input-icon-font-size);
cursor: pointer;
-webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-input .tiny-input__clear,
.tiny-input .tiny-input__clear:hover {
fill: var(--ti-input-icon-close-color);
}
.tiny-input .tiny-input__count {
height: 100%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #909399;
font-size: var(--ti-input-font-size);
}
.tiny-input .tiny-input__count .tiny-input__count-inner {
background: var(--ti-input-bgcolor);
line-height: initial;
display: inline-block;
}
.tiny-input__inner {
width: 100%;
border: 1px solid var(--ti-input-border-color);
border-radius: var(--ti-input-border-radius);
color: var(--ti-input-color);
background: var(--ti-input-bgcolor);
font-size: inherit;
height: var(--ti-input-height);
line-height: var(--ti-input-height);
padding: 0 8px;
outline: 0;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-input__inner::-moz-placeholder {
color: var(--ti-input-placeholder-color);
opacity: 1;
}
.tiny-input__inner:-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-input__inner::-webkit-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-input__inner::-ms-input-placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-input__inner::placeholder {
color: var(--ti-input-placeholder-color);
}
.tiny-input__inner:active,
.tiny-input__inner:focus,
.tiny-input__inner:hover {
outline: 0;
border-color: var(--ti-input-hover-border-color);
}
.tiny-input__inner::-ms-clear {
display: none;
width: 0;
height: 0;
}
.tiny-input__prefix,
.tiny-input__suffix {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
color: var(--ti-input-border-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-input.is-active .tiny-input__inner,
.tiny-input__inner:focus {
border-color: var(--ti-input-active-border-color);
outline: 0;
}
.tiny-input__suffix {
right: 8px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.tiny-input__suffix:hover {
cursor: pointer;
}
.tiny-input__suffix-inner {
pointer-events: all;
font-size: var(--ti-common-font-size-1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-input__prefix {
left: 8px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: var(--ti-input-icon-font-size);
}
.tiny-input__prefix > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-input__icon {
height: 100%;
line-height: var(--ti-input-height);
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
font-size: var(--ti-input-icon-font-size);
fill: var(--ti-input-hover-border-color);
}
.tiny-input__icon:hover {
fill: var(--ti-input-active-border-color);
}
.tiny-input__icon:after {
content: '';
height: 100%;
width: 0;
display: inline-block;
vertical-align: middle;
}
.tiny-input__icon .svg-operationfaild,
.tiny-input__icon .svg-operationfaild:hover {
fill: var(--ti-input-icon-close-color);
}
.tiny-input__validateIcon {
pointer-events: none;
}
.tiny-input-suffix .tiny-input__inner {
padding-right: 30px;
padding-left: 8px;
}
.tiny-input-prefix .tiny-input__inner {
padding-left: 30px;
padding-right: 28px;
}
.tiny-input-medium .tiny-input__inner {
height: var(--ti-input-medium-height);
line-height: var(--ti-input-medium-height);
}
.tiny-input-medium .tiny-input__suffix {
line-height: calc(var(--ti-input-medium-height) - 2px);
}
.tiny-input-small .tiny-input__inner {
height: var(--ti-input-small-height);
line-height: var(--ti-input-small-height);
}
.tiny-input-small .tiny-input__suffix {
line-height: calc(var(--ti-input-small-height) - 2px);
}
.tiny-input-mini .tiny-input__inner {
height: var(--ti-input-mini-height);
line-height: var(--ti-input-mini-height);
}
.tiny-input-mini .tiny-input__suffix {
line-height: calc(var(--ti-input-mini-height) - 2px);
}
.tiny-input-group {
--ti-input-color: var(--ti-base-color-info-normal);
--ti-input-bgcolor: var(--ti-base-color-light);
--ti-input-font-size: var(--ti-common-font-size-base);
--ti-input-height: var(--ti-base-size-height-normal);
--ti-input-border-radius: var(--ti-common-border-radius-normal);
--ti-input-border-color: var(--ti-base-color-border);
--ti-input-hover-border-color: var(--ti-base-color-border-hover);
--ti-input-active-border-color: var(--ti-base-color-brand-5);
--ti-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-input-disabled-color: var(--ti-base-color-placeholder);
--ti-input-medium-height: var(--ti-base-size-height-medium);
--ti-input-small-height: var(--ti-base-size-height-small);
--ti-input-mini-height: var(--ti-base-size-height-mini);
--ti-input-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-input-disabled-border-color: var(--ti-common-color-line-disabled);
--ti-input-exceed-color: var(--ti-base-color-bg-8);
--ti-input-clear-color: #c0c4cc;
--ti-input-icon-font-size: var(--ti-common-font-size-1);
--ti-input-icon-close-color: #bfbfbf;
--ti-input-clear-color-hover: var(--ti-base-color-brand-6);
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.tiny-input-group > .tiny-input__inner {
vertical-align: middle;
display: table-cell;
}
.tiny-input-group__append,
.tiny-input-group__prepend {
background-color: var(--ti-input-disabled-bgcolor);
color: var(--ti-input-placeholder-color);
border: 1px solid var(--ti-input-border-color);
border-radius: var(--ti-input-border-radius);
padding: 0 20px;
width: 1px;
vertical-align: middle;
display: table-cell;
position: relative;
white-space: nowrap;
}
.tiny-input-group__append:focus,
.tiny-input-group__prepend:focus {
outline: 0;
}
.tiny-input-group__append .tiny-button,
.tiny-input-group__append .tiny-select,
.tiny-input-group__prepend .tiny-button,
.tiny-input-group__prepend .tiny-select {
display: inline-block;
margin: -10px -20px;
}
.tiny-input-group__append .tiny-button,
.tiny-input-group__append .tiny-input,
.tiny-input-group__prepend .tiny-button,
.tiny-input-group__prepend .tiny-input {
font-size: inherit;
}
.tiny-input-group__append button.tiny-button,
.tiny-input-group__append div.tiny-select .tiny-input__inner,
.tiny-input-group__append div.tiny-select:hover .tiny-input__inner,
.tiny-input-group__prepend button.tiny-button,
.tiny-input-group__prepend div.tiny-select .tiny-input__inner,
.tiny-input-group__prepend div.tiny-select:hover .tiny-input__inner {
border-color: transparent;
background-color: transparent;
color: inherit;
border-top: 0;
border-bottom: 0;
}
.tiny-input-group__append .tiny-select .tiny-input.is-focus .tiny-input__inner,
.tiny-input-group__prepend .tiny-select .tiny-input.is-focus .tiny-input__inner {
border-color: transparent;
}
.tiny-input-group-prepend .tiny-input__inner,
.tiny-input-group__append {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tiny-input-group-append .tiny-input__suffix {
top: calc(50% - 7px);
}
.tiny-input-group-append .tiny-input__inner,
.tiny-input-group__prepend {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tiny-input-group__prepend {
border-right: 0;
}
.tiny-input-group__append {
border-left: 0;
}
.tiny-icon-loading {
font-size: var(--ti-common-font-size-1);
line-height: 1;
vertical-align: text-top;
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.tiny-ip-address {
--ti-ip-address-normal-height: var(--ti-base-size-height-normal);
--ti-ip-address-normal-color: var(--ti-base-color-info-normal);
--ti-ip-address-icon-color: var(--ti-base-color-info-normal);
--ti-ip-address-normal-disabled-color: var(--ti-base-color-placeholder);
--ti-ip-address-normal-border-color: var(--ti-base-color-border);
--ti-ip-address-normal-background: var(--ti-base-color-light);
--ti-ip-address-radius: var(--ti-common-border-radius-normal);
--ti-ip-address-font-size: var(--ti-common-font-size-base);
--ti-ip-address-border-hover-color: var(--ti-base-color-brand-6);
--ti-ip-address-disabled-background: var(--ti-common-color-bg-disabled);
--ti-ip-address-disabled-border: var(--ti-common-color-line-disabled);
width: 270px;
max-width: 100%;
outline: 0;
display: inline-table;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-ip-address__input {
position: relative;
padding: 0;
width: 100%;
height: var(--ti-ip-address-normal-height);
border: 1px solid var(--ti-ip-address-normal-border-color);
color: var(--ti-ip-address-normal-color);
border-radius: var(--ti-ip-address-radius);
background: var(--ti-ip-address-normal-background);
font-size: var(--ti-ip-address-font-size);
padding: 0 8px;
display: block;
white-space: nowrap;
background-image: none;
-ms-user-select: auto;
-webkit-user-select: auto;
-o-user-select: auto;
-moz-user-select: auto;
user-select: auto;
-webkit-transition: border 0.3s;
transition: border 0.3s;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-ip-address__input.readonly,
.tiny-ip-address__input[readonly] {
cursor: not-allowed;
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-ip-address__input.readonly.active,
.tiny-ip-address__input.readonly:active,
.tiny-ip-address__input.readonly:focus,
.tiny-ip-address__input.readonly:hover,
.tiny-ip-address__input.readonly[active],
.tiny-ip-address__input[readonly].active,
.tiny-ip-address__input[readonly]:active,
.tiny-ip-address__input[readonly]:focus,
.tiny-ip-address__input[readonly]:hover,
.tiny-ip-address__input[readonly][active] {
border-color: var(--ti-ip-address-border-hover-color);
}
.tiny-ip-address__input::-moz-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
opacity: 1;
}
.tiny-ip-address__input:-ms-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input::-webkit-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input::-ms-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input::placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input:hover {
border: 1px solid var(--ti-ip-address-border-hover-color);
color: var(--ti-ip-address-normal-color);
}
.tiny-ip-address__input:hover::-moz-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
opacity: 1;
}
.tiny-ip-address__input:hover:-ms-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input:hover::-webkit-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input:hover::-ms-input-placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input:hover::placeholder {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input.active,
.tiny-ip-address__input:active,
.tiny-ip-address__input:focus,
.tiny-ip-address__input[active] {
border: 1px solid var(--ti-ip-address-border-hover-color);
color: var(--ti-ip-address-normal-color);
}
.tiny-ip-address__input:focus::-moz-placeholder {
color: #d9d9d9;
opacity: 1;
}
.tiny-ip-address__input:focus:-ms-input-placeholder {
color: #d9d9d9;
}
.tiny-ip-address__input:focus::-webkit-input-placeholder {
color: #d9d9d9;
}
.tiny-ip-address__input:focus::-ms-input-placeholder {
color: #d9d9d9;
}
.tiny-ip-address__input:focus::placeholder {
color: #d9d9d9;
}
.tiny-ip-address__input.disabled,
.tiny-ip-address__input[disabled] {
cursor: not-allowed;
pointer-events: none;
border: 1px solid var(--ti-ip-address-disabled-border);
color: var(--ti-ip-address-normal-disabled-color);
background: var(--ti-ip-address-disabled-background);
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-ip-address__input.disabled .tiny-svg,
.tiny-ip-address__input[disabled] .tiny-svg {
fill: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input li {
float: left;
overflow: hidden;
width: 25%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-ip-address__input li > input {
border: none;
text-align: center;
outline: 0;
background: 0 0;
color: var(--ti-ip-address-normal-color);
width: calc(100% - 12px);
float: left;
height: calc(var(--ti-ip-address-normal-height) - 2px);
line-height: calc(var(--ti-ip-address-normal-height) - 2px);
padding: 0;
}
.tiny-ip-address__input li > input.active,
.tiny-ip-address__input li > input:active,
.tiny-ip-address__input li > input:focus,
.tiny-ip-address__input li > input[active] {
color: var(--ti-ip-address-normal-color);
}
.tiny-ip-address__input li > input:hover {
color: var(--ti-ip-address-normal-color);
}
.tiny-ip-address__input li > input.disabled,
.tiny-ip-address__input li > input[disabled] {
color: var(--ti-ip-address-normal-disabled-color);
}
.tiny-ip-address__input li svg {
vertical-align: middle;
fill: var(--ti-ip-address-icon-color);
}
.tiny-ip-address__input li:last-child > svg {
display: none;
}
.tiny-ip-address__input li:last-child > input {
width: 100%;
}
.tiny-ip-address__input li:only-child {
width: 100%;
}
.tiny-ip-address__input li:only-child > input {
width: 100%;
text-align: left;
padding: 0 8px;
}
.tiny-link {
--ti-link-font-size: var(--ti-common-font-size-1);
--ti-link-font-weight: var(--ti-common-font-weight-5);
--ti-link-border-color: var(--ti-base-color-brand-6);
--ti-link-default-color: #606266;
--ti-link-default-border-color: var(--ti-base-color-brand-6);
--ti-link-default-hover-color: var(--ti-base-color-brand-7);
--ti-link-default-disabled-color: #c0c4cc;
--ti-link-primary-color: var(--ti-base-color-brand-6);
--ti-link-primary-border-color: var(--ti-base-color-brand-6);
--ti-link-primary-hover-color: var(--ti-base-color-brand-5);
--ti-link-primary-disabled-color: #a0cfff;
--ti-link-danger-color: var(--ti-base-color-bg-8);
--ti-link-danger-border-color: var(--ti-base-color-bg-8);
--ti-link-danger-hover-color: var(--ti-base-color-bg-7);
--ti-link-danger-disabled-color: var(--ti-base-color-bg-5);
--ti-link-success-color: var(--ti-base-color-success-normal);
--ti-link-success-border-color: var(--ti-base-color-success-normal);
--ti-link-success-hover-color: var(--ti-base-color-success-hover);
--ti-link-success-disabled-color: var(--ti-base-color-bg-5);
--ti-link-warning-color: var(--ti-base-color-warning-normal);
--ti-link-warning-border-color: var(--ti-base-color-warning-normal);
--ti-link-warning-hover-color: var(--ti-base-color-warning-hover);
--ti-link-warning-disabled-color: var(--ti-base-color-bg-5);
--ti-link-info-color: var(--ti-base-color-info-normal);
--ti-link-info-border-color: var(--ti-base-color-info-normal);
--ti-link-info-hover-color: var(--ti-base-color-info-hover);
--ti-link-info-disabled-color: var(--ti-base-color-bg-5);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
vertical-align: middle;
position: relative;
text-decoration: none;
outline: 0;
cursor: pointer;
padding: 0;
font-size: var(--ti-link-font-size);
font-weight: var(--ti-link-font-weight);
}
.tiny-link.is-underline:hover:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 0;
bottom: 0;
border-bottom: 1px solid var(--ti-link-border-color);
}
.tiny-link.is-disabled {
cursor: not-allowed;
}
.tiny-link.tiny-link--default {
color: var(--ti-link-default-color);
fill: var(--ti-link-default-color);
}
.tiny-link.tiny-link--default.is-underline:hover:after,
.tiny-link.tiny-link--default:after {
border-color: var(--ti-link-default-border-color);
}
.tiny-link.tiny-link--default:hover {
color: var(--ti-link-default-hover-color);
fill: var(--ti-link-default-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--default.is-disabled {
color: var(--ti-link-default-disabled-color);
fill: var(--ti-link-default-disabled-color);
}
.tiny-link.tiny-link--primary {
color: var(--ti-link-primary-color);
fill: var(--ti-link-primary-color);
}
.tiny-link.tiny-link--primary.is-underline:hover:after,
.tiny-link.tiny-link--primary:after {
border-color: var(--ti-link-primary-border-color);
}
.tiny-link.tiny-link--primary:hover {
color: var(--ti-link-primary-hover-color);
fill: var(--ti-link-primary-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--primary.is-disabled {
color: var(--ti-link-primary-disabled-color);
fill: var(--ti-link-primary-disabled-color);
}
.tiny-link.tiny-link--danger {
color: var(--ti-link-danger-color);
fill: var(--ti-link-danger-color);
}
.tiny-link.tiny-link--danger.is-underline:hover:after,
.tiny-link.tiny-link--danger:after {
border-color: var(--ti-link-danger-border-color);
}
.tiny-link.tiny-link--danger:hover {
color: var(--ti-link-danger-hover-color);
fill: var(--ti-link-danger-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--danger.is-disabled {
color: var(--ti-link-danger-disabled-color);
fill: var(--ti-link-danger-disabled-color);
}
.tiny-link.tiny-link--success {
color: var(--ti-link-success-color);
fill: var(--ti-link-success-color);
}
.tiny-link.tiny-link--success.is-underline:hover:after,
.tiny-link.tiny-link--success:after {
border-color: var(--ti-link-success-border-color);
}
.tiny-link.tiny-link--success:hover {
color: var(--ti-link-success-hover-color);
fill: var(--ti-link-success-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--success.is-disabled {
color: var(--ti-link-success-disabled-color);
fill: var(--ti-link-success-disabled-color);
}
.tiny-link.tiny-link--warning {
color: var(--ti-link-warning-color);
fill: var(--ti-link-warning-color);
}
.tiny-link.tiny-link--warning.is-underline:hover:after,
.tiny-link.tiny-link--warning:after {
border-color: var(--ti-link-warning-border-color);
}
.tiny-link.tiny-link--warning:hover {
color: var(--ti-link-warning-hover-color);
fill: var(--ti-link-warning-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--warning.is-disabled {
color: var(--ti-link-warning-disabled-color);
fill: var(--ti-link-warning-disabled-color);
}
.tiny-link.tiny-link--info {
color: var(--ti-link-info-color);
fill: var(--ti-link-info-color);
}
.tiny-link.tiny-link--info.is-underline:hover:after,
.tiny-link.tiny-link--info:after {
border-color: var(--ti-link-info-border-color);
}
.tiny-link.tiny-link--info:hover {
color: var(--ti-link-info-hover-color);
fill: var(--ti-link-info-hover-color);
text-decoration: none;
}
.tiny-link.tiny-link--info.is-disabled {
color: var(--ti-link-info-disabled-color);
fill: var(--ti-link-info-disabled-color);
}
.tiny-link-menu {
--ti-link-menu-nav-item-color: var(--ti-base-color-brand-6);
--ti-link-menu-nav-item-border-color: #c4c4c4;
--ti-link-menu-btn-color: rgba(24, 144, 255, 0.8);
--ti-link-menu-btn-bgcolor: var(--ti-base-color-light);
--ti-link-menu-input-height: var(--ti-base-size-height-normal);
--ti-link-menu-input-font-size: var(--ti-common-font-size-base);
--ti-link-menu-input-color: var(--ti-base-color-info-normal);
--ti-link-menu-input-border-color: var(--ti-base-color-border);
--ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal);
--ti-link-menu-tree-node-color: var(--ti-common-color-text-disabled);
}
.tiny-link-menu__nav .tiny-link-menu__nav-item {
color: var(--ti-link-menu-nav-item-color);
font-size: var(--ti-common-font-size-1);
border-right: 1px solid var(--ti-link-menu-nav-item-border-color);
padding: 0 8px;
line-height: 1;
display: inline-block;
background: 0;
white-space: nowrap;
text-decoration: none;
outline: 0;
text-align: center;
cursor: pointer;
}
.tiny-link-menu__nav .tiny-link-menu__nav-item .tiny-svg {
fill: var(--ti-link-menu-nav-item-color);
margin-right: 4px;
}
.tiny-link-menu__nav .tiny-link-menu__nav-item span {
line-height: 1;
vertical-align: middle;
}
.tiny-link-menu__nav .tiny-link-menu__btn {
color: var(--ti-link-menu-btn-color);
background: var(--ti-link-menu-btn-bgcolor);
padding: 0 8px;
line-height: 1;
outline: 0;
text-align: center;
border: none;
cursor: pointer;
}
.tiny-link-menu__nav .tiny-link-menu__btn .tiny-svg {
fill: var(--ti-link-menu-nav-item-color);
font-size: var(--ti-common-font-size-3);
}
.tiny-link-menu__dialog-btn {
text-align: center;
}
.tiny-link-menu .tiny-input {
width: 270px;
margin-bottom: 5px;
}
.tiny-link-menu .tiny-input .tiny-input__inner {
height: var(--ti-link-menu-input-height);
line-height: var(--ti-link-menu-input-height);
font-size: var(--ti-link-menu-input-font-size);
color: var(--ti-link-menu-input-color);
background: var(--ti-link-menu-btn-bgcolor);
border: 1px solid var(--ti-link-menu-input-border-color);
border-radius: var(--ti-link-menu-input-border-radius);
padding: 0 8px;
display: block;
white-space: nowrap;
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
-webkit-transition: border 0.3s;
transition: border 0.3s;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-link-menu .tiny-button:last-child {
color: var(--ti-link-menu-nav-item-color);
background-color: var(--ti-link-menu-btn-bgcolor);
border-color: var(--ti-link-menu-input-border-color);
}
.tiny-link-menu .tiny-tree .tiny-tree-node .tiny-checkbox {
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.tiny-link-menu .tiny-tree .tiny-tree-node .tree-node-body {
display: block;
text-decoration: none;
}
.tiny-link-menu .tiny-tree .tiny-tree-node .tree-node-body > .tiny-svg {
margin-left: 4px;
}
.tiny-link-menu .tiny-tree .tiny-tree-node .tree-node-name {
color: var(--ti-link-menu-tree-node-color);
font-size: var(--ti-link-menu-input-font-size);
border-radius: var(--ti-link-menu-input-border-radius);
padding-left: 4px;
font-weight: 700;
vertical-align: middle;
}
.tiny-link-menu .tiny-tree .tiny-tree-node.is-focusable .tree-node-name {
color: var(--ti-link-menu-input-color);
}
.tiny-link-menu .tiny-tree.tiny-link-menu__overflow .tree-node {
width: calc(100% - 36px);
}
.tiny-link-menu .tiny-tree.tiny-link-menu__overflow .tree-node-name {
width: 100%;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tiny-tree-node__content {
height: auto;
padding: 2px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tiny-tree-node__content .tiny-tree-node__expand-icon {
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tiny-tree-node__content .tiny-tree-node__expand-icon.expanded {
-webkit-transform: translateY(-3px) rotate(90deg);
transform: translateY(-3px) rotate(90deg);
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tiny-tree-node__content .tree-node {
width: 100%;
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tree-node-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
text-decoration: none;
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tree-node-body .tiny-svg {
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.tiny-link-menu .tiny-tree.tiny-link-menu__wrap .tree-node-name {
display: inline-block;
white-space: normal;
line-height: normal;
word-break: break-word;
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.tiny-loading {
--ti-loading-text-color: var(--ti-base-color-brand-6);
--ti-loading-mask-bgcolor: rgba(255, 255, 255, 0.9);
--ti-loading-text-font-size: var(--ti-common-font-size-1);
--ti-loading-spinner-height: 42px;
--ti-loading-spinner-width: 42px;
--ti-loading-fullscreen-height: 50px;
--ti-loading-fullscreen-width: 50px;
}
.tiny-loading__mask {
position: absolute;
z-index: 2000;
background-color: var(--ti-loading-mask-bgcolor);
margin: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.tiny-loading__mask.is-fullscreen {
position: fixed;
}
.tiny-loading__mask.is-fullscreen .tiny-loading__spinner {
margin-top: -25px;
}
.tiny-loading__mask.is-fullscreen .tiny-loading__spinner .circular {
height: var(--ti-loading-fullscreen-height);
width: var(--ti-loading-fullscreen-width);
}
.tiny-loading__spinner {
top: 50%;
margin-top: -21px;
width: 100%;
text-align: center;
position: absolute;
}
.tiny-loading__spinner .tiny-loading__text {
color: var(--ti-loading-text-color);
margin: 3px 0;
font-size: var(--ti-loading-text-font-size);
}
.tiny-loading__spinner .circular {
height: var(--ti-loading-spinner-height);
width: var(--ti-loading-spinner-width);
-webkit-animation: loading-rotate 2s linear infinite;
animation: loading-rotate 2s linear infinite;
}
.tiny-loading__spinner .path {
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: var(--ti-loading-text-color);
stroke-linecap: round;
}
.tiny-loading__spinner svg {
fill: var(--ti-loading-text-color);
}
.tiny-loading__parent-relative {
position: relative !important;
}
.tiny-loading__parent-hidden {
overflow: hidden !important;
}
.tiny-loading-fade-enter,
.tiny-loading-fade-leave-active {
opacity: 0;
}
@keyframes loading-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.tiny-icon-loading {
font-size: var(--ti-common-font-size-1);
line-height: 1;
vertical-align: text-top;
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
@keyframes rotating {
0% {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
100% {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.tiny-logout {
cursor: pointer;
display: inline;
}
.tiny-menu.menu-hor {
--ti-menubar-title-font-size: var(--ti-common-font-size-base-normal);
--ti-menubar-title-color: var(--ti-base-color-light);
--ti-menubar-li-height: var(--ti-common-size-12x);
--ti-menubar-menu-height: var(--ti-base-size-height-large);
--ti-menubar-menu-font-size: var(--ti-common-font-size-1);
--ti-menubar-submenu-normal-color: var(--ti-base-color-info-normal);
--ti-menubar-submenu-hover-color: var(--ti-base-color-hover-background);
--ti-menubar-submenu-active-color: var(--ti-base-color-selected-background);
--ti-menubar-submenu-li-height: var(--ti-common-size-10x);
--ti-menubar-background-normal: var(--ti-base-color-navigation-background);
--ti-menubar-background-active: #474c5e;
--ti-menubar-dropdown-border-color: #c9ccda;
--ti-menubar-dropdown-hover-border-color: #585f7f;
--ti-menubar-dropdown-hover-background: #191b25;
margin-bottom: 0;
min-height: 30px;
min-width: 300px;
font-size: var(--ti-menubar-menu-font-size, 14px);
}
.tiny-menu.menu-hor > ul > li {
display: inline-block;
margin-left: -4px;
position: relative;
text-align: center;
padding: 0;
margin: 0;
}
.tiny-menu.menu-hor > ul > li > a {
display: block;
padding: 0 10px;
min-width: 120px;
margin-right: -1px;
color: var(--ti-menubar-title-color);
font-size: var(--ti-common-font-size-2);
}
.tiny-menu.menu-hor > ul > li > a span.menu-icon {
margin-right: 8px;
top: -2px;
}
.tiny-menu.menu-hor > ul > li .submenu > li > a {
color: var(--ti-menubar-submenu-normal-color);
}
.tiny-menu.menu-hor > ul > li .submenu > li > a:focus,
.tiny-menu.menu-hor > ul > li .submenu > li > a:hover {
background: var(--ti-menubar-submenu-hover-color);
}
.tiny-menu.menu-hor > ul > li .submenu > li > a.active,
.tiny-menu.menu-hor > ul > li .submenu > li > a:active {
background: var(--ti-menubar-submenu-active-color);
}
.tiny-menu.menu-hor > ul > li .submenu > li > span.icon-starActive {
left: 8px;
}
.tiny-menu.menu-hor > ul > li .submenu > li > span.icon-transpond {
right: 8px;
}
.tiny-menu.menu-hor > ul > li.node-selected > a,
.tiny-menu.menu-hor > ul > li:hover > a {
border-right: 0;
}
.tiny-menu.menu-hor > ul > li:last-child > a {
border-right: 0;
}
.tiny-menu.menu-hor > ul li {
padding: 0;
height: var(--ti-menubar-li-height);
line-height: var(--ti-menubar-li-height);
position: relative;
}
.tiny-menu.menu-hor > ul li > a {
min-width: 60px;
width: 100%;
height: 100%;
color: var(--ti-menubar-title-color);
}
.tiny-menu.menu-hor > ul li > a:active,
.tiny-menu.menu-hor > ul li > a:focus,
.tiny-menu.menu-hor > ul li > a:hover {
color: var(--ti-menubar-title-color);
text-decoration: none;
background: var(--ti-menubar-background-active);
}
.tiny-menu.menu-hor ul {
padding: 0;
margin: 0;
background: var(--ti-menubar-background-normal);
}
.tiny-menu.menu-hor .menus-left,
.tiny-menu.menu-hor .menus-left .submenu {
left: auto;
right: 100%;
}
.tiny-menu.menu-hor .node-selected > .submenu {
left: auto;
margin-top: 2px;
}
.tiny-menu.menu-hor .node-selected > .submenu > li.node-selected {
background: var(--ti-menubar-background-active);
}
.tiny-menu.menu-hor .node-selected > .submenu > li.node-selected a {
color: var(--ti-menubar-submenu-normal-color);
}
.tiny-menu.menu-hor .node-selected > .submenu > li.node-selected a:hover {
color: #1890ff;
background: #fff;
}
.tiny-menu.menu-hor .node-selected > .submenu > li .submenu {
margin-top: -40px;
margin-left: 2px;
}
.tiny-menu.menu-hor .node-selected > .submenu .node-selected > .submenu {
left: 100%;
}
.tiny-menu.menu-hor .node-selected .submenu {
background: #fff;
border: 1px solid #d9d9d9;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.tiny-menu.menu-hor .menu-dropdown {
margin-top: 0;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group {
padding: 0 0 0 15px;
display: table-cell;
text-align: left;
word-break: break-all;
min-width: 330px;
max-width: 350px;
font-weight: 400;
vertical-align: top;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group li {
line-height: 30px;
display: inline-block;
margin-right: 8px;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group li.menu-row {
display: block;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group li.menu-row:after,
.tiny-menu.menu-hor .menu-dropdown .menu-group li.menu-row:before {
content: '';
display: table;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group li.menu-row:after {
clear: both;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group li a {
padding-right: 8px;
}
.tiny-menu.menu-hor .menu-dropdown .menu-group:last-child {
border-right: 0;
}
.tiny-menu.menu-hor .menu-dropdown .memu-group-sub {
font-weight: 400;
border: none;
line-height: 25px;
display: block;
}
.tiny-menu.menu-hor .menu-dropdown .memu-group-sub:after,
.tiny-menu.menu-hor .menu-dropdown .memu-group-sub:before {
content: '';
display: table;
}
.tiny-menu.menu-hor .menu-dropdown .memu-group-sub:after {
clear: both;
}
.tiny-menu.menu-hor .menu-dropdown .memu-group-sub li {
border: 0;
}
.tiny-menu.menu-hor .submenu {
margin-top: 0;
}
.tiny-menu.menu-hor .submenu li {
padding: 0;
height: var(--ti-menubar-submenu-li-height);
line-height: var(--ti-menubar-submenu-li-height);
}
.tiny-menu.menu-hor .submenu li .starActive-favorite {
color: #e1860a;
}
.tiny-menu.menu-hor .submenu li a {
padding: 0 35px 0 12px;
white-space: nowrap;
text-align: left;
}
.tiny-menu.menu-hor .submenu li span {
position: absolute;
color: var(--ti-menubar-submenu-normal-color);
}
.tiny-menu.menu-hor .menu-dropdown,
.tiny-menu.menu-hor .submenu {
position: absolute;
z-index: 10;
border-top: 0;
margin-top: 0;
}
.tiny-menu.menu-hor span.icon-starActive,
.tiny-menu.menu-hor span.icon-transpond {
position: absolute;
}
.tiny-menu.menu-hor span.icon-transpond {
right: 5px;
margin-right: 0;
}
.tiny-menu.menu-hor span.icon-starActive {
left: 0;
}
.tiny-menu.menu-hor span.icon-starActive + a {
padding-left: 35px;
}
.menu-roll > ul:after,
.menu-roll > ul:before {
content: '';
display: table;
}
.menu-roll > ul:after {
clear: both;
}
.menu-roll > ul > li {
display: none;
margin-left: 0;
}
.menu-roll > ul > li:after,
.menu-roll > ul > li:before {
content: '';
display: table;
}
.menu-roll > ul > li:after {
clear: both;
}
.menu-roll > ul > li a {
height: 45px;
font-weight: 700;
min-width: 30px;
margin: 0;
padding: 0 6px;
text-align: left;
}
.menu-roll > ul > li.node-selected > a {
float: left;
width: 100%;
}
.menu-roll .submenu {
text-align: left;
line-height: 30px;
left: 100%;
margin-top: 45px;
min-width: 180px;
}
.menu-roll .submenu .submenu {
margin-top: -31px;
top: inherit;
}
.menu-roll .submenu li {
padding: 0 10px;
height: 45px;
line-height: 45px;
}
.menu-roll .submenu li a {
padding: 0 6px;
display: block;
padding-right: 27px;
}
.menu-roll .submenu li span {
float: right;
margin: 5px 0 0 10px;
}
.menu-roll .submenu li span.tiny-icon {
float: none !important;
}
.menu-roll .submenu li span.icon-starActive,
.menu-roll .submenu li span.icon-transpond {
position: initial;
}
.menu-roll .node-selected {
display: block;
}
.menu-roll .node-selected > .submenu {
display: block;
left: 100%;
margin: 0;
min-width: 720px;
}
.menu-roll .node-selected > .submenu li {
float: left;
}
.roll-popup > ul > li {
display: block;
}
.roll-popup > ul > li > .submenu {
display: none;
}
.hor-dropdown {
position: relative;
z-index: 100;
}
.hor-dropdown .hor-dropdown-content,
.hor-dropdown > ul {
float: left;
}
.hor-dropdown-content {
position: relative;
color: #fff;
}
.hor-dropdown-content > span {
width: 80px;
text-align: center;
display: inline-block;
line-height: 31px;
position: relative;
z-index: 1;
background: var(--ti-menubar-background-normal);
line-height: 46px;
}
.hor-dropdown-content > span i {
width: 15px;
height: 16px;
padding-top: 1px;
border-radius: 2px;
cursor: pointer;
border: 1px solid var(--ti-menubar-dropdown-border-color);
}
.hor-dropdown-content .dropdown-menu {
position: absolute;
min-width: 140px;
padding: 5px;
right: 0;
margin-top: -1px;
background: var(--ti-menubar-background-normal);
padding: 5px 0;
}
.hor-dropdown-content .dropdown-menu li {
line-height: 24px;
padding: 2px 10px;
border: 1px solid var(--ti-menubar-background-normal);
}
.hor-dropdown-content .dropdown-menu li a {
color: #fff;
}
.hor-dropdown-content .dropdown-menu li:hover {
-webkit-box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.6);
border-radius: 3px;
border: 1px solid var(--ti-menubar-dropdown-hover-border-color);
background: var(--ti-menubar-dropdown-hover-background);
}
.menu-horline > ul > li {
position: inherit;
}
.menu-horline > ul > li a {
font-weight: 400;
}
.menu-horline > ul > li a span.tiny-icon {
margin-right: 5px;
}
.menu-horline > ul > li.node-more {
position: relative;
}
.menu-horline > ul > li.node-more > .submenu {
left: 0;
}
.menu-horline > ul > li.node-more > .submenu > li {
float: none;
}
.menu-horline > ul > li.node-more > .submenu > li > a {
text-align: left;
}
.menu-horline > ul > li.node-more > .submenu span.tiny-icon {
margin-left: 5px;
}
.menu-horline > ul > li.node-selected {
position: inherit;
}
.menu-horline .submenu {
min-width: 100%;
}
.menu-horline .submenu li {
float: left;
}
.menu-horline .submenu li a {
padding: 0 8px;
margin: 5px 0;
line-height: 35px;
text-align: center;
}
.menu-horline .submenu li span.tiny-icon {
float: none !important;
}
.menu-horline .submenu li span.icon-starActive,
.menu-horline .submenu li span.icon-transpond {
position: initial;
}
.menu-horline .node-selected > .submenu {
height: 45px;
left: 0;
}
.menu-horline .node-selected > .submenu li {
line-height: 45px;
}
.tiny-milestone {
--ti-milestone-color: var(--ti-base-color-light);
--ti-milestone-font-size: var(--ti-common-font-size-base);
--ti-milestone-icon-width: var(--ti-common-size-5x);
--ti-milestone-icon-height: var(--ti-common-size-5x);
--ti-milestone-line-background: #dbdbdb;
--ti-milestone-status-color: var(--ti-base-color-placeholder);
--ti-milestone-flag-tip-line-height: 20px;
--ti-milestone-flag-tip-background: var(--ti-base-color-border);
--ti-milestone-flag-tip-border-radius: var(--ti-common-border-radius-normal);
--ti-milestone-flag-content-border-radius: var(--ti-common-border-radius-1);
--ti-milestone-flag-content-font-size: var(--ti-common-font-size-1);
overflow: hidden;
padding-top: 38px;
}
.tiny-milestone .tiny-milestone__node {
display: block;
float: left;
}
.tiny-milestone .tiny-milestone__node::before {
content: '';
width: 28px;
height: 28px;
display: block;
position: relative;
left: calc(50% - 14px);
top: 28px;
z-index: 15;
}
.tiny-milestone .tiny-milestone__node.is-solid::before {
background: var(--ti-milestone-color);
}
.tiny-milestone .tiny-milestone__node.is-solid .tiny-svg {
fill: var(--ti-milestone-color);
}
.tiny-milestone .tiny-milestone__node .iconfix {
font-size: var(--ti-common-font-size-4);
}
.tiny-milestone .tiny-milestone__icon {
background: var(--ti-milestone-color);
width: var(--ti-milestone-icon-width, 20px);
height: var(--ti-milestone-icon-height, 20px);
line-height: var(--ti-milestone-icon-height, 20px);
position: relative;
font-size: var(--ti-milestone-font-size, 12px);
text-align: center;
left: calc(50% - 10px);
top: 4px;
border-radius: 50%;
color: var(--ti-milestone-color);
cursor: pointer;
z-index: 15;
}
.tiny-milestone .tiny-milestone__icon.is-completed {
border: solid 2px;
}
.tiny-milestone .tiny-milestone__icon.is-completed .tiny-svg {
fill: #1890ff;
vertical-align: baseline;
}
.tiny-milestone .tiny-milestone__line {
height: 4px;
left: 50%;
top: -8px;
position: relative;
background: var(--ti-milestone-line-background);
}
.tiny-milestone .tiny-milestone__line-end {
width: 0;
}
.tiny-milestone .tiny-milestone__description {
line-height: 14px;
margin-top: 8px;
position: relative;
overflow: hidden;
text-align: center;
}
.tiny-milestone .tiny-milestone__description-name {
width: 100%;
color: #333;
font-size: var(--ti-milestone-font-size);
float: left;
}
.tiny-milestone .tiny-milestone__description-status {
color: var(--ti-milestone-status-color);
font-size: var(--ti-milestone-font-size);
float: left;
width: 100%;
}
.tiny-milestone .tiny-milestone__flag-tip {
position: fixed;
padding: 2px 4px;
line-height: var(--ti-milestone-flag-tip-line-height);
background: var(--ti-milestone-flag-tip-background);
border-radius: var(--ti-milestone-flag-tip-border-radius);
border: solid 1px var(--ti-milestone-flag-tip-background);
text-align: center;
word-wrap: break-word;
}
.tiny-milestone .tiny-milestone__flag-tip::before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border: 1px solid;
border-width: 8px 8px 0 8px;
border-color: #d9d9d9 transparent;
content: '';
left: calc(50% - 4px);
bottom: -6px;
}
.tiny-milestone .tiny-milestone__flag {
position: absolute;
left: calc(50% - 29px);
bottom: 5px;
width: 58px;
text-align: center;
z-index: 1;
}
.tiny-milestone .tiny-milestone__flag:hover {
z-index: 2;
}
.tiny-milestone .tiny-milestone__flag-content {
width: 58px;
height: 34px;
padding: 0;
line-height: 15px;
font-size: var(--ti-milestone-flag-content-font-size);
border-radius: var(--ti-milestone-flag-content-border-radius);
color: var(--ti-milestone-color);
background: #333;
cursor: pointer;
vertical-align: middle;
display: table-cell;
}
.tiny-milestone .tiny-milestone__flag-content p {
color: var(--ti-milestone-color);
width: 58px;
font-size: var(--ti-common-font-size-base);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 4px;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-milestone .tiny-milestone__flag-line {
height: 30px;
width: 1px;
margin-left: 50%;
background: #333;
}
.tiny-milestone .tiny-milestone__dot {
display: block;
background: var(--ti-milestone-flag-line-color);
border: solid 1px;
border-radius: 50%;
width: 5px;
height: 5px;
position: relative;
bottom: -29px;
right: 2px;
}
.tiny-modal {
--ti-modal-font-size: var(--ti-common-font-size-base);
--ti-modal-font-color: var(--ti-base-color-info-normal);
--ti-modal-font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif;
--ti-modal-primary-color: var(--ti-common-color-prompt);
--ti-modal-success-color: var(--ti-common-color-success);
--ti-modal-error-color: var(--ti-common-color-error);
--ti-modal-warning-color: var(--ti-common-color-warn);
--ti-modal-loading-color: var(--ti-common-color-prompt);
--ti-modal-alert-font-size: 22px;
--ti-modal-header-font-size: var(--ti-common-font-size-3);
--ti-modal-header-text-color: var(--ti-common-color-text-primary);
--ti-modal-header-font-weight: var(--ti-base-font-weight-bold);
--ti-modal-header-padding: 32px 32px 12px 32px;
--ti-modal-body-padding: 0 32px;
--ti-modal-footer-padding: 28px 32px 32px;
--ti-modal-footer-btn-border-radius: var(--ti-common-border-radius-normal);
--ti-modal-close-btn-font-size: var(--ti-common-font-size-1);
--ti-modal-close-btn-top: 13px;
--ti-modal-close-btn-scale: scale(1, 1);
--ti-modal-close-btn-padding: 0;
--ti-modal-small-btn-font-size: var(--ti-common-font-size-2);
--ti-modal-box-background-color: var(--ti-base-color-light);
--ti-modal-btn-color: var(--ti-base-color-common-5);
--ti-modal-box-shadow: var(--ti-common-shadow-4-down);
--ti-modal-box-border-radius: var(--ti-common-border-radius-normal);
--ti-modal-border-color: rgba(0, 0, 0, 0.2);
--ti-modal-close-btn-background-color-hover: var(--ti-base-color-light);
--ti-modal-footer-default-button: inline-block;
--ti-modal-box-width: 400px;
}
.tiny-modal__wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: var(--ti-modal-font-size);
color: var(--ti-modal-font-color);
font-family: var(--ti-modal-font-family, Helvetica, Arial, 'Microsoft YaHei', sans-serif);
-webkit-transition: top 0.4s;
transition: top 0.4s;
}
.tiny-modal__wrapper.active {
display: block;
}
.tiny-modal__wrapper.is__visible.is__mask:before {
background-color: rgba(0, 0, 0, 0.3);
}
.tiny-modal__wrapper.is__visible.type__message .tiny-modal__box {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.tiny-modal__wrapper.is__visible:not(.type__message) .tiny-modal__box:not(.is__drag) {
top: 15vh;
-webkit-transition: top 0s ease-in, opacity 0.4s ease-in;
transition: top 0s ease-in, opacity 0.4s ease-in;
}
.tiny-modal__wrapper.is__visible .tiny-modal__box {
opacity: 1;
visibility: visible;
}
.tiny-modal__wrapper:not(.lock__view) {
pointer-events: none;
}
.tiny-modal__wrapper.lock__scroll {
overflow: hidden;
}
.tiny-modal__wrapper:not(.lock__scroll) {
overflow: auto;
}
.tiny-modal__wrapper:not(.type__message) .tiny-modal__text {
font-size: var(--ti-common-font-size-base);
color: var(--ti-common-color-text-secondary);
line-height: var(--ti-common-line-height-number);
}
.tiny-modal__wrapper.is__mask:before,
.tiny-modal__wrapper.lock__view:before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: auto;
}
.tiny-modal__wrapper.is__animat.is__mask:before {
-webkit-transition: background-color, 0.2s, ease-in-out;
transition: background-color, 0.2s, ease-in-out;
}
.tiny-modal__wrapper.is__animat.type__message .tiny-modal__box:not(.is__drag) {
-webkit-transition: all, 0.2s, ease-out;
transition: all, 0.2s, ease-out;
}
.tiny-modal__wrapper.size__mini,
.tiny-modal__wrapper.size__small {
font-size: var(--ti-modal-font-size);
}
.tiny-modal__wrapper.size__mini .tiny-modal__box,
.tiny-modal__wrapper.size__small .tiny-modal__box {
padding: 6px 0;
}
.tiny-modal__wrapper.size__mini .tiny-modal__body,
.tiny-modal__wrapper.size__small .tiny-modal__body {
padding: 4px 14px 10px 14px;
}
.tiny-modal__wrapper.size__mini .tiny-modal__footer,
.tiny-modal__wrapper.size__small .tiny-modal__footer {
padding: 4px 14px 8px 14px;
}
.tiny-modal__wrapper.size__mini .tiny-modal__header,
.tiny-modal__wrapper.size__small .tiny-modal__header {
font-size: var(--ti-modal-header-font-size);
padding: 6px 30px 8px 14px;
}
.tiny-modal__wrapper.size__mini .tiny-modal__close-btn,
.tiny-modal__wrapper.size__mini .tiny-modal__zoom-btn,
.tiny-modal__wrapper.size__small .tiny-modal__close-btn,
.tiny-modal__wrapper.size__small .tiny-modal__zoom-btn {
font-size: var(--ti-modal-small-btn-font-size);
top: 10px;
}
.tiny-modal__wrapper.type__alert .tiny-modal__body,
.tiny-modal__wrapper.type__confirm .tiny-modal__body,
.tiny-modal__wrapper.type__message .tiny-modal__body {
white-space: normal;
word-break: break-word;
}
.tiny-modal__wrapper.type__message {
text-align: center;
}
.tiny-modal__wrapper.type__message .tiny-modal__box {
display: inline-block;
padding: 24px;
margin-top: 0;
width: auto;
-webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body:after {
content: '';
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__content {
max-width: 800px;
float: left;
}
.tiny-modal__wrapper.type__message .tiny-modal__status-wrapper {
font-size: var(--ti-modal-small-btn-font-size);
padding-right: 10px;
}
.tiny-modal__wrapper.type__alert .tiny-modal__box,
.tiny-modal__wrapper.type__confirm .tiny-modal__box,
.tiny-modal__wrapper.type__modal .tiny-modal__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
left: 50%;
top: 0;
-webkit-box-shadow: var(--ti-modal-box-shadow);
box-shadow: var(--ti-modal-box-shadow);
border: 1px solid var(--ti-modal-border-color);
}
.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header,
.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header,
.tiny-modal__wrapper.type__modal .tiny-modal__box .tiny-modal__header {
cursor: move;
}
.tiny-modal__wrapper.type__modal .tiny-modal__body {
overflow: auto;
}
.tiny-modal__wrapper.type__modal .tiny-modal__body .tiny-modal__content {
overflow: auto;
}
.tiny-modal__wrapper.type__alert .tiny-modal__status-wrapper,
.tiny-modal__wrapper.type__confirm .tiny-modal__status-wrapper {
font-size: var(--ti-modal-alert-font-size);
padding: 0 10px 0 2px;
}
.tiny-modal__wrapper.status__info .tiny-modal__status-wrapper {
fill: var(--ti-modal-primary-color);
}
.tiny-modal__wrapper.status__question .tiny-modal__status-wrapper,
.tiny-modal__wrapper.status__warning .tiny-modal__status-wrapper {
fill: var(--ti-modal-warning-color);
}
.tiny-modal__wrapper.status__success .tiny-modal__status-wrapper {
fill: var(--ti-modal-success-color);
}
.tiny-modal__wrapper.status__error .tiny-modal__status-wrapper {
fill: var(--ti-modal-error-color);
}
.tiny-modal__wrapper.status__loading .tiny-modal__status-wrapper {
fill: var(--ti-modal-loading-color);
}
.tiny-modal__wrapper.is__maximize .tiny-modal__box .tiny-modal__header {
cursor: default;
}
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .sb-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .selb-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .sest-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .st-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .swlb-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .swst-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .wl-resize,
.tiny-modal__wrapper.is__maximize .tiny-modal__resize .wr-resize {
display: none;
}
.tiny-modal__box {
width: var(--ti-modal-box-width);
background-color: var(--ti-modal-box-background-color);
border-radius: var(--ti-modal-box-border-radius);
font-size: var(--ti-modal-header-font-size);
-webkit-box-shadow: var(--ti-common-shadow-4-down);
box-shadow: var(--ti-common-shadow-4-down);
text-align: left;
pointer-events: auto;
visibility: hidden;
opacity: 0;
}
.tiny-modal__box.is__drag {
cursor: move;
}
.tiny-modal__box.is__drag .tiny-modal__body:after,
.tiny-modal__box.is__drag .tiny-modal__footer:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tiny-modal__box.is__drag .tiny-modal__body {
overflow: hidden;
}
.tiny-modal__box.is__drag .tiny-modal__body .tiny-modal__content {
overflow: hidden;
}
.tiny-modal__status-wrapper {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-modal__status-icon {
font-style: normal;
}
.tiny-modal__content {
width: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.tiny-modal__body,
.tiny-modal__footer,
.tiny-modal__header {
position: relative;
}
.tiny-modal__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: var(--ti-modal-body-padding);
}
.tiny-modal__header {
-ms-flex-negative: 0;
flex-shrink: 0;
color: var(--ti-modal-header-text-color);
font-size: var(--ti-modal-header-font-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: var(--ti-modal-header-font-weight);
border-bottom: none;
padding: var(--ti-modal-header-padding);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tiny-modal__close-btn,
.tiny-modal__zoom-btn {
font-size: var(--ti-modal-close-btn-font-size);
position: absolute;
right: 24px;
top: var(--ti-modal-close-btn-top);
z-index: 1;
fill: var(--ti-modal-btn-color);
-webkit-transform: var(--ti-modal-close-btn-scale);
transform: var(--ti-modal-close-btn-scale);
cursor: pointer;
padding: var(--ti-modal-close-btn-padding);
border-radius: 4px;
}
.tiny-modal__close-btn:hover,
.tiny-modal__zoom-btn:hover {
fill: var(--ti-modal-btn-color);
background-color: var(--ti-modal-close-btn-background-color-hover);
}
.tiny-modal__zoom-btn {
right: 44px;
border-color: #c0c4cc;
}
.tiny-modal__zoom-btn:hover {
border-color: #606266;
}
.tiny-modal__footer {
-ms-flex-negative: 0;
flex-shrink: 0;
text-align: center;
padding: var(--ti-modal-footer-padding);
}
.tiny-modal__footer .tiny-button {
border-radius: var(--ti-modal-footer-btn-border-radius);
}
.tiny-modal__footer .tiny-button--default {
display: var(--ti-modal-footer-default-button);
}
.tiny-modal__resize .sb-resize,
.tiny-modal__resize .selb-resize,
.tiny-modal__resize .sest-resize,
.tiny-modal__resize .st-resize,
.tiny-modal__resize .swlb-resize,
.tiny-modal__resize .swst-resize,
.tiny-modal__resize .wl-resize,
.tiny-modal__resize .wr-resize {
position: absolute;
z-index: 100;
}
.tiny-modal__resize .wl-resize,
.tiny-modal__resize .wr-resize {
width: 8px;
height: 100%;
top: 0;
cursor: w-resize;
}
.tiny-modal__resize .wl-resize {
left: -3px;
}
.tiny-modal__resize .wr-resize {
right: -3px;
}
.tiny-modal__resize .selb-resize,
.tiny-modal__resize .sest-resize,
.tiny-modal__resize .swlb-resize,
.tiny-modal__resize .swst-resize {
width: 10px;
height: 10px;
z-index: 101;
}
.tiny-modal__resize .sest-resize,
.tiny-modal__resize .swst-resize {
top: -8px;
}
.tiny-modal__resize .selb-resize,
.tiny-modal__resize .swlb-resize {
bottom: -8px;
}
.tiny-modal__resize .sest-resize,
.tiny-modal__resize .swlb-resize {
cursor: sw-resize;
}
.tiny-modal__resize .selb-resize,
.tiny-modal__resize .swst-resize {
cursor: se-resize;
}
.tiny-modal__resize .swlb-resize,
.tiny-modal__resize .swst-resize {
left: -8px;
}
.tiny-modal__resize .selb-resize,
.tiny-modal__resize .sest-resize {
right: -8px;
}
.tiny-modal__resize .sb-resize,
.tiny-modal__resize .st-resize {
width: 100%;
height: 8px;
left: 0;
cursor: s-resize;
}
.tiny-modal__resize .st-resize {
top: -3px;
}
.tiny-modal__resize .sb-resize {
bottom: -3px;
}
@-webkit-keyframes modal-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes modal-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes modal-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes modal-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes modal-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes modal-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
.tiny-nav-menu {
--ti-nav-menu-height: var(--ti-base-size-height-large);
--ti-nav-menu-background: var(--ti-base-color-navigation-background);
--ti-nav-menu-item-font-size: var(--ti-common-font-size-2);
--ti-nav-menu-item-font-color: var(--ti-base-color-light);
--ti-nav-menu-item-hover-background: #474c5e;
--ti-nav-menu-setting-font-size: 22px;
--ti-nav-menu-popmenu-color: var(--ti-base-color-info-normal);
--ti-nav-menu-popmenu-border-color: var(--ti-base-color-border);
--ti-nav-menu-popmenu-more-item-height: 40px;
--ti-nav-menu-popmenu-more-item-hover-color: var(--ti-base-color-brand-6);
--ti-nav-menu-popmenu-more-item-hover-background: var(--ti-base-color-hover-background);
--ti-nav-menu-popmenu-more-item-active-background: var(--ti-base-color-selected-background);
--ti-nav-menu-popmenu-node-title-font-size: var(--ti-common-font-size-1);
--ti-nav-menu-popmenu-node-item-font-size: var(--ti-common-font-size-base, 12px);
background: var(--ti-nav-menu-background);
height: var(--ti-nav-menu-height);
position: relative;
padding: 0 24px;
}
.tiny-nav-menu > .slot-logo {
float: left;
overflow: hidden;
margin: 0 100px 0 0;
line-height: var(--ti-nav-menu-height);
}
.tiny-nav-menu > .slot-toolbar {
float: right;
}
.tiny-nav-menu > .slot-toolbar > .setting {
position: relative;
float: right;
margin: 0 0 0 24px;
}
.tiny-nav-menu > .slot-toolbar > .setting > .tiny-icon {
font-size: var(--ti-nav-menu-setting-font-size);
line-height: var(--ti-nav-menu-height);
cursor: pointer;
color: #fff;
}
.tiny-nav-menu > .slot-toolbar > .setting > .more-setting {
position: absolute;
right: 0;
min-width: 120px;
background-color: var(--ti-nav-menu-item-font-color);
border: 1px solid #d9d9d9;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.tiny-nav-menu > .slot-toolbar > .setting > .more-setting > .setting-item {
padding: 6px 10px;
color: #333;
}
.tiny-nav-menu > .slot-toolbar > .setting > .more-setting > .setting-item:hover {
background: var(--ti-nav-menu-popmenu-more-item-hover-background);
}
.tiny-nav-menu > .slot-toolbar > .setting > .more-setting > .setting-item:active {
background: var(--ti-nav-menu-popmenu-more-item-active-background);
}
.tiny-nav-menu > .slot-toolbar > .template-toolbar .tiny-selector {
margin-top: 0;
}
.tiny-nav-menu > .menu {
float: left;
height: var(--ti-nav-menu-height);
line-height: var(--ti-nav-menu-height);
overflow: hidden;
}
.tiny-nav-menu > .menu > li {
float: left;
}
.tiny-nav-menu > .menu > li > a,
.tiny-nav-menu > .menu > li > span {
padding: 0 12px;
font-size: var(--ti-nav-menu-item-font-size);
text-align: center;
color: var(--ti-nav-menu-item-font-color);
cursor: pointer;
display: block;
height: var(--ti-nav-menu-height);
line-height: var(--ti-nav-menu-height);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-nav-menu > .menu > li > a.active,
.tiny-nav-menu > .menu > li > a:hover,
.tiny-nav-menu > .menu > li > span.active,
.tiny-nav-menu > .menu > li > span:hover {
color: var(--ti-nav-menu-item-font-color);
background: var(--ti-nav-menu-item-hover-background);
text-decoration: none;
}
.tiny-nav-menu > .menu > li > a.selected,
.tiny-nav-menu > .menu > li > span.selected {
border-bottom: 3px solid #fff;
}
.tiny-nav-menu > .more {
padding: 0 12px;
font-size: var(--ti-nav-menu-item-font-size);
text-align: center;
color: var(--ti-nav-menu-item-font-color);
cursor: pointer;
display: inline-block;
height: var(--ti-nav-menu-height);
line-height: var(--ti-nav-menu-height);
}
.tiny-nav-menu > .more.active,
.tiny-nav-menu > .more.selected,
.tiny-nav-menu > .more:hover {
color: var(--ti-nav-menu-item-font-color);
background: var(--ti-nav-menu-item-hover-background);
}
.tiny-nav-menu > .more.selected {
border-bottom: 3px solid #fff;
}
.tiny-nav-menu > .popmenu {
position: absolute;
background: #fff;
width: 100%;
border: 1px solid var(--ti-nav-menu-popmenu-border-color);
-webkit-box-shadow: 0 0 4px var(--ti-nav-menu-popmenu-border-color);
box-shadow: 0 0 4px var(--ti-nav-menu-popmenu-border-color);
max-height: calc(100vh - var(--ti-nav-menu-height));
overflow-y: auto;
left: 0;
}
.tiny-nav-menu > .popmenu > .more-menu {
float: left;
width: 160px;
height: 100%;
border-right: 1px solid var(--ti-nav-menu-popmenu-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-nav-menu > .popmenu > .more-menu > ul {
list-style: none;
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li {
height: var(--ti-nav-menu-popmenu-more-item-height);
line-height: var(--ti-nav-menu-popmenu-more-item-height);
padding: 0 12px 0 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li.active,
.tiny-nav-menu > .popmenu > .more-menu > ul > li:hover {
color: var(--ti-nav-menu-popmenu-more-item-hover-color);
background: var(--ti-nav-menu-popmenu-more-item-hover-background);
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li.active .more-icon,
.tiny-nav-menu > .popmenu > .more-menu > ul > li:hover .more-icon {
fill: var(--ti-nav-menu-popmenu-more-item-hover-color);
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li > a {
color: var(--ti-nav-menu-popmenu-color);
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li > a,
.tiny-nav-menu > .popmenu > .more-menu > ul > li > span {
display: block;
height: var(--ti-nav-menu-popmenu-more-item-height);
line-height: var(--ti-nav-menu-popmenu-more-item-height);
font-size: var(--ti-common-font-size-base);
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li > a.showicon,
.tiny-nav-menu > .popmenu > .more-menu > ul > li > span.showicon {
width: calc(100% - 12px);
}
.tiny-nav-menu > .popmenu > .more-menu > ul > li > .more-icon {
font-size: var(--ti-common-font-size-base);
}
.tiny-nav-menu > .popmenu > .sub-menu {
float: left;
width: calc(100% - 160px);
padding-left: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-nav-menu > .popmenu > .sub-menu.full-width {
width: 100%;
padding: 0 86px;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul {
list-style: none;
overflow: hidden;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group {
list-style: none;
margin-bottom: 24px;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group:first-child {
margin-top: 18px;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .tiny-nav-menu__sub-menu-title {
color: var(--ti-nav-menu-popmenu-color);
font-size: var(--ti-nav-menu-popmenu-node-title-font-size);
font-weight: 700;
margin: 0 0 12px 0;
word-break: break-all;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .tiny-nav-menu__sub-menu-title:only-child {
border-bottom: none;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item {
font-size: var(--ti-nav-menu-popmenu-node-item-font-size);
padding: 4px 0;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item:hover {
background: var(--ti-nav-menu-popmenu-more-item-hover-background);
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item.active,
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item:active {
background: var(--ti-nav-menu-popmenu-more-item-active-background);
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item > a {
color: var(--ti-nav-menu-popmenu-color);
white-space: normal;
word-break: break-all;
text-decoration: none;
}
.tiny-nav-menu > .popmenu > .sub-menu > ul .group > .sub-item > span {
color: var(--ti-nav-menu-popmenu-color);
white-space: normal;
word-break: break-all;
}
.tiny-nav-menu > .single {
width: auto;
height: auto;
padding: 0;
}
.tiny-nav-menu > .single > .sub-menu.full-width {
padding: 0;
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group {
margin: 0;
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group .tiny-nav-menu__sub-menu-title {
padding: 18px 35px 0 12px;
}
.tiny-nav-menu
> .single
> .sub-menu.full-width
> ul
.group
.tiny-nav-menu__sub-menu-title.tiny-nav-menu__sub-menu-title-blank {
padding: 0 35px 0 12px;
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group > .title {
margin: 0;
line-height: 40px;
padding: 0 35px 0 12px;
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group > .sub-item {
height: 40px;
line-height: 40px;
padding: 0 35px 0 12px;
margin: 0;
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group > .sub-item:hover {
background: var(--ti-nav-menu-popmenu-more-item-hover-background);
}
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group > .sub-item.active,
.tiny-nav-menu > .single > .sub-menu.full-width > ul .group > .sub-item:active {
background: var(--ti-nav-menu-popmenu-more-item-active-background);
}
.tiny-nav-menu > .more-button {
float: left;
text-align: center;
padding: 0 12px;
height: var(--ti-nav-menu-height);
line-height: var(--ti-nav-menu-height);
overflow: hidden;
fill: #fff;
font-size: var(--ti-nav-menu-item-font-size);
}
.tiny-nav-menu > .more-button:hover {
background: var(--ti-nav-menu-item-hover-background);
}
.tiny-nav-menu > .more-button.float-right {
float: right;
margin-left: 10px;
}
.tiny-nav-menu > .slot-mobile-menu {
display: none;
}
@media (max-width: 768px) {
.tiny-nav-menu > .more-button.mobile {
display: none;
}
.tiny-nav-menu > .slot-mobile-menu {
display: block;
}
.tiny-nav-menu > .menu {
display: none;
}
.tiny-nav-menu > .popmenu .sub-menu .full-width {
padding: 0;
}
}
.tiny-notify {
--ti-notify-info-background: var(--ti-common-color-prompt-bg);
--ti-notify-info-icon-color: var(--ti-common-color-prompt);
--ti-notify-warning-background: var(--ti-common-color-warn-bg);
--ti-notify-warning-icon-color: var(--ti-common-color-warn);
--ti-notify-error-background: var(--ti-common-color-error-bg);
--ti-notify-error-icon-color: var(--ti-common-color-error);
--ti-notify-success-background: var(--ti-common-color-success-bg);
--ti-notify-success-icon-color: var(--ti-common-color-success);
--ti-notify-color: var(--ti-base-color-brand-6);
--ti-notify-border-radius: var(--ti-common-border-radius-normal);
--ti-notify-title-color: var(--ti-base-color-info-normal);
--ti-notify-title-font-size: var(--ti-common-font-size-1);
--ti-notify-title-font-weight: var(--ti-common-font-weight-7);
--ti-notify-content-font-size: var(--ti-common-font-size-1);
--ti-notify-content-margin: 0;
--ti-notify-message-margin: 0 0 0 10px;
--ti-notify-icon-size: var(--ti-common-font-size-5);
--ti-notify-close-color: var(--ti-base-color-common-7);
--ti-notify-max-width: 400px;
--ti-notify-box-shadow: var(--ti-common-shadow-4-down);
position: fixed;
z-index: 1101;
max-width: var(--ti-notify-max-width);
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
overflow: hidden;
white-space: nowrap;
padding: 16px;
background: var(--ti-notify-background);
border-radius: 2px;
border-radius: var(--ti-notify-border-radius);
font-size: var(--ti-common-font-size-base);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-shadow: var(--ti-notify-box-shadow);
box-shadow: var(--ti-notify-box-shadow);
}
.tiny-notify--info {
background: var(--ti-notify-info-background);
}
.tiny-notify--warning {
background: var(--ti-notify-warning-background);
}
.tiny-notify--error {
background: var(--ti-notify-error-background);
}
.tiny-notify--success {
background: var(--ti-notify-success-background);
}
.tiny-notify.top-left {
left: 10px;
top: 25px;
}
.tiny-notify.bottom-left {
left: 10px;
bottom: 25px;
}
.tiny-notify.top-right {
right: 10px;
top: 25px;
}
.tiny-notify.bottom-right {
right: 10px;
bottom: 25px;
}
.tiny-notify .tiny-notify__title {
font-weight: var(--ti-notify-title-font-weight);
font-size: var(--ti-notify-title-font-size);
color: var(--ti-notify-title-color);
line-height: 1.74;
}
.tiny-notify .tiny-notify__icon {
color: var(--ti-notify-color);
}
.tiny-notify .tiny-notify__content {
color: var(--ti-notify-title-color);
font-size: var(--ti-common-font-size-base);
margin: 0;
padding: 0;
font-size: var(--ti-common-font-size-1);
word-break: break-all;
white-space: pre-wrap;
}
.tiny-notify .tiny-notify__closebtn {
cursor: pointer;
color: var(--ti-notify-color);
position: absolute;
top: 50%;
right: 10px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tiny-notify .tiny-notify__icon-zone {
width: 24px;
height: 24px;
font-size: var(--ti-notify-icon-size);
}
.tiny-notify .tiny-notify__message-zone {
width: calc(100% - 40px);
margin: var(--ti-notify-message-margin);
}
.tiny-notify .tiny-notify__close-zone {
width: 16px;
height: 16px;
font-size: var(--ti-common-font-size-2);
cursor: pointer;
}
.tiny-notify--info .tiny-notify__icon-zone {
fill: var(--ti-notify-info-icon-color);
}
.tiny-notify--info .tiny-notify__close-zone {
fill: var(--ti-notify-close-color);
}
.tiny-notify--warning .tiny-notify__icon-zone {
fill: var(--ti-notify-warning-icon-color);
}
.tiny-notify--warning .tiny-notify__close-zone {
fill: var(--ti-notify-close-color);
}
.tiny-notify--error .tiny-notify__icon-zone {
fill: var(--ti-notify-error-icon-color);
}
.tiny-notify--error .tiny-notify__close-zone {
fill: var(--ti-notify-close-color);
}
.tiny-notify--success .tiny-notify__icon-zone {
fill: var(--ti-notify-success-icon-color);
}
.tiny-notify--error .tiny-notify__close-zone {
fill: var(--ti-notify-close-color);
}
.tiny-notify__icon-zone .tiny-notify__icon-status {
position: relative;
}
.tiny-notify--no-close .tiny-notify__message-zone {
width: calc(100% - 24px);
}
.tiny-notify__message-zone .tiny-notify__title-wrapper {
height: 24px;
line-height: 24px;
color: var(--ti-notify-title-color);
font-size: var(--ti-notify-title-font-size);
}
.tiny-notify__message-zone .tiny-notify__content-wrapper {
height: auto;
line-height: 24px;
max-height: 96px;
overflow-y: auto;
font-size: var(--ti-notify-content-font-size);
margin: var(--ti-notify-content-margin);
}
.tiny-notify__close-zone .tiny-notify__icon-close {
position: relative;
top: -5px;
}
.tiny-notify--no-icon .tiny-notify__message-zone {
width: 100%;
}
.tiny-numeric {
--ti-numeric-input-width: 180px;
--ti-numeric-input-radius: var(--ti-common-border-radius-normal);
--ti-numeric-input-normal-border-color: var(--ti-base-color-border);
--ti-numeric-input-normal-color: var(--ti-base-color-info-normal);
--ti-numeric-input-normal-background: var(--ti-base-color-light);
--ti-numeric-input-normal-height: 28px;
--ti-numeric-input-normal-active-border-color: var(--ti-base-color-border-hover);
--ti-numeric-input-placeholder-color: var(--ti-base-color-placeholder);
--ti-numeric-input-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-numeric-input-icon-hover-color: var(--ti-base-color-border-hover);
--ti-numeric-input-icon-disabled-color: var(--ti-common-color-icon-disabled);
--ti-numeric-input-disabled-border-color: var(--ti-common-color-line-disabled);
position: relative;
display: inline-block;
width: var(--ti-numeric-input-width);
}
.tiny-numeric__input {
display: block;
line-height: normal;
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner {
cursor: not-allowed;
pointer-events: none;
border: 1px solid var(--ti-numeric-input-disabled-border-color);
color: var(--ti-numeric-input-placeholder-color);
background: var(--ti-numeric-input-disabled-bgcolor);
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-moz-placeholder {
color: #bfbfbf;
opacity: 1;
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner:-ms-input-placeholder {
color: #bfbfbf;
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-webkit-input-placeholder {
color: #bfbfbf;
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::-ms-input-placeholder {
color: #bfbfbf;
}
.tiny-numeric__input.is-disabled .tiny-numeric__input-inner::placeholder {
color: #bfbfbf;
}
.tiny-numeric__input.is-disabled .tiny-input__icon {
cursor: not-allowed;
}
.tiny-numeric__input.has-unit .tiny-numeric__input-inner {
padding: 0 50px 0 8px;
}
.tiny-numeric__input.text-align-left .tiny-numeric__input-inner {
text-align: left;
}
.tiny-numeric__input-inner {
width: 100%;
height: var(--ti-numeric-input-normal-height);
line-height: var(--ti-numeric-input-normal-height);
border: 1px solid var(--ti-numeric-input-normal-border-color);
border-radius: var(--ti-numeric-input-radius);
color: var(--ti-numeric-input-normal-color);
background: var(--ti-numeric-input-normal-background);
font-size: var(--ti-common-font-size-base);
padding: 0 calc(var(--ti-numeric-input-normal-height) + 8px);
outline: 0;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-numeric__input-inner::-moz-placeholder {
color: var(--ti-numeric-input-placeholder-color);
opacity: 1;
}
.tiny-numeric__input-inner:-ms-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner::-webkit-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner::-ms-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner::placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner:hover {
border: 1px solid var(--ti-numeric-input-normal-active-border-color);
}
.tiny-numeric__input-inner:active,
.tiny-numeric__input-inner:focus {
border: 1px solid var(--ti-base-color-brand-6);
}
.tiny-numeric__input-inner:focus {
outline: 0;
}
.tiny-numeric__input-inner:focus::-moz-placeholder {
color: var(--ti-numeric-input-placeholder-color);
opacity: 1;
}
.tiny-numeric__input-inner:focus:-ms-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner:focus::-webkit-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner:focus::-ms-input-placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner:focus::placeholder {
color: var(--ti-numeric-input-placeholder-color);
}
.tiny-numeric__input-inner::-ms-clear {
display: none;
width: 0;
height: 0;
}
.tiny-numeric__decrease,
.tiny-numeric__increase {
position: absolute;
z-index: 1;
top: 1px;
width: 30px;
height: calc(100% - 2px);
line-height: calc(var(--ti-numeric-input-normal-height) - 2px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--ti-common-font-size-1);
text-align: center;
cursor: pointer;
}
.tiny-numeric__decrease svg,
.tiny-numeric__increase svg {
fill: var(--ti-numeric-input-normal-active-border-color);
}
.tiny-numeric__decrease:hover:not(.is-disabled) ~ .tiny-numeric__input .tiny-numeric__input-inner:not(.is-disabled),
.tiny-numeric__increase:hover:not(.is-disabled) ~ .tiny-numeric__input .tiny-numeric__input-inner:not(.is-disabled) {
border-color: var(--ti-numeric-input-icon-hover-color);
}
.tiny-numeric__decrease:hover:not(.is-disabled)
~ .tiny-numeric__input.is-disabled
.tiny-numeric__input-inner:not(.is-disabled),
.tiny-numeric__increase:hover:not(.is-disabled)
~ .tiny-numeric__input.is-disabled
.tiny-numeric__input-inner:not(.is-disabled) {
border-color: var(--ti-numeric-input-normal-border-color);
}
.tiny-numeric__decrease:hover svg,
.tiny-numeric__increase:hover svg {
fill: var(--ti-numeric-input-icon-hover-color);
}
.tiny-numeric__decrease.is-disabled,
.tiny-numeric__increase.is-disabled {
cursor: not-allowed;
}
.tiny-numeric__decrease.is-disabled svg,
.tiny-numeric__increase.is-disabled svg {
fill: var(--ti-numeric-input-icon-disabled-color);
}
.tiny-numeric__increase {
right: 1px;
border-radius: 0 4px 4px 0;
border-left: 1px solid var(--ti-numeric-input-normal-border-color);
}
.tiny-numeric__decrease {
left: 1px;
border-radius: 4px 0 0 4px;
border-right: 1px solid var(--ti-numeric-input-normal-border-color);
}
.tiny-numeric__unit {
right: 0;
position: absolute;
z-index: 1;
top: 1px;
width: 50px;
height: calc(100% - 2px);
color: #666;
font-size: var(--ti-common-font-size-base);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-left: 1px solid #d9d9d9;
margin: 0 1px 0 0;
background: #f1f1f1;
}
.tiny-numeric.is-disabled .tiny-numeric__decrease,
.tiny-numeric.is-disabled .tiny-numeric__increase {
border-color: var(--ti-numeric-input-disabled-border-color);
}
.tiny-numeric.is-disabled .tiny-numeric__decrease svg,
.tiny-numeric.is-disabled .tiny-numeric__increase svg {
fill: var(--ti-numeric-input-icon-disabled-color);
}
.tiny-numeric.is-disabled .tiny-numeric__decrease:hover,
.tiny-numeric.is-disabled .tiny-numeric__increase:hover {
cursor: not-allowed;
}
.tiny-numeric.is-disabled .tiny-numeric__decrease:hover svg,
.tiny-numeric.is-disabled .tiny-numeric__increase:hover svg {
fill: var(--ti-numeric-input-icon-disabled-color);
}
.tiny-numeric--medium {
width: 270px;
}
.tiny-numeric--medium .tiny-numeric__decrease,
.tiny-numeric--medium .tiny-numeric__increase {
width: 42px;
line-height: 40px;
font-size: var(--ti-common-font-size-2);
}
.tiny-numeric--medium .tiny-numeric__input-inner {
height: 42px;
line-height: 42px;
padding-left: 43px;
padding-right: 43px;
}
.tiny-numeric--small {
width: 200px;
}
.tiny-numeric--small .tiny-numeric__decrease,
.tiny-numeric--small .tiny-numeric__increase {
width: 36px;
line-height: 34px;
font-size: var(--ti-common-font-size-1);
}
.tiny-numeric--small .tiny-numeric__input-inner {
height: 36px;
line-height: 36px;
padding-left: 37px;
padding-right: 37px;
}
.tiny-numeric--mini {
width: 130px;
}
.tiny-numeric--mini .tiny-numeric__decrease,
.tiny-numeric--mini .tiny-numeric__increase {
width: 24px;
line-height: 20px;
font-size: var(--ti-common-font-size-base);
}
.tiny-numeric--mini .tiny-numeric__input-inner {
height: 24px;
line-height: 24px;
padding-left: 35px;
padding-right: 35px;
}
.tiny-numeric.is-without-controls .tiny-numeric__input-inner {
padding-left: 8px;
padding-right: 8px;
}
.tiny-numeric.is-without-controls .tiny-numeric__input.has-unit .tiny-numeric__input-inner {
padding: 0 50px 0 8px;
}
.tiny-numeric.is-without-controls .tiny-numeric__input.text-align-left .tiny-numeric__input-inner {
text-align: left;
}
.tiny-numeric.is-controls-right .tiny-numeric__input-inner {
padding-left: 8px;
padding-right: 38px;
}
.tiny-numeric.is-controls-right .tiny-numeric__decrease,
.tiny-numeric.is-controls-right .tiny-numeric__increase {
height: auto;
line-height: 14px;
}
.tiny-numeric.is-controls-right .tiny-numeric__decrease svg,
.tiny-numeric.is-controls-right .tiny-numeric__increase svg {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.tiny-numeric.is-controls-right .tiny-numeric__increase {
border-radius: 0 4px 0 0;
border-bottom: 1px solid var(--ti-numeric-input-normal-border-color);
}
.tiny-numeric.is-controls-right .tiny-numeric__decrease {
right: 1px;
bottom: 1px;
top: auto;
left: auto;
border-right: none;
border-left: 1px solid var(--ti-numeric-input-normal-border-color);
border-radius: 0 0 4px;
}
.tiny-numeric.is-controls-right .tiny-numeric__decrease svg {
-webkit-transform: scale(0.8) translateY(3px);
transform: scale(0.8) translateY(3px);
}
.tiny-numeric.is-controls-right[class*='medium'] [class*='decrease'],
.tiny-numeric.is-controls-right[class*='medium'] [class*='increase'] {
line-height: 20px;
}
.tiny-numeric.is-controls-right[class*='small'] [class*='decrease'],
.tiny-numeric.is-controls-right[class*='small'] [class*='increase'] {
line-height: 17px;
}
.tiny-numeric.is-controls-right[class*='mini'] [class*='decrease'],
.tiny-numeric.is-controls-right[class*='mini'] [class*='increase'] {
line-height: 8px;
}
.tiny-select-dropdown {
--ti-select-dropdown-item-color: var(--ti-base-color-info-normal);
--ti-select-dropdown-item-font-size: var(--ti-common-font-size-base);
--ti-select-dropdown-item-height: var(--ti-base-size-height-minor);
--ti-select-dropdown-item-disabled-color: var(--ti-base-color-placeholder);
--ti-select-dropdown-item-disabled-bgcolor: var(--ti-base-color-light);
--ti-select-dropdown-item-bgcolor: var(--ti-base-color-light);
--ti-select-dropdown-item-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-select-dropdown-item-selected-bgcolor: var(--ti-base-color-selected-background);
--ti-select-dropdown-item-selected-color: var(--ti-base-color-selected-font-color);
--ti-select-dropdown-item-icon-color: var(--ti-common-color-line-normal);
--ti-select-dropdown-item-icon-font-size: var(--ti-common-font-size-2);
--ti-select-dropdown-item-icon-selected-color: var(--ti-base-color-brand-6);
}
.tiny-select-dropdown.is-multiple .tiny-select-dropdown__item.selected {
color: var(--ti-select-dropdown-item-color);
background-color: var(--ti-select-dropdown-item-bgcolor);
}
.tiny-select-dropdown__item {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--ti-select-dropdown-item-color);
font-size: var(--ti-select-dropdown-item-font-size);
height: var(--ti-select-dropdown-item-height);
line-height: var(--ti-select-dropdown-item-height);
cursor: pointer;
}
.tiny-select-dropdown__item.is-disabled {
color: var(--ti-select-dropdown-item-disabled-color);
cursor: not-allowed;
}
.tiny-select-dropdown__item.is-disabled:hover {
background-color: var(--ti-select-dropdown-item-disabled-bgcolor);
}
.tiny-select-dropdown__item.hover,
.tiny-select-dropdown__item:hover {
background-color: var(--ti-select-dropdown-item-hover-bgcolor);
}
.tiny-select-dropdown__item.selected {
color: var(--ti-select-dropdown-item-selected-color);
background-color: var(--ti-select-dropdown-item-selected-bgcolor);
}
.tiny-select-dropdown__item .tiny-svg {
fill: var(--ti-select-dropdown-item-icon-color);
font-size: var(--ti-select-dropdown-item-icon-font-size);
margin-right: 8px;
}
.tiny-select-dropdown__item .checked-sur.tiny-svg,
.tiny-select-dropdown__item .halfselect.tiny-svg,
.tiny-select-dropdown__item.hover .tiny-svg,
.tiny-select-dropdown__item.selected .tiny-svg {
fill: var(--ti-select-dropdown-item-icon-selected-color);
}
.tiny-select-dropdown__item.memorize-highlight {
color: var(--ti-select-dropdown-item-icon-selected-color);
}
.tiny-select-group {
--ti-select-group-wrap-background: #e4e7ed;
--ti-select-group-title-font-size: var(--ti-common-font-size-base);
--ti-select-group-title-color: #909399;
--ti-select-group-title-line-height: var(--ti-base-size-height-minor);
margin: 0;
padding: 0;
}
.tiny-select-group__wrap {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.tiny-select-group__wrap:not(:last-of-type) {
padding-bottom: 24px;
}
.tiny-select-group__wrap:not(:last-of-type)::after {
content: '';
position: absolute;
display: block;
left: 8px;
right: 8px;
bottom: 12px;
height: 1px;
background: var(--ti-select-group-wrap-background);
}
.tiny-select-group__wrap .tiny-select-group__title {
padding-left: 8px;
font-size: var(--ti-select-group-title-font-size);
color: var(--ti-select-group-title-color);
line-height: var(--ti-select-group-title-line-height);
}
.tiny-pager {
--ti-pager-normal-color: var(--ti-base-color-info-normal);
--ti-pager-primary-color: var(--ti-base-color-brand-6);
--ti-pager-primary-hover-color: var(--ti-base-color-brand-5);
--ti-pager-input-border-color: var(--ti-base-color-border);
--ti-pager-input-hover-border-color: var(--ti-common-color-line-hover);
--ti-pager-input-color-disabled: var(--ti-base-color-common-2);
--ti-pager-input-color-hover: var(--ti-base-color-brand-6);
--ti-pager-font-size: var(--ti-common-font-size-base);
--ti-pager-font-color: var(--ti-common-color-text-secondary);
--ti-pager-font-normal: var(--ti-base-color-secondary);
--ti-pager-height: var(--ti-base-size-height-mini);
--ti-pager-input-width: 40px;
--ti-pager-list-padding: 0 6px;
--ti-pager-list-light-shadow: none;
--ti-pager-input-height: var(--ti-base-size-height-mini);
--ti-pager-input-border-radius: var(--ti-common-border-radius-normal);
--ti-pager-poplist-item-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-pager-poplist-item-hover-text-color: var(--ti-common-color-text-highlight);
--ti-pager-poplist-item-selected-bgcolor: var(--ti-common-color-bg-emphasize);
--ti-pager-poplist-item-hover-border: 1px solid transparent;
text-align: left;
padding: 12px 0;
color: var(--ti-pager-font-color);
}
.tiny-pager .tiny-pager__group {
display: inline-block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
font-size: var(--ti-pager-font-size);
}
.tiny-pager .tiny-pager__group > span {
display: inline-block;
vertical-align: middle;
}
.tiny-pager .tiny-pager__total {
height: 24px;
line-height: 24px;
font-size: 12px;
color: var(--ti-pager-normal-color);
}
.tiny-pager .tiny-pager__pages {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
font-size: var(--ti-pager-font-size);
}
.tiny-pager .tiny-pager__pages li {
background: 0 0;
display: inline-block;
font-size: var(--ti-pager-font-size);
cursor: pointer;
margin-right: 4px;
text-align: center;
line-height: var(--ti-pager-height);
border-radius: var(--ti-pager-input-border-radius);
height: var(--ti-pager-height);
color: var(--ti-pager-font-color);
padding: var(--ti-pager-list-padding);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid transparent;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.tiny-pager .tiny-pager__pages li a {
color: var(--ti-pager-font-color);
}
.tiny-pager .tiny-pager__pages li svg {
fill: var(--ti-pager-font-color);
vertical-align: middle;
}
.tiny-pager .tiny-pager__pages li:not(.dot):not(.is-active):hover {
color: var(--ti-pager-poplist-item-hover-text-color);
background-color: var(--ti-pager-poplist-item-hover-bgcolor);
-webkit-box-shadow: var(--ti-pager-list-light-shadow);
box-shadow: var(--ti-pager-list-light-shadow);
border: var(--ti-pager-poplist-item-hover-border);
}
.tiny-pager .tiny-pager__pages li:not(.dot):not(.is-active):hover svg {
fill: var(--ti-pager-poplist-item-hover-text-color);
}
.tiny-pager .tiny-pager__pages li.dot .icon {
font-size: 14px;
}
.tiny-pager .tiny-pager__pages li.is-active {
color: #fff;
background-color: var(--ti-pager-primary-color);
}
.tiny-pager__goto {
font-size: 0;
}
.tiny-pager__goto input[type='text'] {
width: var(--ti-pager-input-width);
text-align: center;
vertical-align: middle;
border-radius: var(--ti-pager-input-border-radius);
display: inline-block;
position: inherit;
height: var(--ti-pager-input-height);
line-height: var(--ti-pager-input-height);
border: 1px solid var(--ti-pager-input-border-color);
color: var(--ti-pager-normal-color);
font-size: var(--ti-pager-font-size);
-webkit-transition: border 0.3s;
transition: border 0.3s;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-left: 14px;
margin-right: 4px;
}
.tiny-pager__goto input[type='text']:hover {
border: 1px solid var(--ti-pager-input-hover-border-color);
color: var(--ti-pager-normal-color);
}
.tiny-pager__goto input[type='text'].active,
.tiny-pager__goto input[type='text']:active,
.tiny-pager__goto input[type='text']:focus,
.tiny-pager__goto input[type='text'][active] {
border: 1px solid var(--ti-pager-primary-color);
-webkit-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
.tiny-pager__goto button {
height: var(--ti-pager-input-height);
line-height: var(--ti-pager-input-height);
border: 1px solid #d9d9d9;
color: var(--ti-pager-font-color);
vertical-align: middle;
border-radius: var(--ti-pager-input-border-radius);
background: #fff;
font-size: var(--ti-pager-font-size);
padding: 0 8px;
text-align: center;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
-webkit-transition: border 0.3s, color 0.3s, background 0.3s;
transition: border 0.3s, color 0.3s, background 0.3s;
outline: 0;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-pager__btn-next,
.tiny-pager__btn-prev {
height: var(--ti-pager-height);
width: 24px;
line-height: var(--ti-pager-height);
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;
font-size: var(--ti-pager-font-size);
font-weight: bolder;
color: var(--ti-pagination-prev-next-color);
outline: 0;
border: none;
background: 0 0;
margin-left: 4px;
padding: 0;
vertical-align: middle;
cursor: pointer;
}
.tiny-pager__btn-next span,
.tiny-pager__btn-prev span {
color: var(--ti-pager-primary-color);
}
.tiny-pager__btn-next svg,
.tiny-pager__btn-prev svg {
fill: var(--ti-pager-normal-color);
font-size: var(--ti-pager-font-size);
vertical-align: middle;
}
.tiny-pager__btn-next:hover,
.tiny-pager__btn-prev:hover {
background-color: var(--ti-pager-poplist-item-hover-bgcolor);
}
.tiny-pager__btn-next:hover svg,
.tiny-pager__btn-prev:hover svg {
fill: var(--ti-pager-poplist-item-hover-text-color);
}
.tiny-pager__btn-next[disabled],
.tiny-pager__btn-next[disabled]:hover,
.tiny-pager__btn-prev[disabled],
.tiny-pager__btn-prev[disabled]:hover {
background-color: transparent;
cursor: not-allowed;
}
.tiny-pager__btn-next[disabled] span,
.tiny-pager__btn-prev[disabled] span {
color: var(--ti-pagination-text-color-disabled);
}
.tiny-pager__btn-next[disabled] svg,
.tiny-pager__btn-prev[disabled] svg {
fill: var(--ti-pagination-text-color-disabled);
}
.tiny-pager__selector.tiny-popover.tiny-popper {
width: 60px;
padding: 0;
}
.tiny-pager__selector.tiny-popover.tiny-popper[x-placement^='bottom'] {
margin-top: 2px;
}
.tiny-pager__selector.tiny-popover.tiny-popper[x-placement^='top'] {
margin-bottom: 0;
}
.tiny-pager__selector-body {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.tiny-pager__selector-poplist .list-item {
min-height: 30px;
padding: 0 8px;
line-height: 30px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-pager__selector-poplist .list-item:hover {
cursor: pointer;
background: var(--ti-pager-poplist-item-hover-bgcolor);
color: var(--ti-pager-poplist-item-hover-text-color);
}
.tiny-pager__selector-poplist .list-item.is-selected {
background: var(--ti-pager-poplist-item-selected-bgcolor);
color: var(--ti-pager-normal-color);
}
.tiny-pager__selector-poplist .list-item.is-selected:hover {
background: var(--ti-pager-poplist-item-selected-bgcolor);
}
.tiny-pager__selector-poplist .list-item.select-pre {
background: var(--ti-pager-poplist-item-hover-bgcolor);
color: var(--ti-pager-poplist-item-hover-text-color);
}
.tiny-pager__selector-poplist .list-item.select-pre.is-selected {
color: #fff;
background: var(--ti-pager-poplist-item-selected-bgcolor);
}
.tiny-pager .tiny-pager__popover {
margin: 0 4px 0 14px;
}
.tiny-pager .tiny-pager__sizes .tiny-pager__popover {
margin: 0;
}
.tiny-pager .tiny-pager__sizes + .tiny-pager__group {
margin: 0 16px;
}
.tiny-pager .tiny-pager__group + .tiny-pager__sizes {
margin: 0 16px;
}
.tiny-pager__input {
width: 60px;
vertical-align: middle;
position: relative;
}
.tiny-pager__input input {
width: 100%;
height: var(--ti-pager-input-height);
line-height: var(--ti-pager-input-height);
border: 1px solid var(--ti-pager-input-border-color);
color: var(--ti-pager-normal-color);
border-radius: var(--ti-pager-input-border-radius);
background: #fff;
font-size: var(--ti-pager-font-size, 12px);
padding: 0 8px;
display: block;
stop-color: var(--ti-pager-input-color-disabled);
lighting-color: var(--ti-pager-input-color-hover);
padding: 6px 10px;
white-space: nowrap;
-webkit-transition: border 0.3s;
transition: border 0.3s;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-pager__input input:hover {
outline: 0;
border-color: var(--ti-pager-input-hover-border-color);
}
.tiny-pager__input input:active,
.tiny-pager__input input:focus {
outline: 0;
border-color: var(--ti-pager-input-hover-border-color);
}
.tiny-pager__input-btn {
width: 24px;
height: var(--ti-pager-height);
line-height: var(--ti-pager-height);
position: absolute;
right: 2px;
bottom: 0;
top: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
overflow: hidden;
cursor: pointer;
}
.tiny-pager__input-btn svg {
font-size: var(--ti-pager-font-size);
fill: var(--ti-pager-font-normal);
vertical-align: middle;
}
.tiny-pager .tiny-popover__reference {
outline: 0;
}
@media (max-width: 768px) {
.tiny-pager {
text-align: left;
}
.tiny-pager .tiny-pager__pull-left {
float: none !important;
}
}
.dialog-pbi {
--ti-pbi-font-size-base: var(--ti-common-font-size-base);
--ti-pbi-selected-color: #138fc7;
--ti-pbi-selected-background: rgba(31, 158, 216, 0.12);
--ti-pbi-list-border-color: #ccc;
}
.dialog-pbi.tiny-dialog .dialog-body {
font-size: var(--ti-pbi-font-size-base);
font-weight: 400;
}
.dialog-pbi .tiny-selected {
color: var(--ti-pbi-selected-color);
background: var(--ti-pbi-selected-background);
}
.dialog-pbi .pbi_col {
width: 200px;
float: left;
}
.dialog-pbi .pbi_list {
height: 460px;
overflow-y: auto;
border: 1px solid var(--ti-pbi-list-border-color);
padding: 4px;
}
.tiny-dialog {
background: var(--ti-dialog-background);
padding: 0;
-webkit-box-shadow: var(--ti-dialog-shadow);
box-shadow: var(--ti-dialog-shadow);
-webkit-animation: dialog-fade-in 0.3s;
animation: dialog-fade-in 0.3s;
}
.tiny-dialog .dialog-head {
background: var(--ti-dialog-head-background);
font-size: var(--ti-dialog-head-font-size);
}
.tiny-dialog .dialog-head .dialog-title {
color: var(--ti-dialog-title-color);
display: inline-block;
font-size: var(--ti-dialog-title-font-size);
font-weight: var(--ti-dialog-title-font-weight);
margin: 0;
}
.tiny-dialog .dialog-head .dialog-operation {
float: right;
}
.tiny-dialog .dialog-head .dialog-operation > a {
color: var(--ti-dialog-operation-color);
}
.tiny-dialog .dialog-head .dialog-operation > a:hover {
color: var(--ti-dialog-operation-hover-color);
}
.tiny-dialog .dialog-head .dialog-operation > a .tiny-small-close {
font-size: var(--ti-dialog-head-font-size);
}
.tiny-dialog .dialog-body {
width: 100%;
padding: var(--ti-dialog-body-padding);
min-height: var(--ti-dialog-body-min-height);
font-size: var(--ti-dialog-body-font-size);
font-weight: 700;
overflow: auto;
overflow-x: hidden;
color: var(--ti-dialog-body-color);
max-height: 55vh !important;
}
.tiny-dialog .dialog-head-alert-confirm {
padding: 0 24px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.tiny-toolbar {
clear: both;
text-align: center;
}
.tiny-transition-timepicker {
-webkit-animation: fadein 0.3s;
animation: fadein 0.3s;
}
.tiny-transition-timepicker-up {
-webkit-animation: fadeup 0.3s;
animation: fadeup 0.3s;
}
@-webkit-keyframes fadein {
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
z-index: -999;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 0;
}
}
@keyframes fadein {
0% {
-webkit-transform: translateY(-200px);
transform: translateY(-200px);
z-index: -999;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 0;
}
}
@-webkit-keyframes fadeup {
0% {
-webkit-transform: translateY(200px);
transform: translateY(200px);
z-index: -999;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 0;
}
}
@keyframes fadeup {
0% {
-webkit-transform: translateY(200px);
transform: translateY(200px);
z-index: -999;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
z-index: 0;
}
}
.tiny-date-table {
font-size: var(--ti-date-picker-font-size);
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-date-table.is-week-mode .tiny-date-table__row:hover td.available:hover {
color: var(--ti-date-picker-font-color);
}
.tiny-date-table.is-week-mode .tiny-date-table__row:hover td:first-child div {
margin-left: 5px;
border-top-left-radius: var(--ti-date-table-td-border-radius);
border-bottom-left-radius: var(--ti-date-table-td-border-radius);
}
.tiny-date-table.is-week-mode .tiny-date-table__row:hover td:last-child div {
margin-right: 5px;
border-top-right-radius: var(--ti-date-table-td-border-radius);
border-bottom-right-radius: var(--ti-date-table-td-border-radius);
}
.tiny-date-table.is-week-mode .tiny-date-table__row:hover div {
background-color: var(--ti-date-picker-hover-bgcolor);
}
.tiny-date-table.is-week-mode .tiny-date-table__row.current div {
background-color: var(--ti-date-table-week-current-bgcolor);
}
.tiny-date-table.is-week-mode .tiny-date-table__row.current div:hover {
background-color: var(--ti-date-table-week-current-hover-bgcolor);
}
.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available:hover span {
background-color: transparent;
}
.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available.end-date span,
.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available.start-date span {
background-color: var(--ti-date-picker-current-select-bgcolor);
}
.tiny-date-table td {
width: var(--ti-date-table-td-width);
height: var(--ti-date-table-td-height);
padding: var(--ti-date-table-td-padding);
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
cursor: pointer;
position: relative;
}
.tiny-date-table td div {
height: 24px;
min-width: 36px;
padding: 3px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-date-table td span {
min-width: var(--ti-date-table-td-span-width);
height: var(--ti-date-table-td-span-height);
line-height: var(--ti-date-table-td-span-height);
display: block;
margin: 0 auto;
position: absolute;
left: 50%;
top: 5px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tiny-date-table td.next-month,
.tiny-date-table td.pre-month {
color: var(--ti-date-table-td-pre-month-color);
cursor: pointer;
}
.tiny-date-table td.next-month span:hover,
.tiny-date-table td.pre-month span:hover {
background: var(--ti-datetime-beside-day-bg-color-hover);
}
.tiny-date-table td.today {
position: relative;
color: var(--ti-date-table-td-today-color);
}
.tiny-date-table td.today:after {
content: '';
width: 12px;
height: 1px;
background: var(--ti-date-table-td-today-border-color);
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 5px;
}
.tiny-date-table td.today.end-date span,
.tiny-date-table td.today.start-date span {
color: var(--ti-date-table-td-nomal-color);
}
.tiny-date-table td.available:hover span {
background-color: var(--ti-date-picker-hover-bgcolor);
border-radius: var(--ti-date-picker-current-border-radius);
}
.tiny-date-table td.current:not(.disabled) span {
color: var(--ti-date-table-td-nomal-color);
background-color: var(--ti-date-picker-current-select-bgcolor);
border-radius: var(--ti-date-picker-current-border-radius);
}
.tiny-date-table td.end-date div,
.tiny-date-table td.start-date div {
color: var(--ti-date-table-td-nomal-color);
}
.tiny-date-table td.end-date span,
.tiny-date-table td.start-date span {
background-color: var(--ti-date-picker-current-select-bgcolor);
}
.tiny-date-table td.start-date div {
margin-left: 5px;
border-top-left-radius: var(--ti-date-table-td-border-radius);
border-bottom-left-radius: var(--ti-date-table-td-border-radius);
}
.tiny-date-table td.end-date div {
margin-right: 5px;
border-top-right-radius: var(--ti-date-table-td-border-radius);
border-bottom-right-radius: var(--ti-date-table-td-border-radius);
}
.tiny-date-table td.disabled div {
background-color: var(--ti-date-picker-disabled-bgcolor);
opacity: 1;
cursor: not-allowed;
color: var(--ti-date-picker-disabled-color);
}
.tiny-date-table td.in-range div {
background-color: var(--ti-date-picker-range-bgcolor);
}
.tiny-date-table td.in-range div:hover {
background-color: var(--ti-date-picker-range-hover-bgcolor);
}
.tiny-date-table td.in-range.end-date:hover span,
.tiny-date-table td.in-range.start-date:hover span {
background-color: var(--ti-date-picker-current-select-bgcolor);
}
.tiny-date-table td.available {
padding: 0;
}
.tiny-date-table td.selected div {
margin-left: 5px;
margin-right: 5px;
background-color: var(--ti-date-table-td-range-bgcolor);
}
.tiny-date-table td.selected div:hover {
background-color: var(--ti-date-table-td-range-bgcolor);
}
.tiny-date-table td.selected span {
background-color: var(--ti-date-picker-current-select-bgcolor);
color: var(--ti-date-table-td-nomal-color);
border: none;
}
.tiny-date-table td.selected.available:hover span {
background-color: var(--ti-date-picker-current-select-bgcolor);
}
.tiny-date-table td.week {
font-size: 80%;
color: var(--ti-date-picker-font-color);
}
.tiny-date-table th {
color: var(--ti-date-table-th-font-color);
font-weight: 400;
}
.tiny-month-table {
font-size: var(--ti-date-picker-font-size);
margin: -1px;
border-collapse: collapse;
}
.tiny-month-table td {
text-align: center;
padding: 16px 0;
cursor: pointer;
}
.tiny-month-table td div {
height: 32px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-month-table td.today .cell {
color: var(--ti-month-table-td-color);
font-weight: 700;
}
.tiny-month-table td.today.end-date .cell,
.tiny-month-table td.today.start-date .cell {
color: var(--ti-month-table-td-date-color);
}
.tiny-month-table td.disabled .cell {
background-color: var(--ti-date-picker-disabled-bgcolor);
cursor: not-allowed;
color: var(--ti-date-picker-disabled-color);
}
.tiny-month-table td.disabled .cell:hover {
color: var(--ti-date-picker-disabled-color);
}
.tiny-month-table td .cell {
width: 100%;
height: 32px;
line-height: 32px;
display: block;
color: var(--ti-date-picker-font-color);
}
.tiny-month-table td .cell:hover {
background: var(--ti-date-picker-hover-bgcolor);
}
.tiny-month-table td.in-range div,
.tiny-month-table td.in-range div:hover {
background-color: var(--ti-month-table-td-range-bgcolor);
}
.tiny-month-table td.end-date div,
.tiny-month-table td.start-date div {
color: var(--ti-month-table-td-date-color);
}
.tiny-month-table td.end-date .cell,
.tiny-month-table td.start-date .cell {
color: var(--ti-month-table-td-date-color);
background-color: var(--ti-month-table-td-color);
}
.tiny-month-table td:not(.in-range) {
padding: 16px 4px;
}
.tiny-month-table td:not(.in-range) div {
height: auto;
padding: 0;
}
.tiny-month-table td:not(.in-range) .cell {
width: auto;
height: 32px;
line-height: 32px;
border-radius: 2px;
}
.tiny-month-table td.current:not(.disabled) .cell,
.tiny-month-table td.current:not(.disabled) .cell:hover {
color: var(--ti-date-table-td-nomal-color);
background: var(--ti-month-table-td-color);
}
.tiny-year-table {
font-size: var(--ti-date-picker-font-size);
margin: -1px;
border-collapse: collapse;
}
.tiny-year-table td {
text-align: center;
cursor: pointer;
}
.tiny-year-table td.today .cell {
color: var(--ti-year-table-td-color);
font-weight: 700;
}
.tiny-year-table td.disabled .cell {
background-color: var(--ti-date-picker-disabled-bgcolor);
cursor: not-allowed;
color: var(--ti-date-picker-disabled-color);
}
.tiny-year-table td.disabled .cell:hover {
color: var(--ti-date-picker-disabled-color);
}
.tiny-year-table td .cell {
width: 48px;
height: 24px;
line-height: 24px;
display: block;
color: var(--ti-date-picker-font-color);
margin: 0 auto;
border-radius: 2px;
}
.tiny-year-table td .cell:hover {
background: var(--ti-date-picker-hover-bgcolor);
}
.tiny-year-table td.current:not(.disabled) .cell {
color: var(--ti-date-table-td-nomal-color);
background: var(--ti-date-picker-current-select-bgcolor);
}
.tiny-year-table td.available {
padding: 16px 3px;
}
.tiny-year-table .tiny-icon {
color: var(--ti-year-table-td-icon-color);
}
.tiny-time-spinner__wrapper {
max-height: 190px;
overflow: auto;
display: inline-block;
width: 50%;
vertical-align: top;
position: relative;
}
.tiny-time-spinner__wrapper .tiny-scrollbar__wrap:not(.tiny-scrollbar__wrap--hidden-default) {
padding-bottom: 15px;
}
.tiny-time-spinner__wrapper.is-arrow {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__list {
-webkit-transform: translateY(-32px);
transform: translateY(-32px);
}
.tiny-time-spinner__wrapper.is-arrow .tiny-time-spinner__item:hover:not(.disabled):not(.active) {
background: var(--ti-date-picker-bgcolor);
cursor: default;
}
.tiny-time-spinner__wrapper .tiny-time-spinner__list {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.tiny-time-spinner__wrapper:last-child .tiny-time-spinner__list {
border-right: 0;
}
.tiny-time-spinner__arrow {
font-size: var(--ti-date-picker-font-size);
color: var(--ti-time-spinner-arrow-color);
height: 30px;
line-height: 30px;
position: absolute;
left: 0;
width: 100%;
z-index: 1;
text-align: center;
cursor: pointer;
}
.tiny-time-spinner__arrow .tiny-svg {
fill: var(--ti-time-spinner-arrow-color);
}
.tiny-time-spinner__arrow:hover .tiny-svg {
fill: var(--ti-time-spinner-arrow-hover-color);
}
.tiny-time-spinner__arrow.tiny-icon-arrow-up {
top: 10px;
}
.tiny-time-spinner__arrow.tiny-icon-arrow-down {
bottom: 10px;
}
.tiny-time-spinner__arrow.tiny-input {
width: 70%;
}
.tiny-time-spinner__arrow.tiny-input .tiny-input__inner {
padding: 0;
text-align: center;
}
.tiny-time-spinner__list {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
border-right: 1px solid var(--ti-time-spinner-list-border-color);
}
.tiny-time-spinner__list::after,
.tiny-time-spinner__list::before {
content: '';
display: block;
width: 100%;
height: 80px;
}
.tiny-time-spinner__item {
font-size: var(--ti-date-picker-font-size);
color: var(--ti-date-picker-font-color);
height: 32px;
line-height: 32px;
}
.tiny-time-spinner__item:hover:not(.disabled):not(.active) {
background: var(--ti-date-picker-selected-bgcolor);
cursor: pointer;
}
.tiny-time-spinner__item.active:not(.disabled) {
color: var(--ti-time-spinner-item-active-color);
font-weight: var(--ti-time-spinner-item-font-weight);
background-color: var(--ti-time-spinner-item-bgcolor);
}
.tiny-time-spinner__item.disabled {
color: var(--ti-date-picker-disabled-color);
cursor: not-allowed;
}
.tiny-time-spinner.has-seconds .tiny-time-spinner__wrapper {
width: 33.3%;
}
.tiny-date-editor {
--ti-date-picker-width: 280px;
--ti-date-picker-font-size: var(--ti-common-font-size-base);
--ti-date-picker-font-color: var(--ti-base-color-info-normal);
--ti-date-picker-bgcolor: var(--ti-base-color-light);
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
--ti-date-picker-border-color: var(--ti-common-color-line-dividing);
--ti-date-picker-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-disabled-color: var(--ti-common-color-text-disabled);
--ti-date-picker-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-date-picker-selected-bgcolor: #f2f2f3;
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
--ti-date-picker-current-select-bgcolor: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-radius: 0;
--ti-date-picker-range-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-range-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-td-width: 36px;
--ti-date-table-td-height: 34px;
--ti-date-table-td-padding: 4px 0;
--ti-date-table-td-span-width: 36px;
--ti-date-table-td-span-height: 24px;
--ti-date-table-th-font-color: var(--ti-base-color-common-2);
--ti-date-table-td-border-radius: 0;
--ti-date-table-td-pre-month-color: var(--ti-base-color-common-2);
--ti-date-table-td-nomal-color: var(--ti-base-color-light);
--ti-date-table-td-range-bgcolor: #f2f6fc;
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
--ti-date-table-td-today-color: var(--ti-date-picker-font-color);
--ti-date-table-week-current-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-week-current-hover-bgcolor: var(--ti-base-color-brand-3);
--ti-month-table-td-color: var(--ti-base-color-brand-7);
--ti-month-table-td-range-bgcolor: #f2f6fc;
--ti-month-table-td-date-color: var(--ti-base-color-light);
--ti-month-table-td-date-border-radius: 24px;
--ti-year-table-td-color: var(--ti-base-color-brand-7);
--ti-year-table-td-icon-color: #303133;
--ti-time-spinner-arrow-color: #909399;
--ti-time-spinner-arrow-hover-color: var(--ti-base-color-brand-7);
--ti-time-spinner-item-active-color: #303133;
--ti-time-spinner-item-font-weight: 700;
--ti-time-spinner-item-bgcolor: transparent;
--ti-time-spinner-list-border-color: transparent;
--ti-picker-panel-line-height: var(--ti-base-size-height-minor);
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
--ti-picker-panel-icon-btn-color: var(--ti-base-color-common-2);
--ti-picker-panel-icon-btn-hover-color: var(--ti-base-color-brand-7);
--ti-picker-panel-icon-btn-disabled-color: var(--ti-base-color-bg-5);
--ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
--ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
--ti-date-picker-header-label-hover-color: var(--ti-base-color-brand-7);
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
--ti-date-range-picker-time-header-icon-color: #303133;
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
--ti-time-panel-footer-height: 36px;
--ti-time-panel-btn-color: #303133;
--ti-time-panel-btn-confirm-color: var(--ti-base-color-brand-7);
--ti-range-separator-color: #303133;
--ti-time-panel-border-color: var(--ti-date-picker-border-color);
--ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-time-panel-content-split-line-display: block;
--ti-time-panel-btn-cancel-display: inline-block;
--ti-time-panel-btn-bgcolor: transparent;
--ti-time-panel-btn-padding: 0 5px;
--ti-time-panel-btn-radius: var(--ti-common-border-radius-normal);
--ti-time-panel-btn-height: 28px;
--ti-time-panel-btn-min-width: inherit;
--ti-time-panel-btn-font-weight: 800;
--ti-time-panel-btn-confirm-hover-bgcolor: transparent;
--ti-date-editor-input-icon-fill-color: #575d6c;
position: relative;
display: inline-block;
text-align: left;
}
.tiny-date-editor.tiny-input,
.tiny-date-editor.tiny-input__inner {
width: 100%;
}
.tiny-date-editor--monthrange.tiny-input,
.tiny-date-editor--monthrange.tiny-input__inner {
width: 300px;
}
.tiny-date-editor--daterange.tiny-input,
.tiny-date-editor--daterange.tiny-input__inner,
.tiny-date-editor--timerange.tiny-input,
.tiny-date-editor--timerange.tiny-input__inner {
width: 350px;
}
.tiny-date-editor--datetimerange.tiny-input,
.tiny-date-editor--datetimerange.tiny-input__inner {
width: 400px;
}
.tiny-date-editor--dates .tiny-input__inner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-date-editor .tiny-input__icon {
cursor: pointer;
fill: var(--ti-date-editor-input-icon-fill-color);
}
.tiny-date-editor .tiny-input__icon .baseClearicon {
margin-right: 8px;
fill: #252b3a;
}
.tiny-date-editor .tiny-input__icon .baseClearicon:hover {
fill: var(--ti-input-clear-color-hover);
}
.tiny-date-editor .tiny-input__icon:not(.tiny-range__icon) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-date-editor .tiny-range__icon {
font-size: var(--ti-date-picker-icon-font-size);
color: #c0c4cc;
margin-left: -5px;
float: left;
line-height: 1;
}
.tiny-date-editor .tiny-range-input,
.tiny-date-editor .tiny-range-separator {
font-size: var(--ti-date-picker-font-size);
height: 100%;
margin: 0;
text-align: center;
display: inline-block;
}
.tiny-date-editor .tiny-range-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: 0;
padding: 0;
width: 39%;
color: var(--ti-date-picker-font-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-date-editor .tiny-range-input::-moz-placeholder {
color: #999;
opacity: 1;
}
.tiny-date-editor .tiny-range-input:-ms-input-placeholder {
color: #999;
}
.tiny-date-editor .tiny-range-input::-webkit-input-placeholder {
color: #999;
}
.tiny-date-editor .tiny-range-input::-ms-input-placeholder {
color: #999;
}
.tiny-date-editor .tiny-range-input::placeholder {
color: #999;
}
.tiny-date-editor .tiny-range-separator {
padding: 0 5px;
line-height: 22px;
width: 12%;
color: var(--ti-range-separator-color);
}
.tiny-date-editor .tiny-range__close-icon {
font-size: var(--ti-date-picker-icon-font-size);
width: 25px;
float: right;
line-height: 32px;
margin-right: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-date-editor .tiny-range__close-icon,
.tiny-date-editor .tiny-range__close-icon:hover {
fill: var(--ti-input-icon-close-color);
}
.tiny-range-editor.tiny-input__inner {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3px 10px;
}
.tiny-range-editor .tiny-range-input {
line-height: 1;
}
.tiny-range-editor.is-active,
.tiny-range-editor.is-active:hover {
border-color: var(--ti-date-picker-current-border-color);
}
.tiny-range-editor--medium.tiny-input__inner {
height: 42px;
}
.tiny-range-editor--medium .tiny-range-separator {
line-height: 34px;
font-size: var(--ti-common-font-size-2);
}
.tiny-range-editor--medium .tiny-range-input {
font-size: var(--ti-common-font-size-2);
}
.tiny-range-editor--medium .tiny-range__close-icon,
.tiny-range-editor--medium .tiny-range__icon {
line-height: 34px;
}
.tiny-range-editor--small.tiny-input__inner {
height: 36px;
}
.tiny-range-editor--small .tiny-range-separator {
line-height: 28px;
font-size: var(--ti-common-font-size-1);
}
.tiny-range-editor--small .tiny-range-input {
font-size: var(--ti-common-font-size-1);
}
.tiny-range-editor--small .tiny-range__close-icon,
.tiny-range-editor--small .tiny-range__icon {
line-height: 28px;
}
.tiny-range-editor--mini.tiny-input__inner {
height: 24px;
}
.tiny-range-editor--mini .tiny-range-separator {
line-height: 16px;
font-size: var(--ti-common-font-size-base);
}
.tiny-range-editor--mini .tiny-range-input {
font-size: var(--ti-common-font-size-base);
}
.tiny-range-editor--mini .tiny-range__close-icon,
.tiny-range-editor--mini .tiny-range__icon {
line-height: 16px;
}
.tiny-range-editor.is-disabled {
background-color: var(--ti-date-picker-disabled-bgcolor);
border-color: var(--ti-date-picker-border-color);
color: var(--ti-date-picker-disabled-color);
cursor: not-allowed;
}
.tiny-range-editor.is-disabled:focus,
.tiny-range-editor.is-disabled:hover {
border-color: var(--ti-date-picker-border-color);
}
.tiny-range-editor.is-disabled input {
color: var(--ti-date-picker-disabled-color);
background-color: var(--ti-date-picker-disabled-bgcolor);
cursor: not-allowed;
}
.tiny-range-editor.is-disabled input::-moz-placeholder {
color: #999;
opacity: 1;
}
.tiny-range-editor.is-disabled input:-ms-input-placeholder {
color: #999;
}
.tiny-range-editor.is-disabled input::-webkit-input-placeholder {
color: #999;
}
.tiny-range-editor.is-disabled input::-ms-input-placeholder {
color: #999;
}
.tiny-range-editor.is-disabled input::placeholder {
color: #999;
}
.tiny-range-editor.is-disabled .tiny-range-separator {
color: var(--ti-date-picker-disabled-color);
}
.tiny-picker-panel {
--ti-date-picker-width: 280px;
--ti-date-picker-font-size: var(--ti-common-font-size-base);
--ti-date-picker-font-color: var(--ti-base-color-info-normal);
--ti-date-picker-bgcolor: var(--ti-base-color-light);
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
--ti-date-picker-border-color: var(--ti-common-color-line-dividing);
--ti-date-picker-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-disabled-color: var(--ti-common-color-text-disabled);
--ti-date-picker-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-date-picker-selected-bgcolor: #f2f2f3;
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
--ti-date-picker-current-select-bgcolor: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-radius: 0;
--ti-date-picker-range-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-range-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-td-width: 36px;
--ti-date-table-td-height: 34px;
--ti-date-table-td-padding: 4px 0;
--ti-date-table-td-span-width: 36px;
--ti-date-table-td-span-height: 24px;
--ti-date-table-th-font-color: var(--ti-base-color-common-2);
--ti-date-table-td-border-radius: 0;
--ti-date-table-td-pre-month-color: var(--ti-base-color-common-2);
--ti-date-table-td-nomal-color: var(--ti-base-color-light);
--ti-date-table-td-range-bgcolor: #f2f6fc;
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
--ti-date-table-td-today-color: var(--ti-date-picker-font-color);
--ti-date-table-week-current-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-week-current-hover-bgcolor: var(--ti-base-color-brand-3);
--ti-month-table-td-color: var(--ti-base-color-brand-7);
--ti-month-table-td-range-bgcolor: #f2f6fc;
--ti-month-table-td-date-color: var(--ti-base-color-light);
--ti-month-table-td-date-border-radius: 24px;
--ti-year-table-td-color: var(--ti-base-color-brand-7);
--ti-year-table-td-icon-color: #303133;
--ti-time-spinner-arrow-color: #909399;
--ti-time-spinner-arrow-hover-color: var(--ti-base-color-brand-7);
--ti-time-spinner-item-active-color: #303133;
--ti-time-spinner-item-font-weight: 700;
--ti-time-spinner-item-bgcolor: transparent;
--ti-time-spinner-list-border-color: transparent;
--ti-picker-panel-line-height: var(--ti-base-size-height-minor);
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
--ti-picker-panel-icon-btn-color: var(--ti-base-color-common-2);
--ti-picker-panel-icon-btn-hover-color: var(--ti-base-color-brand-7);
--ti-picker-panel-icon-btn-disabled-color: var(--ti-base-color-bg-5);
--ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
--ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
--ti-date-picker-header-label-hover-color: var(--ti-base-color-brand-7);
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
--ti-date-range-picker-time-header-icon-color: #303133;
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
--ti-time-panel-footer-height: 36px;
--ti-time-panel-btn-color: #303133;
--ti-time-panel-btn-confirm-color: var(--ti-base-color-brand-7);
--ti-range-separator-color: #303133;
--ti-time-panel-border-color: var(--ti-date-picker-border-color);
--ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-time-panel-content-split-line-display: block;
--ti-time-panel-btn-cancel-display: inline-block;
--ti-time-panel-btn-bgcolor: transparent;
--ti-time-panel-btn-padding: 0 5px;
--ti-time-panel-btn-radius: var(--ti-common-border-radius-normal);
--ti-time-panel-btn-height: 28px;
--ti-time-panel-btn-min-width: inherit;
--ti-time-panel-btn-font-weight: 800;
--ti-time-panel-btn-confirm-hover-bgcolor: transparent;
--ti-date-editor-input-icon-fill-color: #575d6c;
color: var(--ti-date-picker-font-color);
font-size: var(--ti-date-picker-font-size);
border: 1px solid var(--ti-picker-panel-border-color);
-webkit-box-shadow: var(--ti-picker-panel-box-shadow);
box-shadow: var(--ti-picker-panel-box-shadow);
background: var(--ti-date-picker-bgcolor);
border-radius: var(--ti-common-border-radius-normal);
line-height: var(--ti-picker-panel-line-height);
margin: var(--ti-base-dropdown-gap) 0;
}
.tiny-picker-panel__body-wrapper::after,
.tiny-picker-panel__body::after {
content: '';
display: table;
clear: both;
}
.tiny-picker-panel__body {
padding-bottom: 8px;
}
.tiny-picker-panel__content {
position: relative;
}
.tiny-picker-panel__footer {
border-top: 1px solid var(--ti-date-picker-border-color);
padding: 6px 16px;
background-color: var(--ti-date-picker-bgcolor);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-picker-panel__footer .tiny-button {
min-width: 60px;
}
.tiny-picker-panel__footer .tiny-button:only-child {
float: right;
}
.tiny-picker-panel__footer .tiny-button--text {
text-align: left;
}
.tiny-picker-panel__shortcut {
display: block;
width: 100%;
border: 0;
background-color: transparent;
line-height: 28px;
font-size: var(--ti-picker-panel-shortcut-font-size);
color: var(--ti-date-picker-font-color);
padding-left: 12px;
text-align: left;
outline: 0;
cursor: pointer;
}
.tiny-picker-panel__shortcut:hover {
background-color: var(--ti-date-picker-hover-bgcolor);
}
.tiny-picker-panel__shortcut.active {
background-color: var(--ti-date-picker-selected-bgcolor);
}
.tiny-picker-panel__btn {
color: var(--ti-date-picker-font-color);
border: 1px solid var(--ti-date-picker-border-color);
font-size: var(--ti-date-picker-font-size);
line-height: 24px;
border-radius: var(--ti-date-picker-border-radius);
padding: 0 20px;
cursor: pointer;
outline: 0;
background-color: transparent;
}
.tiny-picker-panel__btn [disabled] {
color: var(--ti-date-picker-disabled-color);
cursor: not-allowed;
}
.tiny-picker-panel__icon-btn {
font-size: var(--ti-date-picker-font-size);
line-height: 30px;
fill: var(--ti-picker-panel-icon-btn-color);
border: 0;
background: 0 0;
cursor: pointer;
outline: 0;
}
.tiny-picker-panel__icon-btn:hover {
fill: var(--ti-picker-panel-icon-btn-hover-color);
}
.tiny-picker-panel__icon-btn.is-disabled {
color: var(--ti-picker-panel-icon-btn-disabled-color);
}
.tiny-picker-panel__icon-btn.is-disabled:hover {
cursor: not-allowed;
}
.tiny-picker-panel__link-btn {
vertical-align: middle;
}
.tiny-picker-panel [slot='sidebar'],
.tiny-picker-panel__sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 110px;
border-right: 1px solid var(--ti-date-picker-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 6px;
background-color: var(--ti-date-picker-bgcolor);
overflow: auto;
}
.tiny-picker-panel [slot='sidebar'] + .tiny-picker-panel__body,
.tiny-picker-panel__sidebar + .tiny-picker-panel__body {
margin-left: 110px;
}
.tiny-picker-panel__timezone {
margin-bottom: 10px;
}
.tiny-picker-panel__timezone .tiny-picker-panel__tzlist {
z-index: 10;
overflow-y: hidden;
}
.tiny-picker-panel__timezone .tiny-picker-panel__tzlist-li {
height: 30px;
line-height: 30px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
border: 1px solid #f4f0f0;
cursor: pointer;
}
.tiny-picker-panel__timezone .tiny-picker-panel__tzlist .tiny-popup {
position: absolute;
width: 238px;
bottom: 77px;
max-height: 260px;
-webkit-box-shadow: 0 -1px 2px 0 rgba(53, 29, 29, 0.5);
box-shadow: 0 -1px 2px 0 rgba(53, 29, 29, 0.5);
}
.tiny-picker-panel__timezone .tiny-input {
position: relative;
}
.tiny-date-picker {
--ti-date-picker-width: 280px;
--ti-date-picker-font-size: var(--ti-common-font-size-base);
--ti-date-picker-font-color: var(--ti-base-color-info-normal);
--ti-date-picker-bgcolor: var(--ti-base-color-light);
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
--ti-date-picker-border-color: var(--ti-common-color-line-dividing);
--ti-date-picker-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-disabled-color: var(--ti-common-color-text-disabled);
--ti-date-picker-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-date-picker-selected-bgcolor: #f2f2f3;
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
--ti-date-picker-current-select-bgcolor: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-radius: 0;
--ti-date-picker-range-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-range-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-td-width: 36px;
--ti-date-table-td-height: 34px;
--ti-date-table-td-padding: 4px 0;
--ti-date-table-td-span-width: 36px;
--ti-date-table-td-span-height: 24px;
--ti-date-table-th-font-color: var(--ti-base-color-common-2);
--ti-date-table-td-border-radius: 0;
--ti-date-table-td-pre-month-color: var(--ti-base-color-common-2);
--ti-date-table-td-nomal-color: var(--ti-base-color-light);
--ti-date-table-td-range-bgcolor: #f2f6fc;
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
--ti-date-table-td-today-color: var(--ti-date-picker-font-color);
--ti-date-table-week-current-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-week-current-hover-bgcolor: var(--ti-base-color-brand-3);
--ti-month-table-td-color: var(--ti-base-color-brand-7);
--ti-month-table-td-range-bgcolor: #f2f6fc;
--ti-month-table-td-date-color: var(--ti-base-color-light);
--ti-month-table-td-date-border-radius: 24px;
--ti-year-table-td-color: var(--ti-base-color-brand-7);
--ti-year-table-td-icon-color: #303133;
--ti-time-spinner-arrow-color: #909399;
--ti-time-spinner-arrow-hover-color: var(--ti-base-color-brand-7);
--ti-time-spinner-item-active-color: #303133;
--ti-time-spinner-item-font-weight: 700;
--ti-time-spinner-item-bgcolor: transparent;
--ti-time-spinner-list-border-color: transparent;
--ti-picker-panel-line-height: var(--ti-base-size-height-minor);
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
--ti-picker-panel-icon-btn-color: var(--ti-base-color-common-2);
--ti-picker-panel-icon-btn-hover-color: var(--ti-base-color-brand-7);
--ti-picker-panel-icon-btn-disabled-color: var(--ti-base-color-bg-5);
--ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
--ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
--ti-date-picker-header-label-hover-color: var(--ti-base-color-brand-7);
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
--ti-date-range-picker-time-header-icon-color: #303133;
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
--ti-time-panel-footer-height: 36px;
--ti-time-panel-btn-color: #303133;
--ti-time-panel-btn-confirm-color: var(--ti-base-color-brand-7);
--ti-range-separator-color: #303133;
--ti-time-panel-border-color: var(--ti-date-picker-border-color);
--ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-time-panel-content-split-line-display: block;
--ti-time-panel-btn-cancel-display: inline-block;
--ti-time-panel-btn-bgcolor: transparent;
--ti-time-panel-btn-padding: 0 5px;
--ti-time-panel-btn-radius: var(--ti-common-border-radius-normal);
--ti-time-panel-btn-height: 28px;
--ti-time-panel-btn-min-width: inherit;
--ti-time-panel-btn-font-weight: 800;
--ti-time-panel-btn-confirm-hover-bgcolor: transparent;
--ti-date-editor-input-icon-fill-color: #575d6c;
width: var(--ti-date-picker-width);
}
.tiny-date-picker.has-sidebar.has-time {
width: 434px;
}
.tiny-date-picker.has-sidebar {
width: 398px;
}
.tiny-date-picker.has-time .tiny-picker-panel__body-wrapper {
position: relative;
}
.tiny-date-picker table {
table-layout: fixed;
width: 100%;
}
.tiny-date-picker__editor-wrap {
position: relative;
display: table-cell;
padding: 0 5px;
}
.tiny-date-picker__time-header {
position: relative;
border-bottom: 1px solid var(--ti-date-picker-border-color);
font-size: var(--ti-date-picker-font-size);
padding: 8px 5px 5px;
display: table;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-date-picker__header {
margin: 12px;
text-align: center;
}
.tiny-date-picker__header--bordered {
margin-bottom: 0;
padding-bottom: 12px;
border-bottom: 1px solid var(--ti-date-picker-border-color);
}
.tiny-date-picker__header--bordered + .tiny-picker-panel__content {
margin-top: 0;
}
.tiny-date-picker__header-label {
font-size: var(--ti-date-picker-font-size);
font-weight: 700;
padding: 0 4px;
text-align: center;
cursor: pointer;
color: var(--ti-date-picker-font-color);
vertical-align: middle;
}
.tiny-date-picker__header-label.active,
.tiny-date-picker__header-label:hover {
color: var(--ti-date-picker-header-label-hover-color);
}
.tiny-date-picker__prev-btn {
float: left;
}
.tiny-date-picker__next-btn {
float: right;
}
.tiny-date-picker__time-wrap {
padding: 10px;
text-align: center;
}
.tiny-date-picker__time-label {
float: left;
cursor: pointer;
line-height: 30px;
margin-left: 10px;
}
.tiny-date-range-picker {
width: 558px;
}
.tiny-date-range-picker.has-sidebar {
width: 668px;
}
.tiny-date-range-picker table {
table-layout: fixed;
width: 100%;
}
.tiny-date-range-picker .tiny-picker-panel__body {
min-width: var(--ti-date-range-picker-body-min-width);
}
.tiny-date-range-picker .tiny-picker-panel__content {
margin: 0;
}
.tiny-date-range-picker__header {
position: relative;
text-align: center;
height: 28px;
}
.tiny-date-range-picker__header [class*='arrow-left'] {
float: left;
}
.tiny-date-range-picker__header [class*='arrow-right'] {
float: right;
}
.tiny-date-range-picker__header div {
font-size: var(--ti-date-range-picker-header-font-size);
font-weight: 500;
margin-right: 50px;
}
.tiny-date-range-picker__content {
float: left;
width: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 16px;
}
.tiny-date-range-picker__content.is-left {
border-right: 1px solid var(--ti-date-picker-border-color);
}
.tiny-date-range-picker__content .tiny-date-range-picker__header div {
margin-left: 50px;
margin-right: 50px;
}
.tiny-date-range-picker__editors-wrap {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
}
.tiny-date-range-picker__editors-wrap.is-right {
text-align: right;
}
.tiny-date-range-picker__time-header {
position: relative;
border-bottom: 1px solid var(--ti-date-picker-border-color);
font-size: var(--ti-date-picker-font-size);
padding: 8px 5px 5px;
display: table;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-date-range-picker__time-header > .tiny-icon-arrow-right {
font-size: var(--ti-common-font-size-4);
vertical-align: middle;
display: table-cell;
color: var(--ti-date-range-picker-time-header-icon-color);
}
.tiny-date-range-picker__time-picker-wrap {
position: relative;
display: table-cell;
padding: 0 5px;
}
.tiny-date-range-picker__time-picker-wrap .tiny-picker-panel {
position: absolute;
top: 13px;
right: 0;
z-index: 1;
background: var(--ti-date-picker-bgcolor);
}
.tiny-time-range-picker {
width: 354px;
overflow: visible;
}
.tiny-time-range-picker__content {
position: relative;
text-align: center;
padding: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tiny-time-range-picker__cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 4px 7px 7px;
width: 50%;
}
.tiny-time-range-picker__header {
margin-bottom: 5px;
text-align: center;
font-size: var(--ti-time-range-picker-header-font-size);
}
.tiny-time-range-picker__body {
border-radius: var(--ti-date-picker-border-radius);
border: 1px solid var(--ti-date-picker-border-color);
}
.tiny-time-panel {
--ti-date-picker-width: 280px;
--ti-date-picker-font-size: var(--ti-common-font-size-base);
--ti-date-picker-font-color: var(--ti-base-color-info-normal);
--ti-date-picker-bgcolor: var(--ti-base-color-light);
--ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
--ti-date-picker-border-color: var(--ti-common-color-line-dividing);
--ti-date-picker-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-disabled-color: var(--ti-common-color-text-disabled);
--ti-date-picker-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-date-picker-selected-bgcolor: #f2f2f3;
--ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
--ti-date-picker-current-select-bgcolor: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-color: var(--ti-base-color-brand-6);
--ti-date-picker-current-border-radius: 0;
--ti-date-picker-range-bgcolor: var(--ti-base-color-brand-2);
--ti-date-picker-range-hover-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-td-width: 36px;
--ti-date-table-td-height: 34px;
--ti-date-table-td-padding: 4px 0;
--ti-date-table-td-span-width: 36px;
--ti-date-table-td-span-height: 24px;
--ti-date-table-th-font-color: var(--ti-base-color-common-2);
--ti-date-table-td-border-radius: 0;
--ti-date-table-td-pre-month-color: var(--ti-base-color-common-2);
--ti-date-table-td-nomal-color: var(--ti-base-color-light);
--ti-date-table-td-range-bgcolor: #f2f6fc;
--ti-date-table-td-today-border-color: var(--ti-base-color-brand-6);
--ti-date-table-td-today-color: var(--ti-date-picker-font-color);
--ti-date-table-week-current-bgcolor: var(--ti-base-color-brand-2);
--ti-date-table-week-current-hover-bgcolor: var(--ti-base-color-brand-3);
--ti-month-table-td-color: var(--ti-base-color-brand-7);
--ti-month-table-td-range-bgcolor: #f2f6fc;
--ti-month-table-td-date-color: var(--ti-base-color-light);
--ti-month-table-td-date-border-radius: 24px;
--ti-year-table-td-color: var(--ti-base-color-brand-7);
--ti-year-table-td-icon-color: #303133;
--ti-time-spinner-arrow-color: #909399;
--ti-time-spinner-arrow-hover-color: var(--ti-base-color-brand-7);
--ti-time-spinner-item-active-color: #303133;
--ti-time-spinner-item-font-weight: 700;
--ti-time-spinner-item-bgcolor: transparent;
--ti-time-spinner-list-border-color: transparent;
--ti-picker-panel-line-height: var(--ti-base-size-height-minor);
--ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
--ti-picker-panel-icon-btn-color: var(--ti-base-color-common-2);
--ti-picker-panel-icon-btn-hover-color: var(--ti-base-color-brand-7);
--ti-picker-panel-icon-btn-disabled-color: var(--ti-base-color-bg-5);
--ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
--ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
--ti-date-picker-header-label-hover-color: var(--ti-base-color-brand-7);
--ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
--ti-date-range-picker-time-header-icon-color: #303133;
--ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
--ti-time-panel-footer-height: 36px;
--ti-time-panel-btn-color: #303133;
--ti-time-panel-btn-confirm-color: var(--ti-base-color-brand-7);
--ti-range-separator-color: #303133;
--ti-time-panel-border-color: var(--ti-date-picker-border-color);
--ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-time-panel-content-split-line-display: block;
--ti-time-panel-btn-cancel-display: inline-block;
--ti-time-panel-btn-bgcolor: transparent;
--ti-time-panel-btn-padding: 0 5px;
--ti-time-panel-btn-radius: var(--ti-common-border-radius-normal);
--ti-time-panel-btn-height: 28px;
--ti-time-panel-btn-min-width: inherit;
--ti-time-panel-btn-font-weight: 800;
--ti-time-panel-btn-confirm-hover-bgcolor: transparent;
--ti-date-editor-input-icon-fill-color: #575d6c;
margin: 5px 0;
border: 1px solid var(--ti-time-panel-border-color);
background-color: var(--ti-date-picker-bgcolor);
-webkit-box-shadow: var(--ti-time-panel-box-shadow);
box-shadow: var(--ti-time-panel-box-shadow);
border-radius: var(--ti-date-picker-border-radius);
position: absolute;
width: 180px;
left: 0;
z-index: 1000;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-time-panel__content {
font-size: 0;
position: relative;
overflow: hidden;
}
.tiny-time-panel__content:after,
.tiny-time-panel__content:before {
display: var(--ti-time-panel-content-split-line-display);
content: '';
top: 50%;
position: absolute;
margin-top: -19px;
height: 32px;
z-index: -1;
left: 0;
right: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 6px;
text-align: left;
border-top: 1px solid var(--ti-date-picker-border-color);
border-bottom: 1px solid var(--ti-date-picker-border-color);
}
.tiny-time-panel__content:after {
left: 50%;
margin-left: 12%;
margin-right: 12%;
}
.tiny-time-panel__content:before {
padding-left: 50%;
margin-right: 12%;
margin-left: 12%;
}
.tiny-time-panel__content.has-seconds:after {
left: calc(100% / 3 * 2);
}
.tiny-time-panel__content.has-seconds:before {
padding-left: calc(100% / 3);
}
.tiny-time-panel__footer {
border-top: 1px solid var(--ti-date-picker-border-color);
padding: 4px;
height: 36px;
height: var(--ti-time-panel-footer-height, 36px);
line-height: 25px;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-time-panel__btn {
min-width: var(--ti-time-panel-btn-min-width);
border: none;
line-height: var(--ti-time-panel-btn-height);
padding: var(--ti-time-panel-btn-padding);
margin: 0 5px;
cursor: pointer;
background-color: var(--ti-time-panel-btn-bgcolor);
outline: 0;
font-size: 12px;
color: var(--ti-time-panel-btn-color);
border-radius: var(--ti-time-panel-btn-radius);
-webkit-transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-time-panel__btn.cancel {
display: var(--ti-time-panel-btn-cancel-display);
}
.tiny-time-panel__btn.confirm {
font-weight: var(--ti-time-panel-btn-font-weight);
color: var(--ti-time-panel-btn-confirm-color);
}
.tiny-time-panel__btn.confirm:hover {
background-color: var(--ti-time-panel-btn-confirm-hover-bgcolor);
}
.tiny-time-select .tiny-time-select__item {
color: var(--ti-date-picker-font-color);
font-size: var(--ti-common-font-size-base);
padding: 0 8px;
line-height: var(--ti-base-size-height-normal);
height: var(--ti-base-size-height-normal);
}
.tiny-time-select .tiny-time-select__item:not(.disabled):hover {
background-color: var(--ti-date-picker-hover-bgcolor);
cursor: pointer;
}
.tiny-time-select .tiny-time-select__item.selected:not(.disabled) {
background-color: var(--ti-date-picker-selected-bgcolor);
}
.tiny-time-select .tiny-time-select__item.disabled {
color: var(--ti-date-picker-disabled-color);
cursor: not-allowed;
}
.tiny-scrollbar {
overflow: hidden;
position: relative;
}
.tiny-scrollbar:active > .tiny-scrollbar__bar,
.tiny-scrollbar:focus > .tiny-scrollbar__bar,
.tiny-scrollbar:hover > .tiny-scrollbar__bar {
opacity: 1;
-webkit-transition: opacity 340ms ease-out;
transition: opacity 340ms ease-out;
}
.tiny-scrollbar__wrap {
overflow: scroll;
height: 100%;
}
.tiny-scrollbar__wrap--hidden-default::-webkit-scrollbar {
width: 0;
height: 0;
}
.tiny-scrollbar__thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: rgba(144, 147, 153, 0.3);
-webkit-transition: 0.3s background-color;
transition: 0.3s background-color;
}
.tiny-scrollbar__thumb:hover {
background-color: rgba(144, 147, 153, 0.5);
}
.tiny-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
-webkit-transition: opacity 120ms ease-out;
transition: opacity 120ms ease-out;
}
.tiny-scrollbar__bar.is-vertical {
width: 6px;
top: 2px;
}
.tiny-scrollbar__bar.is-vertical > div {
width: 100%;
}
.tiny-scrollbar__bar.is-horizontal {
height: 6px;
left: 2px;
}
.tiny-scrollbar__bar.is-horizontal > div {
height: 100%;
}
.tiny-fade-in-linear-enter-active,
.tiny-fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.tiny-fade-in-linear-enter,
.tiny-fade-in-linear-enter-from,
.tiny-fade-in-linear-leave,
.tiny-fade-in-linear-leave-active,
.tiny-fade-in-linear-leave-from {
opacity: 0;
}
.tiny-fade-in-enter-active,
.tiny-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tiny-fade-in-enter,
.tiny-fade-in-enter-from,
.tiny-fade-in-leave-active {
opacity: 0;
}
.tiny-zoom-in-center-enter-active,
.tiny-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tiny-zoom-in-center-enter,
.tiny-zoom-in-center-enter-from,
.tiny-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.tiny-zoom-in-top-enter-active,
.tiny-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.tiny-zoom-in-top-enter,
.tiny-zoom-in-top-enter-from,
.tiny-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.tiny-zoom-in-bottom-enter-active,
.tiny-zoom-in-bottom-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.tiny-zoom-in-bottom-enter,
.tiny-zoom-in-bottom-enter-from,
.tiny-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.tiny-zoom-in-left-enter-active,
.tiny-zoom-in-left-leave-active {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.tiny-zoom-in-left-enter,
.tiny-zoom-in-left-enter-from,
.tiny-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45);
}
.tiny-list-enter-active,
.tiny-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s;
}
.tiny-list-enter,
.tiny-list-enter-from,
.tiny-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.tiny-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.collapse-transition {
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.horizontal-collapse-transition {
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.fade-in-linear-enter,
.fade-in-linear-enter-from,
.fade-in-linear-leave,
.fade-in-linear-leave-active,
.fade-in-linear-leave-from {
opacity: 0;
}
.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.tiny-popupload {
--ti-popupload-font-size: var(--ti-common-font-size-base);
--ti-popupload-dialog-table-border-color: var(--ti-base-color-border);
--ti-popupload-dialog-table-header-height: var(--ti-base-size-height-small);
--ti-popupload-dialog-table-header-color: var(--ti-base-color-info-normal);
--ti-popupload-dialog-table-header-background: #f1f1f1;
--ti-popupload-dialog-table-icon-color: var(--ti-base-color-brand-6);
--ti-popupload-dialog-table-icon-hover-color: var(--ti-base-color-bg-8);
font-size: var(--ti-popupload-font-size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-popupload__dialog {
max-height: 512px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-popupload__dialog-header .tiny-alert {
margin-bottom: 10px;
}
.tiny-popupload__dialog-body {
padding-bottom: 24px;
}
.tiny-popupload__dialog-body .tiny-upload-list {
display: none;
}
.tiny-popupload__dialog-footer {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 24px;
}
.tiny-popupload__dialog-tips {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-popupload__dialog-table {
height: 280px;
width: 100%;
margin-top: 10px;
}
.tiny-popupload__dialog-table .header-col {
border-right: 1px solid var(--ti-popupload-dialog-table-border-color);
padding: 0 12px;
}
.tiny-popupload__dialog-table .header-col:last-child {
border-right: none;
}
.tiny-popupload__dialog-table .body-col {
padding: 8px 12px;
margin: 0;
line-height: 20px;
}
.tiny-popupload__dialog-table .col1 {
width: 60%;
}
.tiny-popupload__dialog-table .col2 {
width: 20%;
}
.tiny-popupload__dialog-table .col3 {
width: 20%;
}
.tiny-popupload__dialog-table-header {
height: var(--ti-popupload-dialog-table-header-height);
width: 100%;
color: var(--ti-popupload-dialog-table-header-color);
font-weight: 700;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: var(--ti-popupload-dialog-table-header-background);
border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
}
.tiny-popupload__dialog-table-body {
width: 100%;
height: calc(100% - var(--ti-popupload-dialog-table-header-height));
overflow-y: auto;
border-bottom: 1px solid var(--ti-popupload-dialog-table-border-color);
}
.tiny-popupload__dialog-table-list {
list-style: none;
}
.tiny-popupload__dialog-table-item {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tiny-popupload__dialog-table-item:nth-child(even) {
background: rgba(51, 51, 51, 0.06);
}
.tiny-popupload__dialog-table-item .delIcon {
height: 17px;
width: 17px;
fill: var(--ti-popupload-dialog-table-icon-color);
cursor: pointer;
}
.tiny-popupload__dialog-table-item .delIcon:hover {
height: 17px;
width: 17px;
fill: var(--ti-popupload-dialog-table-icon-hover-color);
}
.tiny-popupload__modal .tiny-grid-modal__body {
overflow-y: auto;
}
.tiny-popeditor {
--ti-popeditor-border-color: var(--ti-base-color-border);
--ti-popeditor-icon-color: var(--ti-base-color-brand-6);
--ti-popeditor-icon-disabled-color: var(--ti-base-color-placeholder);
--ti-popeditor-icon-hover-color: var(--ti-base-color-brand-5);
--ti-popeditor-tabs-color: var(--ti-base-color-info-normal);
--ti-popeditor-tabs-selected-color: var(--ti-base-color-brand-6);
--ti-popeditor-tabs-li-height: var(--ti-common-size-10x);
}
.tiny-popeditor .tiny-input.tiny-popeditor-readonly .tiny-input__inner:active,
.tiny-popeditor .tiny-input.tiny-popeditor-readonly .tiny-input__inner:focus,
.tiny-popeditor .tiny-input.tiny-popeditor-readonly .tiny-input__inner:hover {
cursor: pointer;
border-color: var(--ti-popeditor-border-color);
}
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:active,
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:focus,
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:hover {
cursor: not-allowed;
}
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:active + .tiny-input__suffix .tiny-svg__popeditor,
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:focus + .tiny-input__suffix .tiny-svg__popeditor,
.tiny-popeditor .tiny-input.is-disabled .tiny-input__inner:hover + .tiny-input__suffix .tiny-svg__popeditor {
fill: var(--ti-popeditor-icon-disabled-color);
}
.tiny-popeditor .tiny-input.is-disabled .tiny-input__suffix {
cursor: not-allowed;
}
.tiny-popeditor .tiny-input.is-disabled .tiny-input__suffix .tiny-svg__popeditor,
.tiny-popeditor .tiny-input.is-disabled .tiny-input__suffix .tiny-svg__popeditor:hover {
fill: var(--ti-popeditor-icon-disabled-color);
cursor: not-allowed;
}
.tiny-popeditor .tiny-input.suggest .tiny-input__inner {
padding-right: 50px;
}
.tiny-popeditor .tiny-input.suggest .tiny-svg__popeditor.tiny-chevron {
margin-right: 8px;
}
.tiny-popeditor .tiny-input .tiny-input__inner:active + .tiny-input__suffix,
.tiny-popeditor .tiny-input .tiny-input__inner:focus + .tiny-input__suffix,
.tiny-popeditor .tiny-input .tiny-input__inner:hover + .tiny-input__suffix {
cursor: not-allowed;
}
.tiny-popeditor .tiny-input .tiny-input__inner:active + .tiny-input__suffix .tiny-svg__popeditor,
.tiny-popeditor .tiny-input .tiny-input__inner:focus + .tiny-input__suffix .tiny-svg__popeditor,
.tiny-popeditor .tiny-input .tiny-input__inner:hover + .tiny-input__suffix .tiny-svg__popeditor {
fill: var(--ti-popeditor-icon-hover-color);
}
.tiny-popeditor .tiny-input .tiny-input__suffix {
cursor: pointer;
}
.tiny-popeditor .tiny-input .tiny-input__suffix .tiny-svg__popeditor {
height: 30px;
line-height: 30px;
font-size: var(--ti-common-font-size-1);
fill: var(--ti-popeditor-icon-color);
cursor: pointer;
}
.tiny-popeditor .tiny-input .tiny-input__suffix .tiny-svg__popeditor:hover {
fill: var(--ti-popeditor-icon-hover-color);
}
.tiny-popeditor .tiny-dialog-box .tiny-dialog-box__body {
padding: 8px 8px 0;
}
.tiny-popeditor-top .tiny-popeditor__search-lists {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tiny-popeditor-top .tiny-popeditor__search-lists .tiny-input {
position: relative;
font-size: var(--ti-common-font-size-base);
display: inline-block;
width: 100%;
}
.tiny-popeditor-top .tiny-popeditor__search-lists .tiny-popeditor__search-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 12px;
}
.tiny-popeditor-top .tiny-popeditor__search-lists .tiny-popeditor__search-item .tiny-popeditor__search-label {
text-align: right;
padding-right: 8px;
font-size: var(--ti-common-font-size-base);
}
.tiny-popeditor-top .tiny-popeditor__search-lists .tiny-popeditor__search-input {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.tiny-popeditor-top .tiny-popeditor__search-footer {
width: 100%;
text-align: center;
margin: 12px auto;
}
.tiny-popeditor-body {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tiny-popeditor-body__left,
.tiny-popeditor-body__right {
width: 50%;
padding: 0 4px;
vertical-align: top;
}
.tiny-popeditor-body__left.tiny-popeditor-body__radio,
.tiny-popeditor-body__right.tiny-popeditor-body__radio {
width: 100%;
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-head {
white-space: nowrap;
margin: 0;
padding: 0 10px;
overflow: hidden;
height: 40px;
width: 100%;
position: relative;
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-head ul {
height: 40px;
border-bottom: 1px solid var(--ti-popeditor-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-head ul li {
float: left;
margin-right: -1px;
cursor: pointer;
padding: 0 20px;
color: var(--ti-popeditor-tabs-color);
min-width: 90px;
height: var(--ti-popeditor-tabs-li-height);
line-height: var(--ti-popeditor-tabs-li-height);
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-head ul li.tiny-popeditor__tabs-selected {
color: var(--ti-popeditor-tabs-selected-color);
border-bottom: 3px solid var(--ti-popeditor-tabs-selected-color);
font-weight: 700;
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-body .tabs-body-item {
padding: 12px 12px 0;
}
.tiny-popeditor-body .tiny-popeditor__tabs .tiny-popeditor__tabs-body .tabs-body-item .tiny-pager {
padding-bottom: 0;
}
.tiny-popeditor_filter-input {
margin-bottom: 20px;
}
.tiny-poplist.poplist-user {
min-width: 180px;
}
.tiny-poplist.poplist-user .tiny-icon {
float: right;
margin-left: 5px;
}
.tiny-popover.tiny-popper {
--ti-popover-background: var(--ti-base-color-light);
--ti-popover-color: #606266;
--ti-popover-border-color: #d9d9d9;
--ti-popover-border-radius: var(--ti-common-border-radius-1);
--ti-popover-font-size: var(--ti-common-font-size-1);
--ti-popover-title-color: #303133;
--ti-popover-title-font-size: var(--ti-common-font-size-2);
--ti-popover-arrow-border-width: 6px;
--ti-popover-placement-margin: var(--ti-common-space-3x);
--ti-popover-placement-arrow-after-border-color: var(--ti-base-color-light);
--ti-popover-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--ti-popover-arrow-border-color: var(--ti-popover-border-color);
--ti-popover-padding: 11px 15px;
position: absolute;
background: var(--ti-popover-background);
color: var(--ti-popover-color);
border-radius: var(--ti-popover-border-radius);
border: 1px solid var(--ti-popover-border-color);
padding: var(--ti-popover-padding);
z-index: 2000;
line-height: 1.4;
text-align: justify;
font-size: var(--ti-popover-font-size);
-webkit-box-shadow: var(--ti-popover-box-shadow);
box-shadow: var(--ti-popover-box-shadow);
word-break: break-all;
}
.tiny-popover.tiny-popper .popper__arrow,
.tiny-popover.tiny-popper .popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tiny-popover.tiny-popper .popper__arrow,
.tiny-popover.tiny-popper .tiny-popper .popper__arrow {
border-width: var(--ti-popover-arrow-border-width);
-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
}
.tiny-popover.tiny-popper .popper__arrow::after {
content: ' ';
border-width: var(--ti-popover-arrow-border-width);
}
.tiny-popover.tiny-popper[x-placement^='top'] {
margin-bottom: var(--ti-popover-placement-margin);
}
.tiny-popover.tiny-popper[x-placement^='top'] .popper__arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border-top-color: var(--ti-popover-arrow-border-color);
border-bottom-width: 0;
}
.tiny-popover.tiny-popper[x-placement^='top'] .popper__arrow::after {
bottom: 1px;
margin-left: -6px;
border-top-color: var(--ti-popover-placement-arrow-after-border-color);
border-bottom-width: 0;
}
.tiny-popover.tiny-popper[x-placement^='bottom'] {
margin-top: var(--ti-popover-placement-margin);
}
.tiny-popover.tiny-popper[x-placement^='bottom'] .popper__arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: var(--ti-popover-arrow-border-color);
}
.tiny-popover.tiny-popper[x-placement^='bottom'] .popper__arrow::after {
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: var(--ti-popover-placement-arrow-after-border-color);
}
.tiny-popover.tiny-popper[x-placement^='right'] {
margin-left: var(--ti-popover-placement-margin);
}
.tiny-popover.tiny-popper[x-placement^='right'] .popper__arrow {
top: 50%;
left: -6px;
margin-bottom: 3px;
border-right-color: var(--ti-popover-arrow-border-color);
border-left-width: 0;
}
.tiny-popover.tiny-popper[x-placement^='right'] .popper__arrow::after {
bottom: -6px;
left: 1px;
border-right-color: var(--ti-popover-placement-arrow-after-border-color);
border-left-width: 0;
}
.tiny-popover.tiny-popper[x-placement^='left'] {
margin-right: var(--ti-popover-placement-margin);
}
.tiny-popover.tiny-popper[x-placement^='left'] .popper__arrow {
top: 50%;
right: -6px;
margin-bottom: 3px;
border-right-width: 0;
border-left-color: var(--ti-popover-arrow-border-color);
}
.tiny-popover.tiny-popper[x-placement^='left'] .popper__arrow::after {
right: 1px;
bottom: -6px;
margin-left: -6px;
border-right-width: 0;
border-left-color: var(--ti-popover-placement-arrow-after-border-color);
}
.tiny-popover.tiny-popper .tiny-popover__plain {
padding: 18px 20px;
}
.tiny-popover.tiny-popper .tiny-popover__title {
color: var(--ti-popover-title-color);
font-size: var(--ti-popover-title-font-size);
line-height: 1;
margin-bottom: 12px;
}
.tiny-popover.tiny-popper .tiny-popover__reference:focus:hover,
.tiny-popover.tiny-popper .tiny-popover__reference:focus:not(.focusing),
.tiny-popover.tiny-popper:focus,
.tiny-popover.tiny-popper:focus:active {
outline-width: 0;
}
.tiny-popover__reference {
display: inline-block;
}
.tiny-progress {
--ti-progress-text-color: var(--ti-base-color-info-normal);
--ti-progress-text-font-size: var(--ti-common-font-size-base);
--ti-progress-bar-border-radius: 100px;
--ti-progress-bar-outer-bgcolor: var(--ti-base-color-selected-background);
--ti-progress-bar-inner-bgcolor: var(--ti-base-color-brand-6);
--ti-progress-bar-inner-text-color: var(--ti-base-color-light);
--ti-progress-success-color: var(--ti-base-color-success-normal);
--ti-progress-warning-color: var(--ti-base-color-warning-normal);
--ti-progress-exception-color: var(--ti-base-color-bg-8);
position: relative;
line-height: 1;
}
.tiny-progress.is-success .tiny-progress-bar__inner {
background-color: var(--ti-progress-success-color);
}
.tiny-progress.is-success .tiny-progress__text svg {
fill: var(--ti-progress-success-color);
}
.tiny-progress.is-warning .tiny-progress-bar__inner {
background-color: var(--ti-progress-warning-color);
}
.tiny-progress.is-warning .tiny-progress__text svg {
fill: var(--ti-progress-warning-color);
}
.tiny-progress.is-exception .tiny-progress-bar__inner {
background-color: var(--ti-progress-exception-color);
}
.tiny-progress.is-exception .tiny-progress__text svg {
fill: var(--ti-progress-exception-color);
}
.tiny-progress__text {
font-size: var(--ti-progress-text-font-size);
color: var(--ti-progress-text-color);
display: inline-block;
vertical-align: middle;
margin-left: 12px;
line-height: 1;
}
.tiny-progress__text i {
vertical-align: middle;
display: inline-block;
}
.tiny-progress--circle,
.tiny-progress--dashboard {
display: inline-block;
}
.tiny-progress--circle .tiny-progress__text,
.tiny-progress--dashboard .tiny-progress__text {
top: 50%;
position: absolute;
width: 100%;
text-align: center;
margin: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
left: 0;
}
.tiny-progress--circle .tiny-progress__text i,
.tiny-progress--dashboard .tiny-progress__text i {
display: inline-block;
vertical-align: middle;
}
.tiny-progress--without-text .tiny-progress__text {
display: none;
}
.tiny-progress--without-text .tiny-progress-bar {
padding-right: 0;
margin-right: 0;
display: block;
}
.tiny-progress--text-inside .tiny-progress-bar {
padding-right: 0;
margin-right: 0;
}
.tiny-progress-bar {
padding-right: 50px;
width: 100%;
margin-right: -55px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-progress-bar__outer {
height: 6px;
border-radius: var(--ti-progress-bar-border-radius);
background-color: var(--ti-progress-bar-outer-bgcolor);
overflow: hidden;
position: relative;
vertical-align: middle;
}
.tiny-progress-bar__inner {
background-color: var(--ti-progress-bar-inner-bgcolor);
text-align: right;
left: 0;
position: absolute;
top: 0;
height: 100%;
border-radius: var(--ti-progress-bar-border-radius);
line-height: 1;
white-space: nowrap;
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.tiny-progress-bar__inner::after {
content: '';
height: 100%;
}
.tiny-progress-bar__innerText {
color: var(--ti-progress-bar-inner-text-color);
font-size: var(--ti-progress-text-font-size);
margin: 0 5px;
}
.tiny-progress-bar,
.tiny-progress-bar__inner::after,
.tiny-progress-bar__innerText {
display: inline-block;
vertical-align: middle;
}
@-webkit-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 32px 0;
}
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: 32px 0;
}
}
.tiny-slider {
--ti-slider-bgcolor: var(--ti-base-color-brand-2);
--ti-slider-height: var(--ti-common-size-2x);
--ti-slider-radius: 2px;
--ti-slider-range-height: var(--ti-common-size-4x);
--ti-slider-range-radius: 2px;
--ti-slider-range-bgcolor: var(--ti-base-color-brand-6);
--ti-slider-range-hover-bgcolor: var(--ti-base-color-brand-6);
--ti-slider-range-top: calc(-1 * var(--ti-common-space-base));
--ti-slider-range-margin-top: calc(-1 * var(--ti-common-space-base));
--ti-slider-handle-width: var(--ti-common-size-5x);
--ti-slider-handle-height: var(--ti-common-size-7x);
--ti-slider-handle-bgcolor: linear-gradient(153deg, var(--ti-base-color-white), var(--ti-base-color-brand-2) 99%);
--ti-slider-handle-border-color: var(--ti-base-color-brand-6);
--ti-slider-handle-radius: 10px;
--ti-slider-handle-color-hover: var(--ti-common-color-bg-hover);
--ti-slider-handle-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
--ti-slider-handle-top: calc(-1 * var(--ti-common-space-base));
--ti-slider-handle-border-width: 1px;
--ti-slider-handle-icon-display: inline-block;
--ti-slider-handle-icon-fill-color: var(--ti-slider-handle-border-color);
--ti-slider-handle-icon-fill-color-hover: var(--ti-slider-handle-color-hover);
--ti-slider-handle-transform: scale(1);
--ti-slider-handle-margin: -10px -8px 0;
--ti-slider-input-height: var(--ti-base-size-height-minor, 30px);
--ti-slider-input-width: var(--ti-common-size-10x);
--ti-slider-input-border-radius: var(--ti-common-border-radius-normal, 2px);
--ti-slider-input-border-color: var(--ti-base-color-border, #d9d9d9);
--ti-slider-input-color: var(--ti-base-color-info-normal, #333);
--ti-slider-input-bgcolor: var(--ti-base-color-light, #fff);
--ti-slider-tips-bgcolor: var(--ti-base-color-common-6);
--ti-slider-tips-color: var(--ti-base-color-white);
--ti-slider-tips-margin-left: 3px;
--ti-slider-vertical-margin: -8px 0 -8px -6px;
border-radius: var(--ti-slider-radius);
height: var(--ti-slider-height);
position: relative;
margin: 13px 0;
background: var(--ti-slider-bgcolor);
cursor: pointer;
width: calc(100% - 89px);
display: inline-block;
}
.tiny-slider:hover .tiny-slider__range {
background: var(--ti-slider-range-hover-bgcolor);
}
.tiny-slider:hover .tiny-slider__handle {
border-color: var(--ti-slider-range-hover-bgcolor);
}
.tiny-slider.disabled {
cursor: default;
}
.tiny-slider.disabled .tiny-slider__handle {
cursor: not-allowed;
}
.tiny-slider.tiny-slider__vertical {
width: var(--ti-slider-height);
height: 300px;
display: block;
margin: 0 15px;
}
.tiny-slider.tiny-slider__vertical + .tiny-slider__input {
margin-top: 12px;
float: none;
right: 0;
}
.tiny-slider.tiny-slider__vertical .tiny-slider__range {
border-radius: 10px;
position: absolute;
z-index: 1;
width: var(--ti-slider-height);
}
.tiny-slider.tiny-slider__vertical .tiny-slider__up {
top: 0;
}
.tiny-slider.tiny-slider__vertical .tiny-slider__down {
bottom: 0;
}
.tiny-slider.tiny-slider__vertical .tiny-slider__handle {
margin: var(--ti-slider-vertical-margin);
}
.tiny-slider__range {
border-radius: var(--ti-slider-range-radius);
position: absolute;
z-index: 1;
margin-top: var(--ti-slider-range-margin-top);
height: var(--ti-slider-range-height);
background: var(--ti-slider-range-bgcolor);
}
.tiny-slider__left {
left: 0;
}
.tiny-slider__right {
right: 0;
}
.tiny-slider__handle {
border-radius: var(--ti-slider-handle-radius);
height: var(--ti-slider-handle-height);
width: var(--ti-slider-handle-width);
position: absolute;
margin: var(--ti-slider-handle-margin);
z-index: 2;
outline: 0;
background: var(--ti-slider-handle-bgcolor);
border: var(--ti-slider-handle-border-width) solid var(--ti-slider-handle-border-color);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-shadow: var(--ti-slider-handle-box-shadow);
box-shadow: var(--ti-slider-handle-box-shadow);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: -webkit-grab;
cursor: grab;
text-align: center;
}
.tiny-slider__handle:hover {
color: var(--ti-slider-handle-color-hover);
border-color: var(--ti-slider-handle-color-hover);
-webkit-transform: var(--ti-slider-handle-transform);
transform: var(--ti-slider-handle-transform);
}
.tiny-slider__handle:hover svg {
fill: var(--ti-slider-handle-icon-fill-color-hover);
}
.tiny-slider__handle svg {
display: var(--ti-slider-handle-icon-display);
height: 12px;
margin-left: 4px;
fill: var(--ti-slider-handle-icon-fill-color);
}
.tiny-slider__tips {
text-align: center;
font-size: var(--ti-common-font-size-base);
margin-top: -32px;
margin-left: var(--ti-slider-tips-margin-left);
position: absolute;
padding: 12px 16px;
line-height: 1.5;
z-index: 1010;
word-break: normal;
white-space: nowrap;
background: var(--ti-slider-tips-bgcolor);
border: 1px solid var(--ti-slider-tips-bgcolor);
border-radius: var(--ti-common-border-radius-1);
color: var(--ti-slider-tips-color);
}
.tiny-slider__tips:before {
margin-left: -6px;
bottom: -6px;
content: '';
left: 50%;
top: auto;
margin-top: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: var(--ti-slider-tips-bgcolor) transparent;
}
.tiny-slider__tips:after {
margin-left: -4px;
bottom: -4px;
content: '';
left: 50%;
top: auto;
margin-top: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-slider-tips-bgcolor) transparent;
}
.tiny-slider__input {
display: inline-block;
line-height: var(--ti-slider-input-height);
vertical-align: top;
margin-left: 12px;
font-size: var(--ti-common-font-size-base);
}
.tiny-slider__input input {
width: var(--ti-slider-input-width);
height: var(--ti-slider-input-height);
line-height: var(--ti-slider-input-height);
border: 1px solid var(--ti-slider-input-border-color);
border-radius: var(--ti-slider-input-border-radius);
color: var(--ti-slider-input-color);
background: var(--ti-slider-input-bgcolor);
font-size: inherit;
padding: 0 8px;
outline: 0;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.tiny-slider__input span {
padding-left: 8px;
}
.tiny-radio {
--ti-radio-color: var(--ti-base-color-info-normal);
--ti-radio-font-size: var(--ti-common-font-size-base);
--ti-radio-bordered-height: var(var(--ti-common-size-10x));
--ti-radio-bordered-border-radius: var(--ti-common-border-radius-normal);
--ti-radio-bordered-border-color: var(--ti-base-color-common-2);
--ti-radio-input-disabled-border-color: var(--ti-base-color-common-1);
--ti-radio-bordered-checked-border-color: var(--ti-base-color-brand-6);
--ti-radio-bordered-checked-background-color: var(--ti-base-color-light);
--ti-radio-bordered-hover-border-color: var(--ti-base-color-brand-6);
--ti-radio-bordered-checked-hover-border-color: var(--ti-base-color-brand-6);
--ti-radio-bordered-active-border-color: var(--ti-base-color-primary-active);
--ti-radio-input-disabled-bgcolor: var(--ti-base-color-bg-5);
--ti-radio-input-checked-disabled-color: var(--ti-base-color-bg-5);
--ti-radio-input-disabled-color: var(--ti-base-color-placeholder);
--ti-radio-inner-bgcolor: var(--ti-base-color-light);
--ti-radio-inner-checked-bgcolor: var(--ti-base-color-brand-6);
--ti-radio-medium-height: var(--ti-base-size-height-small);
--ti-radio-medium-inner-height: 14px;
--ti-radio-medium-inner-width: 14px;
--ti-radio-small-height: var(--ti-common-size-8x);
--ti-radio-small-inner-height: var(--ti-common-size-3x);
--ti-radio-small-inner-width: var(--ti-common-size-3x);
--ti-radio-mini-height: var(--ti-common-size-7x);
--ti-radio-mini-inner-height: var(--ti-common-size-3x);
--ti-radio-mini-inner-width: var(--ti-common-size-3x);
--ti-radio-inner-size: 8px;
--ti-radio-inner-checked-disabled-bgcolor: var(--ti-base-color-common-2);
color: var(--ti-radio-color);
font-weight: 500;
margin-right: 30px;
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;
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-radio:last-child {
margin-right: 0;
}
.tiny-radio.is-bordered {
padding: 4px 12px;
border-radius: var(--ti-radio-bordered-border-radius);
border: 1px solid var(--ti-radio-bordered-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: var(--ti-radio-bordered-height);
}
.tiny-radio.is-bordered + .tiny-radio.is-bordered {
margin-left: 10px;
}
.tiny-radio.is-bordered.is-checked {
border-color: var(--ti-radio-bordered-checked-border-color);
}
.tiny-radio.is-bordered.is-disabled {
cursor: not-allowed;
border-color: var(--ti-radio-bordered-border-color);
}
.tiny-radio,
.tiny-radio__input {
white-space: nowrap;
line-height: 1;
outline: 0;
}
.tiny-radio__input {
cursor: pointer;
line-height: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-radio__input {
display: inline-block;
}
}
@supports (-ms-ime-align: auto) {
.tiny-radio__input {
display: inline-block;
}
}
.tiny-radio__input.is-disabled .tiny-radio__inner {
border-color: var(--ti-radio-input-disabled-border-color);
}
.tiny-radio__input.is-disabled .tiny-radio__inner,
.tiny-radio__input.is-disabled .tiny-radio__inner::after {
cursor: not-allowed;
background-color: var(--ti-radio-input-disabled-bgcolor);
}
.tiny-radio__input.is-disabled .tiny-radio__inner + .tiny-radio__label {
cursor: not-allowed;
}
.tiny-radio__input.is-disabled.is-checked .tiny-radio__inner {
background-color: var(--ti-radio-input-checked-disabled-color);
border-color: var(--ti-base-color-common-1);
}
.tiny-radio__input.is-disabled.is-checked .tiny-radio__inner::after {
background-color: var(--ti-radio-inner-checked-disabled-bgcolor);
}
.tiny-radio__input.is-disabled + span.tiny-radio__label {
color: var(--ti-radio-input-disabled-color);
cursor: not-allowed;
}
.tiny-radio__input.is-checked .tiny-radio__inner {
border-color: var(--ti-radio-bordered-checked-border-color);
background: var(--ti-radio-bordered-checked-background-color);
}
.tiny-radio__input.is-checked .tiny-radio__inner::after {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
background-color: var(--ti-radio-inner-checked-bgcolor);
}
.tiny-radio__input.is-checked:not(.is-disabled) .tiny-radio__inner:hover {
border-color: var(--ti-radio-bordered-checked-hover-border-color);
}
.tiny-radio__inner {
border: 1px solid var(--ti-radio-bordered-border-color);
border-radius: 100%;
width: 16px;
height: 16px;
background-color: var(--ti-radio-inner-bgcolor);
position: relative;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
.tiny-radio__inner:hover {
border-color: var(--ti-radio-bordered-hover-border-color);
}
.tiny-radio__inner:active {
border-color: var(--ti-radio-bordered-active-border-color);
}
.tiny-radio__inner::after {
width: var(--ti-radio-inner-size);
height: var(--ti-radio-inner-size);
border-radius: 100%;
background-color: var(--ti-radio-inner-bgcolor);
content: '';
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
-webkit-transition: -webkit-transform 0.15s ease-in;
transition: -webkit-transform 0.15s ease-in;
transition: transform 0.15s ease-in;
transition: transform 0.15s ease-in, -webkit-transform 0.15s ease-in;
}
.tiny-radio__original {
opacity: 0;
outline: 0;
position: absolute;
z-index: -1;
margin: 0;
width: 0;
height: 0;
}
.tiny-radio__label {
font-size: var(--ti-radio-font-size);
padding-left: 8px;
vertical-align: middle;
}
.tiny-radio--medium.is-bordered {
border-radius: var(--ti-radio-bordered-border-radius);
height: var(--ti-radio-medium-height);
}
.tiny-radio--medium.is-bordered .tiny-radio__inner {
height: var(--ti-radio-medium-inner-height);
width: var(--ti-radio-medium-inner-width);
}
.tiny-radio--medium.is-bordered .tiny-radio__label {
font-size: var(--ti-radio-font-size);
}
.tiny-radio--small.is-bordered {
border-radius: var(--ti-radio-bordered-border-radius);
height: var(--ti-radio-small-height);
}
.tiny-radio--small.is-bordered .tiny-radio__inner {
height: var(--ti-radio-small-inner-height);
width: var(--ti-radio-small-inner-width);
}
.tiny-radio--small.is-bordered .tiny-radio__label {
font-size: var(--ti-radio-font-size);
}
.tiny-radio--mini.is-bordered {
padding: 0 8px;
border-radius: var(--ti-radio-bordered-border-radius, 2px);
height: var(--ti-radio-mini-height);
line-height: calc(var(--ti-radio-mini-height) - 2px);
}
.tiny-radio--mini.is-bordered .tiny-radio__inner {
height: var(--ti-radio-mini-inner-height);
width: var(--ti-radio-mini-inner-width);
}
.tiny-radio--mini.is-bordered .tiny-radio__inner::after {
width: 4px;
height: 4px;
}
.tiny-radio--mini.is-bordered .tiny-radio__label {
font-size: var(--ti-radio-font-size);
}
.tiny-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .tiny-radio__inner {
-webkit-box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
}
.tiny-radio-button {
--ti-radio-button-color: var(--ti-base-color-info-normal);
--ti-radio-button-hover-color: var(--ti-base-color-light);
--ti-radio-button-border-color: var(--ti-base-color-border);
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal);
--ti-radio-button-font-size: var(--ti-common-font-size-base);
--ti-radio-button-bgcolor: var(--ti-base-color-light);
--ti-radio-button-checked-normal-color: var(--ti-base-color-brand-6);
--ti-radio-button-checked-hover-color: var(--ti-base-color-brand-5);
--ti-radio-button-disabled-color: var(--ti-base-color-placeholder);
--ti-radio-button-disabled-bgcolor: var(--ti-base-color-bg-5);
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1);
}
.tiny-radio-button:first-child .tiny-radio-button__inner {
border-left: 1px solid var(--ti-radio-button-border-color);
border-radius: var(--ti-radio-button-border-radius) 0 0 var(--ti-radio-button-border-radius);
}
.tiny-radio-button:first-child .tiny-radio-button__orig-radio:checked + .tiny-radio-button__inner {
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-radio-button:last-child .tiny-radio-button__inner {
border-radius: 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0;
}
.tiny-radio-button:first-child:last-child .tiny-radio-button__inner {
border-radius: var(--ti-radio-button-border-radius);
}
.tiny-radio-button,
.tiny-radio-button__inner {
display: inline-block;
position: relative;
outline: 0;
}
.tiny-radio-button__inner {
color: var(--ti-radio-button-color);
font-size: var(--ti-radio-button-font-size);
background: var(--ti-radio-button-bgcolor);
border: 1px solid var(--ti-radio-button-border-color);
padding: 12px 20px;
font-weight: 500;
border-radius: 0;
border-left: 0;
line-height: 1;
white-space: nowrap;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
cursor: pointer;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-radio-button__inner.is-round {
padding: 12px 20px;
}
.tiny-radio-button__inner:hover {
color: var(--ti-radio-button-hover-color);
background-color: var(--ti-radio-button-checked-hover-color);
border-color: var(--ti-radio-button-checked-hover-color);
outline: 0;
}
.tiny-radio-button__inner [class*='tiny-icon'] {
line-height: 0.9;
}
.tiny-radio-button__inner [class*='tiny-icon'] + span {
margin-left: 5px;
}
.tiny-radio-button__orig-radio {
opacity: 0;
outline: 0;
position: absolute;
z-index: -1;
}
.tiny-radio-button__orig-radio:checked + .tiny-radio-button__inner {
color: #fff;
background-color: var(--ti-radio-button-checked-normal-color);
border-color: var(--ti-radio-button-checked-normal-color);
-webkit-box-shadow: -1px 0 0 0 var(--ti-radio-button-checked-normal-color);
box-shadow: -1px 0 0 0 var(--ti-radio-button-checked-normal-color);
}
.tiny-radio-button__orig-radio:checked + .tiny-radio-button__inner:hover {
background-color: var(--ti-radio-button-checked-hover-color);
border-color: var(--ti-radio-button-checked-hover-color);
-webkit-box-shadow: -1px 0 0 0 var(--ti-radio-button-checked-hover-color);
box-shadow: -1px 0 0 0 var(--ti-radio-button-checked-hover-color);
}
.tiny-radio-button__orig-radio:disabled + .tiny-radio-button__inner {
color: var(--ti-radio-button-disabled-color);
border-color: var(--ti-radio-button-border-color);
background-color: var(--ti-radio-button-disabled-bgcolor);
background-image: none;
-webkit-box-shadow: none;
box-shadow: none;
cursor: not-allowed;
}
.tiny-radio-button__orig-radio:disabled:checked + .tiny-radio-button__inner {
background-color: var(--ti-radio-input-checked-disabled-color);
}
.tiny-radio-button__orig-radio:disabled:checked + .tiny-radio-button__inner,
.tiny-radio-button__orig-radio:disabled:checked + .tiny-radio-button__inner:hover {
border-color: var(--ti-radio-input-checked-disabled-color);
}
.tiny-radio-button--medium .tiny-radio-button__inner {
font-size: var(--ti-radio-button-medium-font-size);
padding: 10px 20px;
border-radius: 0;
}
.tiny-radio-button--medium .tiny-radio-button__inner.is-round {
padding: 10px 20px;
}
.tiny-radio-button--small .tiny-radio-button__inner {
font-size: var(--ti-radio-button-font-size);
padding: 9px 15px;
border-radius: 0;
}
.tiny-radio-button--small .tiny-radio-button__inner.is-round {
padding: 9px 15px;
}
.tiny-radio-button--mini .tiny-radio-button__inner {
font-size: var(--ti-radio-button-font-size);
padding: 7px 15px;
border-radius: 0;
}
.tiny-radio-button--mini .tiny-radio-button__inner.is-round {
padding: 7px 15px;
}
.tiny-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
-webkit-box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
box-shadow: 0 0 2px 2px var(--ti-radio-bordered-hover-border-color);
}
.tiny-radio-group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.tiny-radio-group.list-inline {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-radio-group.list-inline .tiny-radio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 0;
}
.tiny-radio-group.list-inline .tiny-radio:not(:last-child) {
margin-bottom: 8px;
}
.tiny-radio-group.list-inline .tiny-radio-button {
display: block;
}
.tiny-radio-group.list-inline .tiny-radio-button:first-child .tiny-radio-button__inner {
border-radius: var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius) 0 0;
border-top: 1px solid var(--ti-radio-button-border-color);
}
.tiny-radio-group.list-inline .tiny-radio-button:last-child .tiny-radio-button__inner {
border-radius: 0 0 var(--ti-radio-button-border-radius) var(--ti-radio-button-border-radius);
}
.tiny-radio-group.list-inline .tiny-radio-button.is-active .tiny-radio-button__inner {
-webkit-box-shadow: none;
box-shadow: none;
border-color: var(--ti-radio-button-checked-normal-color);
}
.tiny-radio-group.list-inline .tiny-radio-button.is-active.is-disabled .tiny-radio-button__inner {
border-color: var(--ti-radio-input-checked-disabled-color);
}
.tiny-radio-group.list-inline .tiny-radio-button__inner {
border-top: 0;
border-left: 1px solid var(--ti-radio-button-border-color);
}
.tiny-rate {
--ti-rate-bottom-font-size: var(--ti-common-font-size-base);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
outline: 0;
}
.tiny-rate:active,
.tiny-rate:focus {
outline-width: 0;
}
.tiny-rate .tiny-rate__star {
position: relative;
display: inline-block;
font-size: 0;
vertical-align: middle;
text-align: center;
line-height: 1;
}
.tiny-rate svg {
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tiny-rate svg.hover {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.tiny-rate .tiny-rate__decimal {
display: inline-block;
overflow: hidden;
font-size: var(--ti-common-font-size-2);
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tiny-rate .tiny-rate__text {
vertical-align: middle;
margin-left: 8px;
}
.tiny-rate .tiny-rate__bottom-text {
position: relative;
font-size: var(--ti-rate-bottom-font-size);
text-align: center;
text-overflow: clip;
overflow: hidden;
margin-top: 8px;
}
.tiny-roles {
--ti-roles-poplist-item-height: var(--ti-base-size-height-minor);
--ti-roles-poplist-item-color: var(--ti-base-color-info-normal);
--ti-roles-poplist-item-font-size: var(--ti-common-font-size-base);
--ti-roles-poplist-item-hover-background: var(--ti-base-color-hover-background);
--ti-roles-poplist-item-selected-background: var(--ti-base-color-selected-background);
--ti-roles-poplist-item-selected-font-color: var(--ti-base-color-selected-font-color);
}
.tiny-roles svg {
margin-left: 2px;
}
.tiny-roles__selector.tiny-popover.tiny-popper {
padding: 0;
}
.tiny-roles__selector .tiny-roles__poplist-item {
padding: 0 8px;
}
.tiny-roles__selector-body {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.tiny-roles__poplist {
min-width: 180px;
}
.tiny-roles__poplist-item {
min-height: var(--ti-roles-poplist-item-height);
line-height: var(--ti-roles-poplist-item-height);
max-width: 100%;
color: var(--ti-roles-poplist-item-color);
font-size: var(--ti-roles-poplist-item-font-size);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.tiny-roles__poplist-item:hover {
background: var(--ti-roles-poplist-item-hover-background);
}
.tiny-roles__poplist-item.is-selected,
.tiny-roles__poplist-item.is-selected:hover {
background: var(--ti-roles-poplist-item-selected-background);
color: var(--ti-roles-poplist-item-selected-font-color);
}
.tiny-row {
width: 100%;
}
.tiny-row:after,
.tiny-row:before {
content: '';
display: table;
}
.tiny-row:after {
clear: both;
}
.tiny-row.row-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-row.row-justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.tiny-row.row-justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.tiny-row.row-justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-row.row-justify-space-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.tiny-row.row-justify-space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.tiny-row.row-align-top {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.tiny-row.row-align-middle {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-row.row-align-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.tiny-scroll-text {
--ti-scroll-text-height: var(--ti-base-size-height-small);
--ti-scroll-text-background: #f1f1f1;
width: 300px;
height: var(--ti-scroll-text-height);
line-height: var(--ti-scroll-text-height);
background: var(--ti-scroll-text-background);
margin: 0 auto;
overflow: hidden;
}
.tiny-scroll-text .tiny-scroll-text__content {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
height: 100%;
padding: 0 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
position: relative;
-webkit-animation: infinite linear;
animation: infinite linear;
-webkit-animation-duration: 7s;
animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-scroll-text .tiny-scroll-text__content {
display: inline-block;
}
}
@supports (-ms-ime-align: auto) {
.tiny-scroll-text .tiny-scroll-text__content {
display: inline-block;
}
}
.tiny-scroll-text .tiny-scroll-text__content.left {
-webkit-animation-name: moveLeft;
animation-name: moveLeft;
}
.tiny-scroll-text .tiny-scroll-text__content.right {
-webkit-animation-name: moveRight;
animation-name: moveRight;
}
.tiny-scroll-text .tiny-scroll-text__content.up {
-webkit-animation-name: moveUp;
animation-name: moveUp;
}
.tiny-scroll-text .tiny-scroll-text__content.down {
-webkit-animation-name: moveDown;
animation-name: moveDown;
}
.tiny-scroll-text .tiny-scroll-text__content.singleUp {
-webkit-animation-name: singleUp;
animation-name: singleUp;
}
.tiny-scroll-text .tiny-scroll-text__content.stop {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.tiny-scroll-text .tiny-scroll-text__content.down,
.tiny-scroll-text .tiny-scroll-text__content.up {
width: 100%;
white-space: normal;
}
.tiny-scroll-text .tiny-scroll-text__content p {
width: auto;
line-height: 1;
margin: 0;
}
@-webkit-keyframes moveLeft {
0% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes moveLeft {
0% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@-webkit-keyframes moveRight {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@keyframes moveRight {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
}
@-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes moveUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@-webkit-keyframes moveDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
@keyframes moveDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
.tiny-scrollbar {
overflow: hidden;
position: relative;
}
.tiny-scrollbar:active > .tiny-scrollbar__bar,
.tiny-scrollbar:focus > .tiny-scrollbar__bar,
.tiny-scrollbar:hover > .tiny-scrollbar__bar {
opacity: 1;
-webkit-transition: opacity 340ms ease-out;
transition: opacity 340ms ease-out;
}
.tiny-scrollbar__wrap {
overflow: scroll;
height: 100%;
max-height: 200px;
}
.tiny-scrollbar__wrap--hidden-default::-webkit-scrollbar {
width: 0;
height: 0;
}
.tiny-scrollbar__thumb {
position: relative;
display: block;
width: 0;
height: 0;
cursor: pointer;
border-radius: inherit;
background-color: rgba(144, 147, 153, 0.3);
-webkit-transition: 0.3s background-color;
transition: 0.3s background-color;
}
.tiny-scrollbar__thumb:hover {
background-color: rgba(144, 147, 153, 0.5);
}
.tiny-scrollbar__bar {
position: absolute;
right: 2px;
bottom: 2px;
z-index: 1;
border-radius: 4px;
opacity: 0;
-webkit-transition: opacity 120ms ease-out;
transition: opacity 120ms ease-out;
}
.tiny-scrollbar__bar.is-vertical {
width: 6px;
top: 2px;
}
.tiny-scrollbar__bar.is-vertical > div {
width: 100%;
}
.tiny-scrollbar__bar.is-horizontal {
height: 6px;
left: 2px;
}
.tiny-scrollbar__bar.is-horizontal > div {
height: 100%;
}
.tiny-transition-search-line-fade-enter,
.tiny-transition-search-line-fade-enter-from,
.tiny-transition-search-line-fade-leave-to {
opacity: 0;
}
.tiny-transition-search-line-fade-enter-to {
opacity: 0;
}
.tiny-transition-search-line-fade-enter-active,
.tiny-transition-search-line-fade-leave-active {
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.tiny-search {
--ti-search-font-size: var(--ti-common-font-size-base);
--ti-search-input-height: var(--ti-base-size-height-normal);
--ti-search-inputinner-height: var(--ti-base-size-height-small);
--ti-search-input-color: var(--ti-base-color-info-normal);
--ti-search-input-background: var(--ti-base-color-light);
--ti-search-input-btn-color: var(--ti-base-color-brand-6);
--ti-search-input-btn-hover-color: var(--ti-base-color-brand-5);
--ti-search-input-btn-font-size: var(--ti-common-font-size-1);
--ti-search-input-border-color: var(--ti-base-color-border);
--ti-search-icon-border-color: #dbdbdb;
--ti-search-icon-color: #c4c4c4;
--ti-search-size-height-normal: var(--ti-base-size-height-normal);
--ti-search-size-height-small: var(--ti-base-size-height-small);
--ti-search-selector-color: var(--ti-base-color-info-normal);
--ti-search-line-hover-color: var(--ti-base-color-border-hover);
--ti-search-list-hover-background: var(--ti-base-color-selected-background);
--ti-search-selector-radius: var(--ti-common-border-radius-normal);
--ti-search-selector-background: var(--ti-base-color-light);
--ti-search-selector-list-height: var(--ti-base-size-height-normal);
position: relative;
display: inline-block;
font-size: var(--ti-search-font-size);
width: 100%;
}
.tiny-search .tiny-search__line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: var(--ti-search-input-height);
border: 1px solid var(--ti-search-input-border-color);
border-radius: var(--ti-common-border-radius-normal);
background-color: var(--ti-search-input-background);
-webkit-transition: 0.4s;
transition: 0.4s;
border-collapse: separate;
}
.tiny-search .tiny-search__line:hover {
border-color: var(--ti-search-line-hover-color);
}
.tiny-search .tiny-search__line.focus,
.tiny-search .tiny-search__line:focus {
border-color: var(--ti-search-input-btn-color);
}
.tiny-search .tiny-search__input {
width: 100%;
height: 100%;
line-height: 1;
color: var(--ti-search-input-color);
padding: 0 0 0 8px;
border: 0;
outline: 0;
background: 0 0;
}
.tiny-search .tiny-search__input::-moz-placeholder {
color: #999;
opacity: 1;
}
.tiny-search .tiny-search__input:-ms-input-placeholder {
color: #999;
}
.tiny-search .tiny-search__input::-webkit-input-placeholder {
color: #999;
}
.tiny-search .tiny-search__input::-ms-input-placeholder {
color: #999;
}
.tiny-search .tiny-search__input::placeholder {
color: #999;
}
.tiny-search .tiny-search__input:focus::-moz-placeholder {
color: #d9d9d9;
opacity: 1;
}
.tiny-search .tiny-search__input:focus:-ms-input-placeholder {
color: #d9d9d9;
}
.tiny-search .tiny-search__input:focus::-webkit-input-placeholder {
color: #d9d9d9;
}
.tiny-search .tiny-search__input:focus::-ms-input-placeholder {
color: #d9d9d9;
}
.tiny-search .tiny-search__input:focus::placeholder {
color: #d9d9d9;
}
.tiny-search .tiny-search__input-btn {
text-align: center;
}
.tiny-search .tiny-search__input-btn a {
text-decoration: none;
display: block;
width: var(--ti-search-inputinner-height);
height: 100%;
line-height: var(--ti-search-inputinner-height);
}
.tiny-search .tiny-search__input-btn svg {
fill: var(--ti-search-input-btn-color);
font-size: var(--ti-search-input-btn-font-size);
}
.tiny-search .tiny-search__input-btn:hover svg {
fill: var(--ti-search-input-btn-hover-color);
}
.tiny-search .tiny-search__present {
color: var(--ti-search-selector-color);
line-height: var(--ti-search-size-height-normal);
padding-left: 8px;
white-space: nowrap;
}
.tiny-search .tiny-search__present .icon-outer {
height: calc(var(--ti-search-size-height-normal) - 12px);
line-height: calc(var(--ti-search-size-height-normal) - 12px);
display: inline-block;
padding: 0 8px 0 4px;
border-right: 1px solid var(--ti-search-input-border-color);
cursor: pointer;
}
.tiny-search .tiny-search__present .icon-outer svg {
font-size: var(--ti-search-input-btn-font-size);
fill: var(--ti-search-icon-color);
}
.tiny-search .tiny-search__selector {
position: absolute;
top: 32px;
left: 0;
overflow: hidden;
min-width: 68px;
border: 1px solid var(--ti-search-input-border-color);
border-radius: var(--ti-search-selector-radius);
font-size: var(--ti-search-font-size);
-webkit-box-shadow: var(--ti-base-box-shadow);
box-shadow: var(--ti-base-box-shadow);
background: var(--ti-search-selector-background);
color: var(--ti-search-selector-color);
margin-top: 2px;
}
.tiny-search .tiny-search__selector-body {
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.tiny-search .tiny-search__poplist-item {
min-height: var(--ti-search-selector-list-height);
padding: 0 8px;
line-height: var(--ti-search-selector-list-height);
max-width: 100%;
font-size: var(--ti-search-font-size);
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-search .tiny-search__poplist-item:hover {
background: var(--ti-search-list-hover-background);
cursor: pointer;
}
.tiny-search .tiny-search__poplist-item span {
font-size: var(--ti-search-font-size);
}
.tiny-search .tiny-search__poplist-item .icon-check {
font-size: var(--ti-common-font-size-2);
}
.tiny-search .tiny-search__poplist-item .icon-check:hover {
color: var(--ti-search-input-btn-hover-color);
}
.tiny-search.mini .tiny-search__line {
border-radius: var(--ti-search-input-height);
width: 100%;
float: right;
}
.tiny-search.mini.collapse .tiny-search__input-btn svg {
fill: var(--ti-search-icon-color);
}
.tiny-search.mini .tiny-search__input {
border-radius: var(--ti-search-input-height);
}
.tiny-search.collapse .tiny-search__input {
padding: 0;
width: var(--ti-search-size-height-normal);
float: right;
}
.tiny-search.mini.collapse .tiny-search__line {
width: 30px;
float: right;
background-color: transparent;
border-collapse: separate;
}
.tiny-search.mini.collapse .tiny-search__input,
.tiny-search.mini.collapse .tiny-search__present {
display: none;
}
.tiny-search .fade-enter-to {
opacity: 0;
}
.tiny-search .fade-enter,
.tiny-search .fade-leave-to {
opacity: 0;
}
.tiny-select {
--ti-select-inner-hover-border-color: var(--ti-base-color-brand-5);
--ti-select-input-color: #666;
--ti-select-input-font-size: var(--ti-common-font-size-base);
--ti-select-input-caret-color: var(--ti-base-color-brand-6);
--ti-select-input-caret-hover-color: var(--ti-base-color-brand-5);
--ti-select-input-caret-font-size: var(--ti-common-font-size-1);
--ti-select-input-caret-close-color: var(--ti-base-color-bg-5);
--ti-select-input-caret-close-hover-color: var(--ti-base-color-placeholder);
--ti-select-input-disabled-caret-color: var(--ti-base-color-border);
--ti-select-input-disabled-inner-hover-border-color: #e4e7ed;
--ti-select-input-mini-height: var(--ti-base-size-height-mini);
--ti-select-input-small-height: var(--ti-base-size-height-small);
--ti-select-input-medium-height: var(--ti-base-size-height-medium);
display: inline-block;
position: relative;
width: 100%;
outline: 0;
}
.tiny-select .tiny-select__tags > span {
display: contents;
}
.tiny-select__input {
border: none;
outline: 0;
padding: 0;
margin-left: 8px;
color: var(--ti-select-input-color);
font-size: var(--ti-select-input-font-size);
height: 28px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
}
.tiny-select__input.is-mini {
height: var(--ti-select-input-mini-height);
}
.tiny-select__input.is-small {
height: var(--ti-select-input-small-height);
}
.tiny-select__input.is-medium {
height: var(--ti-select-input-medium-height);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-select.tiny-select__multiple:not(.tiny-select__collapse-tags):not(.tiny-select__filterable)
.tiny-select__tags
> span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
}
@supports (-ms-ime-align: auto) {
.tiny-select.tiny-select__multiple:not(.tiny-select__collapse-tags):not(.tiny-select__filterable)
.tiny-select__tags
> span {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
}
.tiny-select.tiny-select__collapse-tags .tiny-select__tags > span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.tiny-select.tiny-select__collapse-tags .tiny-select__tags > span > span:not(:only-child):first-child {
max-width: 70%;
}
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable .tiny-select__tags > span {
width: auto;
max-width: 76%;
}
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable .tiny-select__tags > span > span:first-child {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable .tiny-select__tags > span > span:first-child {
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable
.tiny-select__tags
> span
> span:not(:only-child):first-child,
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable .tiny-select__tags > span > span:only-child {
max-width: 100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-select.tiny-select__collapse-tags.tiny-select__filterable
.tiny-select__tags
> span
> span:not(:only-child):not(:first-child) {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.tiny-select__tags {
position: absolute;
line-height: normal;
white-space: normal;
padding-left: 4px;
z-index: 1;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tiny-select__tags.is-showicon {
padding-left: 24px;
}
.tiny-select__tags .tiny-tag.tiny-tag--info {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-select__tags-text {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.tiny-select__tags-text + .tiny-tag__close {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.tiny-select-tip .tiny-select-tipcontent {
max-width: 300px;
}
.tiny-select .tiny-input .tiny-select__caret {
fill: var(--ti-select-input-caret-color);
font-size: var(--ti-select-input-caret-font-size);
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
cursor: pointer;
}
.tiny-select .tiny-input .tiny-select__caret:hover {
fill: var(--ti-select-input-caret-hover-color);
}
.tiny-select .tiny-input .tiny-select__caret.is-reverse {
-webkit-transform: rotateZ(0);
transform: rotateZ(0);
}
.tiny-select .tiny-input .tiny-select__caret.is-show-close {
font-size: var(--ti-select-input-font-size);
text-align: center;
-webkit-transform: rotateZ(180deg);
transform: rotateZ(180deg);
border-radius: 100%;
fill: var(--ti-select-input-caret-close-color);
-webkit-transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: fill 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-select .tiny-input .tiny-select__caret.is-show-close:hover {
color: var(--ti-select-input-caret-close-hover-color);
}
.tiny-select .tiny-input .tiny-select__copy {
cursor: pointer;
}
.tiny-select .tiny-input.is-disabled .tiny-select__caret {
fill: var(--ti-select-input-disabled-caret-color);
cursor: not-allowed;
}
.tiny-select .tiny-input.is-disabled .tiny-input__inner {
cursor: not-allowed;
}
.tiny-select .tiny-input.is-disabled .tiny-input__inner:hover {
border-color: var(--ti-select-input-disabled-inner-hover-border-color);
}
.tiny-select .tiny-input.is-focus .tiny-input__inner {
border-color: var(--ti-select-inner-hover-border-color);
}
.tiny-select > .tiny-input {
display: block;
}
.tiny-select .tiny-tag {
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-color: transparent;
margin: 2px 0 2px 4px;
background-color: #f0f2f5;
}
.tiny-select-dropdown {
--ti-select-dropdown-border-color: transparent;
--ti-select-dropdown-border-radius: var(--ti-common-border-radius-normal);
--ti-select-dropdown-bgcolor: var(--ti-base-color-light);
--ti-select-dropdown-empty-color: var(--ti-base-color-placeholder);
--ti-select-dropdown-empty-font-size: var(--ti-common-font-size-1);
--ti-select-dropdown-list-padding: 0 0 6px 0;
--ti-select-dropdown-item-padding: 0 8px;
--ti-select-dropdown-item-gap: 0;
position: absolute;
z-index: 1001;
border: 1px solid var(--ti-select-dropdown-border-color);
border-radius: var(--ti-select-dropdown-border-radius);
background-color: var(--ti-select-dropdown-bgcolor);
-webkit-box-shadow: var(--ti-base-box-shadow);
box-shadow: var(--ti-base-box-shadow);
margin-top: var(--ti-base-dropdown-gap);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-select-dropdown .tiny-tree {
max-height: 300px;
overflow-y: auto;
}
.tiny-select-dropdown.tiny-popper {
margin-top: var(--ti-base-dropdown-gap);
}
.tiny-select-dropdown .tiny-scrollbar.is-empty .tiny-select-dropdown__list {
padding: 0;
}
.tiny-select-dropdown__empty {
padding: 10px 0;
margin: 0;
text-align: center;
color: var(--ti-select-dropdown-empty-color);
font-size: var(--ti-select-dropdown-empty-font-size);
}
.tiny-select-dropdown .tiny-select-dropdown__wrap {
max-height: 197px;
margin-right: -4px;
}
.tiny-select-dropdown .tiny-select-dropdown__list {
list-style: none;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--ti-select-dropdown-list-padding);
text-align: left;
}
.tiny-select-dropdown .tiny-select-dropdown__item {
white-space: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--ti-select-dropdown-item-padding);
margin-top: var(--ti-select-dropdown-item-gap);
border-radius: var(--ti-common-border-radius-normal);
}
.tiny-select-dropdown .tiny-select-dropdown__wrap.virtual {
position: relative;
margin-right: 0 !important;
}
.tiny-select-dropdown .tiny-select-dropdown__wrap.virtual .tiny-select-dropdown__item {
position: absolute;
width: 100%;
}
.tiny-slide-bar {
--ti-slider-progress-box-border-color: var(--ti-base-color-light);
--ti-slider-progress-box-hover-border-color: rgba(153, 153, 153, 0.7);
--ti-slider-progress-box-arrow-normal: #f2f2f2;
--ti-slider-progress-box-arrow-hover: #808080;
--ti-slider-progress-box-middleline-normal: #ebebeb;
padding: 0 32px;
position: relative;
}
.tiny-slide-bar > .tiny-svg {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 2em;
cursor: pointer;
fill: var(--ti-slider-progress-box-arrow-normal);
}
.tiny-slide-bar > .tiny-svg:hover {
fill: var(--ti-slider-progress-box-arrow-hover);
}
.tiny-slide-bar > .tiny-svg.tiny-disabled,
.tiny-slide-bar > .tiny-svg.tiny-disabled:hover {
background: 0 0;
fill: #fff;
cursor: default;
}
.tiny-slide-bar > .icon-chevron-left {
left: 0;
}
.tiny-slide-bar > .icon-chevron-right {
right: 0;
}
.tiny-slide-bar li li div {
margin: 15px 0;
font-size: var(--ti-common-font-size-base);
color: #4e5e67;
}
.tiny-slide-bar li li div:nth-child(2) {
border-bottom: 1px solid var(--ti-slider-progress-box-middleline-normal);
}
.tiny-slide-bar li li div svg {
float: right;
margin: -6px 0 0 0;
background: #fff;
fill: var(--ti-slider-progress-box-middleline-normal);
}
.tiny-slide-bar .tiny-slide-bar__content {
width: 100%;
min-height: 170px;
position: relative;
overflow: hidden;
}
.tiny-slide-bar .tiny-slide-bar__list {
position: absolute;
min-height: 170px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-slide-bar .tiny-slide-bar__list > li {
width: 23%;
padding: 20px;
float: left;
margin-left: 2%;
position: relative;
border: 5px solid var(--ti-slider-progress-box-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-slide-bar .tiny-slide-bar__list > li:first-child {
margin-left: 0;
}
.tiny-slide-bar .tiny-slide-bar__list > li:hover {
border-color: var(--ti-slider-progress-box-hover-border-color);
}
.tiny-slide-bar .tiny-slide-bar__list > li > .icon-chevron-down {
position: absolute;
top: 98.8%;
left: 50%;
margin-left: -10px;
font-size: 2em;
width: 22px;
display: none !important;
}
.tiny-slide-bar .tiny-slide-bar__list > li > .icon-chevron-down:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-right: 5px solid var(--ti-slider-progress-box-hover-border-color);
border-bottom: 5px solid var(--ti-slider-progress-box-hover-border-color);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
top: -5px;
}
.tiny-slide-bar .tiny-slide-bar__list > li > ul {
width: 100%;
list-style: none;
}
.tiny-slide-bar .tiny-slide-bar__list > li.tiny-slide-bar__select {
border-color: var(--ti-slider-progress-box-hover-border-color);
}
.tiny-slide-bar .tiny-slide-bar__list > li.tiny-slide-bar__select > .icon-chevron-down {
display: block !important;
}
.tiny-slide-bar .tiny-slide-bar__list > li.tiny-slide-bar__select li .tiny-icon {
color: var(--ti-slider-progress-box-hover-border-color);
}
.tiny-slide-bar .tiny-slide-bar__list > li.tiny-slide-bar__select li:nth-child(2) {
border-bottom: 1px solid var(--ti-slider-progress-box-hover-border-color);
}
.tiny-split {
--ti-split-border-color: #d9d9d9;
--ti-split-trigger-background: #d9d9d9;
--ti-split-trigger-bar-background: var(--ti-base-color-secondary);
--ti-split-trigger-hover-background: var(--ti-split-trigger-background);
--ti-split-trigger-bar-hover-background: var(--ti-split-trigger-bar-background);
--ti-split-trigger-bar-con-background: var(--ti-base-color-light);
--ti-split-trigger-size: 4px;
--ti-split-trigger-con-col-cursor: e-resize;
--ti-split-trigger-con-row-cursor: n-resize;
}
.tiny-split-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.tiny-split-pane {
position: absolute;
}
.tiny-split-pane.left-pane,
.tiny-split-pane.right-pane {
top: 0;
bottom: 0;
overflow: hidden;
}
.tiny-split-pane.left-pane {
left: 0;
}
.tiny-split-pane.right-pane {
right: 0;
}
.tiny-split-pane.bottom-pane,
.tiny-split-pane.top-pane {
left: 0;
right: 0;
overflow: hidden;
}
.tiny-split-pane.top-pane {
top: 0;
}
.tiny-split-pane.bottom-pane {
bottom: 0;
}
.tiny-split-pane-moving {
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-split-trigger-con {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-split-trigger-con:hover .tiny-split-trigger {
background: var(--ti-split-trigger-hover-background);
}
.tiny-split-trigger-con:hover .tiny-split-trigger-bar {
background: var(--ti-split-trigger-bar-hover-background);
}
.tiny-split-trigger-bar-con {
position: absolute;
overflow: hidden;
background: var(--ti-split-trigger-bar-con-background);
}
.tiny-split-trigger-bar-con.vertical {
top: 50%;
height: calc(var(--ti-split-trigger-size) * 7);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-split-trigger-bar-con.horizontal {
left: 50%;
width: calc(var(--ti-split-trigger-size) * 7);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.tiny-split-trigger-vertical {
width: var(--ti-split-trigger-size);
height: 100%;
background: var(--ti-split-trigger-background);
}
.tiny-split-trigger-vertical .tiny-split-trigger-bar {
width: var(--ti-split-trigger-size);
height: var(--ti-split-trigger-size);
background: var(--ti-split-trigger-bar-background);
float: left;
margin-top: var(--ti-split-trigger-size);
border-radius: 50%;
}
.tiny-split-trigger-horizontal {
height: var(--ti-split-trigger-size);
width: 100%;
background: var(--ti-split-trigger-background);
}
.tiny-split-trigger-horizontal .tiny-split-trigger-bar {
height: var(--ti-split-trigger-size);
width: var(--ti-split-trigger-size);
background: var(--ti-split-trigger-bar-background);
float: left;
margin-left: var(--ti-split-trigger-size);
border-radius: 50%;
}
.tiny-split-horizontal .tiny-split-trigger-con {
top: 50%;
height: 100%;
width: 10px;
cursor: var(--ti-split-trigger-con-col-cursor);
}
.tiny-split-horizontal .tiny-split-vertical .tiny-split-trigger-con {
left: 50%;
height: 10px;
width: 100%;
}
.tiny-split-vertical .tiny-split-trigger-con {
left: 50%;
height: 10px;
width: 100%;
cursor: var(--ti-split-trigger-con-row-cursor);
}
.tiny-split-vertical .tiny-split-horizontal .tiny-split-trigger-con {
top: 50%;
height: 100%;
width: 10px;
}
.tiny-split .no-select {
-ms-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-moz-user-select: none;
user-select: none;
}
.tiny-steps {
--ti-steps-advanced-active-color: var(--ti-base-color-brand-6);
--ti-steps-done-active-color: var(--ti-base-color-brand-6);
--ti-steps-done-icon-fill-color: var(--ti-base-color-brand-6);
--ti-steps-done-icon-color: var(--ti-base-color-light);
--ti-steps-line-background: #dbdbdb;
--ti-steps-done-font-color: var(--ti-base-color-info-normal);
--ti-steps-line-height: var(--ti-common-size-base);
--ti-steps-line-active-color: var(--ti-base-color-brand-6);
--ti-steps-advanced-border-color: var(--ti-base-color-border);
--ti-steps-advanced-text: var(--ti-base-color-placeholder);
--ti-steps-advanced-line-height: 28px;
--ti-steps-advanced-li-color: var(--ti-base-color-light);
--ti-steps-advanced-li-font-color: var(--ti-base-color-light);
--ti-steps-advanced-li-hover-color: var(--ti-base-color-placeholder);
--ti-steps-advanced-li-hover-bgcolor: #f1f1f1;
--ti-steps-advanced-link-font-size: var(--ti-common-font-size-base);
--ti-steps-advanced-dot-height: 12px;
--ti-steps-advanced-dot-width: 12px;
--ti-steps-advanced-dot-done-background: var(--ti-base-color-success-normal);
--ti-steps-advanced-dot-doing-background: #faad14;
--ti-steps-advanced-dot-wait-background: var(--ti-base-color-success-normal);
--ti-steps-advanced-count-bgcolor: var(--ti-base-color-bg-8);
--ti-steps-advanced-count-border-radius: 10px;
--ti-steps-advanced-count-font-size: var(--ti-common-font-size-base);
--ti-steps-advanced-count-height: 18px;
--ti-steps-advanced-border-size: 14px;
--ti-steps-timeline-date-time-font-size: var(--ti-common-font-size-base);
--ti-steps-timeline-name-font-size: var(--ti-common-font-size-1);
--ti-steps-timeline-date-time-color: var(--ti-base-color-placeholder);
--ti-steps-icon-size: var(--ti-common-size-5x);
--ti-steps-font-size-7: var(--ti-common-font-size-7);
--ti-steps-font-size-base: var(--ti-common-font-size-base);
--ti-steps-icon-font-size: var(--ti-common-font-size-base);
--ti-steps-icon-background: #d9d9d9;
--ti-steps-unselected-color: var(--ti-base-color-light);
color: var(--ti-steps-timeline-date-time-color);
}
.tiny-steps .tiny-steps-advanced li {
line-height: var(--ti-steps-advanced-line-height);
display: inline-block;
background: var(--ti-steps-advanced-li-color);
position: relative;
}
.tiny-steps .tiny-steps-advanced li.current a {
background: var(--ti-steps-advanced-active-color);
color: var(--ti-steps-advanced-li-font-color);
font-weight: 700;
}
.tiny-steps .tiny-steps-advanced li.current a::after {
border-left-color: var(--ti-steps-advanced-active-color);
}
.tiny-steps .tiny-steps-advanced li a {
border: solid 1px var(--ti-steps-advanced-border-color);
border-right: none;
display: block;
text-align: center;
position: relative;
text-decoration: none;
color: var(--ti-steps-advanced-text);
font-size: var(--ti-steps-advanced-link-font-size);
}
.tiny-steps .tiny-steps-advanced li a::after {
content: '';
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 9px solid #fff;
position: absolute;
right: -9px;
top: 0;
z-index: 1;
}
.tiny-steps .tiny-steps-advanced li a::before {
content: '';
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 9px solid #d7d8da;
position: absolute;
left: 0;
top: 0;
}
.tiny-steps .tiny-steps-advanced li a:hover {
background: var(--ti-steps-advanced-li-hover-bgcolor);
color: var(--ti-steps-advanced-li-hover-color);
text-decoration: none;
}
.tiny-steps .tiny-steps-advanced li a:hover::after {
border-left-color: var(--ti-steps-advanced-li-hover-bgcolor);
}
.tiny-steps .tiny-steps-advanced li:first-child a {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.tiny-steps .tiny-steps-advanced li:first-child a::before {
display: none;
}
.tiny-steps .tiny-steps-advanced li:last-child a {
border-right: solid 1px var(--ti-steps-advanced-border-color);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.tiny-steps .tiny-steps-advanced li:last-child a::after {
display: none;
}
.tiny-steps .tiny-steps-advanced li .dot {
height: var(--ti-steps-advanced-dot-height);
width: var(--ti-steps-advanced-dot-width);
margin-right: 8px;
padding: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
}
.tiny-steps .tiny-steps-advanced li .dot svg {
width: 100%;
height: 100%;
fill: var(--ti-steps-advanced-text);
}
.tiny-steps .tiny-steps-advanced li.current .dot svg,
.tiny-steps .tiny-steps-advanced li.current .dot svg:hover {
fill: var(--ti-steps-advanced-li-color);
}
.tiny-steps .tiny-steps-advanced li:hover .dot svg {
fill: var(--ti-steps-advanced-text);
}
.tiny-steps .tiny-steps-advanced .count {
background-color: var(--ti-steps-advanced-count-bgcolor);
border-radius: var(--ti-steps-advanced-count-border-radius);
color: var(--ti-steps-advanced-li-font-color);
display: inline-block;
font-size: var(--ti-steps-advanced-count-font-size);
height: var(--ti-steps-advanced-count-height);
line-height: var(--ti-steps-advanced-count-height);
padding: 0 6px;
text-align: center;
white-space: nowrap;
position: absolute;
top: -10px;
right: 10px;
}
.tiny-steps .line {
background: var(--ti-steps-line-background);
}
.tiny-steps .icon {
width: var(--ti-steps-icon-size);
height: var(--ti-steps-icon-size);
line-height: var(--ti-steps-icon-size);
position: relative;
font-size: var(--ti-steps-icon-font-size);
text-align: center;
left: calc(50% - 10px);
top: 4px;
border-radius: 50%;
background: var(--ti-steps-icon-background);
color: var(--ti-steps-unselected-color);
cursor: pointer;
z-index: 15;
}
.tiny-steps .date-time {
text-align: center;
}
.tiny-steps .node-description {
position: relative;
margin-top: 6px;
overflow: hidden;
text-align: center;
}
.tiny-steps .node-description .name {
font-size: var(--ti-steps-font-size-base);
float: left;
width: 100%;
}
.tiny-steps .node-description .status {
font-size: var(--ti-steps-font-size-base);
float: left;
width: 100%;
}
.tiny-steps .process-done .node-description {
color: var(--ti-steps-done-font-color);
}
.tiny-steps .process-done .icon {
background: var(--ti-steps-done-icon-color);
color: var(--ti-steps-done-icon-fill-color);
width: var(--ti-steps-icon-size);
height: var(--ti-steps-icon-size);
line-height: var(--ti-steps-icon-size);
font-size: var(--ti-steps-icon-size);
}
.tiny-steps .process-done .icon .tiny-svg {
fill: var(--ti-steps-done-icon-fill-color);
vertical-align: baseline;
border: 1px solid var(--ti-steps-done-active-color);
border-radius: 50%;
padding: 2px;
}
.tiny-steps .process-done .line {
background: var(--ti-steps-line-active-color);
}
.tiny-steps .process-current .icon {
background: var(--ti-steps-advanced-active-color);
color: var(--ti-steps-advanced-li-font-color);
font-size: var(--ti-steps-font-size-base);
}
.tiny-steps .reverse .process-current .line {
background: var(--ti-steps-line-active-color);
}
.tiny-steps .tiny-steps-normal {
overflow: hidden;
}
.tiny-steps .tiny-steps-normal .normal {
display: block;
float: left;
}
.tiny-steps .tiny-steps-normal .line {
height: var(--ti-steps-line-height);
left: 50%;
top: -8px;
position: relative;
}
.tiny-steps .tiny-steps-normal .line-end {
width: 0;
}
.tiny-steps .tiny-steps-normal .process-done .line {
background: var(--ti-steps-line-active-color);
}
.tiny-steps .tiny-steps-normal .process-current .name {
color: var(--ti-steps-advanced-active-color);
font-weight: 700;
}
.tiny-steps .tiny-steps-normal .icon span {
display: inline-block;
}
.tiny-steps .tiny-steps-timeline {
overflow: hidden;
font-size: var(--ti-steps-timeline-name-font-size);
color: var(--ti-steps-timeline-date-time-color);
}
.tiny-steps .tiny-steps-timeline .timeline .line {
width: var(--ti-steps-line-height);
float: left;
}
.tiny-steps .tiny-steps-timeline .timeline .line .tiny-svg {
vertical-align: baseline;
}
.tiny-steps .tiny-steps-timeline .timeline .date-time {
width: 100px;
float: left;
padding-right: 20px;
text-align: right;
}
.tiny-steps .tiny-steps-timeline .timeline .date-time .time {
display: block;
line-height: 1;
}
.tiny-steps .tiny-steps-timeline .timeline .date-time .date {
display: block;
line-height: 1;
margin-bottom: 4px;
}
.tiny-steps .tiny-steps-timeline .timeline.process-done {
color: var(--ti-steps-done-font-color);
}
.tiny-steps .tiny-steps-timeline .timeline.process-current {
color: var(--ti-steps-advanced-active-color);
}
.tiny-steps .tiny-steps-timeline .timeline .name {
float: left;
margin-left: 20px;
line-height: 1.45em;
}
.tiny-steps .tiny-steps-timeline .timeline .icon {
top: 0;
}
.tiny-steps.mobile {
padding-left: 10%;
}
.tiny-steps.mobile .tiny-steps-timeline {
overflow: inherit;
}
.tiny-steps.mobile .tiny-steps-timeline .tiny-icon {
font-size: 45px;
}
.tiny-steps.mobile .tiny-steps-timeline .timeline .line .icon {
width: 45px;
line-height: 45px;
height: 45px;
font-size: var(--ti-steps-font-size-7);
position: relative;
left: -20px;
}
.tiny-steps.mobile .tiny-steps-timeline .timeline .name {
margin-left: 30px;
font-size: 26px;
}
.tiny-steps.mobile .tiny-steps-timeline .timeline > div {
margin-left: 20px;
}
.tiny-switch {
--ti-switch-on-bgcolor: var(--ti-base-color-brand-6);
--ti-switch-off-bgcolor: var(--ti-base-color-common-2);
--ti-switch-disabled-bgcolor: var(--ti-base-color-common-1);
--ti-switch-checked-disabled-bgcolor: var(--ti-base-color-brand-3);
--ti-switch-disabled-text-color: var(--ti-base-color-bg-5);
--ti-switch-disabled-dot-color: var(--ti-base-color-bg-5);
--ti-switch-font-color: var(--ti-base-color-light);
--ti-switch-dot-color: var(--ti-base-color-light);
--ti-switch-width: 38px;
--ti-switch-height: 20px;
--ti-switch-border-radius: 24px;
--ti-switch-inner-font-size: var(--ti-common-font-size-base, 12px);
--ti-switch-dot-size: 16px;
--ti-switch-dot-offset: calc(var(--ti-switch-dot-size) + 1px);
--ti-switch-text-width: 45px;
display: inline-block;
width: var(--ti-switch-width);
height: var(--ti-switch-height);
line-height: var(--ti-switch-height);
border-radius: var(--ti-switch-border-radius);
vertical-align: middle;
border: 1px solid var(--ti-switch-off-bgcolor);
background-color: var(--ti-switch-off-bgcolor);
position: relative;
cursor: pointer;
outline: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tiny-switch .tiny-switch-inner {
color: var(--ti-switch-font-color);
font-size: var(--ti-switch-inner-font-size);
position: absolute;
left: calc(var(--ti-switch-dot-size) + 4px);
top: -1px;
}
.tiny-switch__text {
width: var(--ti-switch-text-width);
}
.tiny-switch__text .tiny-switch-inner {
left: calc(var(--ti-switch-dot-size) + 9px);
}
.tiny-switch.mini {
width: calc(var(--ti-switch-width) - 6px);
}
.tiny-switch.disabled,
.tiny-switch.tiny-switch-checked.disabled {
cursor: not-allowed;
background: var(--ti-switch-disabled-bgcolor);
border-color: var(--ti-switch-disabled-bgcolor);
}
.tiny-switch.disabled::after,
.tiny-switch.tiny-switch-checked.disabled::after {
background: var(--ti-switch-disabled-dot-color);
cursor: not-allowed;
}
.tiny-switch.disabled .tiny-switch-inner,
.tiny-switch.tiny-switch-checked.disabled .tiny-switch-inner {
color: var(--ti-switch-disabled-text-color);
}
.tiny-switch.tiny-switch-checked.disabled {
background: var(--ti-switch-checked-disabled-bgcolor);
border-color: var(--ti-switch-checked-disabled-bgcolor);
}
.tiny-switch::after {
content: '';
width: var(--ti-switch-dot-size);
height: var(--ti-switch-dot-size);
border-radius: 50%;
background-color: var(--ti-switch-dot-color);
position: absolute;
left: 1px;
top: 1px;
cursor: pointer;
-webkit-transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
transition: left 0.2s ease-in-out, width 0.2s ease-in-out;
}
.tiny-switch.tiny-switch-checked {
border-color: var(--ti-switch-on-bgcolor);
background-color: var(--ti-switch-on-bgcolor);
}
.tiny-switch.tiny-switch-checked .tiny-switch-inner {
left: 8px;
width: calc(100% - var(--ti-switch-dot-size));
overflow: hidden;
}
.tiny-switch.tiny-switch-checked:after {
left: calc(100% - var(--ti-switch-dot-offset));
}
.tiny-table {
--ti-table-color: var(--ti-base-color-info-normal);
--ti-table-bgcolor: #fafafa;
--ti-table-odd-bgcolor: var(--ti-base-color-light);
--ti-table-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-table-disabled-color: var(--ti-base-color-placeholder);
--ti-table-disabled-bgcolor: #f1f1f1;
--ti-table-nodata-color: #909399;
--ti-table-td-height: var(--ti-base-size-height-medium);
--ti-table-td-font-size: var(--ti-common-font-size-base);
--ti-table-border-color: var(--ti-base-color-border);
--ti-table-thead-bgcolor: var(--ti-base-color-brand-1);
--ti-table-icon-font-size: var(--ti-common-font-size-2);
--ti-table-icon-check-color: var(--ti-base-color-brand-6);
}
.tiny-table.simple table {
table-layout: fixed;
}
.tiny-table.simple table tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
.tiny-table.simple table tbody {
border-bottom: 1px solid var(--ti-table-border-color);
}
.tiny-table.simple table tbody tr {
color: var(--ti-table-color);
background: var(--ti-table-bgcolor);
}
.tiny-table.simple table tbody tr:nth-child(odd) {
background: var(--ti-table-odd-bgcolor);
}
.tiny-table.simple table tbody tr:hover {
background: var(--ti-table-hover-bgcolor);
}
.tiny-table.simple table tbody tr.is-disabled {
background: var(--ti-table-disabled-bgcolor);
color: var(--ti-table-disabled-color);
}
.tiny-table.simple table tbody .noData {
width: 582px;
height: 360px;
text-align: center;
color: var(--ti-table-nodata-color);
margin-bottom: -1px;
border-bottom: 1px solid var(--ti-table-border-color);
padding-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-table.simple table th {
padding: 2px 0 2px 8px;
height: var(--ti-table-td-height);
border-left: none;
}
.tiny-table.simple table td {
padding: 2px 0 2px 8px;
height: var(--ti-table-td-height);
font-size: var(--ti-table-td-font-size);
}
.tiny-table.simple table td .overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-table.simple table thead {
border-bottom: 1px solid var(--ti-table-border-color);
text-align: left;
background: var(--ti-table-thead-bgcolor);
color: var(--ti-table-color);
}
.tiny-table.simple table thead th {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
font-size: var(--ti-table-td-font-size);
color: var(--ti-table-color);
line-height: 1.7em;
}
.tiny-table.simple table thead th .overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-table.simple .tiny-table-header__line {
float: right;
border-left: 1px solid var(--ti-table-border-color);
height: 20px;
}
.tiny-table.simple .tiny-table-cell .tiny-svg {
font-size: var(--ti-common-font-size-2);
font-size: var(--ti-table-icon-font-size);
fill: var(--ti-table-border-color);
}
.tiny-table.simple .tiny-table-cell .tiny-svg.is-check {
fill: var(--ti-table-icon-check-color);
}
.tiny-tabs {
--ti-tabs-header-font-normal: var(--ti-base-color-common-5);
--ti-tabs-header-font-active: var(--ti-base-color-brand-6);
--ti-tabs-header-color: var(--ti-base-color-brand-6);
--ti-tabs-header-background: #f5f5f5;
--ti-tabs-border-color: var(--ti-common-color-line-dividing);
--ti-tabs-height: var(--ti-common-size-10x);
--ti-tabs-item-disabled-color: #b4bccc;
--ti-tabs-icon-close-hover-color: var(--ti-base-color-light);
--ti-tabs-new-height: 18px;
--ti-tabs-new-width: 18px;
--ti-tabs-new-radius: var(--ti-base-radius-large);
--ti-tabs-new-svg-color: var(--ti-base-color-placeholder);
--ti-tabs-font-base-size: var(--ti-common-font-size-base);
--ti-tabs-more-hover-color: var(--ti-base-color-brand-5);
--ti-tabs-more-item-hover-color: var(--ti-base-color-hover-background);
--ti-tabs-dropdown-font-size: var(--ti-common-font-size-1);
--ti-tabs-dropdown-bgcolor: var(--ti-base-color-light);
--ti-tabs-dropdown-border-radius: var(--ti-common-border-radius-normal);
--ti-tabs-dropdown-li-color: var(--ti-base-color-secondary);
--ti-tabs-dropdown-li-border-color: #e6e6e6;
--ti-tabs-small-height: var(--ti-common-size-9x);
--ti-tab-dark-border-radius: var(--ti-common-border-radius-normal) var(--ti-common-border-radius-normal) 0 0;
--ti-tab-dark-text-color-active: var(--ti-base-color-common-7);
--ti-tab-dark-bg-color-avtive: var(--ti-base-color-bg-6);
--ti-tab-dark-text-color-hover: var(--ti-base-color-white);
--ti-tab-dark-bg-color-hover: var(--ti-base-color-common-4);
--ti-tab-dark-text-color: var(--ti-base-color-common-2);
--ti-tabs-header-dark-background: var(--ti-base-color-common-6);
--ti-tabs-item-margin: var(--ti-common-space-10x);
--ti-tabs-item-horizontal-padding: 0 var(--ti-common-space-3x);
--ti-tabs-item-vertical-padding: 0 var(--ti-common-space-5x);
--ti-tabs-item-active-border: 3px solid var(--ti-tabs-header-font-active);
--ti-tabs-item-border-bottom: 1px solid var(--ti-base-color-white);
--ti-tabs-item-card-active-bgcolor: var(--ti-base-color-white);
--ti-tabs-item-card-border-radius: 0;
--ti-tabs-icon-close-default-bgcolor: transparent;
--ti-tabs-icon-close-default-color: var(--ti-tabs-header-font-normal);
--ti-tabs-icon-close-hover-color: var(--ti-tabs-header-font-active);
--ti-tabs-icon-close-size: var(--ti-common-font-size-1);
--ti-tabs-icon-close-margin: 0 0 0 5px;
}
.tiny-tabs--left,
.tiny-tabs--right,
.tiny-tabs__content,
.tiny-tabs__nav-scroll,
.tiny-tabs__nav-wrap {
overflow: hidden;
}
.tiny-tabs__header {
padding: 0;
position: relative;
margin: 0;
}
.tiny-tabs__header .tiny-tabs__active-bar {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: var(--ti-tabs-header-color);
z-index: 1;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
list-style: none;
}
.tiny-tabs__header .tiny-tabs__new-tab {
float: right;
border: 1px solid var(--ti-tabs-border-color);
height: var(--ti-tabs-new-height);
line-height: var(--ti-tabs-new-height);
width: var(--ti-tabs-new-width);
margin: 12px 0 9px 10px;
border-radius: var(--ti-tabs-new-radius);
font-size: var(--ti-tabs-font-base-size);
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;
cursor: pointer;
-webkit-transition: all 0.15s;
transition: all 0.15s;
outline: 0;
}
.tiny-tabs__header .tiny-tabs__new-tab svg {
fill: var(--ti-tabs-new-svg-color);
}
.tiny-tabs__header .tiny-tabs__new-tab:hover svg {
fill: var(--ti-tabs-header-color);
}
.tiny-tabs__header .tiny-tabs__nav-wrap {
margin-bottom: -1px;
position: relative;
}
.tiny-tabs__header .tiny-tabs__nav-wrap::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: var(--ti-tabs-border-color);
z-index: 1;
}
.tiny-tabs__header .tiny-tabs__nav-wrap.is-scrollable {
padding: 0 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tiny-tabs__header .tab-dropdown {
position: absolute;
right: 8px;
z-index: 90;
font-size: var(--ti-tabs-dropdown-font-size);
-webkit-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.18);
box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.18);
background: var(--ti-tabs-dropdown-bgcolor);
border-radius: var(--ti-tabs-dropdown-border-radius);
}
.tiny-tabs__header .tab-dropdown:before {
position: absolute;
display: inline-block;
top: -5px;
left: 44%;
width: 0;
height: 0;
content: '';
border-style: solid;
border-width: 6px;
border-color: #fff #fff transparent transparent;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 1px -1px 1px #e4e4e4;
box-shadow: 1px -1px 1px #e4e4e4;
}
.tiny-tabs__header .tab-dropdown li {
border-bottom: 1px solid var(--ti-tabs-dropdown-li-border-color);
}
.tiny-tabs__header .tab-dropdown li:last-child {
border-bottom: none;
}
.tiny-tabs__header .tab-dropdown li a {
white-space: nowrap;
color: var(--ti-tabs-dropdown-li-color);
line-height: 26px;
padding: 0 10px;
min-width: 100px;
display: block;
font-size: var(--ti-tabs-font-base-size);
}
.tiny-tabs__header .tab-dropdown li a:hover {
color: var(--ti-tabs-more-hover-color);
text-decoration: none;
}
.tiny-tabs__nav-more {
position: absolute;
cursor: pointer;
height: var(--ti-tabs-height);
line-height: var(--ti-tabs-height);
font-size: var(--ti-common-font-size-1);
right: 45px;
z-index: 99;
color: var(--ti-tabs-header-color);
}
.tiny-tabs__nav-next,
.tiny-tabs__nav-prev {
position: absolute;
cursor: pointer;
line-height: var(--ti-tabs-height);
font-size: var(--ti-common-font-size-base);
color: var(--ti-tabs-header-font-normal);
}
.tiny-tabs__nav-next {
right: 0;
}
.tiny-tabs__nav-prev {
left: 0;
}
.tiny-tabs__nav {
white-space: nowrap;
position: relative;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
float: left;
z-index: 2;
}
.tiny-tabs__nav.is-stretch {
min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-tabs__nav.is-stretch > * {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
}
.tiny-tabs__nav.is-show-active-bar .tiny-tabs__item {
margin-right: var(--ti-tabs-item-margin);
}
.tiny-tabs__nav.is-show-active-bar .tiny-tabs__item.is-active {
border-bottom: var(--ti-tabs-item-active-border);
}
.tiny-tabs__item {
height: var(--ti-tabs-height);
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: var(--ti-tabs-height);
display: inline-block;
list-style: none;
font-size: var(--ti-tabs-dropdown-font-size);
color: var(--ti-tabs-header-font-normal);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.tiny-tabs__item:active,
.tiny-tabs__item:focus {
outline: 0;
}
.tiny-tabs__item.is-active,
.tiny-tabs__item:hover {
color: var(--ti-tabs-header-font-active);
cursor: pointer;
}
.tiny-tabs__item.is-active .tiny-tabs__icon-close svg,
.tiny-tabs__item:hover .tiny-tabs__icon-close svg {
fill: var(--ti-tabs-icon-close-hover-color);
}
.tiny-tabs__item.is-disabled {
color: var(--ti-tabs-item-disabled-color);
cursor: default;
}
.tiny-tabs__item.is-disabled .tiny-tabs__icon-close,
.tiny-tabs__item.is-disabled .tiny-tabs__icon-close:hover {
background-color: transparent;
}
.tiny-tabs__item.is-disabled .tiny-tabs__icon-close svg,
.tiny-tabs__item.is-disabled .tiny-tabs__icon-close:hover svg {
fill: var(--ti-tabs-item-disabled-color);
}
.tiny-tabs__item.is-closable > div {
display: inline-block;
}
.tiny-tabs__item > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-tabs__item .tiny-tabs__icon-close {
border-radius: 50%;
text-align: center;
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin: var(--ti-tabs-icon-close-margin);
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;
background-color: var(--ti-tabs-icon-close-default-bgcolor);
}
.tiny-tabs__item .tiny-tabs__icon-close svg {
font-size: var(--ti-tabs-font-base-size);
-webkit-transform: scale(0.9);
transform: scale(0.9);
vertical-align: middle;
fill: var(--ti-tabs-icon-close-default-color);
}
.tiny-tabs__item .tiny-tabs__icon-close:hover {
background-color: var(--ti-tabs-icon-close-hover-bgcolor);
}
.tiny-tabs__item .tiny-tabs__icon-close:hover svg {
fill: var(--ti-tabs-icon-close-hover-color);
}
.tiny-tabs__content {
position: relative;
padding: 15px 24px;
}
.tiny-tabs .is-show-more {
padding: 0 48px 0 0;
}
.tiny-tabs__more-container {
position: absolute;
right: 0;
font-size: var(--ti-tabs-font-base-size);
color: var(--ti-tabs-header-font-normal);
line-height: var(--ti-tabs-height);
}
.tiny-tabs__more {
cursor: pointer;
color: var(--ti-tabs-header-color);
font-size: var(--ti-tabs-dropdown-font-size);
outline: 0;
}
.tiny-tabs__more:hover {
color: var(--ti-tabs-more-hover-color);
}
.tiny-tabs__more-popover.tiny-popover.tiny-popper {
padding: 0;
border-radius: var(--ti-tabs-dropdown-border-radius);
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.tiny-tabs__more-popover .tiny-tabs__more-item {
cursor: pointer;
padding: 8px 12px;
outline: 0;
}
.tiny-tabs__more-popover .tiny-tabs__more-item:hover {
background: var(--ti-tabs-more-item-hover-color);
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--left .tiny-tabs__nav,
.tiny-tabs.tiny-tabs--card.tiny-tabs--right .tiny-tabs__nav {
width: 120px;
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active {
top: -1px;
border-bottom: var(--ti-tabs-item-border-bottom);
border-top: 1px solid var(--ti-tabs-border-color);
border-left: 1px solid var(--ti-tabs-border-color);
border-right: 1px solid var(--ti-tabs-border-color);
background-color: var(--ti-tabs-item-card-active-bgcolor);
border-radius: var(--ti-tabs-item-card-border-radius);
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active:before {
left: 0;
top: 0;
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active.is-closable {
padding: var(--ti-tabs-item-horizontal-padding);
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item.is-active {
-webkit-box-shadow: 0 -2px 0 0 #fff;
box-shadow: 0 -2px 0 0 #fff;
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item.is-active:before {
left: 0;
bottom: 0;
}
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item.is-active.is-closable {
padding: var(--ti-tabs-item-horizontal-padding);
}
.tiny-tabs.tiny-tabs--card > .tiny-tabs__header {
border-bottom: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item {
border-bottom: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
-webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item:first-child {
border-left: none;
}
.tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__nav {
border-bottom: none;
top: 1px;
}
.tiny-tabs.tiny-tabs--border-card {
background: #fff;
border-top: 1px solid var(--ti-tabs-border-color);
-webkit-box-shadow: none;
box-shadow: none;
}
.tiny-tabs.tiny-tabs--border-card > .tiny-tabs__content {
padding: 0 24px 15px;
}
.tiny-tabs.tiny-tabs--border-card > .tiny-tabs__content .tiny-tabs__content {
padding: 15px 0;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header {
background-color: var(--ti-tabs-header-dark-background);
border: none;
margin: 0;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item {
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
margin: -1px -1px 0;
color: var(--ti-tab-dark-text-color);
padding: 0 24px;
border: none;
height: 37px;
margin: 5px 4px 0 0;
line-height: 37px;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item:nth-child(2) {
padding: 0 12px;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active {
color: var(--ti-tab-dark-text-color-active);
background-color: var(--ti-tab-dark-bg-color-avtive);
border: none;
border-bottom-color: #fff;
border-radius: var(--ti-tab-dark-border-radius);
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active:before {
left: 0;
top: 0;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active.is-closable {
padding: var(--ti-tabs-item-horizontal-padding);
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item:not(.is-active):hover {
color: var(--ti-tab-dark-text-color-hover);
background: var(--ti-tab-dark-bg-color-hover);
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item:first-child {
margin-left: 20px;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__nav-prev {
fill: var(--ti-common-color-icon-white);
}
.tiny-tabs.tiny-tabs--border-card .tiny-tabs--border-card .tiny-tabs--bottom {
border-top: 0;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item.is-active:before,
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active:before,
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item.is-active:before,
.tiny-tabs.tiny-tabs--card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item.is-active:before {
position: absolute;
content: '';
width: 100%;
height: 0;
background: var(--ti-tabs-header-color);
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item .tiny-tabs__icon-close,
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item .tiny-tabs__icon-close,
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom > .tiny-tabs__header .tiny-tabs__item .tiny-tabs__icon-close,
.tiny-tabs.tiny-tabs--card.tiny-tabs--top > .tiny-tabs__header .tiny-tabs__item .tiny-tabs__icon-close {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: var(--ti-tabs-icon-close-size);
height: var(--ti-tabs-icon-close-size);
line-height: var(--ti-tabs-icon-close-size);
vertical-align: middle;
overflow: hidden;
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--bottom .is-scrollable,
.tiny-tabs.tiny-tabs--border-card.tiny-tabs--top .is-scrollable,
.tiny-tabs.tiny-tabs--card.tiny-tabs--bottom .is-scrollable,
.tiny-tabs.tiny-tabs--card.tiny-tabs--top .is-scrollable {
padding: 0 24px;
}
.tiny-tabs.tiny-tabs--border-card > .tiny-tabs__header .tiny-tabs__nav-wrap:after,
.tiny-tabs.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__nav-wrap:after {
content: none;
}
.tiny-tabs.tiny-tabs--small .tiny-tabs__item {
height: var(--ti-tabs-small-height);
line-height: var(--ti-tabs-small-height);
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__header {
float: left;
margin-bottom: 0;
margin-right: 10px;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap {
margin-right: -1px;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__item {
text-align: left;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card .tiny-tabs__item {
padding: var(--ti-tabs-item-vertical-padding);
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item {
border-left: 1px solid var(--ti-tabs-border-color);
border-right: 1px solid var(--ti-tabs-border-color);
border-top: 1px solid var(--ti-tabs-border-color);
background-color: var(--ti-tabs-header-background);
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item:first-child {
border-top: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active {
border-right-color: transparent;
border-left: var(--ti-tabs-item-active-border);
border-bottom: none;
background: 0 0;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active:first-child {
border-top: none;
border-right-color: transparent;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__item.is-active:last-child {
border-bottom: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__nav {
border-right: none;
border-left: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--card > .tiny-tabs__header .tiny-tabs__new-tab {
float: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__header {
border-right: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__item {
border: 1px solid transparent;
margin: -1px -1px -1px 0;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__item.is-active {
border: 1px solid var(--ti-tabs-border-color);
border-left: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs--border-card .tiny-tabs__item {
margin: -1px;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs--border-card .tiny-tabs__item.is-bottom.is-active {
border-left: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__active-bar,
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap::after {
right: auto;
left: 0;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-scroll {
height: 100%;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__header {
float: right;
margin-bottom: 0;
margin-left: 10px;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__header.is-left {
margin-left: 0;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap {
margin-left: -1px;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap.is-left {
margin-left: 0;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap:after {
left: 0;
right: auto;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item {
border-top: 1px solid var(--ti-tabs-border-color);
border-bottom: none;
background-color: var(--ti-tabs-header-background);
padding: var(--ti-tabs-item-vertical-padding);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-active {
border-left-color: transparent;
border-right: var(--ti-tabs-item-active-border);
background: 0 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-active:first-child {
border-left: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-active:last-child {
border-bottom: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-active.is-bottom {
border-top: 0;
border-right: 0;
border-left-color: var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-active.is-bottom:first-child {
border-left: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item:first-child {
border-left: 1px solid var(--ti-tabs-border-color);
border-top: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-bottom:first-child {
border-top: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-bottom.is-active:first-child {
border-top: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-bottom,
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__item.is-top {
background: 0 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__nav {
border-bottom: 1px solid var(--ti-tabs-border-color);
border-left: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs__nav.is-bottom {
border-top: none;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tab-pane .tiny-tabs--top .tiny-tabs__header {
margin-left: 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tab-pane .tiny-tabs--top .tiny-tabs__item {
border-top: none;
border-bottom: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tab-pane .tiny-tabs--top .tiny-tabs__item.is-active {
top: 0;
border-right: 0;
border-left-color: var(--ti-tabs-border-color);
border-bottom: 1px solid #fff;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tab-pane .tiny-tabs--top .tiny-tabs__item.is-active:first-child {
border-left: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-top {
margin: 0 0 -1px -1px;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-top.is-active {
border-right: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-bottom {
margin: -1px;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-bottom.is-active {
border-right: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-right {
margin: -1px 0 -1px 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__item.is-right.is-active {
border-top: 1px solid var(--ti-tabs-border-color);
border-bottom: 1px solid var(--ti-tabs-border-color);
border-right: 3px solid var(--ti-tabs-header-font-active);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--card .tiny-tabs--border-card .tiny-tabs__nav.is-bottom {
border-bottom: 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__header {
border-left: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__item {
border: 1px solid transparent;
margin: -1px -1px -1px 0;
}
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__item.is-active {
border-color: var(--ti-tabs-border-color) transparent;
}
.tiny-tabs.tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__active-bar {
left: auto;
right: 0;
}
.tiny-tabs.tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__active-bar.is-bottom {
left: 0;
}
.tiny-tabs.tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__active-bar.is-left {
left: 0;
right: auto;
}
.tiny-tabs.tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__nav-wrap::after {
left: auto;
right: 0;
}
.tiny-tabs.tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__nav-wrap.is-left::after {
left: 0;
right: auto;
}
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header.is-bottom {
margin-left: 0;
}
.tiny-tabs.tiny-tabs--right
.tiny-tab-pane
.tiny-tabs--top:not(.tiny-tabs--card):not(.tiny-tabs--border-card)
.tiny-tabs__item {
border-bottom: 0;
background-color: transparent;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--bottom:not(.tiny-tabs--card) .tiny-tabs__item {
border-top: 0;
background-color: transparent;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--left.tiny-tabs--card .tiny-tabs__item.is-active:first-child {
border-left: 3px solid var(--ti-tabs-header-font-active);
border-right: 0;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--left:not(.tiny-tabs--card) .tiny-tabs__nav,
.tiny-tabs.tiny-tabs--right .tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__nav {
border-bottom: 0;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--left:not(.tiny-tabs--card) .tiny-tabs__item,
.tiny-tabs.tiny-tabs--right .tiny-tabs--right:not(.tiny-tabs--card) .tiny-tabs__item {
border: 0;
background-color: transparent;
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__item.is-active {
border: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--right .tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__item.is-active.is-left {
border-left: 3px solid var(--ti-tabs-header-font-active);
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__header,
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap,
.tiny-tabs.tiny-tabs--right .tiny-tabs__header,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap {
height: 100%;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__active-bar,
.tiny-tabs.tiny-tabs--right .tiny-tabs__active-bar {
top: 1px;
bottom: auto;
width: 2px;
height: auto;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__active-bar.is-top,
.tiny-tabs.tiny-tabs--right .tiny-tabs__active-bar.is-top {
height: 3px;
bottom: 0;
left: 0;
top: auto;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__active-bar.is-bottom,
.tiny-tabs.tiny-tabs--right .tiny-tabs__active-bar.is-bottom {
top: auto;
bottom: 0;
height: 3px;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap {
margin-bottom: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap.is-scrollable,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap.is-scrollable {
padding: 30px 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap::after,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap::after {
height: 100%;
width: 2px;
bottom: auto;
top: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap.is-top::after,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap.is-top::after {
left: 0;
bottom: 0;
top: auto;
width: 100%;
height: 1px;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-wrap.is-bottom:after,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-wrap.is-bottom:after {
left: 0;
bottom: 0;
top: auto;
width: 100%;
height: 1px;
background-color: #d9d9d9;
z-index: 1;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav {
float: none;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__item,
.tiny-tabs.tiny-tabs--right .tiny-tabs__item {
display: block;
font-size: var(--ti-tabs-font-base-size);
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-prev,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-prev {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-next i,
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-prev i,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-next i,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-prev i {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-prev,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-prev {
left: auto;
top: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--right .tiny-tabs__nav-next {
right: auto;
bottom: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__header,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav-wrap,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav-wrap {
float: inherit;
margin-bottom: -1px;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__header.is-bottom,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__header.is-top,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav-wrap.is-bottom,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav-wrap.is-top,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header.is-bottom,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header.is-top,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav-wrap.is-bottom,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav-wrap.is-top {
float: none;
margin-right: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__header.is-left,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav-wrap.is-left,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header.is-left,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav-wrap.is-left {
float: left;
margin-bottom: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__header.is-right,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav-wrap.is-right,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__header.is-right,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav-wrap.is-right {
float: right;
margin-bottom: 0;
margin-right: 0;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__item,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__item {
display: inline-block;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__item.is-left,
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__item.is-right,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__item.is-left,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__item.is-right {
display: inherit;
}
.tiny-tabs.tiny-tabs--left .tiny-tab-pane .tiny-tabs__nav,
.tiny-tabs.tiny-tabs--right .tiny-tab-pane .tiny-tabs__nav {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card {
border-top: 0;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__nav-wrap.is-scrollable,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__nav-wrap.is-scrollable {
padding: 0;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__nav-prev,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__nav-prev {
display: none;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs__header,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs__header {
border: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs--border-card .is-top.tiny-tabs__header,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs--border-card .is-top.tiny-tabs__header {
border-top: 0;
border-left: 0;
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs--border-card .is-top.tiny-tabs__item.is-active,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs--border-card .is-top.tiny-tabs__item.is-active {
border-left: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--left.tiny-tabs--border-card .tiny-tabs--border-card .is-bottom.tiny-tabs__header,
.tiny-tabs.tiny-tabs--right.tiny-tabs--border-card .tiny-tabs--border-card .is-bottom.tiny-tabs__header {
border-left: 0;
}
.tiny-tabs.tiny-tabs--bottom .tiny-tabs__header {
margin-bottom: 0;
margin-top: 10px;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card {
border-top: 0;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__header {
background: var(--ti-tabs-header-background);
border-bottom: 1px solid var(--ti-tabs-border-color);
border-right: 1px solid var(--ti-tabs-border-color);
border-top: 1px solid var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__nav-wrap {
margin-top: -1px;
margin-bottom: 0;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__nav-wrap.is-top {
margin-bottom: -1px;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__item {
border: 1px solid transparent;
margin: 0 -1px -1px;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__item.is-active {
background-color: var(--ti-tabs-dropdown-bgcolor);
border-right-color: var(--ti-tabs-border-color);
border-left-color: var(--ti-tabs-border-color);
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__item.is-active:before {
left: 0;
bottom: 0;
}
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs--border-card {
border-top: 0;
}
.tiny-tabs.tiny-tabs--bottom .tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card) .tiny-tabs__header {
background: 0 0;
border: 0;
}
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-left
.tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-left
.tiny-tabs__nav-prev,
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-right
.tiny-tabs__nav-next,
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-right
.tiny-tabs__nav-prev {
display: none;
}
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-left
.tiny-tabs__nav-wrap,
.tiny-tabs.tiny-tabs--bottom
.tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card)
.tiny-tabs__header.is-right
.tiny-tabs__nav-wrap {
padding: 0;
}
.tiny-tabs.tiny-tabs--bottom .tiny-tabs:not(.tiny-tabs--border-card):not(.tiny-tabs--card) .tiny-tabs__item.is-active {
background-color: transparent;
border: none;
}
.tiny-tabs.tiny-tabs--bottom .tiny-tabs--left .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--bottom .tiny-tabs--right .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--border-card .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--bottom.tiny-tabs--card .tiny-tabs__item,
.tiny-tabs.tiny-tabs--top .tiny-tabs--left .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--top .tiny-tabs--right .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--top.tiny-tabs--border-card .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--top.tiny-tabs--card .tiny-tabs__item {
padding: var(--ti-tabs-item-horizontal-padding);
}
.tiny-tabs.tiny-tabs--bottom:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item,
.tiny-tabs.tiny-tabs--top:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item {
padding-left: 0;
}
.tiny-tabs.tiny-tabs--bottom:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item.is-left,
.tiny-tabs.tiny-tabs--top:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item.is-left {
padding: 0 24px;
}
.tiny-tabs.tiny-tabs--bottom:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item:nth-child(2),
.tiny-tabs.tiny-tabs--top:not(.tiny-tabs--card):not(.tiny-tabs--border-card) .tiny-tabs__item:nth-child(2) {
padding-left: 0;
}
.tiny-tabs .slideInLeft-transition,
.tiny-tabs .slideInRight-transition {
display: inline-block;
}
.tiny-tabs .slideInRight-enter {
-webkit-animation: slideInRight-enter 0.3s;
animation: slideInRight-enter 0.3s;
}
.tiny-tabs .slideInRight-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInRight-leave 0.3s;
animation: slideInRight-leave 0.3s;
}
.tiny-tabs .slideInLeft-enter {
-webkit-animation: slideInLeft-enter 0.3s;
animation: slideInLeft-enter 0.3s;
}
.tiny-tabs .slideInLeft-leave {
position: absolute;
left: 0;
right: 0;
-webkit-animation: slideInLeft-leave 0.3s;
animation: slideInLeft-leave 0.3s;
}
@-webkit-keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
@keyframes slideInRight-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
@-webkit-keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft-enter {
0% {
opacity: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes slideInLeft-leave {
0% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}
.tiny-tag {
--ti-tag-height: 22px;
--ti-tag-medium-height: var(--ti-common-size-6x);
--ti-tag-small-height: var(--ti-common-size-5x);
--ti-tag-mini-height: var(--ti-common-size-4x);
--ti-tag-border-color: var(--ti-base-color-border);
--ti-tag-border-radius: var(--ti-base-radius-medium);
--ti-tag-font-size: var(--ti-base-font-size);
--ti-tag-close-font-size: var(--ti-common-font-size-1);
--ti-tag-primary-color: var(--ti-base-color-common-5);
--ti-tag-primary-border-color: var(--ti-base-color-bg-6);
--ti-tag-primary-background-color: var(--ti-base-color-bg-6);
--ti-tag-warning-color: var(--ti-common-color-warn-text);
--ti-tag-warning-border-color: var(--ti-common-color-warn-border);
--ti-tag-warning-background-color: var(--ti-common-color-warn-bg);
--ti-tag-danger-color: var(--ti-common-color-error-text);
--ti-tag-danger-border-color: var(--ti-common-color-error-border-secondary);
--ti-tag-danger-background-color: var(--ti-common-color-error-bg);
--ti-tag-success-color: var(--ti-common-color-text-success);
--ti-tag-success-border-color: var(--ti-common-color-success-border);
--ti-tag-success-background-color: var(--ti-common-color-success-bg);
--ti-tag-info-color: var(--ti-common-color-info-text);
--ti-tag-info-border-color: var(--ti-common-color-info-border);
--ti-tag-info-background-color: var(--ti-common-color-info-bg);
--ti-tag-dark-color: var(--ti-base-color-light);
--ti-tag-dark-bgcolor: var(--ti-common-color-prompt);
--ti-tag-dark-success-bgcolor: var(--ti-common-color-success);
--ti-tag-dark-warning-bgcolor: var(--ti-common-color-warn);
--ti-tag-dark-danger-bgcolor: var(--ti-common-color-error);
--ti-tag-dark-info-bgcolor: var(--ti-common-color-info);
--ti-tag-plain-color: var(--ti-common-color-prompt);
--ti-tag-plain-border-color: var(--ti-common-color-prompt-border);
--ti-tag-plain-background-color: var(--ti-base-color-light);
--ti-tag-plain-info-color: var(--ti-common-color-info);
--ti-tag-plain-info-border-color: var(--ti-common-color-info-border);
--ti-tag-plain-success-color: var(--ti-common-color-success);
--ti-tag-plain-success-border-color: var(--ti-common-color-success-border);
--ti-tag-plain-warning-color: var(--ti-common-color-warn);
--ti-tag-plain-warning-border-color: var(--ti-common-color-warn-border);
--ti-tag-plain-danger-color: var(--ti-common-color-error);
--ti-tag-plain-danger-border-color: var(--ti-common-color-error-border-secondary);
height: var(--ti-tag-height);
line-height: var(--ti-tag-height);
padding: 0 8px;
font-size: var(--ti-tag-font-size);
border-width: 1px;
border-radius: var(--ti-tag-border-radius);
border-style: solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--ti-tag-primary-color);
border-color: var(--ti-tag-primary-border-color);
background-color: var(--ti-tag-primary-background-color);
}
.tiny-tag.is-hit {
border-color: var(--ti-tag-primary-color);
}
.tiny-tag .tiny-tag__close {
fill: var(--ti-tag-primary-color);
opacity: 0.5;
}
.tiny-tag .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag .tiny-tag__text:hover {
cursor: pointer;
color: #526ecc;
}
.tiny-tag .tiny-tag__close {
font-size: var(--ti-tag-close-font-size);
margin-left: 6px;
}
.tiny-tag .tiny-tag__close:hover {
cursor: pointer;
fill: #5e7ce0;
}
.tiny-tag.tiny-tag--info {
color: var(--ti-tag-info-color);
border-color: var(--ti-tag-info-border-color);
background-color: var(--ti-tag-info-background-color);
}
.tiny-tag.tiny-tag--info.is-hit {
border-color: var(--ti-tag-info-color);
}
.tiny-tag.tiny-tag--info .tiny-tag__close {
fill: var(--ti-tag-info-color);
opacity: 0.5;
}
.tiny-tag.tiny-tag--info .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag.tiny-tag--success {
color: var(--ti-tag-success-color);
border-color: var(--ti-tag-success-border-color);
background-color: var(--ti-tag-success-background-color);
}
.tiny-tag.tiny-tag--success.is-hit {
border-color: var(--ti-tag-success-color);
}
.tiny-tag.tiny-tag--success .tiny-tag__close {
fill: var(--ti-tag-success-color);
opacity: 0.5;
}
.tiny-tag.tiny-tag--success .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag.tiny-tag--warning {
color: var(--ti-tag-warning-color);
border-color: var(--ti-tag-warning-border-color);
background-color: var(--ti-tag-warning-background-color);
}
.tiny-tag.tiny-tag--warning.is-hit {
border-color: var(--ti-tag-warning-color);
}
.tiny-tag.tiny-tag--warning .tiny-tag__close {
fill: var(--ti-tag-warning-color);
opacity: 0.5;
}
.tiny-tag.tiny-tag--warning .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag.tiny-tag--danger {
color: var(--ti-tag-danger-color);
border-color: var(--ti-tag-danger-border-color);
background-color: var(--ti-tag-danger-background-color);
}
.tiny-tag.tiny-tag--danger.is-hit {
border-color: var(--ti-tag-danger-color);
}
.tiny-tag.tiny-tag--danger .tiny-tag__close {
fill: var(--ti-tag-danger-color);
opacity: 0.5;
}
.tiny-tag.tiny-tag--danger .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--dark {
color: var(--ti-tag-dark-color);
border-color: var(--ti-tag-dark-bgcolor);
background-color: var(--ti-tag-dark-bgcolor);
}
.tiny-tag--dark.is-hit {
border-color: var(--ti-tag-dark-bgcolor);
}
.tiny-tag--dark .tiny-tag__close {
fill: var(--ti-tag-dark-color);
opacity: 0.5;
}
.tiny-tag--dark .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--dark.tiny-tag--info {
color: var(--ti-tag-dark-color);
border-color: var(--ti-tag-dark-info-bgcolor);
background-color: var(--ti-tag-dark-info-bgcolor);
}
.tiny-tag--dark.tiny-tag--info.is-hit {
border-color: var(--ti-tag-dark-info-bgcolor);
}
.tiny-tag--dark.tiny-tag--info .tiny-tag__close {
fill: var(--ti-tag-dark-color);
opacity: 0.5;
}
.tiny-tag--dark.tiny-tag--info .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--dark.tiny-tag--success {
color: var(--ti-tag-dark-color);
border-color: var(--ti-tag-dark-success-bgcolor);
background-color: var(--ti-tag-dark-success-bgcolor);
}
.tiny-tag--dark.tiny-tag--success.is-hit {
border-color: var(--ti-tag-dark-success-bgcolor);
}
.tiny-tag--dark.tiny-tag--success .tiny-tag__close {
fill: var(--ti-tag-dark-color);
opacity: 0.5;
}
.tiny-tag--dark.tiny-tag--success .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--dark.tiny-tag--warning {
color: var(--ti-tag-dark-color);
border-color: var(--ti-tag-dark-warning-bgcolor);
background-color: var(--ti-tag-dark-warning-bgcolor);
}
.tiny-tag--dark.tiny-tag--warning.is-hit {
border-color: var(--ti-tag-dark-warning-bgcolor);
}
.tiny-tag--dark.tiny-tag--warning .tiny-tag__close {
fill: var(--ti-tag-dark-color);
opacity: 0.5;
}
.tiny-tag--dark.tiny-tag--warning .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--dark.tiny-tag--danger {
color: var(--ti-tag-dark-color);
border-color: var(--ti-tag-dark-danger-bgcolor);
background-color: var(--ti-tag-dark-danger-bgcolor);
}
.tiny-tag--dark.tiny-tag--danger.is-hit {
border-color: var(--ti-tag-dark-danger-bgcolor);
}
.tiny-tag--dark.tiny-tag--danger .tiny-tag__close {
fill: var(--ti-tag-dark-color);
opacity: 0.5;
}
.tiny-tag--dark.tiny-tag--danger .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--plain {
color: var(--ti-tag-plain-color);
border-color: var(--ti-tag-plain-border-color);
background-color: var(--ti-tag-plain-background-color);
}
.tiny-tag--plain.is-hit {
border-color: var(--ti-tag-plain-color);
}
.tiny-tag--plain .tiny-tag__close {
fill: var(--ti-tag-plain-color);
opacity: 0.5;
}
.tiny-tag--plain .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--plain.tiny-tag--info {
color: var(--ti-tag-plain-info-color);
border-color: var(--ti-tag-plain-info-border-color);
background-color: var(--ti-tag-plain-background-color);
}
.tiny-tag--plain.tiny-tag--info.is-hit {
border-color: var(--ti-tag-plain-info-color);
}
.tiny-tag--plain.tiny-tag--info .tiny-tag__close {
fill: var(--ti-tag-plain-info-color);
opacity: 0.5;
}
.tiny-tag--plain.tiny-tag--info .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--plain.tiny-tag--success {
color: var(--ti-tag-plain-success-color);
border-color: var(--ti-tag-plain-success-border-color);
background-color: var(--ti-tag-plain-background-color);
}
.tiny-tag--plain.tiny-tag--success.is-hit {
border-color: var(--ti-tag-plain-success-color);
}
.tiny-tag--plain.tiny-tag--success .tiny-tag__close {
fill: var(--ti-tag-plain-success-color);
opacity: 0.5;
}
.tiny-tag--plain.tiny-tag--success .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--plain.tiny-tag--warning {
color: var(--ti-tag-plain-warning-color);
border-color: var(--ti-tag-plain-warning-border-color);
background-color: var(--ti-tag-plain-background-color);
}
.tiny-tag--plain.tiny-tag--warning.is-hit {
border-color: var(--ti-tag-plain-warning-color);
}
.tiny-tag--plain.tiny-tag--warning .tiny-tag__close {
fill: var(--ti-tag-plain-warning-color);
opacity: 0.5;
}
.tiny-tag--plain.tiny-tag--warning .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--plain.tiny-tag--danger {
color: var(--ti-tag-plain-danger-color);
border-color: var(--ti-tag-plain-danger-border-color);
background-color: var(--ti-tag-plain-background-color);
}
.tiny-tag--plain.tiny-tag--danger.is-hit {
border-color: var(--ti-tag-plain-danger-color);
}
.tiny-tag--plain.tiny-tag--danger .tiny-tag__close {
fill: var(--ti-tag-plain-danger-color);
opacity: 0.5;
}
.tiny-tag--plain.tiny-tag--danger .tiny-tag__close:hover {
opacity: 1;
}
.tiny-tag--medium {
height: var(--ti-tag-medium-height);
line-height: calc(var(--ti-tag-medium-height) - 2px);
}
.tiny-tag--small {
height: var(--ti-tag-small-height);
line-height: calc(var(--ti-tag-small-height) - 2px);
}
.tiny-tag--mini {
height: var(--ti-tag-mini-height);
line-height: calc(var(--ti-tag-mini-height) - 2px);
}
.tiny-tall-storage {
--ti-tall-storage-bgcolor: var(--ti-base-color-light);
--ti-tall-storage-border-radius: var(--ti-common-border-radius-normal);
--ti-tall-storage-item-height: var(--ti-base-size-height-minor);
--ti-tall-storage-item-bgcolor: var(--ti-base-color-hover-background);
position: relative;
margin-top: 2px;
}
.tiny-tall-storage .tiny-storage-list-style {
position: absolute;
background-color: var(--ti-tall-storage-bgcolor);
-webkit-box-shadow: var(--ti-base-box-shadow);
box-shadow: var(--ti-base-box-shadow);
border-radius: var(--ti-tall-storage-border-radius);
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 10;
}
.tiny-tall-storage .tiny-storage-list-style .tiny-storage-list {
padding: 0;
list-style: none;
}
.tiny-tall-storage .tiny-storage-list-style .tiny-storage-list .tiny-storage-item {
height: var(--ti-tall-storage-item-height);
line-height: var(--ti-tall-storage-item-height);
padding: 0 8px;
white-space: nowrap;
}
.tiny-tall-storage .tiny-storage-list-style .tiny-storage-list .tiny-storage-item.item-hover,
.tiny-tall-storage .tiny-storage-list-style .tiny-storage-list .tiny-storage-item:hover {
cursor: pointer;
background-color: var(--ti-tall-storage-item-bgcolor);
}
.tiny-text-popup {
--ti-text-popup-radius: var(--ti-common-border-radius-normal);
--ti-text-popup-border-color: var(--ti-base-color-border);
--ti-text-popup-hover-border-color: var(--ti-base-color-brand-6);
display: inline-block;
}
.tiny-text-popup .area {
padding: 6px;
width: 100%;
border-radius: var(--ti-text-popup-radius, 2px);
outline: 0;
}
.tiny-text-popup .text {
border: 1px solid var(--ti-text-popup-border-color);
line-height: 1;
}
.tiny-text-popup .text:hover {
border-color: var(--ti-text-popup-hover-border-color);
}
.tiny-text-popup .popup {
resize: none;
-webkit-box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3);
box-shadow: 0 0 1px 1px rgba(175, 175, 175, 0.3);
border: 1px solid var(--ti-text-popup-border-color);
}
.tiny-tips {
--ti-tips-normal-color: var(--ti-base-color-secondary);
--ti-tips-normal-font-color: var(--ti-base-color-light);
--ti-tips-error-color: #ff7875;
--ti-tips-error-font-color: var(--ti-base-color-light);
--ti-tips-succeed-color: var(--ti-base-color-success-normal);
--ti-tips-succeed-font-color: var(--ti-base-color-light);
--ti-tips-warning-color: #fa8c16;
--ti-tips-warning-font-color: var(--ti-base-color-light);
--ti-tips-infor-color: var(--ti-base-color-border);
--ti-tips-infor-font-color: var(--ti-base-color-info-normal);
--ti-tips-bgcolor: #ff7875;
--ti-tips-radius: var(--ti-common-border-radius-normal);
--ti-tips-height: 26px;
z-index: 900;
position: absolute;
padding: var(--ti-tips-padding);
background: var(--ti-tips-bgcolor);
border-radius: var(--ti-tips-radius);
color: var(--ti-tips-color-infor);
min-height: var(--ti-tips-height);
text-align: center;
line-height: var(--ti-tips-height);
}
.tiny-tips .tiny-icon {
color: var(--ti-tips-color-infor);
line-height: 36px;
}
.tiny-tips > span {
float: left;
top: -5px;
}
.tiny-tips:before {
content: '';
left: -4px;
top: 50%;
margin-top: -4px;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-bgcolor);
}
.tiny-tips span + p {
max-width: 300px;
max-height: 100px;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: auto;
}
.tiny-tips .tiny-small-close {
position: absolute;
cursor: pointer;
right: 8px;
top: -5px;
}
.tiny-tips .icon-remove + p,
.tiny-tips .icon-successful + p {
margin-left: 0;
}
.tiny-tips.tips-bottom {
top: -5px;
left: 0;
}
.tiny-tips.tips-bottom:before {
content: '';
left: 50%;
top: -4px;
margin-top: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: -6px;
}
.tiny-tips.tips-left:before {
content: '';
left: auto;
top: 50%;
margin-top: -4px;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-bgcolor);
right: -4px;
}
.tiny-tips.tips-top {
top: -5px;
left: 0;
}
.tiny-tips.tips-top:before {
content: '';
left: 50%;
top: auto;
margin-top: auto;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: -6px;
bottom: -4px;
margin-bottom: 0;
}
.tiny-tips.tips-top-left {
top: -5px;
left: 0;
}
.tiny-tips.tips-top-left:before {
content: '';
left: 0;
top: auto;
margin-top: auto;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: 10px;
bottom: -4px;
margin-bottom: 0;
}
.tiny-tips.tips-top-right {
top: -5px;
left: 0;
}
.tiny-tips.tips-top-right:before {
content: '';
left: 100%;
top: auto;
margin-top: auto;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: -16px;
bottom: -4px;
margin-bottom: 0;
}
.tiny-tips.tips-bottom-left {
top: -5px;
left: 0;
}
.tiny-tips.tips-bottom-left:before {
content: '';
left: 0;
top: -4px;
margin-top: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: 10px;
}
.tiny-tips.tips-bottom-right {
top: -5px;
left: 0;
}
.tiny-tips.tips-bottom-right:before {
content: '';
left: 100%;
top: -4px;
margin-top: 0;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-bgcolor) transparent;
margin-left: -16px;
}
.tiny-tips.tips-error {
background: var(--ti-tips-error-color);
color: var(--ti-tips-error-font-color);
border-radius: var(--ti-tips-radius-large, 3px);
-webkit-box-shadow: 0 0 4px var(--ti-tips-error-color);
box-shadow: 0 0 4px var(--ti-tips-error-color);
margin-top: 0;
}
.tiny-tips.tips-error:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-error-color);
}
.tiny-tips.tips-error.tips-bottom:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-error.tips-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-error-color);
}
.tiny-tips.tips-error.tips-top:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-error.tips-bottom-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-error.tips-bottom-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-error.tips-top-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-error.tips-top-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-error-color) transparent;
}
.tiny-tips.tips-warning {
background: var(--ti-tips-warning-color);
color: var(--ti-tips-warning-font-color);
border-radius: var(--ti-tips-radius-large, 3px);
-webkit-box-shadow: 0 0 4px var(--ti-tips-warning-color);
box-shadow: 0 0 4px var(--ti-tips-warning-color);
margin-top: 0;
}
.tiny-tips.tips-warning:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-warning-color);
}
.tiny-tips.tips-warning.tips-bottom:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-warning.tips-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-warning-color);
}
.tiny-tips.tips-warning.tips-top:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-warning.tips-bottom-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-warning.tips-bottom-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-warning.tips-top-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-warning.tips-top-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-warning-color) transparent;
}
.tiny-tips.tips-succeed {
background: var(--ti-tips-succeed-color);
color: var(--ti-tips-succeed-font-color);
border-radius: var(--ti-tips-radius-large, 3px);
-webkit-box-shadow: 0 0 4px var(--ti-tips-succeed-color);
box-shadow: 0 0 4px var(--ti-tips-succeed-color);
margin-top: 0;
}
.tiny-tips.tips-succeed:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-succeed-color);
}
.tiny-tips.tips-succeed.tips-bottom:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-succeed.tips-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-succeed-color);
}
.tiny-tips.tips-succeed.tips-top:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-succeed.tips-bottom-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-succeed.tips-bottom-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-succeed.tips-top-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-succeed.tips-top-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-succeed-color) transparent;
}
.tiny-tips.tips-infor {
background: var(--ti-tips-infor-color);
color: var(--ti-tips-infor-font-color);
border-radius: var(--ti-tips-radius-large, 3px);
-webkit-box-shadow: 0 0 4px var(--ti-tips-infor-color);
box-shadow: 0 0 4px var(--ti-tips-infor-color);
margin-top: 0;
}
.tiny-tips.tips-infor:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-infor-color);
}
.tiny-tips.tips-infor.tips-bottom:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-infor.tips-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-infor-color);
}
.tiny-tips.tips-infor.tips-top:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-infor.tips-bottom-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-infor.tips-bottom-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-infor.tips-top-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-infor.tips-top-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-infor-color) transparent;
}
.tiny-tips.tips-normal {
background: var(--ti-tips-normal-color);
color: var(--ti-tips-normal-font-color);
border-radius: var(--ti-tips-radius-large, 3px);
-webkit-box-shadow: 0 0 4px var(--ti-tips-normal-color);
box-shadow: 0 0 4px var(--ti-tips-normal-color);
margin-top: 0;
}
.tiny-tips.tips-normal:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-tips-normal-color);
}
.tiny-tips.tips-normal.tips-bottom:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips.tips-normal.tips-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 4px;
border-color: transparent var(--ti-tips-normal-color);
}
.tiny-tips.tips-normal.tips-top:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips.tips-normal.tips-bottom-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips.tips-normal.tips-bottom-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 4px 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips.tips-normal.tips-top-left:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips.tips-normal.tips-top-right:before {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: var(--ti-tips-normal-color) transparent;
}
.tiny-tips .grid-innercell .grid-simplesort {
display: none;
}
.tiny-toggle-menu {
--ti-toggle-menu-width: 210px;
--ti-toggle-menu-font-size: var(--ti-common-font-size-base);
--ti-toggle-menu-name-color: var(--ti-base-color-info-normal);
--ti-toggle-menu-tree-node-height: var(--ti-common-size-7x);
--ti-toggle-menu-filter-search-size: 30px;
--ti-toggle-menu-filter-search-font-size: var(--ti-common-font-size-2);
--ti-toggle-menu-filter-search-icon-color: var(--ti-base-color-brand-6);
--ti-toggle-menu-toggle-icon-color: var(--ti-base-color-brand-6);
--ti-toggle-menu-toggle-icon-hover-color: var(--ti-base-color-brand-5);
--ti-toggle-menu-toggle-bgcolor: var(--ti-base-color-border);
width: var(--ti-toggle-menu-width);
position: relative;
}
.tiny-toggle-menu .tiny-toggle-menu__body {
cursor: pointer;
line-height: 1;
padding-left: 4px;
width: 100%;
}
.tiny-toggle-menu .tiny-toggle-menu__body,
.tiny-toggle-menu .tiny-toggle-menu__body:hover {
text-decoration: none;
}
.tiny-toggle-menu .tiny-toggle-menu__name {
color: var(--ti-toggle-menu-name-color);
font-size: var(--ti-toggle-menu-font-size);
}
.tiny-toggle-menu .tiny-toggle-menu__tree {
position: relative;
}
.tiny-toggle-menu .tiny-toggle-menu__filter {
position: relative;
margin-bottom: 4px;
width: calc(100% - 16px);
}
.tiny-toggle-menu .tiny-toggle-menu__filter-search {
width: var(--ti-toggle-menu-filter-search-size);
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
display: block;
text-align: center;
position: absolute;
right: 0;
top: 0;
}
.tiny-toggle-menu .tiny-toggle-menu__filter-search .tiny-svg {
fill: var(--ti-toggle-menu-filter-search-icon-color);
font-size: var(--ti-toggle-menu-filter-search-font-size);
}
.tiny-toggle-menu .tiny-toggle-menu__toggle {
position: absolute;
top: 0;
left: calc(100% - 14px);
z-index: 2;
width: 14px;
height: var(--ti-toggle-menu-filter-search-size);
line-height: var(--ti-toggle-menu-filter-search-size);
background: var(--ti-toggle-menu-toggle-bgcolor);
cursor: pointer;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.tiny-toggle-menu .tiny-toggle-menu__toggle .tiny-svg {
fill: var(--ti-toggle-menu-toggle-icon-color);
}
.tiny-toggle-menu .tiny-toggle-menu__toggle:hover .tiny-svg {
fill: var(--ti-toggle-menu-toggle-icon-hover-color);
}
.tiny-toggle-menu .tiny-toggle-menu__link {
width: 100%;
}
.tiny-toggle-menu.is-toggle-right {
width: 80px;
}
.tiny-toggle-menu.is-toggle-right .tiny-tree-node.is-current .tiny-tree-node__content {
background: 0 0;
}
.tiny-toggle-menu.is-toggle-right .tiny-tree-node__content:hover {
background: 0 0;
}
.tiny-toggle-menu.is-toggle-right .tiny-tree-node__content:hover .tiny-svg {
fill: var(--ti-toggle-menu-toggle-icon-hover-color);
}
.tiny-toggle-menu.is-toggle-right .tiny-toggle-menu__toggle {
position: relative;
left: 0;
}
.tiny-toggle-menu.is-toggle-right .tiny-toggle-menu__filter {
display: none;
}
.tiny-toggle-menu .tiny-tree.is-wrap .tiny-tree-node__content {
height: auto;
}
.tiny-toggle-menu .tiny-tree.is-wrap .tiny-toggle-menu__name {
display: inline-block;
white-space: normal;
line-height: normal;
word-break: break-word;
}
.tiny-toggle-menu .tiny-tree.is-overflow .tiny-toggle-menu__name {
width: calc(100% - 18px);
vertical-align: middle;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-toggle-menu .tiny-tree.is-node-hide .tiny-toggle-menu__body,
.tiny-toggle-menu .tiny-tree.is-node-hide .tiny-tree-node__children {
display: none;
}
.tiny-toggle-menu .tiny-input__inner {
font-size: var(--ti-toggle-menu-font-size);
padding-right: 30px;
border-radius: 0;
border-top: 0;
border-left: 0;
border-right: 0;
}
.tiny-toggle-menu .tiny-tree-node__content {
height: var(--ti-toggle-menu-tree-node-height);
line-height: var(--ti-toggle-menu-tree-node-height);
font-size: var(--ti-toggle-menu-font-size);
padding-left: 0;
margin-left: 0;
}
.tiny-tooltip {
--ti-tooltip-popper-border-radius: var(--ti-common-border-radius-1);
--ti-tooltip-popper-font-size: var(--ti-common-font-size-base);
--ti-tooltip-popper-border-color: var(--ti-base-color-common-6);
--ti-tooltip-popper-normal-background: var(--ti-base-color-secondary);
--ti-tooltip-popper-normal-color: var(--ti-base-color-light);
--ti-tooltip-popper-normal-border-color: var(--ti-base-color-secondary);
--ti-tooltip-popper-info-background: #69c0ff;
--ti-tooltip-popper-info-color: var(--ti-base-color-light);
--ti-tooltip-popper-info-border-color: #69c0ff;
--ti-tooltip-popper-error-background: var(--ti-base-color-common-6);
--ti-tooltip-popper-error-color: var(--ti-base-color-light);
--ti-tooltip-popper-error-border-color: var(--ti-base-color-common-6);
--ti-tooltip-popper-warning-background: #ffd666;
--ti-tooltip-popper-warning-color: var(--ti-base-color-light);
--ti-tooltip-popper-warning-border-color: #ffd666;
--ti-tooltip-popper-success-background: #95de64;
--ti-tooltip-popper-success-color: var(--ti-base-color-light);
--ti-tooltip-popper-success-border-color: #95de64;
--ti-tooltip-popper-dark-background: var(--ti-base-color-common-6);
--ti-tooltip-popper-dark-color: var(--ti-base-color-light);
--ti-tooltip-popper-light-background: var(--ti-base-color-light);
--ti-tooltip-popper-light-color: var(--ti-base-color-common-6);
--ti-tooltip-popper-light-border-color: var(--ti-base-color-common-6);
--ti-tooltip-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
--ti-tooltip-padding: 11px 15px;
}
.tiny-tooltip:focus:hover,
.tiny-tooltip:focus:not(.focusing) {
outline-width: 0;
}
.tiny-tooltip.tiny-tooltip__popper {
position: absolute;
left: -9999px;
border-radius: var(--ti-tooltip-popper-border-radius);
padding: var(--ti-tooltip-padding);
font-size: var(--ti-tooltip-popper-font-size);
line-height: 1.2;
min-width: 10px;
max-width: 450px;
z-index: 2000;
word-wrap: break-word;
-webkit-box-shadow: var(--ti-tooltip-box-shadow);
box-shadow: var(--ti-tooltip-box-shadow);
}
.tiny-tooltip.tiny-tooltip__popper .popper__arrow,
.tiny-tooltip.tiny-tooltip__popper .popper__arrow::after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tiny-tooltip.tiny-tooltip__popper .popper__arrow {
border-width: 6px;
}
.tiny-tooltip.tiny-tooltip__popper .popper__arrow::after {
content: ' ';
border-width: 5px;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='top'] {
margin-bottom: 12px;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='top'] .popper__arrow {
bottom: -6px;
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='top'] .popper__arrow::after {
bottom: 1px;
margin-left: -5px;
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='bottom'] {
margin-top: 12px;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='bottom'] .popper__arrow {
top: -6px;
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='bottom'] .popper__arrow::after {
top: 1px;
margin-left: -5px;
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='right'] {
margin-left: 12px;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='right'] .popper__arrow {
left: -6px;
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='right'] .popper__arrow::after {
bottom: -5px;
left: 1px;
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='left'] {
margin-right: 12px;
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='left'] .popper__arrow {
right: -6px;
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);
}
.tiny-tooltip.tiny-tooltip__popper[x-placement^='left'] .popper__arrow::after {
right: 1px;
bottom: -5px;
margin-left: -5px;
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal {
background: var(--ti-tooltip-popper-normal-background);
color: var(--ti-tooltip-popper-normal-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-normal[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-normal-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info {
background: var(--ti-tooltip-popper-info-background);
color: var(--ti-tooltip-popper-info-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-info[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-info-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error {
background: var(--ti-tooltip-popper-error-background);
color: var(--ti-tooltip-popper-error-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-error[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-error-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning {
background: var(--ti-tooltip-popper-warning-background);
color: var(--ti-tooltip-popper-warning-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-warning[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-warning-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success {
background: var(--ti-tooltip-popper-success-background);
color: var(--ti-tooltip-popper-success-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-success[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-success-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-dark {
background: var(--ti-tooltip-popper-dark-background);
color: var(--ti-tooltip-popper-dark-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light {
background: var(--ti-tooltip-popper-light-background);
color: var(--ti-tooltip-popper-light-color);
border: 1px solid var(--ti-tooltip-popper-light-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='top'] .popper__arrow {
border-top-color: var(--ti-tooltip-popper-light-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='top'] .popper__arrow::after {
border-top-color: var(--ti-tooltip-popper-light-background);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow {
border-bottom-color: var(--ti-tooltip-popper-light-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='bottom'] .popper__arrow::after {
border-bottom-color: var(--ti-tooltip-popper-light-background);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='left'] .popper__arrow {
border-left-color: var(--ti-tooltip-popper-light-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='left'] .popper__arrow::after {
border-left-color: var(--ti-tooltip-popper-light-background);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='right'] .popper__arrow {
border-right-color: var(--ti-tooltip-popper-light-border-color);
}
.tiny-tooltip.tiny-tooltip__popper.is-light[x-placement^='right'] .popper__arrow::after {
border-right-color: var(--ti-tooltip-popper-light-background);
}
.tiny-tooltip.tiny-tooltip__popper.is-blank-content {
display: none;
}
.tiny-fade-in-linear-enter-active,
.tiny-fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.tiny-fade-in-linear-enter,
.tiny-fade-in-linear-enter-from,
.tiny-fade-in-linear-leave,
.tiny-fade-in-linear-leave-active,
.tiny-fade-in-linear-leave-from {
opacity: 0;
}
.tiny-fade-in-enter-active,
.tiny-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.tiny-fade-in-enter,
.tiny-fade-in-enter-from,
.tiny-fade-in-leave-active {
opacity: 0;
}
.tiny-top-box {
--ti-top-box-background: var(--ti-base-color-light);
--ti-top-box-icon-font-size: var(--ti-common-font-size-5);
--ti-top-box-success-icon-color: var(--ti-base-color-success-normal);
--ti-top-box-error-icon-color: var(--ti-base-color-bg-8);
--ti-top-box-warning-icon-color: var(--ti-base-color-warning-normal);
--ti-top-box-help-icon-color: var(--ti-base-color-brand-6);
--ti-top-box-info-icon-color: var(--ti-base-color-info-normal);
position: fixed;
top: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 400px;
max-height: 600px;
background: var(--ti-top-box-background);
padding: 24px;
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.3s, top 0.4s, -webkit-transform 0.4s;
transition: opacity 0.3s, top 0.4s, -webkit-transform 0.4s;
transition: opacity 0.3s, transform 0.4s, top 0.4s;
transition: opacity 0.3s, transform 0.4s, top 0.4s, -webkit-transform 0.4s;
}
.tiny-top-box .tiny-top-box__icon {
font-size: var(--ti-top-box-icon-font-size, 24px);
vertical-align: middle;
}
.tiny-top-box .tiny-top-box__content {
display: inline-block;
padding: 0 16px;
vertical-align: middle;
}
.tiny-top-box .tiny-top-box__closeBtn {
position: absolute;
top: 14px;
right: 12px;
cursor: pointer;
fill: rgba(51, 51, 51, 0.5);
display: none;
}
.tiny-top-box .tiny-top-box__closeBtn:hover {
fill: #333;
}
.tiny-top-box .tiny-top-box__toolbar {
float: right;
margin-top: 24px;
}
.tiny-top-box.is-closable .tiny-top-box__closeBtn {
display: inline-block;
}
.tiny-top-box.is-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-top-box--success .tiny-top-box__icon {
fill: var(--ti-top-box-success-icon-color);
}
.tiny-top-box--error .tiny-top-box__icon {
fill: var(--ti-top-box-error-icon-color);
}
.tiny-top-box--warning .tiny-top-box__icon {
fill: var(--ti-top-box-warning-icon-color);
}
.tiny-top-box--help .tiny-top-box__icon {
fill: var(--ti-top-box-help-icon-color);
}
.tiny-top-box--info .tiny-top-box__icon {
fill: var(--ti-top-box-info-icon-color);
}
.tiny-top-box-fade-enter,
.tiny-top-box-fade-leave-active {
opacity: 0;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
.tiny-transition-transfer-fade-enter-active,
.tiny-transition-transfer-fade-leave-active {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tiny-transition-transfer-fade-leave-active {
position: absolute;
}
.tiny-transition-transfer-fade-enter,
.tiny-transition-transfer-fade-enter-from,
.tiny-transition-transfer-fade-leave-to {
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
.tiny-transfer {
--ti-transfer-font-size: var(--ti-common-font-size-1);
--ti-transfer-button-bgcolor: var(--ti-base-color-brand-6);
--ti-transfer-button-border-radius: var(--ti-common-border-radius-normal);
--ti-transfer-button-disabled-color: var(--ti-base-color-placeholder);
--ti-transfer-button-disabled-border-color: var(--ti-base-color-border);
--ti-transfer-button-disabled-bgcolor: var(--ti-common-color-bg-disabled);
--ti-transfer-panel-background: var(--ti-base-color-light);
--ti-transfer-panel-body-height: 260px;
--ti-transfer-panel-border-color: var(--ti-base-color-border);
--ti-transfer-panel-border-radius: var(--ti-common-border-radius-normal);
--ti-transfer-panel-item-height: var(--ti-base-size-height-minor);
--ti-transfer-panel-item-color: var(--ti-base-color-info-normal);
--ti-transfer-panel-item-hover-font-color: var(--ti-base-color-brand-6);
--ti-transfer-panel-item-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-transfer-panel-filter-height: var(--ti-base-size-height-minor);
--ti-transfer-panel-filter-font-size: var(--ti-common-font-size-base);
--ti-transfer-panel-filter-border-radius: var(--ti-common-border-radius-normal);
--ti-transfer-panel-body-filter-height: 216px;
--ti-transfer-panel-width: 200px;
--ti-transfer-header-height: 40px;
--ti-transfer-header-background: var(--ti-base-color-hover-background);
--ti-transfer-header-border-color: var(--ti-base-color-border);
--ti-transfer-header-color: var(--ti-base-color-info-normal);
--ti-transfer-header-span-color: var(--ti-base-color-info-normal);
--ti-transfer-header-font-size: var(--ti-common-font-size-base);
--ti-transfer-header-sort-width: var(--ti-common-size-5x);
--ti-transfer-header-sort-color: var(--ti-base-color-brand-6);
--ti-transfer-footer-height: var(--ti-common-size-10x);
--ti-transfer-footer-background: var(--ti-base-color-light);
--ti-transfer-footer-border-color: var(--ti-base-color-border);
--ti-transfer-footer-color: #606266;
--ti-transfer-empty-height: var(--ti-base-size-height-minor);
--ti-transfer-empty-color: #909399;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: var(--ti-transfer-font-size);
}
.tiny-transfer__buttons {
padding: 0 16px;
}
.tiny-transfer__buttons .defaultButton {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.tiny-transfer__buttons .defaultButton .tiny-button + .tiny-button {
margin-left: 0;
}
.tiny-transfer__buttons .defaultButton + .tiny-button {
margin: 12px 0 0;
}
.tiny-transfer__buttons .tiny-button {
min-width: auto;
margin: 0 0 8px 0;
}
.tiny-transfer__button {
display: block;
margin: 0 auto;
border-color: var(--ti-transfer-button-bgcolor);
background-color: var(--ti-transfer-button-bgcolor);
min-width: 30px;
min-height: 30px;
border-radius: var(--ti-transfer-button-border-radius);
line-height: normal;
padding: 8px;
}
.tiny-transfer__button.is-with-texts {
border-radius: var(--ti-transfer-button-border-radius);
min-width: 60px;
}
.tiny-transfer__button.tiny-button:not(.is-circle) .tiny-svg {
margin-right: 0;
}
.tiny-transfer__button:first-child {
margin-bottom: 12px;
}
.tiny-transfer__button:nth-child(2) {
margin: 0;
}
.tiny-transfer__button i,
.tiny-transfer__button span {
font-size: var(--ti-transfer-font-size);
}
.tiny-transfer__button [class*='tiny-icon'] + span {
margin-left: 0;
}
.tiny-transfer .tiny-transfer__button.is-disabled,
.tiny-transfer .tiny-transfer__button.is-disabled:hover {
border: 1px solid var(--ti-transfer-button-disabled-border-color);
background-color: var(--ti-transfer-button-disabled-bgcolor);
color: var(--ti-transfer-button-disabled-color);
line-height: 1;
}
.tiny-transfer .tiny-transfer__button.is-disabled .tiny-svg,
.tiny-transfer .tiny-transfer__button.is-disabled:hover .tiny-svg {
fill: var(--ti-transfer-button-disabled-color);
}
.tiny-transfer-panel {
border: 1px solid var(--ti-transfer-panel-border-color);
border-radius: var(--ti-transfer-panel-border-radius);
overflow: hidden;
background: var(--ti-transfer-panel-background);
width: var(--ti-transfer-panel-width);
max-height: 100%;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.tiny-transfer-panel__body {
position: relative;
height: var(--ti-transfer-panel-body-height);
text-align: left;
padding-right: 2px;
}
.tiny-transfer-panel__body.is-with-footer {
padding-bottom: 40px;
height: calc(100% - 40px);
}
.tiny-transfer-panel__body .tiny-tree {
height: 100%;
padding: 0 8px 8px;
overflow: auto;
}
.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-track-piece {
background: #fafafa;
}
.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: calc(8px / 2);
}
.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb:hover {
background: #999;
}
.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb:active {
background: #999;
}
.tiny-transfer-panel__body .tiny-transfer-panel__filter ~ .tiny-tree {
height: calc(100% - 46px);
}
.tiny-transfer-panel__list {
margin: 0;
padding: 6px 0;
list-style: none;
height: var(--ti-transfer-panel-body-height);
overflow: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
.tiny-transfer-panel__list.tiny-checkbox-group {
display: block;
}
.tiny-transfer-panel__list.is-filterable {
height: var(--ti-transfer-panel-body-filter-height);
padding-top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-transfer-panel__list.is-filterable .tiny-transfer-panel__item {
-ms-flex-negative: 0;
flex-shrink: 0;
}
}
.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-track-piece {
background: #fafafa;
}
.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: calc(8px / 2);
}
.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb:hover {
background: #999;
}
.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb:active {
background: #999;
}
.tiny-transfer-panel__item {
line-height: var(--ti-transfer-panel-item-height);
padding-left: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.tiny-transfer-panel__item + .tiny-transfer-panel__item {
margin-left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-transfer-panel__item.tiny-checkbox {
color: var(--ti-transfer-panel-item-color);
line-height: var(--ti-transfer-panel-item-height);
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.tiny-transfer-panel__item.tiny-checkbox.tiny-checkbox__label {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 22px;
line-height: var(--ti-transfer-panel-item-height);
}
.tiny-transfer-panel__item.tiny-checkbox .tiny-checkbox__input {
line-height: 1;
}
.tiny-transfer-panel__item:hover {
background: var(--ti-transfer-panel-item-hover-bgcolor);
color: var(--ti-transfer-panel-item-hover-font-color);
}
.tiny-transfer-panel__item.is-disabled:hover {
background: 0;
}
.tiny-transfer-panel__item.tiny-checkbox__input {
position: absolute;
top: 7px;
}
.tiny-transfer-panel__filter {
text-align: center;
padding: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: auto;
}
.tiny-transfer-panel__filter .tiny-input__inner {
height: var(--ti-transfer-panel-filter-height);
line-height: var(--ti-transfer-panel-filter-height);
width: 100%;
font-size: var(--ti-transfer-panel-filter-font-size);
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: var(--ti-transfer-panel-filter-border-radius);
padding-right: 30px;
padding-left: 8px;
}
.tiny-transfer-panel__filter .tiny-input__icon {
margin-left: 5px;
}
.tiny-transfer-panel__filter .tiny-icon-circle-close {
cursor: pointer;
}
.tiny-transfer-panel .tiny-transfer-panel__header {
height: var(--ti-transfer-header-height);
line-height: var(--ti-transfer-header-height);
background: var(--ti-transfer-header-background);
margin: 0;
padding: 0 8px;
border-bottom: 1px solid var(--ti-transfer-header-border-color);
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: var(--ti-transfer-header-color);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox {
width: 100%;
line-height: 1;
text-align: left;
}
.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox .tiny-checkbox__label {
font-size: var(--ti-transfer-header-font-size);
color: var(--ti-transfer-header-color);
font-weight: 400;
width: calc(100% - 38px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox .tiny-checkbox__label span {
position: absolute;
right: 0;
color: var(--ti-transfer-header-span-color);
font-size: var(--ti-transfer-header-font-size);
font-weight: 400;
}
.tiny-transfer-panel .tiny-transfer-panel__header .headSort {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.tiny-transfer-panel .tiny-transfer-panel__header .headSort div {
width: var(--ti-transfer-header-sort-width);
height: var(--ti-transfer-header-sort-width);
line-height: var(--ti-transfer-header-sort-width);
margin-right: 8px;
text-align: center;
border: 1px solid;
border-radius: 50%;
color: var(--ti-transfer-header-sort-color);
display: inline-block;
cursor: pointer;
}
.tiny-transfer-panel .tiny-transfer-panel__header .headSort div i {
width: calc(var(--ti-transfer-header-sort-width) - 2px);
height: calc(var(--ti-transfer-header-sort-width) - 2px);
display: block;
}
.tiny-transfer-panel .tiny-transfer-panel__footer {
height: var(--ti-transfer-footer-height);
background: var(--ti-transfer-footer-background);
margin: 0;
padding: 0;
border-top: 1px solid var(--ti-transfer-footer-border-color);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1;
}
.tiny-transfer-panel .tiny-transfer-panel__footer::after {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.tiny-transfer-panel .tiny-transfer-panel__footer .tiny-checkbox {
padding-left: 20px;
color: var(--ti-transfer-footer-color);
}
.tiny-transfer-panel .tiny-transfer-panel__empty {
position: absolute;
width: 100%;
top: calc(50% - 33px);
margin: 0;
height: var(--ti-transfer-empty-height);
line-height: var(--ti-transfer-empty-height);
padding: 6px 15px 0;
color: var(--ti-transfer-empty-color);
text-align: center;
}
.tiny-transfer-panel.transferGrid {
width: 600px;
}
.tiny-transfer-panel.transferGrid .tiny-transfer-panel__body {
height: 100%;
}
.tiny-transfer-panel.transferGrid .tiny-table.simple {
width: 100%;
padding: 0 8px;
height: 400px;
overflow-y: auto;
}
.tiny-transfer-panel.transferGrid .tiny-table.simple table {
width: 100%;
}
.tiny-transfer-panel.transferGrid .tiny-pager {
padding: 10px;
}
.tiny-transfer-panel .tiny-checkbox__label {
padding-left: 8px;
}
.tiny-tree {
--ti-tree-color: var(--ti-base-color-info-normal);
--ti-tree-bgcolor: var(--ti-base-color-light);
--ti-tree-empty-text-color: #909399;
--ti-tree-node-content-current-bgcolor: var(--ti-base-color-brand-2);
--ti-tree-node-content-hover-bgcolor: var(--ti-base-color-hover-background);
--ti-tree-node-label-font-size: var(--ti-common-font-size-1);
--ti-tree-node-label-margin-left: var(--ti-common-space-base);
--ti-tree-node-label-bgcolor: var(--ti-base-color-brand-5);
--ti-tree-node-label-font-color: var(--ti-base-color-light);
--ti-tree-node-icon-font-size: var(--ti-common-font-size-1);
--ti-tree-node-icon-loading-color: #1890ff;
--ti-tree-node-icon-expand-color: var(--ti-base-color-info-normal);
--ti-tree-node-checked-icon-color: var(--ti-base-color-brand-6);
position: relative;
cursor: default;
background: var(--ti-tree-bgcolor);
color: var(--ti-tree-color);
}
.tiny-tree__empty-block {
position: relative;
min-height: 60px;
text-align: center;
width: 100%;
height: 100%;
}
.tiny-tree__empty-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: var(--ti-tree-empty-text-color);
}
.tiny-tree__drop-indicator {
position: absolute;
left: 0;
right: 0;
height: 1px;
background-color: #40a9ff;
}
.tiny-tree.is-dragging .tiny-tree-node__content {
cursor: move;
}
.tiny-tree.is-dragging .tiny-tree-node__content * {
pointer-events: none;
}
.tiny-tree.is-dragging.is-drop-not-allow .tiny-tree-node__content {
cursor: not-allowed;
}
.tiny-tree--highlight-current .tiny-tree-node.is-current > .tiny-tree-node__content {
background-color: #f0f7ff;
}
.tiny-tree-node {
white-space: nowrap;
outline: 0;
}
.tiny-tree-node:focus > .tiny-tree-node__content {
background-color: var(--ti-tree-node-content-hover-bgcolor);
}
.tiny-tree-node.is-current > .tiny-tree-node__content {
background-color: var(--ti-tree-node-content-current-bgcolor);
}
.tiny-tree-node.is-drop-inner > .tiny-tree-node__content .tiny-tree-node__label {
background-color: var(--ti-tree-node-label-bgcolor);
color: var(--ti-tree-node-label-font-color);
}
.tiny-tree-node.is-checked .tiny-tree-node__expand-icon,
.tiny-tree-node.is-expanded .tiny-tree-node__expand-icon,
.tiny-tree-node.is-indeterminate .tiny-tree-node__expand-icon {
fill: var(--ti-tree-node-checked-icon-color);
}
.tiny-tree-node__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 30px;
cursor: pointer;
border-radius: var(--ti-common-border-radius-normal);
}
.tiny-tree-node__content:hover {
background-color: var(--ti-tree-node-content-hover-bgcolor);
}
.tiny-tree-node__content > label.tiny-checkbox {
margin-left: var(--ti-tree-node-label-margin-left);
}
.tiny-tree-node__expand-icon {
cursor: pointer;
fill: var(--ti-tree-node-icon-expand-color);
font-size: var(--ti-tree-node-icon-font-size);
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.tiny-tree-node__expand-icon.expanded {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.tiny-tree-node__expand-icon.is-leaf {
visibility: hidden;
}
.tiny-tree-node__label {
font-size: var(--ti-tree-node-label-font-size);
margin-left: var(--ti-tree-node-label-margin-left);
}
.tiny-tree-node__loading.circular {
margin-right: 4px;
margin-left: var(--ti-tree-node-label-margin-left);
font-size: var(--ti-tree-node-icon-font-size);
fill: var(--ti-tree-node-icon-loading-color);
-webkit-animation: loading-rotate 2s linear infinite;
animation: loading-rotate 2s linear infinite;
}
.tiny-tree-node__loading.circular .path {
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;
stroke-width: 2;
stroke: #1890ff;
stroke-linecap: round;
}
.tiny-tree-node > .tiny-tree-node__children {
overflow: hidden;
background-color: transparent;
}
.tiny-tree-node.is-expanded > .tiny-tree-node__children {
display: block;
}
.tiny-tree-node__menu {
position: absolute;
top: 0;
left: 0;
z-index: 5000;
font-size: var(--ti-common-font-size-base);
-webkit-box-shadow: 2px 2px 4px -2px #000;
box-shadow: 2px 2px 4px -2px #000;
padding: 0 1px;
color: #606266;
font-family: Helvetica, Arial, 'Microsoft YaHei', sans-serif;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tiny-tree-node .tiny-radio {
margin-right: 0;
}
.tiny-tree-node .tiny-radio .tiny-radio__label {
display: none;
}
.tiny-tree-node .collapse-transition {
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
@keyframes loading-rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -40px;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120px;
}
}
.tiny-tree-menu {
--ti-tree-menu-width: 210px;
--ti-tree-menu-font-size: var(--ti-common-font-size-base);
--ti-tree-menu-border-color: #d9d9d9;
--ti-tree-menu-node-height: var(--ti-common-size-10x);
--ti-tree-menu-node-hover-bgcolor: var(--ti-base-color-white);
--ti-tree-menu-node-current-color: var(--ti-base-color-brand-6);
--ti-tree-menu-node-body-color: var(--ti-base-color-info-normal);
--ti-tree-minus-square-color: var(--ti-base-color-brand-6);
width: var(--ti-tree-menu-width);
position: relative;
font-size: var(--ti-tree-menu-font-size);
}
.tiny-tree-menu:before {
content: '';
border-right: 1px solid var(--ti-tree-menu-border-color);
position: absolute;
top: 0;
right: 0;
height: 100%;
z-index: 1;
}
.tiny-tree-menu .tiny-input .tiny-input__inner {
border: none;
border-bottom: 1px solid var(--ti-tree-menu-border-color);
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tiny-tree-node__content {
height: var(--ti-tree-menu-node-height);
line-height: var(--ti-tree-menu-node-height);
overflow: hidden;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tiny-tree-node__content .tree-node-icon {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-right: 8px;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tiny-tree-node__content .tree-node {
width: 100%;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tiny-tree-node__content .tree-node-name {
padding: 0 24px;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node.is-current > .tiny-tree-node__content {
background-color: var(--ti-tree-menu-node-hover-bgcolor);
position: relative;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node.is-current > .tiny-tree-node__content .tree-node-name {
border-left: 2px solid var(--ti-tree-minus-square-color);
}
.tiny-tree-menu .tiny-tree .tiny-tree-node.is-current > .tiny-tree-node__content .tree-node-body {
color: var(--ti-tree-menu-node-current-color);
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tree-node-body {
color: var(--ti-tree-menu-node-body-color);
display: block;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node .tree-node-body,
.tiny-tree-menu .tiny-tree .tiny-tree-node .tree-node-body:hover {
text-decoration: none;
}
.tiny-tree-menu .tiny-tree .tiny-tree-node.is-loading .tiny-tree-node__content .tree-node-name {
padding-left: 0;
}
.tiny-tree-menu .tiny-tree-menu__overflow.tiny-tree .tiny-tree-node .tiny-tree-node__content .tree-node-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-right: 0;
}
.tiny-tree-menu .tiny-tree-menu__overflow.tiny-tree .tiny-tree-node .tiny-tree-node__content .tree-node {
width: calc(100% - 24px);
}
.tiny-tree-menu .tiny-tree-menu__wrap.tiny-tree .tiny-tree-node__content {
min-height: var(--ti-tree-menu-node-height);
height: auto;
}
.tiny-tree-menu .tiny-tree-menu__wrap.tiny-tree .tree-node-body {
min-height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.tiny-tree-menu .tiny-tree-menu__wrap.tiny-tree .tiny-tree-node__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.tiny-tree-menu .tiny-tree-menu__wrap.tiny-tree .tree-node-name {
white-space: normal;
line-height: normal;
display: block;
word-break: break-all;
}
.tiny-upload {
--ti-upload-tip-font-size: var(--ti-common-font-size-base);
--ti-upload-tip-color: #666;
--ti-upload-picture-card-bgcolor: #fbfdff;
--ti-upload-picture-card-border-color: #c0ccda;
--ti-upload-picture-card-border-radius: 6px;
--ti-upload-picture-card-hover-color: var(--ti-base-color-brand-5);
--ti-upload-picture-card-icon-font-size: 28px;
--ti-upload-picture-card-icon-color: #8c939d;
display: inline-block;
text-align: center;
cursor: pointer;
outline: 0;
}
.tiny-upload__input {
display: none;
}
.tiny-upload__tip {
font-size: var(--ti-upload-tip-font-size);
color: var(--ti-upload-tip-color);
margin-top: 8px;
}
.tiny-upload--picture-card {
width: 148px;
height: 148px;
line-height: 146px;
background-color: var(--ti-upload-picture-card-bgcolor);
border: 1px dashed var(--ti-upload-picture-card-border-color);
border-radius: var(--ti-upload-picture-card-border-radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: top;
}
.tiny-upload--picture-card svg {
font-size: var(--ti-upload-picture-card-icon-font-size);
fill: var(--ti-upload-picture-card-icon-color);
}
.tiny-upload--picture-card:hover,
.tiny-upload:focus {
border-color: var(--ti-upload-picture-card-hover-color);
color: var(--ti-upload-picture-card-hover-color);
}
.tiny-upload:focus .tiny-upload-dragger {
border-color: var(--ti-upload-picture-card-hover-color);
}
.tiny-upload-cover__title,
.tiny-upload-list__item-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tiny-upload--picture-card,
.tiny-upload-dragger {
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
.tiny-upload iframe {
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
}
.tiny-upload input[type='file'] {
display: none;
}
.tiny-upload-cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
cursor: default;
}
.tiny-upload-cover::after {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.tiny-upload-cover img {
display: block;
width: 100%;
height: 100%;
}
.tiny-upload-cover__label {
position: absolute;
right: -15px;
top: -6px;
width: 40px;
height: 24px;
background: #13ce66;
text-align: center;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.tiny-upload-cover__label i {
color: #fff;
font-size: var(--ti-common-font-size-base);
margin-top: 11px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-upload-cover__progress {
display: inline-block;
vertical-align: middle;
position: static;
width: 243px;
}
.tiny-upload-cover__progress + .tiny-upload__inner {
opacity: 0;
}
.tiny-upload-cover__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.tiny-upload-cover__interact {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.72);
text-align: center;
}
.tiny-upload-cover__interact .btn {
display: inline-block;
color: #fff;
font-size: var(--ti-common-font-size-1);
cursor: pointer;
vertical-align: middle;
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
margin-top: 60px;
}
.tiny-upload-cover__interact .btn span {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.tiny-upload-cover__interact .btn i {
color: #fff;
display: block;
font-size: var(--ti-common-font-size-5);
line-height: inherit;
margin: 0 auto 5px;
}
.tiny-upload-cover__interact .btn:not(:first-child) {
margin-left: 35px;
}
.tiny-upload-cover__interact .btn:hover {
-webkit-transform: translateY(-13px);
transform: translateY(-13px);
}
.tiny-upload-cover__interact .btn:hover span {
opacity: 1;
}
.tiny-upload-cover__title {
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
width: 100%;
height: 36px;
line-height: 36px;
font-weight: 400;
padding: 0 10px;
margin: 0;
font-size: var(--ti-common-font-size-1);
color: #303133;
text-align: left;
}
.tiny-upload-cover + .tiny-upload__inner {
opacity: 0;
position: relative;
z-index: 1;
}
.tiny-upload-dragger {
--ti-upload-dragger-width: 360px;
--ti-upload-dragger-height: 180px;
--ti-upload-dragger-bgcolor: #fafafa;
--ti-upload-dragger-border-color: var(--ti-base-color-border);
--ti-upload-dragger-border-radius: var(--ti-common-border-radius-normal);
--ti-upload-dragger-hover-color: var(--ti-base-color-brand-5);
--ti-upload-dragger-dragover-bgcolor: rgba(32, 159, 255, 0.06);
--ti-upload-dragger-icon-color: var(--ti-base-color-placeholder);
--ti-upload-dragger-icon-font-size: var(--ti-common-font-size-7);
--ti-upload-dragger-text-color: var(--ti-base-color-secondary);
--ti-upload-dragger-text-font-size: var(--ti-common-font-size-base);
--ti-upload-dragger-files-border-color: #dcdfe6;
width: var(--ti-upload-dragger-width);
height: var(--ti-upload-dragger-height);
background-color: var(--ti-upload-dragger-bgcolor);
border: 1px dashed var(--ti-upload-dragger-border-color);
border-radius: var(--ti-upload-dragger-border-radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-upload-dragger:hover {
border-color: var(--ti-upload-dragger-hover-color);
}
.tiny-upload-dragger.is-dragover {
background-color: var(--ti-upload-dragger-dragover-bgcolor, rgba(32, 159, 255, 0.06));
border: 2px dashed var(--ti-upload-dragger-hover-color);
}
.tiny-upload-dragger .icon-fileupload {
font-size: var(--ti-upload-dragger-icon-font-size);
fill: var(--ti-upload-dragger-icon-color);
}
.tiny-upload-dragger .tiny-upload__text {
color: var(--ti-upload-dragger-text-color);
font-size: var(--ti-upload-dragger-text-font-size);
text-align: center;
}
.tiny-upload-dragger .tiny-upload__text em {
color: var(--ti-upload-dragger-hover-color);
font-style: normal;
}
.tiny-upload-dragger + .tiny-upload__tip {
text-align: center;
}
.tiny-upload-dragger ~ .tiny-upload__files {
border-top: 1px solid var(--ti-upload-dragger-files-border-color);
margin-top: 7px;
padding-top: 5px;
}
.tiny-upload-list {
--ti-upload-list-item-font-size: var(--ti-common-font-size-1);
--ti-upload-list-item-color: var(--ti-base-color-info-normal);
--ti-upload-list-item-border-radius: var(--ti-common-border-radius-normal);
--ti-upload-list-item-hover-background-color: #f5f7fa;
--ti-upload-list-item-hover-color: var(--ti-base-color-brand-5);
--ti-upload-list-item-name-icon-color: #909399;
--ti-upload-list-item-name-icon-font-size: var(--ti-common-font-size-2);
--ti-upload-list-svg-icon-close-color: #606266;
--ti-upload-list-svg-icon-font-size: var(--ti-common-font-size-base);
--ti-upload-list-successful-icon-font-size: var(--ti-common-font-size-1);
--ti-upload-list-picture-card-item-border-color: var(--ti-base-color-border);
--ti-upload-list-picture-card-item-bgcolor: var(--ti-base-color-light);
--ti-upload-list-successful-status-color: var(--ti-base-color-success-normal);
margin: 0;
padding: 0;
list-style: none;
}
.tiny-upload-list__item {
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
font-size: var(--ti-upload-list-item-font-size);
color: var(--ti-upload-list-item-color);
line-height: 1.8;
margin-top: 8px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: var(--ti-upload-list-item-border-radius);
width: 100%;
outline: 0;
}
.tiny-upload-list__item:hover {
background-color: var(--ti-upload-list-item-hover-background-color);
}
.tiny-upload-list__item:hover .tiny-svg.icon-close,
.tiny-upload-list__item:hover .tiny-svg.icon-refres {
display: inline-block;
}
.tiny-upload-list__item:hover .tiny-progress__text {
display: none;
}
.tiny-upload-list__item.is-success .tiny-upload-list__item-status-label {
display: block;
}
.tiny-upload-list__item.is-success .tiny-upload-list__item-name:focus,
.tiny-upload-list__item.is-success .tiny-upload-list__item-name:hover {
color: var(--ti-upload-list-item-hover-color);
cursor: pointer;
text-decoration: none;
}
.tiny-upload-list__item.is-success:focus:not(:hover) .tiny-icon-close-tip {
display: inline-block;
}
.tiny-upload-list__item.is-success:active,
.tiny-upload-list__item.is-success:not(.focusing):focus {
outline-width: 0;
}
.tiny-upload-list__item.is-success:active .tiny-icon-close-tip,
.tiny-upload-list__item.is-success:focus .tiny-upload-list__item-status-label,
.tiny-upload-list__item.is-success:hover .tiny-upload-list__item-status-label,
.tiny-upload-list__item.is-success:not(.focusing):focus .tiny-icon-close-tip {
display: none;
}
.tiny-upload-list__item.is-disabled .tiny-upload-list__item:hover .tiny-upload-list__item-status-label {
display: block;
}
.tiny-upload-list__item.isEdm .tiny-upload-list__item-name {
display: inline-block;
}
.tiny-upload-list__item.isEdm .tiny-upload-list__item-name.isFail {
color: red;
}
.tiny-upload-list__item.isEdm .tiny-upload-list__item-edminfo {
margin-right: 46px;
}
.tiny-upload-list__item.isEdm .tiny-upload-list__item-status-label {
right: 16px;
}
.tiny-upload-list__item.isEdm:not(.showUpdate) .icon-refres {
display: none;
}
.tiny-upload-list__item.isEdm:not(.showDel) .icon-close {
display: none;
}
.tiny-upload-list__item.isEdm.showUpdate .icon-refres {
right: 16px;
}
.tiny-upload-list__item.isEdm.showDel .icon-close {
right: 16px;
}
.tiny-upload-list__item.isEdm.showUpdate.showDel .icon-refres {
right: 28px;
}
.tiny-upload-list__item.isEdm.showUpdate.showDel .icon-close {
right: 8px;
}
.tiny-upload-list__item.isEdm:not(.showUpdate):not(.showDel) .tiny-upload-list__item-status-label {
display: block;
}
.tiny-upload-list__item .tiny-progress {
position: absolute;
top: 20px;
width: 100%;
}
.tiny-upload-list__item .tiny-progress__text {
position: absolute;
right: 0;
top: -13px;
}
.tiny-upload-list__item .tiny-progress-bar {
margin-right: 0;
padding-right: 0;
}
.tiny-upload-list__item .tiny-svg.icon-successful {
font-size: var(--ti-upload-list-successful-icon-font-size);
fill: var(--ti-upload-list-successful-status-color);
}
.tiny-upload-list__item .tiny-svg.icon-close {
display: none;
position: absolute;
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: var(--ti-upload-list-svg-icon-close-color);
font-size: var(--ti-upload-list-svg-icon-font-size);
opacity: 0.75;
cursor: pointer;
}
.tiny-upload-list__item .tiny-svg.icon-close:hover {
opacity: 1;
}
.tiny-upload-list__item .tiny-svg.icon-refres {
display: none;
position: absolute;
top: 50%;
right: 28px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #606266;
font-size: var(--ti-common-font-size-base);
opacity: 0.75;
cursor: pointer;
}
.tiny-upload-list__item .tiny-svg.icon-refres:hover {
opacity: 1;
}
.tiny-upload-list__item .tiny-icon-close-tip {
display: none;
position: absolute;
top: 5px;
right: 5px;
font-size: var(--ti-upload-list-svg-icon-font-size);
cursor: pointer;
opacity: 1;
color: var(--ti-upload-list-item-hover-color);
}
.tiny-upload-list__item-edminfo,
.tiny-upload-list__item-folder {
display: inline-block;
vertical-align: top;
}
.tiny-upload-list__item-edminfo {
margin-right: 20px;
}
.tiny-upload-list__item-edminfo span {
display: inline-block;
margin-right: 10px;
}
.tiny-upload-list__item-edminfo.isFail span {
color: #f5222d;
}
.tiny-upload-list__item-name {
color: var(--ti-upload-list-item-color);
display: block;
margin-right: 40px;
padding-left: 4px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.tiny-upload-list__item-name .tiny-svg {
font-size: var(--ti-upload-list-item-name-icon-font-size);
margin-right: 4px;
fill: var(--ti-upload-list-item-name-icon-color);
}
.tiny-upload-list__item-status-label {
position: absolute;
right: 5px;
top: 0;
line-height: inherit;
display: none;
}
.tiny-upload-list__item-delete {
position: absolute;
right: 10px;
top: 0;
font-size: var(--ti-upload-list-svg-icon-font-size);
color: var(--ti-upload-list-svg-icon-close-color);
display: none;
}
.tiny-upload-list__item-delete:hover {
color: var(--ti-upload-list-item-hover-color);
}
.tiny-upload-list--picture-card {
margin: 0;
display: inline;
vertical-align: top;
}
.tiny-upload-list--picture-card .tiny-upload-list__item {
overflow: hidden;
background-color: var(--ti-upload-list-picture-card-item-bgcolor);
border: 1px solid var(--ti-upload-list-picture-card-item-border-color);
border-radius: var(--ti-upload-list-item-border-radius);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 148px;
height: 148px;
margin: 0 8px 8px 0;
display: inline-block;
}
.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-icon-check {
fill: var(--ti-upload-list-picture-card-item-bgcolor);
}
.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-svg.icon-close,
.tiny-upload-list--picture-card .tiny-upload-list__item .tiny-svg.icon-refres,
.tiny-upload-list--picture-card .tiny-upload-list__item:hover .tiny-upload-list__item-status-label {
display: none;
}
.tiny-upload-list--picture-card .tiny-upload-list__item:hover .tiny-progress__text {
display: block;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-name {
display: none;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-thumbnail {
width: 100%;
height: 100%;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-status-label {
position: absolute;
right: -15px;
top: -6px;
width: 40px;
height: 24px;
background: var(--ti-upload-list-successful-status-color);
text-align: center;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
}
.tiny-upload-list--picture-card .tiny-upload-list__item-status-label .tiny-svg {
font-size: var(--ti-upload-list-svg-icon-font-size, 12px);
margin-top: 11px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: var(--ti-upload-list-picture-card-item-bgcolor);
opacity: 0;
font-size: var(--ti-common-font-size-4);
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions::after {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions:hover {
opacity: 1;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions:hover span {
display: inline-block;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions span {
display: none;
cursor: pointer;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions span + span {
margin-left: 15px;
}
.tiny-upload-list--picture-card .tiny-upload-list__item-actions .tiny-upload-list__item-delete,
.tiny-upload-list--picture-card .tiny-upload-list__item-actions .tiny-upload-list__item-refres {
position: static;
font-size: inherit;
color: inherit;
}
.tiny-upload-list--picture-card .tiny-progress {
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
bottom: auto;
width: 126px;
}
.tiny-upload-list--picture-card .tiny-progress .tiny-progress__text {
top: 50%;
}
.tiny-upload-list--picture .tiny-upload-list__item {
overflow: hidden;
z-index: 0;
background-color: var(--ti-upload-list-picture-card-item-bgcolor);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-top: 8px;
outline: 0;
}
.tiny-upload-list--picture .tiny-upload-list__item .tiny-icon-check {
fill: var(--ti-upload-list-picture-card-item-bgcolor);
}
.tiny-upload-list--picture .tiny-upload-list__item:hover .tiny-upload-list__item-status-label {
background: 0 0;
-webkit-box-shadow: none;
box-shadow: none;
top: -2px;
right: -12px;
}
.tiny-upload-list--picture .tiny-upload-list__item:hover .tiny-progress__text {
display: block;
}
.tiny-upload-list--picture .tiny-upload-list__item.is-success .tiny-upload-list__item-name {
line-height: 56px;
margin-top: 0;
}
.tiny-upload-list--picture .tiny-upload-list__item.is-success .tiny-upload-list__item-name .tiny-svg {
display: none;
}
.tiny-upload-list--picture .tiny-upload-list__item-thumbnail {
width: 56px;
height: 56px;
border: 1px solid var(--ti-upload-list-picture-card-item-border-color);
border-radius: var(--ti-upload-list-item-border-radius);
float: left;
position: relative;
z-index: 1;
vertical-align: middle;
margin-right: 12px;
}
.tiny-upload-list--picture .tiny-upload-list__item-name {
display: block;
line-height: 56px;
}
.tiny-upload-list--picture .tiny-upload-list__item-name .tiny-svg {
font-size: var(--ti-common-font-size-1);
}
.tiny-upload-list--picture .tiny-upload-list__item-status-label {
position: absolute;
right: -17px;
top: -7px;
width: 46px;
height: 26px;
background: var(--ti-upload-list-successful-status-color);
text-align: center;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.tiny-upload-list--picture .tiny-upload-list__item-status-label .tiny-svg {
font-size: var(--ti-upload-list-svg-icon-font-size);
margin-top: 12px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tiny-upload-list--picture .tiny-progress {
position: relative;
top: -7px;
}
.tiny-user {
--ti-user-font-size: var(--ti-common-font-size-base);
--ti-user-tag-background: var(--ti-base-color-hover-background);
--ti-user-svg-color: var(--ti-base-color-brand-6);
}
.tiny-user.mini {
height: 30px;
}
.tiny-user .tiny-user__select {
width: 100%;
}
.tiny-user .tiny-user__select .tiny-input .tiny-svg {
fill: var(--ti-user-svg-color);
}
.tiny-user .tiny-user__select .tiny-input.is-disabled .tiny-svg {
fill: var(--ti-input-normal-disabled-color);
}
.tiny-user .tiny-user__select .tiny-select__input {
height: 20px;
}
.tiny-user .tiny-user__ghost.tiny-tag {
background: var(--ti-user-tag-background);
}
.tiny-user_select {
max-width: 50%;
width: auto;
font-size: var(--ti-user-font-size);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tiny-user_select.left {
float: left;
margin-right: 4px;
}
.tiny-user_select.right {
float: right;
margin-left: 4px;
}
.tiny-user__select-dropdown {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-user-contact {
--ti-user-account-padding: 0 var(--ti-common-space-2x);
--ti-user-account-line-height: 36px;
}
.tiny-user-contact__main .user-account-pop {
padding: var(--ti-user-account-padding);
}
.tiny-user-contact__main .user-account-custom {
line-height: var(--ti-user-account-line-height);
}
.tiny-user-contact__main .tiny-logout {
line-height: var(--ti-user-account-line-height);
}
.tiny-card {
--ti-usercard-border-color: var(--ti-base-color-border);
--ti-usercard-image-radius: var(--ti-base-radius-large);
--ti-usercard-state-online: #33cc00;
--ti-usercard-state-busy: #ff3300;
--ti-usercard-state-goaway: #ffae00;
--ti-usercard-state-offline: #aeaeae;
border: 1px solid var(--ti-usercard-border-color);
-webkit-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);
}
.tiny-card .dialog-foot {
display: block;
}
.tiny-card .dialog-foot > div {
width: 100%;
text-align: center;
}
.tiny-card h5,
.tiny-card p {
margin: 5px 0;
}
.tiny-card .card-top {
margin-bottom: 10px;
}
.tiny-card .card-top img {
width: 80px;
height: 80px;
border-radius: var(--ti-usercard-image-radius, 3px);
}
.tiny-card .card-top .card-top-text {
padding: 5px 10px;
overflow: hidden;
}
.tiny-card .card-top .card-top-img,
.tiny-card .card-top .card-top-text {
display: inline-block;
vertical-align: middle;
}
.tiny-card .card-bottom {
text-align: center;
display: block;
height: 20px;
margin: 0 -20px -20px;
}
.tiny-card .espace-online {
color: var(--ti-usercard-state-online);
}
.tiny-card .espace-busy {
color: var(--ti-usercard-state-busy);
font-size: 23px;
vertical-align: middle;
margin-top: -5px;
}
.tiny-card .espace-goaway {
color: var(--ti-usercard-state-goaway);
background: #fff;
border-radius: 50%;
font-size: 13px;
}
.tiny-card .espace-offline {
color: var(--ti-usercard-state-offline);
font-size: 23px;
vertical-align: middle;
margin-top: -5px;
}
.tiny-user-contact {
--ti-user-contact-roleInfo-color: var(--ti-base-color-info-normal);
--ti-user-contact-roleInfo-font-size: var(--ti-common-font-size-base);
--ti-user-contact-card-message-color: var(--ti-base-color-placeholder);
--ti-user-contact-card-border-color: #ddd;
--ti-user-contact-card-header-background: #3f4251;
--ti-user-contact-card-header-role-color: var(--ti-base-color-light);
--ti-user-contact-card-header-role-font-size: var(--ti-common-font-size-2);
--ti-user-contact-card-header-roleNumber-color: #b9babc;
--ti-user-contact-card-espace-color: var(--ti-base-color-placeholder);
position: relative;
display: inline-block;
font-size: 0;
}
.tiny-user-contact .tiny-user-contact__main {
width: 300px;
overflow: visible;
font-size: var(--ti-user-contact-roleInfo-font-size);
}
.tiny-user-contact .tiny-user-contact__main .tiny-user-head {
height: 100%;
width: 86px;
float: left;
}
.tiny-user-contact .tiny-user-contact__main .tiny-user-head__portrait {
margin-top: 16px;
width: 54px;
height: 54px;
line-height: 54px;
margin-left: 20px;
}
.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role {
height: 100%;
width: auto;
float: left;
margin-left: 0;
}
.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role-name {
display: block;
width: 100%;
color: var(--ti-user-contact-card-header-role-color);
margin: 16px 0 6px;
height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ti-user-contact-card-header-role-font-size);
text-align: left;
}
.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role-number {
display: block;
color: var(--ti-user-contact-card-header-roleNumber-color);
}
.tiny-user-contact .tiny-user-contact__main .tiny-espace svg {
fill: var(--ti-user-contact-card-message-left-color);
}
.tiny-user-contact .tiny-user-contact__main .card-tools {
display: none;
}
.tiny-user-contact .tiny-user-contact__header {
line-height: 1.42857143;
border: 1px solid var(--ti-user-contact-card-border-color);
height: 86px;
background: var(--ti-user-contact-card-header-background);
opacity: 0.9;
}
.tiny-user-contact .tiny-user-contact__title {
display: block;
height: 100%;
font-size: var(--ti-user-contact-roleInfo-font-size);
font-weight: 400;
line-height: 46px;
}
.tiny-user-contact .tiny-user-contact__role {
display: inline-block;
color: var(--ti-user-contact-roleInfo-color);
margin-left: 8px;
vertical-align: middle;
font-size: var(--ti-user-contact-roleInfo-font-size);
line-height: 1.5;
}
.tiny-user-contact .tiny-user-contact__arrow {
margin-left: 4px;
font-size: var(--ti-user-contact-roleInfo-font-size);
vertical-align: middle;
fill: var(--ti-user-contact-roleInfo-color);
}
.tiny-user-contact .tiny-user-contact__message {
padding: 10px 20px;
}
.tiny-user-contact .tiny-user-contact__state {
text-align: left;
margin-bottom: 0;
}
.tiny-user-contact .tiny-user-contact__state:nth-of-type(2) {
margin-top: 3px;
}
.tiny-user-contact .tiny-user-contact__state:nth-of-type(3) {
margin-top: 3px;
}
.tiny-user-contact .tiny-user-contact__state-left {
color: var(--ti-user-contact-card-message-color);
opacity: 1;
font-size: var(--ti-common-font-size-base);
font-family: MicrosoftYaHei;
line-height: 16px;
text-align: left;
width: auto;
margin-right: 0;
}
.tiny-user-contact .tiny-user-contact__state-right {
color: var(--ti-user-contact-card-message-color);
opacity: 1;
font-size: var(--ti-common-font-size-base);
font-family: MicrosoftYaHei;
line-height: 16px;
}
.tiny-user-contact.tiny-popover.tiny-popper {
padding: 0;
border: 0;
border-radius: 0;
}
.tiny-user-contact .tiny-card-template__header.is-line {
height: auto;
border-bottom: 0;
padding: 0;
}
.tiny-user-contact .tiny-card-template__body {
padding: 0;
border: 1px solid var(--ti-user-contact-card-border-color);
}
.tiny-user-contact .tiny-user-head {
position: relative;
display: inline-block;
vertical-align: middle;
}
.tiny-user-contact .tiny-espace {
padding: 0 20px 10px;
}
.tiny-user-contact .tiny-espace .item-call,
.tiny-user-contact .tiny-espace .item-email,
.tiny-user-contact .tiny-espace .item-talk {
color: var(--ti-user-contact-card-espace-color);
}
.tiny-user-contact.show-arrow .tiny-user-contact__main {
width: auto;
}
.tiny-user-contact.show-arrow .tiny-user-contact__main .user-account-custom {
line-height: 30px;
}
.tiny-user-contact.show-arrow .tiny-user-contact__main .tiny-logout {
line-height: 30px;
}
.tiny-user-contact.show-arrow .tiny-card-template__body {
min-width: 180px;
border-radius: 4px;
}
.tiny-user-head {
--ti-userhead-head-size-normal: var(--ti-common-size-18x);
--ti-userhead-head-size-small: 30px;
--ti-userhead-head-icon-normal: var(--ti-common-size-10x);
--ti-userhead-head-icon-small: 14px;
--ti-userhead-head-radius: var(--ti-common-border-radius-1);
display: inline-block;
position: relative;
}
.tiny-user-head__portrait {
overflow: hidden;
width: var(--ti-userhead-head-size-normal);
height: var(--ti-userhead-head-size-normal);
line-height: var(--ti-userhead-head-size-normal);
text-align: center;
border-radius: var(--ti-userhead-head-radius);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.tiny-user-head__portrait.round {
border-radius: 50%;
}
.tiny-user-head__portrait.min {
width: var(--ti-userhead-head-size-small);
height: var(--ti-userhead-head-size-small);
line-height: var(--ti-userhead-head-size-small);
}
.tiny-user-head__portrait.icon {
font-size: var(--ti-userhead-head-icon-normal);
}
.tiny-user-head__portrait.icon.min {
font-size: var(--ti-userhead-head-icon-small);
}
.tiny-user-head__portrait.icon svg {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tiny-user-head__portrait.label > span {
overflow: hidden;
width: calc(100% - 6px);
display: block;
margin: 0 3px;
}
.tiny-user-head__message {
position: absolute;
top: -9px;
left: 63px;
height: 18px;
line-height: 16px;
min-width: 18px;
width: auto;
border-radius: 9px;
background: red;
color: #fff;
text-align: center;
padding: 0 2px;
border: 2px solid #fff;
font-size: var(--ti-common-font-size-base);
word-break: initial;
}
.tiny-user-head__message.round {
top: 0;
left: 54px;
}
.tiny-user-head__message.min {
top: -9px;
left: 21px;
}
.tiny-user-head__message.basic {
top: -4px;
left: 68px;
height: 8px;
width: 8px;
min-width: 8px;
line-height: 0;
border-radius: 4px;
}
.tiny-user-head__message.basic.round {
top: 10px;
left: 64px;
}
.tiny-user-head__message.basic.min {
top: -4px;
left: 26px;
}
.tiny-user-head__message.basic.min.round {
top: 0;
}
.tiny-userlink {
--ti-user-link-font-size: var(--ti-common-font-size-base);
--ti-user-link-color: var(--ti-base-color-info-normal);
--ti-user-link-font-weight: var(--ti-common-font-weight-7);
--ti-user-link-border-radius: var(--ti-base-radius-large);
}
.tiny-userlink li {
float: left;
list-style: none;
}
.tiny-userlink li .tiny-popover__reference {
font-size: var(--ti-common-font-size-base);
color: #1890ff;
}
.tiny-userlink li .tiny-popover__reference:hover {
color: #40a9ff;
text-decoration: none;
cursor: pointer;
}
.tiny-userlink .tiny-user-card {
width: 600px;
}
.tiny-user-card .card-box {
font-size: var(--ti-user-link-font-size);
color: var(--ti-user-link-color);
font-weight: var(--ti-user-link-font-weight);
}
.tiny-user-card .card-box .card-box__body .card-top-img,
.tiny-user-card .card-box .card-box__body .card-top-text {
display: inline-block;
vertical-align: middle;
}
.tiny-user-card .card-box .card-box__body .card-top-img {
width: 80px;
border-radius: var(--ti-user-link-border-radius);
}
.tiny-user-card .card-box .card-box__body .card-top-img img {
width: 100%;
}
.tiny-user-card .card-box .card-box__body .card-top-text {
padding: 5px 10px;
overflow: hidden;
}
.tiny-user-card .card-box .card-box__body .card-center {
margin-top: 10px;
}
.tiny-user-card .card-box .box__footer {
text-align: center;
cursor: pointer;
}
.tiny-user-card .card-box p {
margin: 5px 0;
}
.tiny-user-card.tiny-popover.tiny-popper {
padding: 24px;
}
.tiny-wizard {
--ti-wizard-font-size: var(--ti-common-font-size-base);
--ti-wizard-color: var(--ti-base-color-info-normal);
--ti-wizard-icon-color: var(--ti-base-color-light);
--ti-wizard-icon-bgcolor: var(--ti-base-color-brand-6);
--ti-wizard-detail-border-radius: var(--ti-common-border-radius-normal);
--ti-wizard-detail-background: var(--ti-base-color-warning-normal);
--ti-wizard-chart-icon-bgcolor: #d9d9d9;
}
.tiny-wizard .tiny-wizard__nomarl .tiny-wizard__steps {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-wizard .tiny-wizard__nomarl .tiny-wizard__chart span {
display: inline-block;
}
.tiny-wizard .tiny-wizard__nomarl .tiny-wizard__name {
margin-top: 6px;
overflow: hidden;
text-align: center;
}
.tiny-wizard .tiny-wizard__nomarl .tiny-wizard__name .name {
font-size: var(--ti-wizard-font-size);
width: 100%;
}
.tiny-wizard .tiny-wizard__nomarl .tiny-wizard__button {
margin-top: 10px;
text-align: right;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon {
color: var(--ti-wizard-icon-color);
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon .tiny-wizard__chart-line,
.tiny-wizard
.tiny-wizard__vertical
.tiny-wizard__steps-item.is-doing
.tiny-wizard__chart-icon
.tiny-wizard__chart-line.is-time-line {
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__steps-item:last-child > ul .tiny-wizard__chart-line {
background: 0 0;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-line {
height: 88px;
width: 4px;
top: 0;
position: relative;
display: inline-block;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-name {
font-size: var(--ti-common-font-size-1);
margin-left: 15px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: -5px;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-icon {
position: relative;
left: 50%;
top: -14px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__time-wrapper {
position: relative;
left: 50%;
top: -14px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
fill: var(--ti-wizard-icon-bgcolor);
font-size: var(--ti-common-font-size-5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 24px;
height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-radius: 50%;
text-align: center;
background: var(--ti-wizard-icon-color);
border: 2px solid var(--ti-wizard-icon-bgcolor);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__time-wrapper .tiny-svg {
width: 16px;
height: 20px;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-children {
position: relative;
}
.tiny-wizard .tiny-wizard__vertical .tiny-wizard__chart-children .children-name {
position: absolute;
margin-left: 15px;
}
.tiny-wizard .tiny-wizard__date {
min-width: 100px;
width: auto;
color: var(--ti-wizard-color);
font-size: var(--ti-wizard-font-size);
line-height: 1.2em;
display: inline-block;
text-align: right;
position: relative;
top: -24px;
right: 15px;
}
.tiny-wizard .tiny-wizard__date .date-icon {
margin-left: 4px;
}
.tiny-wizard .tiny-wizard__date span {
vertical-align: middle;
}
.tiny-wizard .tiny-wizard__date.time-line-text {
top: -14px;
}
.tiny-wizard .tiny-wizard__steps-item.is-ready .name {
color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-icon {
color: var(--ti-wizard-icon-color);
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-line {
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__steps-item ul {
list-style: none;
}
.tiny-wizard .tiny-wizard__chart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.tiny-wizard .tiny-wizard__chart > .tiny-wizard__chart-svg > .tiny-svg {
font-size: var(--ti-common-font-size-4);
fill: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__chart-icon,
.tiny-wizard .tiny-wizard__chart-children.is-ready .tiny-wizard__chart-icon,
.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-icon,
.tiny-wizard .tiny-wizard__steps-item.is-ready .tiny-wizard__chart-icon {
color: var(--ti-wizard-icon-color);
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__chart-children.is-doing .tiny-wizard__chart-line,
.tiny-wizard .tiny-wizard__steps-item.is-doing .tiny-wizard__chart-line {
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__chart-children.is-ready .tiny-wizard__chart-line,
.tiny-wizard .tiny-wizard__chart-line.is-time-line {
background: var(--ti-wizard-icon-bgcolor);
border-color: var(--ti-wizard-icon-bgcolor);
}
.tiny-wizard .tiny-wizard__chart-detail {
padding: 4px 8px;
border-radius: 2px;
border-radius: var(--ti-wizard-detail-border-radius, 2px);
min-height: 26px;
height: auto;
line-height: 1;
margin-left: 12px;
text-align: center;
display: inline-block;
position: absolute;
top: -14px;
}
.tiny-wizard .tiny-wizard__chart-detail:hover {
background: var(--ti-wizard-detail-background);
}
.tiny-wizard .tiny-wizard__chart-detail:hover::before {
content: '';
width: 0;
height: 0;
margin-top: -4px;
border-style: solid;
border-width: 4px 4px 4px 0;
border-color: transparent var(--ti-wizard-detail-background);
position: absolute;
left: -4px;
top: 10px;
}
.tiny-wizard .tiny-wizard__chart-detail:hover .detail-title,
.tiny-wizard .tiny-wizard__chart-detail:hover .tiny-user-contact__role {
color: var(--ti-wizard-icon-color);
}
.tiny-wizard .tiny-wizard__chart-detail .detail-title {
color: var(--ti-wizard-color);
font-size: var(--ti-common-font-size-1);
font-weight: 700;
margin-bottom: 8px;
}
.tiny-wizard .tiny-wizard__chart-icon {
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
font-size: var(--ti-common-font-size-base);
text-align: center;
background: var(--ti-wizard-chart-icon-bgcolor);
color: var(--ti-wizard-icon-color);
-webkit-box-sizing: content-box;
box-sizing: content-box;
display: inline-block;
}
.tiny-wizard .tiny-wizard__chart-icon.time-line-icon {
width: 10px;
height: 10px;
line-height: 10px;
}
.tiny-wizard .tiny-svg,
.tiny-wizard .tiny-wizard__chart-icon,
.tiny-wizard .tiny-wizard__chart-name,
.tiny-wizard .tiny-wizard__date {
cursor: pointer;
}
.tiny-wizard .tiny-wizard__chart-line {
height: 4px;
background: #c2c4c7;
width: 50px;
}
.tiny-wizard .tiny-wizard__chart-line .tiny-wizard__chart-icon-time {
font-size: var(--ti-common-font-size-4);
fill: var(--ti-wizard-icon-bgcolor);
background: var(--ti-wizard-icon-color);
}
.tiny-wizard .tiny-user-contact .dropdown-part .tiny-user-head,
.tiny-wizard .tiny-user-contact .tiny-svg {
display: none;
}
.tiny-wizard .tiny-user-contact .tiny-user-contact__role span {
display: inline-block;
}