forked from opentiny/tiny-engine
24982 lines
745 KiB
CSS
24982 lines
745 KiB
CSS
[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;
|
|
}
|