html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
.header {
height: 64px;
background: #ffffff;
line-height: 64px;
}
.icon {
width: 80px;
vertical-align: middle;
padding: 0 8px;
}
.link {
padding: 0 8px;
}
.body {
padding-top: 64px;
}
.body .wapper {
max-width: 100%;
padding: 40px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.body .wapper .main {
width: 100%;
}
.body .wapper .main .menu-wapper {
width: 298px;
font-size: 14px;
line-height: 30px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-y: overlay;
position: fixed;
top: 0;
bottom: 0;
margin-top: 64px;
-webkit-transition: padding-top 0.3s;
transition: padding-top 0.3s;
z-index: 99;
background: #fff;
color: #212121;
border-right: 1px solid #f0f0f0;
font-family: PingFangSC-Regular, "PingFang SC", serif;
}
.body .wapper .main .menu-wapper::-webkit-scrollbar-thumb:hover {
display: block !important;
}
.body .wapper .main .menu-wapper .menu {
min-height: 100%;
}
.body .wapper .main .menu-wapper .menu .menu-list {
min-height: 100%;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-item-title {
line-height: 40px;
color: #333333;
font-size: 14px;
}
.body .wapper .main .menu-wapper .menu .menu-list .sub-menu-item-title {
line-height: 40px;
}
.body .wapper .main .menu-wapper .menu .menu-list .sub-menu-item {
color: #333333;
font-size: 14px;
}
.body .wapper .main .menu-wapper .menu .menu-list .is-active {
background: rgba(35, 134, 238, 0.1);
color: #3863ff;
border-left: 4px solid;
}
.body .wapper .main .menu-wapper .menu .menu-list .is-active a {
color: #3863ff !important;
-webkit-transform: translateX(-4px);
transform: translateX(-4px);
}
.body .wapper .main .menu-wapper .menu .menu-list a {
display: inline-block;
width: 100%;
height: 100%;
color: #333333;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper > ul > li.menu-item-title {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 20px;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper > ul > li.sub-menu-item .menu-item-title a {
font-size: 14px;
font-weight: 400;
color: #212121;
line-height: 20px;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper .menu-item-title {
padding-left: 40px;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper .menu-item-title:hover a {
color: #276FF5 !important;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper .menu-item-title.is-active {
padding-left: 36px;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper > .menu-item-title,
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper > ul > .menu-item-title {
font-size: 14px;
margin: 6px 0;
}
.body .wapper .main .menu-wapper .menu .menu-list .menu-components-wapper .sub-menu-item .menu-item-title {
padding-left: 60px;
}
.body .wapper .main .content {
position: relative;
margin-left: 300px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.body .wapper .main .content .content-wapper {
padding: 0 0 20px 40px;
}
.body .wapper .main .content .content-wapper > article {
/* stylelint-disable-next-line */
width: calc(100% - 300px);
}
.body .wapper .main .content .prev-next-nav {
margin-right: 40px;
margin-left: 40px;
font-size: 14px;
line-height: 22px;
/* stylelint-disable-next-line */
width: calc(100% - 340px);
display: inline-block;
}
.body .wapper .main .content .prev-next-nav > .prev-page,
.body .wapper .main .content .prev-next-nav > .next-page {
width: 50%;
height: 72px;
line-height: 72px;
text-decoration: none;
color: #5e6d82;
}
.body .wapper .main .content .prev-next-nav > .prev-page:hover,
.body .wapper .main .content .prev-next-nav > .next-page:hover {
color: #5582f3;
}
.body .wapper .main .content .prev-next-nav > .prev-page span,
.body .wapper .main .content .prev-next-nav > .next-page span {
padding: 5px;
}
.body .wapper .main .content .prev-next-nav .next-page {
float: right;
text-align: right;
}
.body .wapper .main .content .toc-wapper {
position: absolute;
background: #fff;
width: 160px;
top: 0;
bottom: 0;
right: 75px;
z-index: 90;
}
.body .wapper .main .content .toc-wapper .toc {
position: fixed;
top: 90px;
line-height: 24px;
font-size: 14px;
max-height: calc(100vh - 125px);
overflow-y: auto;
}
.body .wapper .main .content .toc-wapper .toc li {
list-style: none;
}
.body .wapper .main .content .toc-wapper .toc li a {
display: inline-block;
border-left: 1px solid #f0f0f0;
padding-left: 20px;
font-weight: 200;
color: #98a1a8;
line-height: 30px;
}
.body .wapper .main .content .toc-wapper .toc li a.current {
color: #3863ff;
border-color: #3863ff;
}
@media (max-width: 576px) {
.body .wapper {
padding: 0;
}
.body .wapper .main .menu-wapper {
display: none;
}
.body .wapper .main .content {
margin: 0;
}
.body .wapper .main .content .toc-wapper {
display: none;
}
.body .wapper .main .content .content-wapper > article {
width: 100%;
overflow: hidden;
}
}
.markdown {
color: #666666;
line-height: 22px;
font-size: 14px;
}
.markdown > h2 {
padding-top: 80px;
margin-top: -40px !important;
font-size: 24px !important;
font-weight: normal;
}
.markdown p {
margin: 8px 0;
line-height: 28px;
}
.markdown h1 {
font-size: 32px;
color: #212121;
line-height: 33px;
margin-bottom: 20px;
}
.markdown h1 .md-subtitle {
display: inline-block;
margin-left: 12px;
}
.markdown h2,
.markdown h3 {
font-size: 24px;
line-height: 32px;
color: #333333;
margin: 24px 0 16px 0;
}
.markdown h2 .anchor,
.markdown h3 .anchor {
margin-left: 8px;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
color: #5582f3;
}
.markdown h2:hover a,
.markdown h3:hover a {
color: #5582f3;
opacity: 1;
}
.markdown h3 {
font-size: 16px;
color: #212121;
margin: 80px 0 16px 0;
}
.markdown h4 .anchor {
margin-left: 8px;
opacity: 0;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.markdown a {
color: #5582f3;
}
.markdown strong {
color: #111;
margin: 10px 0;
display: inline-block;
}
.markdown code {
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: #f9f9f9;
border: 1px solid #f0f0f0;
border-radius: 3px;
}
.markdown pre[class*='language-'] {
background-color: #f9f9f9;
border: none;
}
.markdown pre[class*='language-'] code {
display: block;
border: none;
line-height: 22px;
background-color: #f9f9f9;
}
.markdown ul,
.markdown ol {
list-style: none;
}
.markdown ul li,
.markdown ol li {
margin-left: 20px;
}
.markdown ol li {
list-style-type: decimal;
}
.markdown ul li {
list-style-type: disc;
}
.markdown ul li p {
margin: 3px 0;
}
.markdown table {
margin: 2em 0;
font-size: 14px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
line-height: 1.5715;
border: none;
width: 100%;
}
.markdown table th,
.markdown table td {
text-align: left;
vertical-align: middle;
padding: 12px;
border-bottom: 1px solid #f0f0f0;
line-height: 28px;
}
.markdown table th {
color: #212121;
line-height: 28px;
font-weight: 600;
}
.markdown table tbody tr {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.markdown table tbody tr:hover {
background: rgba(60, 90, 100, 0.04);
}
.markdown table td {
color: #5e6d82;
font-size: 14px;
}
.markdown table td:first-child {
width: 16%;
}
.markdown table td:nth-child(4) {
width: 10%;
}
.markdown table td:nth-child(5) {
width: 24%;
}
.markdown table hr {
margin: 12px 0;
}
.token-table td {
width: 20% !important;
}
.token-table td:nth-child(2) {
width: 40% !important;
}
.markdown-demo {
color: #5e6d82;
line-height: 22px;
font-size: 14px;
border-top: 1px solid #f0f0f0;
margin-top: 60px;
padding-top: 40px;
}
.markdown-demo .demo {
padding: 8px 0;
}
.markdown-demo .demo .preview {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.markdown-demo .demo .preview .demo-title {
padding-top: 80px;
margin-top: -57px;
font-size: 24px;
color: #333333;
}
.markdown-demo .demo .preview .demo-description {
color: #666666;
margin: 14px 0;
}
.markdown-demo .demo .preview .demo-description code {
margin: 0 1px;
padding: 0.2em 0.4em;
font-size: 0.9em;
background: #f9f9f9;
border: 1px solid #f0f0f0;
border-radius: 3px;
}
.markdown-demo .demo .preview .demo-content {
text-align: center;
color: #666666;
min-height: 92px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.markdown-demo .demo .preview .demo-content > .demo-component {
width: 100%;
padding: 32px 0;
border: 1px solid #f0f0f0;
}
.markdown-demo .demo .preview .demo-content > .demo-component > div {
display: inline-block;
text-align: left;
}
.markdown-demo .demo .preview .demo-content > .demo-component > div > * {
margin: auto;
}
.markdown-demo .demo .code-expand {
height: 40px;
background: #fff;
text-align: right;
line-height: 40px;
padding-right: 6px;
color: #bbbbbb;
cursor: pointer;
width: 100%;
}
.markdown-demo .demo .code-expand form {
display: inline-block;
margin-right: 10px;
text-align: center;
vertical-align: middle;
margin-top: 4px;
}
.markdown-demo .demo .code-expand > *:hover {
color: #5582f3;
}
.markdown-demo .demo .code-content {
-webkit-transition: height 0.2s;
transition: height 0.2s;
overflow: hidden;
width: 100%;
}
.markdown-demo .demo .code-content div {
font-size: 12px;
}
.markdown-demo .demo pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.browser-mockup {
width: 100%;
position: relative;
border-top: 2em solid rgba(230, 230, 230, 0.7);
border-radius: 3px 3px 0 0;
-webkit-box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
}
.browser-mockup::before {
position: absolute;
top: -1.25em;
left: 1em;
display: block;
width: 0.5em;
height: 0.5em;
background-color: #f44;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
content: '';
}
.browser-mockup.with-tab::after {
position: absolute;
top: -2em;
left: 5.5em;
display: block;
width: 20%;
height: 0;
border-right: 0.8em solid transparent;
border-bottom: 2em solid white;
border-left: 0.8em solid transparent;
content: '';
}
.browser-mockup.with-url::after {
position: absolute;
top: -1.6em;
left: 5.5em;
display: block;
width: calc(100% - 6em);
height: 1.2em;
background-color: white;
border-radius: 2px;
content: '';
}
.browser-mockup > * {
display: block;
}
.iframe-demo {
width: 100%;
}
.highlight {
position: relative;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
overflow: hidden;
white-space: pre;
font-family: monospace;
color: #393a34;
background-color: #f6f8fa;
}
.highlight pre {
margin: 0;
padding: 0;
}
.highlight:not(:first-child) {
border-top: 1px dashed #999;
}
/**
* GHColors theme by Avi Aryan (http://aviaryan.in)
* Inspired by Github syntax coloring
*/
code[class*='language-'],
pre[class*='language-'] {
color: #393a34;
font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
font-size: 0.9em;
line-height: 1.2em;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre > code[class*='language-'] {
font-size: 1em;
}
pre[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
background: #b3d4fc;
}
pre[class*='language-']::-moz-selection, pre[class*='language-'] ::-moz-selection, code[class*='language-']::-moz-selection, code[class*='language-'] ::-moz-selection {
background: #b3d4fc;
}
pre[class*='language-']::selection,
pre[class*='language-'] ::selection,
code[class*='language-']::selection,
code[class*='language-'] ::selection {
background: #b3d4fc;
}
/* Code blocks */
pre[class*='language-'] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
border: 1px solid #dddddd;
background-color: white;
}
/* Inline code */
:not(pre) > code[class*='language-'] {
padding: 0.2em;
padding-top: 1px;
padding-bottom: 1px;
background: #f8f8f8;
border: 1px solid #dddddd;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999988;
font-style: italic;
}
.token.namespace {
opacity: 0.7;
}
.token.string,
.token.attr-value {
color: #e3116c;
}
.token.punctuation,
.token.operator {
color: #393a34;
/* no highlight */
}
.token.entity,
.token.url,
.token.symbol,
.token.number,
.token.boolean,
.token.variable,
.token.constant,
.token.property,
.token.regex,
.token.inserted {
color: #36acaa;
}
.token.atrule,
.token.keyword,
.token.attr-name,
.language-autohotkey .token.selector {
color: #00a4db;
}
.token.function,
.token.deleted,
.language-autohotkey .token.tag {
color: #9a050f;
}
.token.tag,
.token.selector,
.language-autohotkey .token.keyword {
color: #00009f;
}
.token.important,
.token.function,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.icon-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 16.6%;
height: 154px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 30px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.icon-item:hover {
background: #F1F4FD;
color: #3863FF;
cursor: pointer;
}
.icon-alert {
width: 600px;
left: 50%;
margin-left: -300px;
}
body::-webkit-scrollbar-thumb:hover {
display: block !important;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.home-banner {
position: relative;
height: 641px;
overflow: hidden;
background-color: #276ff5;
background-position: center;
background-position: right 8em bottom 80px;
background-repeat: no-repeat;
}
.home-banner .home-banner-holder {
position: relative;
z-index: 1;
margin: 200px 100px 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.home-banner .home-banner-holder .home-banner-img {
width: 50%;
position: absolute;
left: 45%;
bottom: -25%;
}
.home-banner .home-banner-holder .home-banner-img img {
width: 100%;
}
.home-banner .home-banner-content {
font-size: 16px;
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.home-banner .home-banner-content .home-banner-text {
width: 520px;
font-size: 50px;
line-height: 67px;
color: #ffffff;
margin-bottom: 75px;
}
.home-banner .home-banner-content button {
width: 190px;
height: 58px;
-webkit-box-shadow: 0 4px 17px 0 rgba(0, 17, 255, 0.25);
box-shadow: 0 4px 17px 0 rgba(0, 17, 255, 0.25);
border-radius: 29px;
font-size: 28px;
font-weight: 200;
color: #ffffff;
line-height: 40px;
}
.home-content {
max-width: 1208px;
margin: 0 auto;
text-align: center;
}
.home-content .home-block-content {
margin-top: 70px;
margin-bottom: 120px;
}
.home-content .home-block-content .title {
font-size: 40px;
color: #0d1a26;
line-height: 53px;
font-weight: normal;
}
.home-content .home-block-content .wrapper {
margin-top: 26px;
width: 100%;
text-align: center;
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;
margin-left: -12px;
margin-right: -12px;
row-gap: 32px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.home-content .home-block-content .wrapper .item {
display: block;
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
padding-left: 12px;
padding-right: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.home-content .home-block-content .wrapper .item .item_card {
border: 1px solid #efefef;
padding-top: 24px;
}
.home-content .home-block-content .wrapper .item img {
margin-top: 20px;
width: 80px;
}
.home-content .home-block-content .wrapper .item h3 {
margin-top: 10px;
color: #0d1a26;
font-size: 22px;
}
.home-content .home-block-content .wrapper .item p {
text-align: left;
font-size: 14px;
color: #697b8c;
line-height: 25px;
padding: 20px 30px 20px 30px;
min-height: 76px;
white-space: normal;
text-overflow: clip;
word-break: break-all;
}
@media (max-width: 768px) {
.home-content .home-block-content .wrapper .item p {
padding: 20px 10px;
}
}
@media (max-width: 576px) {
.home-content .home-block-content {
margin: 50px 14px;
}
.home-content .home-block-content .title {
font-size: 24px;
}
.home-content .home-block-content .wrapper {
margin-top: 10px;
grid-template-columns: repeat(2, 50%);
}
.home-content .home-block-content .wrapper .item {
padding: 6px;
}
.home-content .home-block-content .wrapper .item .item_card svg {
width: 40px !important;
height: 40px !important;
}
.home-content .home-block-content .wrapper .item h3 {
font-size: 17px;
}
.home-content .home-block-content .wrapper .item p {
font-size: 12px;
padding: 20px 10px;
}
.home-banner {
height: 460px;
background-image: url(/1f20542c028affa8c9a0a6a486e88ce3.png);
background-position: center;
background-size: cover;
}
.home-banner .home-banner-holder {
visibility: hidden;
}
body #react-content .home {
margin-top: 50px;
}
}
@media (min-width: 1025px) and (max-width: 1366px) {
.home-banner .home-banner-holder .home-banner-content .home-banner-content-title .home-banner-text {
font-size: 40px;
width: 450px;
}
}
@media (min-width: 577px) and (max-width: 1024px) {
.home-banner .home-banner-holder {
margin-right: 0;
}
.home-banner .home-banner-holder .home-banner-content {
width: unset;
margin-left: 30px;
}
.home-banner .home-banner-holder .home-banner-content .home-banner-content-title .home-banner-text {
font-size: 40px;
width: 450px;
}
}
.item:hover #star {
-webkit-animation: animationFrames0 linear 1s;
animation: animationFrames0 linear 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 25% 25%;
transform-origin: 25% 25%;
transform-box: fill-box;
}
@-webkit-keyframes animationFrames0 {
0% {
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
transform: rotate(0deg) scaleX(1) scaleY(1);
}
10% {
-webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
20% {
-webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
30% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
40% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
50% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
60% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
70% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
80% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
90% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
100% {
-webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2);
transform: rotate(0deg) scaleX(1.2) scaleY(1.2);
}
}
@keyframes animationFrames0 {
0% {
-webkit-transform: rotate(0deg) scaleX(1) scaleY(1);
transform: rotate(0deg) scaleX(1) scaleY(1);
}
10% {
-webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
20% {
-webkit-transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
transform: rotate(-3deg) scaleX(0.8) scaleY(0.8);
}
30% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
40% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
50% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
60% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
70% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
80% {
-webkit-transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(-3deg) scaleX(1.2) scaleY(1.2);
}
90% {
-webkit-transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
transform: rotate(3deg) scaleX(1.2) scaleY(1.2);
}
100% {
-webkit-transform: rotate(0deg) scaleX(1.2) scaleY(1.2);
transform: rotate(0deg) scaleX(1.2) scaleY(1.2);
}
}
.item:hover #load {
-webkit-animation: animationFrames3 linear 1s;
animation: animationFrames3 linear 1s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transform-box: fill-box;
-webkit-transform: translate(16, 28);
transform: translate(16, 28);
}
@-webkit-keyframes animationFrames3 {
0% {
opacity: 1;
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
25% {
opacity: 1;
-webkit-transform: scaleX(0.95) scaleY(0.95);
transform: scaleX(0.95) scaleY(0.95);
}
50% {
opacity: 1;
-webkit-transform: scaleX(1.1) scaleY(1.1);
transform: scaleX(1.1) scaleY(1.1);
}
100% {
opacity: 0;
-webkit-transform: scaleX(0.3) scaleY(0.3);
transform: scaleX(0.3) scaleY(0.3);
}
}
@keyframes animationFrames3 {
0% {
opacity: 1;
-webkit-transform: scaleX(1) scaleY(1);
transform: scaleX(1) scaleY(1);
}
25% {
opacity: 1;
-webkit-transform: scaleX(0.95) scaleY(0.95);
transform: scaleX(0.95) scaleY(0.95);
}
50% {
opacity: 1;
-webkit-transform: scaleX(1.1) scaleY(1.1);
transform: scaleX(1.1) scaleY(1.1);
}
100% {
opacity: 0;
-webkit-transform: scaleX(0.3) scaleY(0.3);
transform: scaleX(0.3) scaleY(0.3);
}
}
.item:hover #keyboard {
-webkit-animation: animationKeyboard ease 1s;
animation: animationKeyboard ease 1s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
/* Chrome 16+, Safari 4+ */
}
@-webkit-keyframes animationKeyboard {
0% {
opacity: 0;
-webkit-transform: translate(-1500px, 0);
transform: translate(-1500px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
80% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes animationKeyboard {
0% {
opacity: 0;
-webkit-transform: translate(-1500px, 0);
transform: translate(-1500px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate(30px, 0);
transform: translate(30px, 0);
}
80% {
-webkit-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
100% {
opacity: 1;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
.item:hover #inter {
-webkit-animation: animationinter linear 0.8s;
animation: animationinter linear 0.8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes animationinter {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
15% {
-webkit-transform: translate(0, -25px);
transform: translate(0, -25px);
}
30% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
45% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
60% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
@keyframes animationinter {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
15% {
-webkit-transform: translate(0, -25px);
transform: translate(0, -25px);
}
30% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
45% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
60% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
75% {
-webkit-transform: translate(0, -5px);
transform: translate(0, -5px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/*! rtl:begin:ignore */
@-webkit-keyframes loadingcircle {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadingcircle {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rtlloadingcircle {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@keyframes rtlloadingcircle {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
@-webkit-keyframes waveEffect {
100% {
-webkit-box-shadow: 0 0 0 6px #5582f3;
box-shadow: 0 0 0 6px #5582f3;
}
}
@keyframes waveEffect {
100% {
-webkit-box-shadow: 0 0 0 6px #5582f3;
box-shadow: 0 0 0 6px #5582f3;
}
}
@-webkit-keyframes fadeEffect {
100% {
opacity: 0;
}
}
@keyframes fadeEffect {
100% {
opacity: 0;
}
}
@-webkit-keyframes kdRadioEffect {
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 kdRadioEffect {
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 kdRadioLeaveEffect {
50% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
}
@keyframes kdRadioLeaveEffect {
50% {
-webkit-transform: translateY(-50%) scale(1.2);
transform: translateY(-50%) scale(1.2);
}
100% {
-webkit-transform: translateY(-50%) scale(0);
transform: translateY(-50%) scale(0);
}
}
@-webkit-keyframes kdRadioSquareEffect {
0% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
-webkit-transform: rotate(45deg) scale(1.2);
transform: rotate(45deg) scale(1.2);
}
100% {
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
@keyframes kdRadioSquareEffect {
0% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
50% {
-webkit-transform: rotate(45deg) scale(1.2);
transform: rotate(45deg) scale(1.2);
}
100% {
-webkit-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
}
@-webkit-keyframes kdRadioSquareLeaveEffect {
50% {
-webkit-transform: rotate(45deg) scale(1.2);
transform: rotate(45deg) scale(1.2);
}
100% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@keyframes kdRadioSquareLeaveEffect {
50% {
-webkit-transform: rotate(45deg) scale(1.2);
transform: rotate(45deg) scale(1.2);
}
100% {
-webkit-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
}
}
@-webkit-keyframes kdZoomBounceEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kdZoomBounceEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kdZoomBounceLeaveEffect {
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes kdZoomBounceLeaveEffect {
50% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-webkit-keyframes kdZoomBounceDefaultEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes kdZoomBounceDefaultEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes kdZoomEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
}
100% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes kdZoomEffect {
0% {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
}
100% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes kdZoomLeaveEffect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
}
100% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes kdZoomLeaveEffect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
}
100% {
-webkit-transform-origin: 45% 77%;
transform-origin: 45% 77%;
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-webkit-keyframes kdNoticeEffect {
0% {
-webkit-transform: translateY(-15px) scale(0.8);
transform: translateY(-15px) scale(0.8);
opacity: 0;
}
}
@keyframes kdNoticeEffect {
0% {
-webkit-transform: translateY(-15px) scale(0.8);
transform: translateY(-15px) scale(0.8);
opacity: 0;
}
}
@-webkit-keyframes kdNoticeLeaveEffect {
100% {
-webkit-transform: translateY(-15px) scale(0.8);
transform: translateY(-15px) scale(0.8);
opacity: 0;
}
}
@keyframes kdNoticeLeaveEffect {
100% {
-webkit-transform: translateY(-15px) scale(0.8);
transform: translateY(-15px) scale(0.8);
opacity: 0;
}
}
@-webkit-keyframes kdModalEffect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes kdModalEffect {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
.top-active {
-webkit-animation-name: kdZoomBottomIn;
animation-name: kdZoomBottomIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.top.hidden {
-webkit-animation-name: kdZoomBottomOut;
animation-name: kdZoomBottomOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.left-active {
-webkit-animation-name: kdZoomRightIn;
animation-name: kdZoomRightIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.left.hidden {
-webkit-animation-name: kdZoomRightOut;
animation-name: kdZoomRightOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.right-active {
-webkit-animation-name: kdZoomLeftIn;
animation-name: kdZoomLeftIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.right.hidden {
-webkit-animation-name: kdZoomLeftOut;
animation-name: kdZoomLeftOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.bottom-active {
-webkit-animation-name: kdZoomTopIn;
animation-name: kdZoomTopIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.bottom.hidden {
-webkit-animation-name: kdZoomTopOut;
animation-name: kdZoomTopOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.topLeft-active {
-webkit-animation-name: kdZoomLeftBottomIn;
animation-name: kdZoomLeftBottomIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.topLeft.hidden {
-webkit-animation-name: kdZoomLeftBottomOut;
animation-name: kdZoomLeftBottomOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.rightBottom-active {
-webkit-animation-name: kdZoomLeftBottomIn;
animation-name: kdZoomLeftBottomIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.rightBottom.hidden {
-webkit-animation-name: kdZoomLeftBottomOut;
animation-name: kdZoomLeftBottomOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.topRight-active {
-webkit-animation-name: kdZoomRightBottomIn;
animation-name: kdZoomRightBottomIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.topRight.hidden {
-webkit-animation-name: kdZoomRightBottomOut;
animation-name: kdZoomRightBottomOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.leftBottom-active {
-webkit-animation-name: kdZoomRightBottomIn;
animation-name: kdZoomRightBottomIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.leftBottom.hidden {
-webkit-animation-name: kdZoomRightBottomOut;
animation-name: kdZoomRightBottomOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.leftTop-active {
-webkit-animation-name: kdZoomTopRightIn;
animation-name: kdZoomTopRightIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.leftTop.hidden {
-webkit-animation-name: kdZoomTopRightOut;
animation-name: kdZoomTopRightOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.bottomRight-active {
-webkit-animation-name: kdZoomTopRightIn;
animation-name: kdZoomTopRightIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.bottomRight.hidden {
-webkit-animation-name: kdZoomTopRightOut;
animation-name: kdZoomTopRightOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.rightTop-active {
-webkit-animation-name: kdZoomTopLeftIn;
animation-name: kdZoomTopLeftIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.rightTop.hidden {
-webkit-animation-name: kdZoomTopLeftOut;
animation-name: kdZoomTopLeftOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.bottomLeft-active {
-webkit-animation-name: kdZoomTopLeftIn;
animation-name: kdZoomTopLeftIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.bottomLeft.hidden {
-webkit-animation-name: kdZoomTopLeftOut;
animation-name: kdZoomTopLeftOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
@-webkit-keyframes kdZoomBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
@keyframes kdZoomBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
}
@keyframes kdZoomBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomRightIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
}
@keyframes kdZoomRightIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomRightOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 0;
}
}
@keyframes kdZoomRightOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomTopIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@keyframes kdZoomTopIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomTopOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 0;
}
}
@keyframes kdZoomTopOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomLeftIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 1;
}
}
@keyframes kdZoomLeftIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomLeftOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 0;
}
}
@keyframes kdZoomLeftOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomLeftBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 1;
}
}
@keyframes kdZoomLeftBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomLeftBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 0;
}
}
@keyframes kdZoomLeftBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomRightBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes kdZoomRightBottomIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomRightBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
@keyframes kdZoomRightBottomOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomTopRightIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
@keyframes kdZoomTopRightIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomTopRightOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
}
@keyframes kdZoomTopRightOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
opacity: 0;
}
}
@-webkit-keyframes kdZoomTopLeftIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes kdZoomTopLeftIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@-webkit-keyframes kdZoomTopLeftOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes kdZoomTopLeftOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
.kd-dropdown.topLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.topLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.top-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.top.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.topRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.topRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.leftBottom-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.leftBottom.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.rightBottom-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.rightBottom.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.bottomRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.bottomRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.left-active {
-webkit-animation-name: kdSlideCenterIn;
animation-name: kdSlideCenterIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.left.hidden {
-webkit-animation-name: kdSlideCenterOut;
animation-name: kdSlideCenterOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.right-active {
-webkit-animation-name: kdSlideCenterIn;
animation-name: kdSlideCenterIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.right.hidden {
-webkit-animation-name: kdSlideCenterOut;
animation-name: kdSlideCenterOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.leftTop-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.leftTop.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.bottomLeft-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.bottomLeft.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.bottom-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.bottom.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.bottomRight-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.bottomRight.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-dropdown.rightTop-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-dropdown.rightTop.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-cascader-menus.topLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-cascader-menus.topLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-cascader-menus.bottomLeft-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-cascader-menus.bottomLeft.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-cascader-menus.bottomRight-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-cascader-menus.bottomRight.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-cascader-menus.bottomRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-cascader-menus.bottomRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-select-dropdown-panel.topLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-select-dropdown-panel.topLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-select-dropdown-panel.bottomLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-select-dropdown-panel.bottomLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-select-dropdown-panel.bottomRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-select-dropdown-panel.bottomRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-select-dropdown-panel.bottomLeft-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-select-dropdown-panel.bottomLeft.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-select-dropdown-panel.bottomRight-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-select-dropdown-panel.bottomRight.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-date-picker-panel.topLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-date-picker-panel.topLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-date-picker-panel.bottomLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-date-picker-panel.bottomLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-date-picker-panel.bottomRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-date-picker-panel.bottomRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-date-picker-panel.bottomLeft-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-date-picker-panel.bottomLeft.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-date-picker-panel.bottomRight-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-date-picker-panel.bottomRight.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-city-picker-dropdown.topLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-city-picker-dropdown.topLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-city-picker-dropdown.bottomLeft-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-city-picker-dropdown.bottomLeft.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-city-picker-dropdown.bottomLeft-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-city-picker-dropdown.bottomLeft.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-city-picker-dropdown.bottomRight-active {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-city-picker-dropdown.bottomRight.hidden {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-city-picker-dropdown.bottomRight-active {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-city-picker-dropdown.bottomRight.hidden {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
@-webkit-keyframes kdSlideCenterIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
}
@keyframes kdSlideCenterIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 1;
}
}
@-webkit-keyframes kdSlideCenterOut {
0% {
opacity: 1;
}
5% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 0;
}
}
@keyframes kdSlideCenterOut {
0% {
opacity: 1;
}
5% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
100% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
opacity: 0;
}
}
@-webkit-keyframes kdSlideUpIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes kdSlideUpIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@-webkit-keyframes kdSlideUpOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes kdSlideUpOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@-webkit-keyframes kdSlideDownIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes kdSlideDownIn {
0% {
opacity: 0;
}
5% {
-webkit-transform: scaleY(0.6);
transform: scaleY(0.6);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@-webkit-keyframes kdSlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
@keyframes kdSlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
/*! rtl:end:ignore */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* normalize.css 和现有产品的结合版本， 根据兼容性进行了调整 */
/* Document
========================================================================== */
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-size: 12px;
}
html,
body,
input,
textarea,
select,
button {
font-family: 'Roboto', 'San Francisco', 'Helvetica Neue', Helvetica, Arial, 'PingFang SC', 'Hiragina Sans GB', 'WenQuanYi Micro Hei', 'microsoft yahei ui', 'microsoft yahei', sans-serif;
}
body {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/* Forms
========================================================================== */
/**
*/
input {
padding: 0;
margin: 0;
}
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type='checkbox'],
[type='radio'] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/**
* Reset scrollbar style
*/
::-webkit-scrollbar-button {
width: 0;
height: 0;
}
::-webkit-scrollbar-corner {
background: 0 0;
}
::-webkit-scrollbar-thumb {
min-height: 28px;
height: 5px;
min-width: 2px;
width: 5px;
border-radius: 4px;
border: dashed transparent;
padding: 100px 0 0;
border-width: 1px;
background-color: #b2b2b2;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
background-color: #999;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
border-radius: 6;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
@font-face {
font-family: "kdicon";
src: url(/749eaac4bd8c1b4ed3159eea30932b9b.woff) format("woff");
}
.kdicon {
font-family: "kdicon" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.kdicon-add-child:before {
content: "\e6c0";
}
.kdicon-add-indentation:before {
content: "\e6a7";
}
.kdicon-add-line:before {
content: "\e6c5";
}
.kdicon-add-solid:before {
content: "\e643";
}
.kdicon-add-word:before {
content: "\e6ed";
}
.kdicon-add:before {
content: "\e628";
}
.kdicon-address:before {
content: "\e6cc";
}
.kdicon-align-center:before {
content: "\e69a";
}
.kdicon-align-left:before {
content: "\e6af";
}
.kdicon-align-right:before {
content: "\e67a";
}
.kdicon-all-border:before {
content: "\e677";
}
.kdicon-allowance-workbench:before {
content: "\e714";
}
.kdicon-analysis:before {
content: "\e6ce";
}
.kdicon-arrow-down-solid:before {
content: "\e656";
}
.kdicon-arrow-down:before {
content: "\e627";
}
.kdicon-arrow-left-circle-solid:before {
content: "\e720";
}
.kdicon-arrow-left-solid:before {
content: "\e657";
}
.kdicon-arrow-left:before {
content: "\e63f";
}
.kdicon-arrow-right-circle-solid:before {
content: "\e71f";
}
.kdicon-arrow-right-solid:before {
content: "\e655";
}
.kdicon-arrow-right:before {
content: "\e62c";
}
.kdicon-arrow-up-solid:before {
content: "\e654";
}
.kdicon-arrow-up:before {
content: "\e62b";
}
.kdicon-arrow:before {
content: "\e69c";
}
.kdicon-attachment:before {
content: "\e694";
}
.kdicon-avatar-default:before {
content: "\e717";
}
.kdicon-avatar-head-default:before {
content: "\e718";
}
.kdicon-avatar-solid:before {
content: "\e711";
}
.kdicon-back:before {
content: "\e6cd";
}
.kdicon-bankcard:before {
content: "\e705";
}
.kdicon-bellOutlined:before {
content: "\e71a";
}
.kdicon-bold-solid:before {
content: "\e668";
}
.kdicon-border:before {
content: "\e6f9";
}
.kdicon-bottom-border:before {
content: "\e704";
}
.kdicon-business-type:before {
content: "\e716";
}
.kdicon-cancel:before {
content: "\e68f";
}
.kdicon-cell:before {
content: "\e692";
}
.kdicon-change:before {
content: "\e6e2";
}
.kdicon-chart-display:before {
content: "\e710";
}
.kdicon-chart:before {
content: "\e6d0";
}
.kdicon-classify:before {
content: "\e6d4";
}
.kdicon-close-bold:before {
content: "\e647";
}
.kdicon-close-full-screen:before {
content: "\e679";
}
.kdicon-close-solid:before {
content: "\e644";
}
.kdicon-close:before {
content: "\e62f";
}
.kdicon-cn:before {
content: "\e6b5";
}
.kdicon-code:before {
content: "\e6ca";
}
.kdicon-collect:before {
content: "\e6ec";
}
.kdicon-comment:before {
content: "\e6bc";
}
.kdicon-communication-solid:before {
content: "\e65e";
}
.kdicon-contract:before {
content: "\e69f";
}
.kdicon-cooperation:before {
content: "\e6fb";
}
.kdicon-copy-code:before {
content: "\e6e1";
}
.kdicon-copy:before {
content: "\e678";
}
.kdicon-counterclockwise:before {
content: "\e6e5";
}
.kdicon-customize:before {
content: "\e707";
}
.kdicon-dashboard:before {
content: "\e71c";
}
.kdicon-date-selection:before {
content: "\e70f";
}
.kdicon-date:before {
content: "\e6eb";
}
.kdicon-delete-indentation:before {
content: "\e697";
}
.kdicon-delete-line:before {
content: "\e68c";
}
.kdicon-delete-solid:before {
content: "\e667";
}
.kdicon-delete:before {
content: "\e6ee";
}
.kdicon-detail:before {
content: "\e6c4";
}
.kdicon-detect:before {
content: "\e68e";
}
.kdicon-division-solid:before {
content: "\e65a";
}
.kdicon-double-arrow-left:before {
content: "\e64a";
}
.kdicon-double-arrow-right:before {
content: "\e649";
}
.kdicon-download:before {
content: "\e70a";
}
.kdicon-edit-border:before {
content: "\e6c8";
}
.kdicon-edit-view:before {
content: "\e6c7";
}
.kdicon-edit:before {
content: "\e6a6";
}
.kdicon-education:before {
content: "\e69d";
}
.kdicon-eliminate-solid:before {
content: "\e659";
}
.kdicon-en:before {
content: "\e6b6";
}
.kdicon-enlarge:before {
content: "\e6d5";
}
.kdicon-equal:before {
content: "\e6a3";
}
.kdicon-exclamatory:before {
content: "\e64e";
}
.kdicon-expand:before {
content: "\e651";
}
.kdicon-experience:before {
content: "\e6ff";
}
.kdicon-fail:before {
content: "\e6a5";
}
.kdicon-feedback:before {
content: "\e6d6";
}
.kdicon-female:before {
content: "\e684";
}
.kdicon-filter-solid:before {
content: "\e66a";
}
.kdicon-filter-switch:before {
content: "\e6b1";
}
.kdicon-filter:before {
content: "\e6a0";
}
.kdicon-finish:before {
content: "\e6dc";
}
.kdicon-first:before {
content: "\e630";
}
.kdicon-fixed-shrink:before {
content: "\e693";
}
.kdicon-fixed-solid:before {
content: "\e65f";
}
.kdicon-fixed-window:before {
content: "\e6d1";
}
.kdicon-fixed:before {
content: "\e6e3";
}
.kdicon-fold:before {
content: "\e71d";
}
.kdicon-foldmenu:before {
content: "\e70e";
}
.kdicon-font-background-solid:before {
content: "\e673";
}
.kdicon-font-color-solid:before {
content: "\e674";
}
.kdicon-forbid:before {
content: "\e69b";
}
.kdicon-git:before {
content: "\e6c1";
}
.kdicon-graffiti:before {
content: "\e6fe";
}
.kdicon-greater-equal:before {
content: "\e6d7";
}
.kdicon-have-attachment:before {
content: "\e6a8";
}
.kdicon-hide:before {
content: "\e6a9";
}
.kdicon-hyperlink:before {
content: "\e6c9";
}
.kdicon-image:before {
content: "\e687";
}
.kdicon-import:before {
content: "\e6cb";
}
.kdicon-international:before {
content: "\e719";
}
.kdicon-job-info:before {
content: "\e68d";
}
.kdicon-last:before {
content: "\e631";
}
.kdicon-left-border:before {
content: "\e708";
}
.kdicon-left-extension:before {
content: "\e6ae";
}
.kdicon-left-unfold-solid:before {
content: "\e675";
}
.kdicon-left-unfold:before {
content: "\e709";
}
.kdicon-like:before {
content: "\e67f";
}
.kdicon-list:before {
content: "\e6e6";
}
.kdicon-little-k:before {
content: "\e700";
}
.kdicon-loadding-circle:before {
content: "\e645";
}
.kdicon-loadding:before {
content: "\e62d";
}
.kdicon-location-solid:before {
content: "\e640";
}
.kdicon-location:before {
content: "\e695";
}
.kdicon-lock-solid:before {
content: "\e66b";
}
.kdicon-lock:before {
content: "\e68b";
}
.kdicon-male:before {
content: "\e683";
}
.kdicon-material:before {
content: "\e6db";
}
.kdicon-medical-report:before {
content: "\e703";
}
.kdicon-menu:before {
content: "\e6d8";
}
.kdicon-merge-cell:before {
content: "\e6f3";
}
.kdicon-more-info-solid:before {
content: "\e660";
}
.kdicon-more-info:before {
content: "\e6e4";
}
.kdicon-more-item:before {
content: "\e6f4";
}
.kdicon-more:before {
content: "\e6a1";
}
.kdicon-mosaic-solid:before {
content: "\e663";
}
.kdicon-multiply:before {
content: "\e65b";
}
.kdicon-my-receipt:before {
content: "\e715";
}
.kdicon-no-border:before {
content: "\e6f8";
}
.kdicon-not-equal:before {
content: "\e6dd";
}
.kdicon-notice:before {
content: "\e658";
}
.kdicon-oblique-solid:before {
content: "\e66e";
}
.kdicon-operating-element:before {
content: "\e6a4";
}
.kdicon-order-facet:before {
content: "\e713";
}
.kdicon-order:before {
content: "\e6d2";
}
.kdicon-ordered-list:before {
content: "\e6fa";
}
.kdicon-person-solid:before {
content: "\e669";
}
.kdicon-phone:before {
content: "\e6d3";
}
.kdicon-platform:before {
content: "\e6f1";
}
.kdicon-preview-view:before {
content: "\e6ba";
}
.kdicon-preview:before {
content: "\e6ac";
}
.kdicon-print:before {
content: "\e690";
}
.kdicon-processing-solid:before {
content: "\e665";
}
.kdicon-project:before {
content: "\e681";
}
.kdicon-push-down:before {
content: "\e702";
}
.kdicon-put-bottom:before {
content: "\e6b4";
}
.kdicon-put-off:before {
content: "\e685";
}
.kdicon-put-on:before {
content: "\e6bd";
}
.kdicon-put-top:before {
content: "\e6b3";
}
.kdicon-qrcode:before {
content: "\e6df";
}
.kdicon-qualification-info:before {
content: "\e6b2";
}
.kdicon-quit:before {
content: "\e6fc";
}
.kdicon-quote-solid:before {
content: "\e66d";
}
.kdicon-reduce:before {
content: "\e696";
}
.kdicon-reduction:before {
content: "\e6f2";
}
.kdicon-refresh-solid:before {
content: "\e642";
}
.kdicon-refresh:before {
content: "\e629";
}
.kdicon-report-form:before {
content: "\e712";
}
.kdicon-reset:before {
content: "\e6b9";
}
.kdicon-resign-report:before {
content: "\e699";
}
.kdicon-return:before {
content: "\e6e0";
}
.kdicon-right-bold:before {
content: "\e648";
}
.kdicon-right-border:before {
content: "\e67c";
}
.kdicon-right-extension:before {
content: "\e6aa";
}
.kdicon-right-solid:before {
content: "\e641";
}
.kdicon-right-unfold-solid:before {
content: "\e672";
}
.kdicon-right-unfold:before {
content: "\e6ab";
}
.kdicon-right:before {
content: "\e62e";
}
.kdicon-rough-border:before {
content: "\e6de";
}
.kdicon-save:before {
content: "\e6c2";
}
.kdicon-scanning:before {
content: "\e67d";
}
.kdicon-search-border:before {
content: "\e6da";
}
.kdicon-search:before {
content: "\e62a";
}
.kdicon-setting:before {
content: "\e652";
}
.kdicon-share:before {
content: "\e6cf";
}
.kdicon-shoppingcart:before {
content: "\e6bf";
}
.kdicon-shrink:before {
content: "\e6fd";
}
.kdicon-shutdown:before {
content: "\e686";
}
.kdicon-sigma:before {
content: "\e71b";
}
.kdicon-spin:before {
content: "\e6f7";
}
.kdicon-split:before {
content: "\e6c3";
}
.kdicon-star:before {
content: "\e653";
}
.kdicon-stop:before {
content: "\e691";
}
.kdicon-strike-solid:before {
content: "\e664";
}
.kdicon-sun-solid:before {
content: "\e670";
}
.kdicon-switch-down:before {
content: "\e698";
}
.kdicon-switch-up:before {
content: "\e680";
}
.kdicon-switch:before {
content: "\e6e7";
}
.kdicon-table-setting:before {
content: "\e6c6";
}
.kdicon-task-process:before {
content: "\e6ea";
}
.kdicon-timezone-solid:before {
content: "\e662";
}
.kdicon-tips-solid:before {
content: "\e66c";
}
.kdicon-tips:before {
content: "\e650";
}
.kdicon-title-solid:before {
content: "\e65c";
}
.kdicon-top-border:before {
content: "\e6ef";
}
.kdicon-two-window:before {
content: "\e6f6";
}
.kdicon-underline-solid:before {
content: "\e671";
}
.kdicon-unfold-all:before {
content: "\e6ad";
}
.kdicon-unfold:before {
content: "\e71e";
}
.kdicon-unfoldmenu:before {
content: "\e70d";
}
.kdicon-unlock-solid:before {
content: "\e666";
}
.kdicon-unlock:before {
content: "\e69e";
}
.kdicon-upload-cloud:before {
content: "\e632";
}
.kdicon-upload:before {
content: "\e70b";
}
.kdicon-user-info:before {
content: "\e682";
}
.kdicon-vertical-center:before {
content: "\e6f5";
}
.kdicon-voice:before {
content: "\e6d9";
}
.kdicon-waiting:before {
content: "\e64b";
}
.kdicon-warning-solid:before {
content: "\e64c";
}
.kdicon-warning:before {
content: "\e64d";
}
.kdicon-workbench:before {
content: "\e64f";
}
.kdicon-wrap:before {
content: "\e6b0";
}
.kdicon-yunzhijia:before {
content: "\e706";
}
.kdicon-zoom:before {
content: "\e70c";
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.icon-center i {
-ms-flex-item-align: center;
align-self: center;
}
.kd-alert-container {
z-index: var(--kd-g-z-index-apex, 9999);
display: none;
padding: var(--kd-c-alert-sizing-padding-vertical, 12px) var(--kd-c-alert-sizing-padding-horizontal, 20px);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: display 3s;
transition: display 3s;
border-radius: var(--kd-c-alert-radius-border, 4px);
border: 1px solid;
}
.kd-alert-banner-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
z-index: var(--kd-g-z-index-apex, 9999);
width: 100%;
}
.kd-alert.alert-success-bg-color {
background-color: var(--kd-c-alert-color-background-success, var(--kd-g-color-background-success, #f2fff5));
}
.kd-alert.alert-warning-bg-color {
background-color: var(--kd-c-alert-color-background-warning, var(--kd-g-color-background-warning, #fffbf2));
}
.kd-alert.alert-error-bg-color {
background-color: var(--kd-c-alert-color-background-error, var(--kd-g-color-background-error, #fff2f4));
}
.kd-alert.alert-info-bg-color {
background-color: var(--kd-c-alert-color-background-info, var(--kd-g-color-background-ongoing, #f2f9ff));
}
.kd-alert.alert-success-border-color {
border-color: var(--kd-c-alert-color-border-success, #DCFAE4);
}
.kd-alert.alert-warning-border-color {
border-color: var(--kd-c-alert-color-border-warning, #FFF1D4);
}
.kd-alert.alert-error-border-color {
border-color: var(--kd-c-alert-color-border-error, #FFDBE0);
}
.kd-alert.alert-info-border-color {
border-color: var(--kd-c-alert-color-border-info, #E0EFFF);
}
.kd-alert-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: default;
height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
margin-right: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
font-size: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-alert-icon i {
-ms-flex-item-align: center;
align-self: center;
}
.kd-alert-icon.alert-success-icon-color {
color: var(--kd-c-alert-color-icon-success, var(--kd-g-color-success, #1ba854));
}
.kd-alert-icon.alert-warning-icon-color {
color: var(--kd-c-alert-color-icon-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-alert-icon.alert-error-icon-color {
color: var(--kd-c-alert-color-icon-error, var(--kd-g-color-error, #fb2323));
}
.kd-alert-icon.alert-info-icon-color {
color: var(--kd-c-alert-color-icon-info, var(--kd-g-color-ongoing, #276ff5));
}
.kd-alert-message {
color: var(--kd-c-alert-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px));
line-height: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
cursor: default;
}
.kd-alert-leave {
-webkit-transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
transition: padding var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), opacity var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), margin var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1), line-height var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 var(--kd-c-alert-sizing-padding-horizontal, 20px);
border-width: 0;
min-height: 0;
margin: 0 !important;
overflow: hidden;
opacity: 0;
}
.kd-alert-leave .kd-alert-icon,
.kd-alert-leave .kd-alert-message,
.kd-alert-leave .kd-alert-close-icon {
height: 0;
line-height: 0;
}
.kd-alert-close-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: var(--kd-c-alert-message-icon-font-size, var(--kd-g-font-size-middle, 14px));
margin-left: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
color: var(--kd-c-alert-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
font-size: var(--kd-c-alert-close-icon-font-size, var(--kd-g-font-size-middle, 14px));
cursor: pointer;
}
.kd-alert-close-icon:hover {
color: var(--kd-c-alert-close-icon-color-text-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-alert-close-icon:active {
color: var(--kd-g-color-theme-7, #375cca);
}
.kd-alert-close-icon i {
-ms-flex-item-align: center;
align-self: center;
}
.kd-alert-visible {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-alert-banner {
position: fixed;
-webkit-animation: moveIn var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1) both;
animation: moveIn var(--kd-g-duration, 0.3s) cubic-bezier(0.32, 0.94, 0.6, 1) both;
}
@-webkit-keyframes moveIn {
from {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes moveIn {
from {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.kd-alert-rtl {
direction: rtl;
}
.kd-alert-rtl .kd-alert-icon {
margin-left: var(--kd-c-alert-message-icon-sizing-margin-right, 8px);
margin-right: 0;
}
.kd-alert-rtl .kd-alert-close-icon {
margin-right: var(--kd-c-alert-close-icon-sizing-margin-left, 8px);
margin-left: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-anchor {
position: relative;
padding-left: var(--kd-c-anchor-spacing-horizontal, 7px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: var(--kd-c-anchor-color-background, var(--kd-g-color-background, #fff));
z-index: 1050;
}
.kd-anchor-wrapper {
overflow: auto;
font-size: var(--kd-c-anchor-font-size, var(--kd-g-font-size-small, 12px));
width: var(--kd-c-anchor-sizing-width, 120px);
}
.kd-anchor-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666;
}
.kd-anchor-menu-wrapper {
overflow: auto;
font-size: var(--kd-c-anchor-font-size, var(--kd-g-font-size-small, 12px));
}
.kd-anchor-menu-left-arrows {
margin-right: 10px;
font-size: var(--kd-c-anchor-icon-font-size, 16px);
color: #666;
cursor: pointer;
}
.kd-anchor-menu-left-arrows:hover:not(.kd-anchor-menu-left-arrows-disabled) {
color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-anchor-menu-left-arrows-disabled {
color: #b2b2b2;
cursor: not-allowed;
}
.kd-anchor-menu-right-arrows {
margin-left: 10px;
font-size: var(--kd-c-anchor-icon-font-size, 16px);
color: #666;
cursor: pointer;
}
.kd-anchor-menu-right-arrows:hover:not(.kd-anchor-menu-right-arrows-disabled) {
color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-anchor-menu-right-arrows-disabled {
color: #b2b2b2;
cursor: not-allowed;
}
.kd-anchor-menu-wrap {
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 22px;
}
.kd-anchor-menu-link-list {
display: inline-block;
white-space: nowrap;
position: absolute;
-webkit-transition: all var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.42, 0, 1, 1);
transition: all var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.42, 0, 1, 1);
left: 0;
top: 0;
}
.kd-anchor-menu .kd-anchor-link {
padding: 0;
display: inline-block;
}
.kd-anchor-menu .kd-anchor-link-title {
display: inline-block;
max-width: var(--kd-c-anchor-horizontal-link-sizing-max-width, 96px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 4px;
line-height: 1.5;
vertical-align: middle;
}
.kd-anchor-menu .kd-anchor-link:not(:last-of-type)::after {
display: inline-block;
content: '';
height: 0;
width: 40px;
border-bottom: var(--kd-c-anchor-line-slider-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
margin: 4px;
}
.kd-anchor-advanced-arrows {
color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
font-size: var(--kd-c-anchor-advanced-arrows-font-size, 24px);
cursor: pointer;
}
.kd-anchor-advanced-arrows:hover {
color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-anchor-advanced {
padding-top: var(--kd-c-anchor-advanced-spacing-padding-top, 8px);
padding-bottom: var(--kd-c-anchor-advanced-spacing-padding-bottom, 7px);
position: relative;
-webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
background: var(--kd-c-anchor-color-background, var(--kd-g-color-background, #fff));
z-index: 1050;
}
.kd-anchor-advanced .kd-anchor-wrapper {
width: var(--kd-c-anchor-advanced-sizing-width, 160px);
}
.kd-anchor-advanced-lock {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 0 8px 8px 0;
font-size: var(--kd-c-anchor-advanced-lock-font-size, 16px);
color: var(--kd-c-anchor-advanced-arrows-color-text, #666);
cursor: pointer;
}
.kd-anchor-advanced .kd-anchor {
max-width: var(--kd-c-anchor-advanced-sizing-width, 160px);
}
.kd-anchor-line {
position: absolute;
left: var(--kd-c-anchor-spacing-horizontal, 7px);
top: 0;
height: 100%;
}
.kd-anchor-line::before {
position: relative;
display: block;
width: var(--kd-c-anchor-line-slider-spacing-width, 1px);
height: 100%;
margin: 0 auto;
background-color: var(--kd-c-anchor-color-border, var(--kd-g-color-border-strong, #d9d9d9));
content: '';
}
.kd-anchor-line-slider {
position: absolute;
display: none;
width: 0;
height: 16px;
border-right: var(--kd-c-anchor-line-slider-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
.kd-anchor-line-slider.visible {
display: inline-block;
}
.kd-anchor-link {
padding: var(--kd-c-anchor-spacing-padding, 7px 8px);
}
.kd-anchor-link > .kd-anchor-link {
padding: var(--kd-c-anchor-secondary-spacing-padding, 12px 8px);
}
.kd-anchor-link-title {
text-decoration: none;
color: var(--kd-c-anchor-color-text-primary, var(--kd-g-color-text-primary, #212121));
margin-bottom: var(--kd-c-anchor-spacing-vertical, 7px);
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 1.5;
cursor: pointer;
}
.kd-anchor-link-title:only-child {
margin-bottom: 0;
}
.kd-anchor-link-title-secondary {
color: var(--kd-c-anchor-color-text-secondary, var(--kd-g-color-text-secondary, #666));
padding-left: 4px;
}
.kd-anchor-link-title:hover {
color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-anchor-link-active > .kd-anchor-link-title {
color: var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-anchor-lock {
font-size: var(--kd-c-anchor-icon-font-size, 16px);
}
.kd-anchor.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(var(--kd-c-anchor-duration-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-anchor-rtl {
direction: rtl;
}
.kd-anchor-rtl .kd-anchor {
padding-right: var(--kd-c-anchor-spacing-horizontal, 7px);
padding-left: 0;
}
.kd-anchor-rtl .kd-anchor-line {
right: var(--kd-c-anchor-spacing-horizontal, 7px);
left: auto;
}
.kd-anchor-rtl .kd-anchor-link {
text-align: right;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
.kd-avatar {
position: relative;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-align: center;
vertical-align: middle;
background: var(--kd-c-avatar-color-background, #B2B2B2);
width: var(--kd-c-avatar-size-base, 40px);
height: var(--kd-c-avatar-size-base, 40px);
line-height: var(--kd-c-avatar-size-base, 40px);
border-radius: 50%;
}
.kd-avatar-image {
background: transparent;
}
.kd-avatar-disabled {
cursor: not-allowed;
}
.kd-avatar:hover:not(.kd-avatar-disabled) {
cursor: pointer;
}
.kd-avatar-string {
position: absolute;
left: 50%;
-webkit-transform-origin: 0 center;
transform-origin: 0 center;
}
.kd-avatar.kd-avatar-icon {
font-size: var(--kd-c-avatar-font-size-base, 22px);
}
.kd-avatar.kd-avatar-icon > .kdicon {
vertical-align: top;
}
.kd-avatar-lg {
width: var(--kd-c-avatar-size-large, 60px);
height: var(--kd-c-avatar-size-large, 60px);
line-height: var(--kd-c-avatar-size-large, 60px);
border-radius: 50%;
}
.kd-avatar-lg-string {
position: absolute;
left: 50%;
-webkit-transform-origin: 0 center;
transform-origin: 0 center;
}
.kd-avatar-lg.kd-avatar-icon {
font-size: var(--kd-c-avatar-font-size-large, 36px);
}
.kd-avatar-lg.kd-avatar-icon > .kdicon {
vertical-align: top;
}
.kd-avatar-sm {
width: var(--kd-c-avatar-size-small, 32px);
height: var(--kd-c-avatar-size-small, 32px);
line-height: var(--kd-c-avatar-size-small, 32px);
border-radius: 50%;
}
.kd-avatar-sm-string {
position: absolute;
left: 50%;
-webkit-transform-origin: 0 center;
transform-origin: 0 center;
}
.kd-avatar-sm.kd-avatar-icon {
font-size: var(--kd-c-avatar-font-size-small, 18px);
}
.kd-avatar-sm.kd-avatar-icon > .kdicon {
vertical-align: top;
}
.kd-avatar-xs {
width: var(--kd-c-avatar-size-x-small, 24px);
height: var(--kd-c-avatar-size-x-small, 24px);
line-height: var(--kd-c-avatar-size-x-small, 24px);
border-radius: 50%;
}
.kd-avatar-xs-string {
position: absolute;
left: 50%;
-webkit-transform-origin: 0 center;
transform-origin: 0 center;
}
.kd-avatar-xs.kd-avatar-icon {
font-size: var(--kd-c-avatar-font-size-x-small, 14px);
}
.kd-avatar-xs.kd-avatar-icon > .kdicon {
vertical-align: top;
}
.kd-avatar-square {
border-radius: var(--kd-c-avatar-border-radius, 2px);
}
.kd-avatar > img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-badge {
position: relative;
display: inline-block;
line-height: 1;
font-size: var(--kd-c-badge-font-size-base, var(--kd-g-font-size-middle, 14px));
}
.kd-badge-count {
z-index: auto;
min-width: var(--kd-c-badge-sizing-base, 16px);
height: var(--kd-c-badge-sizing-base, 16px);
color: var(--kd-c-badge-color, var(--kd-g-color-background, #fff));
font-weight: var(--kd-c-badge-font-weight, 400);
font-size: var(--kd-g-font-size-small, 12px);
line-height: var(--kd-c-badge-sizing-base, 16px);
white-space: nowrap;
text-align: center;
background: var(--kd-c-badge-color-background, #fb2323);
border-radius: calc(var(--kd-c-badge-sizing-base, 16px) / 2);
}
.kd-badge-count-sm {
min-width: var(--kd-c-badge-sizing-small, 14px);
height: var(--kd-c-badge-sizing-small, 14px);
padding: 0;
font-size: var(--kd-c-badge-font-size-small, var(--kd-g-font-size-small, 12px));
line-height: var(--kd-c-badge-sizing-small, 14px);
border-radius: calc(var(--kd-c-badge-sizing-small, 14px) / 2);
}
.kd-badge-dot {
z-index: auto;
width: var(--kd-c-badge-sizing-dot, 8px);
min-width: var(--kd-c-badge-sizing-dot, 8px);
height: var(--kd-c-badge-sizing-dot, 8px);
background: var(--kd-c-badge-color-background, #fb2323);
border-radius: 100%;
}
.kd-badge-dot,
.kd-badge-custom-component,
.kd-badge-count {
position: absolute;
top: 0;
right: 0;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.kd-badge-multiple-words {
padding: 0 4px;
}
.kd-badge-status {
line-height: inherit;
vertical-align: baseline;
}
.kd-badge-status-text {
margin-left: 8px;
color: var(--kd-c-badge-color, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-badge-font-size-base, var(--kd-g-font-size-middle, 14px));
}
.kd-badge-status-dot {
position: relative;
top: -1px;
display: inline-block;
width: var(--kd-c-badge-sizing-status, 8px);
height: var(--kd-c-badge-sizing-status, 8px);
vertical-align: middle;
border-radius: 50%;
}
.kd-badge-status-success {
background-color: var(--kd-c-badge-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-badge-status-processing {
background-color: var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
}
.kd-badge-status-processing::after {
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid var(--kd-c-badge-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
border-radius: 50%;
-webkit-animation: antStatusProcessing 1.2s infinite ease-in-out;
animation: antStatusProcessing 1.2s infinite ease-in-out;
content: '';
}
.kd-badge-status-error {
background-color: var(--kd-c-badge-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-badge-status-default {
background-color: var(--kd-c-badge-color-default, #d9d9d9);
}
.kd-badge-status-warning {
background-color: var(--kd-c-badge-color-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-badge-not-a-wrapper:not(.kd-badge-status) {
vertical-align: middle;
}
.kd-badge-not-a-wrapper .kd-badge-custom-component,
.kd-badge-not-a-wrapper .kd-badge-count {
position: relative;
top: auto;
display: block;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: none;
transform: none;
}
@-webkit-keyframes antStatusProcessing {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0;
}
}
@keyframes antStatusProcessing {
0% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.5;
}
100% {
-webkit-transform: scale(2.4);
transform: scale(2.4);
opacity: 0;
}
}
.kd-badge-rtl {
direction: rtl;
}
.kd-badge-rtl.kd-badge .kd-badge-dot,
.kd-badge-rtl.kd-badge .kd-badge-custom-component,
.kd-badge-rtl.kd-badge .kd-badge-count {
position: absolute;
left: 0;
right: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-baseData {
width: var(--kd-c-base-data-sizing-width, 230px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid var(--kd-c-base-data-color-border, #999);
}
.kd-baseData-disabled {
cursor: not-allowed;
}
.kd-baseData:not(.kd-baseData-disabled):hover {
border-color: var(--kd-c-base-data-border-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-detail,
.kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-suffix {
color: var(--kd-c-base-data-icon-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-baseData:not(.kd-baseData-disabled):hover .kd-baseData-detail {
visibility: visible;
}
.kd-baseData-total {
white-space: nowrap;
cursor: pointer;
}
.kd-baseData-suffix,
.kd-baseData-detail {
font-size: 16px;
margin-left: 5px;
cursor: pointer;
}
.kd-baseData-detail {
visibility: hidden;
}
.kd-baseData-dropdown {
margin: 0;
z-index: var(--kd-c-base-data-dropdown-z-index, var(--kd-g-z-index-popper, 1050));
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: var(--kd-c-base-data-dropdown-radius-border, var(--kd-g-radius-border, 2px));
background: var(--kd-c-base-data-dropdown-radius-border, var(--kd-g-color-background, #fff));
overflow: auto;
max-height: var(--kd-c-base-data-dropdown-sizing-height, 400px);
color: var(--kd-c-base-data-color-text, #212121);
}
.kd-baseData-dropdown-columns,
.kd-baseData-dropdown-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-baseData-dropdown-columns.selected,
.kd-baseData-dropdown-options.selected {
color: var(--kd-c-base-data-option-color-text-active, var(--kd-g-color-theme, #5582f3));
}
.kd-baseData-dropdown-columns-item,
.kd-baseData-dropdown-options-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 var(--kd-c-base-data-option-spacing-padding-vertical, 12px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-baseData-dropdown-columns-item-collect,
.kd-baseData-dropdown-options-item-collect {
position: absolute;
right: 10px;
visibility: hidden;
}
.kd-baseData-dropdown-columns-item-collect-icon,
.kd-baseData-dropdown-options-item-collect-icon {
color: var(--kd-c-base-data-dropdown-icon-color-text, var(--kd-g-color-warning, #ff991c));
}
.kd-baseData-dropdown-columns-item-collect-icon:hover,
.kd-baseData-dropdown-options-item-collect-icon:hover {
color: var(--kd-c-base-data-dropdown-icon-color-text-hover, var(--kd-g-color-warning, #ff991c));
}
.kd-baseData-dropdown-columns-item-collect-not-icon,
.kd-baseData-dropdown-options-item-collect-not-icon {
color: #666;
}
.kd-baseData-dropdown-columns-item-collect-not-icon:hover,
.kd-baseData-dropdown-options-item-collect-not-icon:hover {
color: var(--kd-c-base-data-dropdown-color-text-hover, var(--kd-g-color-warning, #ff991c));
}
.kd-baseData-dropdown-columns-item-search,
.kd-baseData-dropdown-options-item-search {
color: #3987ed;
}
.kd-baseData-dropdown-loading {
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;
height: 200px;
}
.kd-baseData-dropdown-columns {
height: var(--kd-c-base-data-dropdown-columns-height, 36px);
background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
}
.kd-baseData-dropdown-options {
height: var(--kd-c-base-data-dropdown-options-sizing-height, 32px);
cursor: pointer;
}
.kd-baseData-dropdown-options:hover {
background: var(--kd-c-base-data-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
}
.kd-baseData-dropdown-options:hover .kd-baseData-dropdown-options-item-collect {
visibility: visible;
}
.kd-baseData-dropdown-footer {
height: var(--kd-c-base-data-dropdown-footer-height, 40px);
border-top: 1px solid var(--kd-c-base-data-footer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-baseData-dropdown-footer-btn {
color: var(--kd-c-base-data-footer-btn-color-text, var(--kd-g-color-text-link, #0e5fd8));
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-baseData-dropdown-footer-btn > span {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
cursor: pointer;
}
.kd-baseData-dropdown-empty {
margin: 20px 0;
}
.kd-baseData-dropdown .kd-tabs-tab-list {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-baseData-dropdown .kd-tab-pane {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 0;
text-align: center;
}
.kd-baseData-dropdown .kd-tabs-right-arrows {
display: none;
}
.kd-baseData .kd-input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 0;
}
.kd-baseData .kd-input-disabled {
background: #fff;
}
.kd-baseData-dropdown-wrapper.topLeft.hidden,
.kd-baseData-dropdown-wrapper.topRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
}
.kd-baseData-dropdown-wrapper.topLeft,
.kd-baseData-dropdown-wrapper.topRight {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
}
.kd-baseData-dropdown-wrapper.bottomLeft.hidden,
.kd-baseData-dropdown-wrapper.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
}
.kd-baseData-dropdown-wrapper.bottomLeft,
.kd-baseData-dropdown-wrapper.bottomRight {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
}
/*! rtl:begin:ignore */
.kd-baseData-rtl {
direction: rtl;
}
.kd-baseData-rtl .kd-input {
padding-left: 0;
padding-right: 9px;
}
.kd-baseData-rtl .kd-baseData-suffix,
.kd-baseData-rtl .kd-baseData-detail {
margin-left: 0;
margin-right: 5px;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-breadcrumb,
.kd-breadcrumb-more-panel {
color: var(--kd-c-breadcrumb-color-text, #737373);
font-size: var(--kd-c-breadcrumb-font-size, var(--kd-g-font-size-middle, 14px));
font-weight: var(--kd-c-breadcrumb-font-weight, var(--kd-g-font-weight, 400));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 22px;
}
.kd-breadcrumb-hide-icon,
.kd-breadcrumb-more-panel-hide-icon {
position: absolute;
z-index: -999999;
top: -999999px;
visibility: hidden;
}
.kd-breadcrumb-item,
.kd-breadcrumb-more-panel-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: text;
}
.kd-breadcrumb-item-separator,
.kd-breadcrumb-more-panel-item-separator {
padding: 0 var(--kd-c-breadcrumb-separator-spacing-padding-horizontal, 8px);
color: var(--kd-c-breadcrumb-separator-color-text, #b2b2b2);
}
.kd-breadcrumb-item-link:hover,
.kd-breadcrumb-more-panel-item-link:hover {
color: #3987ed;
cursor: pointer;
}
.kd-breadcrumb-item-emphasize-model,
.kd-breadcrumb-more-panel-item-emphasize-model {
color: var(--kd-c-breadcrumb-color-text, #737373);
}
.kd-breadcrumb-item-emphasize-model-current,
.kd-breadcrumb-more-panel-item-emphasize-model-current {
color: var(--kd-c-breadcrumb-active-color-text, #111111);
}
.kd-breadcrumb-item-weaken-model,
.kd-breadcrumb-more-panel-item-weaken-model {
color: var(--kd-c-breadcrumb-active-color-text, #111111);
}
.kd-breadcrumb-item-weaken-model-current,
.kd-breadcrumb-more-panel-item-weaken-model-current {
color: var(--kd-c-breadcrumb-color-text, #737373);
}
.kd-breadcrumb-item-text,
.kd-breadcrumb-more-panel-item-text {
white-space: nowrap;
}
.kd-breadcrumb-item-text:last-child,
.kd-breadcrumb-more-panel-item-text:last-child {
text-overflow: ellipsis;
}
.kd-breadcrumb-item-icon,
.kd-breadcrumb-more-panel-item-icon {
margin-right: 4px;
}
.kd-breadcrumb .kd-dropdown-trigger,
.kd-breadcrumb-more-panel .kd-dropdown-trigger {
margin-left: 4px;
}
.kd-breadcrumb-popper.kd-tooltip {
max-width: none;
}
.kd-breadcrumb-rtl {
direction: rtl;
}
.kd-breadcrumb-rtl.kd-breadcrumb .kd-breadcrumb-item-icon {
margin-left: 4px;
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-btn {
padding: 0;
position: relative;
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: var(--kd-c-button-font-weight, var(--kd-g-font-weight, 400));
border: var(--kd-c-button-sizing-border, 1px) solid transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
text-align: center;
background-color: transparent;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}
.kd-btn,
.kd-btn:active,
.kd-btn:focus {
outline: 0;
}
.kd-btn:not(.kd-btn-text)::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
-webkit-box-shadow: 0 0 0 0 var(--kd-g-color-theme, #5582f3);
box-shadow: 0 0 0 0 var(--kd-g-color-theme, #5582f3);
opacity: 0.2;
content: '';
pointer-events: none;
clear: both;
}
.kd-btn:not(.kd-btn-text)[click-animating-wave='true']::after {
-webkit-animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: fadeEffect var(--kd-c-button-motion-duration-fade, var(--kd-g-duration-slowly, 0.4s)) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect var(--kd-c-button-motion-duration-wave, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-btn-second {
border-color: var(--kd-c-button-second-color-border, #D9D9D9);
background-color: var(--kd-c-button-second-color-background, transparent);
color: var(--kd-c-button-second-color-text, #212121);
}
.kd-btn-second:hover:not(.kd-btn-loading) {
background-color: var(--kd-c-button-second-color-background-hover, var(--kd-g-color-white, #fff));
border-color: var(--kd-c-button-second-color-border-hover, var(--kd-g-color-theme, #5582f3));
color: var(--kd-c-button-second-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-btn-second:active:not(.kd-btn-loading) {
background-color: var(--kd-c-button-second-color-background-active, var(--kd-g-color-white, #fff));
border-color: var(--kd-c-button-second-color-border-active, var(--kd-g-color-theme-7, #375cca));
color: var(--kd-c-button-second-color-text-active, var(--kd-g-color-theme-7, #375cca));
}
.kd-btn-second:disabled {
border-color: var(--kd-c-button-second-color-border-disabled, #D9D9D9) !important;
background-color: var(--kd-c-button-second-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
color: var(--kd-c-button-second-color-text-disabled, #B2B2B2) !important;
}
.kd-btn-primary {
border-color: var(--kd-c-button-primary-color-border, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-button-primary-color-background, var(--kd-g-color-theme, #5582f3));
color: var(--kd-c-button-primary-color-text, var(--kd-g-color-white, #fff));
}
.kd-btn-primary:hover:not(.kd-btn-loading) {
background-color: var(--kd-c-button-primary-color-background-hover, var(--kd-g-color-theme-5, #87adff));
border-color: var(--kd-c-button-primary-color-border-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-btn-primary:active:not(.kd-btn-loading) {
border-color: var(--kd-c-button-primary-color-border-active, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-button-primary-color-background-active, var(--kd-g-color-theme-7, #375cca));
}
.kd-btn-primary:disabled {
background-color: var(--kd-c-button-primary-color-background-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
border-color: var(--kd-c-button-primary-color-border-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
}
.kd-btn-ghost {
border-color: var(--kd-c-button-ghost-color-border, var(--kd-g-color-theme-6, #5582f3));
background-color: var(--kd-c-button-ghost-color-background, transparent);
color: var(--kd-c-button-ghost-color-text, var(--kd-g-color-theme, #5582f3));
}
.kd-btn-ghost:hover:not(.kd-btn-loading) {
background-color: var(--kd-c-button-ghost-color-background-hover, var(--kd-g-color-theme-5, #87adff));
border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
color: var(--kd-c-button-ghost-color-text-hover, #ffffff);
}
.kd-btn-ghost:active:not(.kd-btn-loading) {
background-color: var(--kd-c-button-ghost-color-background-active, var(--kd-g-color-theme-7, #375cca));
border-color: var(--kd-c-button-ghost-color-border-hover, transparent);
color: var(--kd-c-button-ghost-color-text-active, #ffffff);
}
.kd-btn-ghost:disabled {
background-color: var(--kd-c-button-ghost-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
border-color: var(--kd-c-button-ghost-color-border-disabled, #D9D9D9) !important;
color: var(--kd-c-button-ghost-color-text-disabled, #B2B2B2) !important;
}
.kd-btn-iconWrapper-left {
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;
float: left;
}
.kd-btn-iconWrapper-right {
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;
float: right;
}
.kd-btn-loadingIcon {
color: var(--kd-c-button-text-color-loading, var(--kd-g-color-theme, #5582f3));
}
.kd-btn-primary-loadingIcon {
color: var(--kd-c-button-primary-color-text-loading, var(--kd-g-color-white, #fff));
}
.kd-btn-size-small {
height: var(--kd-c-button-sizing-height-small, 24px);
min-width: var(--kd-c-button-sizing-min-width-small, 60px);
line-height: calc(var(--kd-c-button-sizing-height-small, 24px) - (var(--kd-c-button-spacing-padding-vertical-small, 3px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
font-size: var(--kd-c-button-font-size-small, var(--kd-g-font-size-small, 12px));
padding: var(--kd-c-button-spacing-padding-vertical-small, 3px) var(--kd-c-button-spacing-padding-horizontal-small, 8px);
max-width: var(--kd-c-button-sizing-max-width-small);
}
.kd-btn-size-small.kd-btn-icon-only {
font-size: var(--kd-c-button-icon-font-size-small, 14px);
padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-btn-size-small .kd-btn-group-basic-icon {
font-size: var(--kd-c-button-icon-font-size-small, 14px);
}
.kd-btn-size-middle {
height: var(--kd-c-button-sizing-height-middle, 28px);
min-width: var(--kd-c-button-sizing-min-width-middle, 60px);
line-height: calc(var(--kd-c-button-sizing-height-middle, 28px) - (var(--kd-c-button-spacing-padding-vertical-middle, 5px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
font-size: var(--kd-c-button-font-size-middle, var(--kd-g-font-size-small, 12px));
padding: var(--kd-c-button-spacing-padding-vertical-middle, 5px) var(--kd-c-button-spacing-padding-horizontal-middle, 8px);
max-width: var(--kd-c-button-sizing-max-width-middle);
}
.kd-btn-size-middle.kd-btn-icon-only {
font-size: var(--kd-c-button-icon-font-size-middle, 16px);
padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-btn-size-middle .kd-btn-group-basic-icon {
font-size: var(--kd-c-button-icon-font-size-middle, 16px);
}
.kd-btn-size-large {
height: var(--kd-c-button-sizing-height-large, 32px);
min-width: var(--kd-c-button-sizing-min-width-large, 80px);
line-height: calc(var(--kd-c-button-sizing-height-large, 32px) - (var(--kd-c-button-spacing-padding-vertical-large, 6px) * 2) - (var(--kd-c-button-sizing-border, 1px) * 2));
font-size: var(--kd-c-button-font-size-large, var(--kd-g-font-size-large, 16px));
padding: var(--kd-c-button-spacing-padding-vertical-large, 6px) var(--kd-c-button-spacing-padding-horizontal-large, 8px);
max-width: var(--kd-c-button-sizing-max-width-large);
}
.kd-btn-size-large.kd-btn-icon-only {
font-size: var(--kd-c-button-icon-font-size-large, 18px);
padding: 0 var(--kd-c-button-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-btn-size-large .kd-btn-group-basic-icon {
font-size: var(--kd-c-button-icon-font-size-large, 18px);
}
.kd-btn-shape-circle {
border-radius: 50%;
min-width: auto;
}
.kd-btn-shape-circle.kd-btn-size-small {
width: var(--kd-c-button-sizing-height-small, 24px);
padding: 0;
}
.kd-btn-shape-circle.kd-btn-size-middle {
width: var(--kd-c-button-sizing-height-middle, 28px);
padding: 0;
}
.kd-btn-shape-circle.kd-btn-size-large {
width: var(--kd-c-button-sizing-height-large, 32px);
padding: 0;
}
.kd-btn-shape-round.kd-btn-size-small {
border-radius: var(--kd-c-button-sizing-height-small, 24px);
}
.kd-btn-shape-round.kd-btn-size-middle {
border-radius: var(--kd-c-button-sizing-height-middle, 28px);
}
.kd-btn-shape-round.kd-btn-size-large {
border-radius: var(--kd-c-button-sizing-height-large, 32px);
}
.kd-btn-shape-none {
border-radius: 0;
}
.kd-btn-text {
height: auto;
width: auto;
color: var(--kd-c-button-text-color-text, var(--kd-g-color-theme-6, #5582f3));
padding: 0;
min-width: auto;
}
.kd-btn-text .kd-btn-iconWrapper-left {
margin-right: var(--kd-c-button-text-icon-spacing-margin-right, 4px);
}
.kd-btn-text:hover {
color: var(--kd-c-button-text-color-text-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-btn-text:active {
color: var(--kd-c-button-text-color-text-active, var(--kd-g-color-theme-7, #375cca));
}
.kd-btn-text[disabled] {
color: var(--kd-c-button-text-color-text-disabled, var(--kd-g-color-theme-4, #b5cfff)) !important;
}
.kd-btn-no-border {
border: none;
}
.kd-btn:disabled,
.kd-btn[disabled] {
cursor: not-allowed;
}
.kd-btn-background-ghost,
.kd-btn-background-ghost:hover,
.kd-btn-background-ghost:active {
background-color: transparent;
}
.kd-btn-background-ghost.kd-btn-primary {
color: var(--kd-c-button-background-ghost-color-text, var(--kd-g-color-theme, #5582f3));
}
.kd-btn-background-ghost.kd-btn-primary:hover {
color: var(--kd-c-button-background-ghost-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-btn-loading {
cursor: default;
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;
}
.kd-btn-block {
width: 100%;
}
.kd-btn .btn-space {
margin-left: 4px;
}
.kd-btn-group {
display: inline-block;
}
.kd-btn-group-basic .kd-btn {
padding-top: 0;
padding-bottom: 0;
}
.kd-btn-group-basic-icon {
margin-left: 4px;
}
.kd-btn-group-similar .kd-btn-group-trigger .kd-btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}
.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary {
background: var(--kd-c-button-group-trigger-color-background, var(--kd-g-color-theme-7, #375cca));
}
.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:hover {
background: var(--kd-c-button-group-trigger-color-background-hover, var(--kd-g-color-theme-6, #5582f3));
border-color: var(--kd-c-button-group-trigger-color-background-hover, var(--kd-g-color-theme-6, #5582f3));
}
.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:active {
background: var(--kd-c-button-group-trigger-color-background-active, var(--kd-g-color-theme-8, #1f3ba1));
}
.kd-btn-group-similar .kd-btn-group-trigger .kd-btn-primary:disabled {
background: var(--kd-c-button-group-trigger-color-background-disabled, var(--kd-g-color-theme-5, #87adff)) !important;
}
.kd-btn-group-similar > .kd-btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.kd-btn-group-similar > .kd-btn:first-child:hover {
z-index: 1;
}
.kd-btn-group .kd-btn-size-small,
.kd-btn-group .kd-btn-size-middle,
.kd-btn-group .kd-btn-size-large {
min-width: unset;
}
.kd-btn-group .kd-dropdown-menu {
padding: 0;
}
.kd-btn-group-dropdown {
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
background: var(--kd-c-button-group-dropdown-color-background, #fff);
color: #333333;
min-width: var(--kd-c-button-group-dropdown-min-width, 80px);
}
.kd-btn-group-dropdown-item {
height: var(--kd-c-button--group-dropdown-item-height, 30px);
line-height: var(--kd-c-button--group-dropdown-item-height, 30px);
cursor: pointer;
padding: 0 var(--kd-c-button-group-dropdown-item-horizonta, 12px);
}
.kd-btn-group-dropdown-item:hover {
background: var(--kd-c-button-group-dropdown-item-color-background-hover, #F5F5F5);
}
.kd-btn-group-dropdown-item:not(:last-child) {
border-bottom: 1px solid var(--kd-c-button-group-dropdown-item-border-color, #E5E5E5);
}
.kd-btn-group.topLeft.hidden,
.kd-btn-group.bottomLeft.hidden,
.kd-btn-group.topRight.hidden,
.kd-btn-group.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-btn-rtl {
direction: rtl;
}
.kd-btn-rtl .kd-btn-iconWrapper-left {
float: right;
margin-left: 4px;
}
.kd-btn-rtl .kd-btn-iconWrapper-right {
float: left;
margin-right: 4px;
}
.kd-btn-rtl .kd-btn-group-basic-icon {
margin-right: 5px;
margin-left: 0;
}
.kd-btn-rtl .btn-space {
margin-left: 0;
}
.kd-btn-rtl-similar .kd-btn-group-trigger .kd-btn {
border-top-left-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
border-bottom-left-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: -1px;
}
.kd-btn-rtl-similar > .kd-btn:first-child {
border-top-right-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
border-bottom-right-radius: var(--kd-c-button-radius-border, var(--kd-g-radius-border, 2px));
}
.kd-btn-group-rtl {
direction: rtl;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-card {
position: relative;
background-color: var(--kd-c-card-color-background, var(--kd-g-color-white, #fff));
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
.kd-card.hoverable:hover {
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.kd-card .kd-card-header {
height: var(--kd-c-card-sizing-title-height, 40px);
padding: 0 58px 0 var(--kd-c-card-spacing-padding-horizontal, 12px);
line-height: 40px;
font-size: var(--kd-c-card-title-font-size, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-card-title-color, var(--kd-g-color-text-primary, #212121));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-card .kd-card-avatar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 64px;
padding: 0 var(--kd-c-card-spacing-padding-horizontal, 12px);
}
.kd-card .kd-card-avatar .kd-card-avatar-img {
width: 42px;
height: 42px;
margin-right: var(--kd-c-card-spacing-padding-vertical, 8px);
overflow: hidden;
}
.kd-card .kd-card-avatar .kd-card-avatar-img.circle {
border-radius: 50%;
}
.kd-card .kd-card-avatar .kd-card-avatar-img img {
width: 100%;
height: 100%;
}
.kd-card .kd-card-avatar .kd-card-avatar-title {
font-size: var(--kd-c-card-title-font-size, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-card-title-color, var(--kd-g-color-text-primary, #212121));
}
.kd-card .kd-card-avatar .kd-card-avatar-desc {
font-size: var(--kd-c-card-content-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-card-content-color, var(--kd-g-color-text-secondary, #666));
}
.kd-card .kd-checkbox {
position: absolute;
top: var(--kd-c-card-spacing-padding-horizontal, 12px);
right: var(--kd-c-card-spacing-padding-horizontal, 12px);
}
.kd-card .kd-card-tags {
padding: 4px var(--kd-c-card-spacing-padding-horizontal, 12px);
}
.kd-card .kd-card-tags .kd-tag:not(:last-child) {
margin-right: var(--kd-c-card-spacing-padding-vertical, 8px);
}
.kd-card .kd-card-body {
padding: var(--kd-c-card-spacing-padding-vertical, 8px) var(--kd-c-card-spacing-padding-horizontal, 12px);
font-size: var(--kd-c-card-content-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-card-content-color, var(--kd-g-color-text-secondary, #666));
}
.kd-card .kd-card-actions {
height: 32px;
padding: 0 var(--kd-c-card-spacing-padding-horizontal, 12px);
line-height: 32px;
text-align: right;
background-color: #fafafa;
}
.kd-card .kd-card-actions > a {
margin-left: 16px;
font-size: var(--kd-c-card-content-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-card-actions-color, var(--kd-g-color-theme, #5582f3));
}
.kd-card .kd-card-actions > a:hover {
color: var(--kd-c-card-actions-color-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-card .kd-card-actions > a:active {
color: var(--kd-c-card-actions-color-active, var(--kd-g-color-theme-7, #375cca));
}
.kd-card-extra {
position: absolute;
top: 6px;
right: 4px;
}
.kd-card-extra i {
font-size: 22px;
width: 32px;
cursor: pointer;
}
.kd-card-lists-icon {
font-size: 32px;
position: absolute;
top: 6px;
right: 40px;
}
.kd-card-rtl {
direction: rtl;
text-align: right;
}
.kd-card-rtl .kd-card-header {
padding: 0 var(--kd-c-card-spacing-padding-horizontal, 12px) 0 58px;
}
.kd-card-rtl .kd-checkbox {
left: var(--kd-c-card-spacing-padding-horizontal, 12px);
right: auto;
}
.kd-card-rtl .kd-card-avatar .kd-card-avatar-img {
margin-left: var(--kd-c-card-spacing-padding-vertical, 8px);
margin-right: 0;
}
.kd-card-rtl .kd-card-extra {
left: 4px;
right: auto;
}
.kd-card-rtl .kd-card-actions {
text-align: left;
}
.kd-card-rtl .kd-card-actions > a {
margin-right: 16px;
margin-left: 0;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
.kd-carousel-root {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.kd-carousel-list {
list-style: none;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
}
.kd-carousel-list-item {
position: relative;
-ms-flex-negative: 0;
flex-shrink: 0;
height: 100%;
width: 100%;
}
.kd-carousel-list-slide {
width: 100%;
}
.kd-carousel-list-slide .kd-carousel-list-item {
opacity: 1;
border-radius: var(--kd-c-carousel-border-radius, 0px);
}
.kd-carousel-list-slide .kd-carousel-list-item-animation {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.kd-carousel-list-slide .kd-carousel-list-item-none-animation {
-webkit-transition: none;
transition: none;
}
.kd-carousel-list-slide .kd-carousel-list-item-not-hidden {
opacity: 1;
}
.kd-carousel-list-slide .kd-carousel-list-item-hidden {
opacity: 0;
}
.kd-carousel-list-fade {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.kd-carousel-list-fade .kd-carousel-list-item {
opacity: 1;
}
.kd-carousel-list-fade .kd-carousel-list-item-animation {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.kd-carousel-list-fade .kd-carousel-list-item-none-animation {
-webkit-transition: none;
transition: none;
}
.kd-carousel-list-fade .kd-carousel-list-item-not-hidden {
opacity: 1;
z-index: 1;
}
.kd-carousel-list-fade .kd-carousel-list-item-hidden {
opacity: 0;
z-index: 0;
}
.kd-carousel-list-display {
width: 100%;
}
.kd-carousel-list-display .kd-carousel-list-item {
display: block;
}
.kd-carousel-list-display .kd-carousel-list-item-not-hidden {
display: block;
}
.kd-carousel-list-display .kd-carousel-list-item-hidden {
display: none;
}
.kd-carousel-slidebar {
position: absolute;
list-style: none;
padding: 0;
z-index: 1;
}
.kd-carousel-slidebar-left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: var(--kd-c-carousel-spacing-margin-left, 12px);
}
.kd-carousel-slidebar-left > li {
margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
width: var(--kd-c-carousel-dots-sizing-height, 4px);
height: var(--kd-c-carousel-dots-sizing-width, 12px);
}
.kd-carousel-slidebar-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: var(--kd-c-carousel-spacing-margin-right, 12px);
}
.kd-carousel-slidebar-right > li {
margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
width: var(--kd-c-carousel-dots-sizing-height, 4px);
height: var(--kd-c-carousel-dots-sizing-width, 12px);
}
.kd-carousel-slidebar-bottom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: var(--kd-c-carousel-spacing-margin-bottom, 12px);
}
.kd-carousel-slidebar-bottom > li {
margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
height: var(--kd-c-carousel-dots-sizing-height, 4px);
width: var(--kd-c-carousel-dots-sizing-width, 12px);
}
.kd-carousel-slidebar-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: var(--kd-c-carousel-spacing-margin-top, 12px);
}
.kd-carousel-slidebar-top > li {
margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
height: var(--kd-c-carousel-dots-sizing-height, 4px);
width: var(--kd-c-carousel-dots-sizing-width, 12px);
}
.kd-carousel-slidebar-dot > button {
display: block;
border-radius: var(--kd-c-carousel-dots-border-radius, 2px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 0;
height: 100%;
padding: 0;
width: 100%;
cursor: pointer;
outline: none;
background-color: var(--kd-c-carousel-dots-color-background, #D8D8D8);
}
.kd-carousel-slidebar-dot {
display: block;
border-radius: var(--kd-c-carousel-dots-border-radius, 2px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 0;
height: 100%;
padding: 0;
width: 100%;
cursor: pointer;
outline: none;
}
.kd-carousel-slidebar-dot-active {
opacity: 1;
}
.kd-carousel-slidebar-dot-active > button {
background-color: var(--kd-c-carousel-dots-color-hover, #666666);
opacity: 1;
}
.kd-carousel-jump {
position: absolute;
top: 50%;
left: unset;
right: 16px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
}
.kd-carousel-jump-left {
left: 16px;
right: unset;
}
.kd-carousel-jump:not(.kd-carousel-jump-disabled) {
cursor: pointer;
}
.kd-carousel-jump > *:first-child {
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;
}
.kd-carousel-jump-icon {
font-size: 20px;
color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
}
.kd-carousel-jump-icon:hover {
color: var(--kd-c-carousel-jump-icon-color-hover, #666666);
}
.kd-carousel-jump-disabled {
cursor: not-allowed;
}
.kd-carousel-jump-disabled .kd-carousel-jump-icon:hover {
color: var(--kd-c-carousel-jump-icon-color, #D9D9D9);
}
.vertical {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical > li {
margin: var(--kd-c-carousel-dots-spacing-margin, 4px) 0;
width: var(--kd-c-carousel-dots-sizing-height, 4px);
height: var(--kd-c-carousel-dots-sizing-width, 12px);
}
.horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.horizontal > li {
margin: 0 var(--kd-c-carousel-dots-spacing-margin, 4px);
height: var(--kd-c-carousel-dots-sizing-height, 4px);
width: var(--kd-c-carousel-dots-sizing-width, 12px);
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-cascader-picker {
position: relative;
outline: none;
cursor: pointer;
background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
}
.kd-cascader-picker.disabled .kd-cascader-picker-input {
cursor: not-allowed;
border-color: var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-cascader-picker.disabled .kd-cascader-picker-input .kd-input-suffix,
.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*='kdicon'] {
color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-cascader-picker-label {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 20px;
padding: 0 24px 0 0;
line-height: 20px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-cascader-picker-input {
background-color: transparent;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.kd-cascader-picker-input > input {
color: transparent !important;
cursor: pointer;
}
.kd-cascader-picker-input.expand i[class*='kdicon'] {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.kd-cascader-picker-input .kd-input-suffix,
.kd-cascader-picker-input i[class*='kdicon'] {
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.kd-cascader-picker.allowClear:hover .kd-cascader-picker-close {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}
.kd-cascader-picker.allowClear:hover .kd-input-suffix {
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.kd-cascader-picker-close {
position: absolute;
top: 50%;
right: 0;
opacity: 0;
cursor: pointer;
visibility: hidden;
color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
-webkit-transition: all 0.1s;
transition: all 0.1s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.9) translateY(-50%);
transform: scale(0.9) translateY(-50%);
}
.kd-cascader-picker-close:hover {
color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
}
.kd-cascader-menus {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
color: var(--kd-c-cascader-color-text, var(--kd-g-color-text-primary, #212121));
border-radius: var(--kd-c-cascader-radius-border, var(--kd-g-radius-border, 2px));
font-size: var(--kd-c-cascader-font-size, var(--kd-g-font-size-small, 12px));
font-weight: var(--kd-c-cascader-font-weight, 'normal');
background-color: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
opacity: 1;
visibility: visible;
z-index: var(--kd-g-z-index-popper, 1050);
}
.kd-cascader-menus.hidden {
opacity: 0;
visibility: hidden;
}
.kd-cascader-menus .kd-cascader-menu {
display: inline-block;
height: var(--kd-c-cascader-sizing-height, 192px);
min-width: var(--kd-c-cascader-menu-sizing-min-width, 116px);
margin: 0;
padding: var(--kd-c-cascader-menu-spacing-padding-vertical, 8px) 0;
overflow-y: auto;
}
.kd-cascader-menus .kd-cascader-menu:not(:first-child) {
border-left: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-cascader-menus .kd-cascader-menu-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;
padding: 0 var(--kd-c-cascader-menu-item-spacing-padding-horizontal, 12px);
line-height: var(--kd-c-cascader-menu-item-sizing-height, 32px);
cursor: pointer;
}
.kd-cascader-menus .kd-cascader-menu-item:not(.disabled, .selected):hover {
background-color: var(--kd-c-cascader-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
-webkit-transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease, cubic-bezier(0.4, 0, 0.6, 1));
transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease, cubic-bezier(0.4, 0, 0.6, 1));
}
.kd-cascader-menus .kd-cascader-menu-item.disabled {
color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-cascader-menus .kd-cascader-menu-item.selected {
color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-cascader-color-background-selected, var(--kd-g-color-background-ongoing, #f2f9ff));
}
.kd-cascader-menus .kd-cascader-menu-item-label {
width: var(--kd-c-cascader-menu-item-label-sizing-width, 72px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
width: calc(var(--kd-c-cascader-menu-item-label-sizing-width, 72px) + 20px);
}
.kd-cascader-menus .kd-cascader-menu-item .kd-cascader-checkbox {
margin-right: 5px;
}
.kd-cascader-menus .kd-empty {
padding: 10px 0 20px;
}
.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-label {
padding-left: 9px;
}
.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-close {
right: 10px;
}
.kd-cascader-bordered.kd-cascader-multiple {
border: 1px solid #d9d9d9;
padding-left: 8px;
border-radius: 2px;
}
.kd-cascader-bordered.kd-cascader-multiple .kd-cascader-suffix {
right: 9px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kd-cascader-multiple {
-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);
width: 100%;
min-height: 30px;
max-height: 100px;
color: #212121;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
position: relative;
border-bottom: 1px solid #d9d9d9;
background: var(--kd-c-cascader-color-background, var(--kd-g-color-white, #fff));
}
.kd-cascader-multiple:not(.kd-cascader-disabled):focus {
border-color: var(--kd-c-cascader-color-text-selected, var(--kd-g-color-theme, #5582f3));
outline: none;
}
.kd-cascader-multiple-wrapper {
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;
width: 100%;
padding: 1px 28px 1px 0;
overflow-y: auto;
}
.kd-cascader-placeholder {
position: absolute;
font-size: 14px;
color: var(--kd-c-cascader-placeholder-color, var(--kd-g-color-text-placeholder, #ccc));
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-cascader-suffix {
right: 0;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 8px;
}
.kd-cascader-selection-tag {
max-width: 100%;
}
.kd-cascader-multiple:hover .kd-cascader-icon-clear {
opacity: 1;
}
.kd-cascader-icon-arrow {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
.kd-cascader-icon-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-cascader-icon-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-cascader-icon-clear {
opacity: 0;
z-index: 1;
position: absolute;
background: #fff;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
}
.kd-cascader-icon-clear:hover {
color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
}
.kd-cascader-tag-describe {
font-size: 12px;
height: 20px;
line-height: 18px;
margin: 2px 8px 2px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-cascader-tag-describe-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 7px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
color: #212121;
}
.kd-cascader-disabled {
cursor: not-allowed;
}
.kd-cascader-disabled .kd-cascader-picker-label {
color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-cascader-disabled .kd-cascader-picker-input {
background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-cascader-disabled .kd-cascader-picker-input > input {
background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-cascader-disabled.kd-cascader-multiple {
background-color: var(--kd-c-cascader-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-cascader-disabled .kd-cascader-suffix {
color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-cascader-disabled .kd-cascader-tag-describe-content {
color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
border-color: var(--kd-c-cascader-tag-disabled-color, #d9d9d9);
}
.kd-cascader-picker:not(.kd-cascader-disabled):hover .kd-input-wrapper,
.kd-cascader-expand .kd-input-wrapper {
border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
}
.kd-cascader-multiple:not(.kd-cascader-disabled):hover,
.kd-cascader-expand {
border-color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
}
.kd-cascader-rtl {
direction: rtl;
}
.kd-cascader-rtl .kd-cascader-picker-label {
right: 0;
left: auto;
padding: 0 0 0 24px;
}
.kd-cascader-rtl .kd-cascader-picker-close {
left: 0;
right: auto;
}
.kd-cascader-rtl.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-label {
padding-left: 24px;
padding-right: 9px;
}
.kd-cascader-rtl.kd-cascader-bordered:not(.kd-cascader-multiple) .kd-cascader-picker-close {
left: 10px;
right: auto;
}
.kd-cascader-rtl.kd-cascader-multiple {
padding-left: 0;
padding-right: 8px;
}
.kd-cascader-rtl.kd-cascader-multiple .kd-cascader-multiple-wrapper {
padding: 1px 0 1px 28px;
}
.kd-cascader-rtl.kd-cascader-multiple .kd-cascader-suffix {
left: 0;
right: auto;
margin-right: 8px;
margin-left: 0;
}
.kd-cascader-rtl.kd-cascader-bordered.kd-cascader-rtl.kd-cascader-multiple {
padding-right: 8px;
padding-left: 0;
}
.kd-cascader-rtl.kd-cascader-bordered.kd-cascader-rtl.kd-cascader-multiple .kd-cascader-suffix {
left: 9px;
right: auto;
}
.kd-cascader-rtl .kd-cascader-menu:not(:first-child) {
border-right: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
border-left: none;
}
.kd-cascader-rtl .kd-cascader-menu-item .kd-cascader-checkbox {
margin-left: 5px;
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-checkbox {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
cursor: pointer;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: var(--kd-c-checkbox-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-checkbox-color-text-primary, #212121);
line-height: 18px;
}
.kd-checkbox-no-child {
height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-checkbox-group > *:not(:last-child) {
margin-right: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
}
.kd-checkbox-input {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
cursor: inherit;
opacity: 0;
inset: 0;
z-index: 1;
}
.kd-checkbox-children {
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;
z-index: 999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: var(--kd-c-checkbox-default-input-label-max-width);
}
.kd-checkbox-children .kd-input-underline {
background-color: transparent;
border-bottom: none;
}
.kd-checkbox-square {
border-radius: 2px;
border: 1px solid var(--kd-c-checkbox-color-border, #d9d9d9);
padding: var(--kd-c-checkbox-square-spacing-padding-horizontal, 7px) var(--kd-c-checkbox-square-spacing-padding-vertical, 12px);
-webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-checkbox-square:not(.kd-checkbox-square-disabled)::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
opacity: 0.2;
-webkit-box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-checkbox-square:hover {
color: var(--kd-c-checkbox-color-text-hover, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
}
.kd-checkbox-square-triangle,
.kd-checkbox-square-triangle-checked {
position: absolute;
content: '';
height: 0;
width: 0;
right: 0;
bottom: 0;
border-style: solid;
border-width: 0 0 var(--kd-c-checkbox-square-triangle-sizing-height, 18px) var(--kd-c-checkbox-square-triangle-sizing-width, 18px);
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
}
.kd-checkbox-square-triangle {
-webkit-animation: kdZoomBounceLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdZoomBounceLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-webkit-transition: all var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.4, 0, 0.6, 1);
transition: all var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.4, 0, 0.6, 1);
visibility: hidden;
opacity: 0;
}
.kd-checkbox-square-inner {
position: absolute;
height: 9px;
width: 11px;
color: var(--kd-c-checkbox-square-input-icon-color, #fff);
font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.kd-checkbox-square-inner-icon {
font-size: inherit;
line-height: 100%;
-webkit-animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
animation: kdZoomLeaveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-checkbox-square-triangle-disabled {
border-bottom-color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-checkbox-square-disabled,
.kd-checkbox-square-disabled:hover {
border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
cursor: not-allowed !important;
}
.kd-checkbox-square-checked {
border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
}
.kd-checkbox-square-checked:not(.kd-checkbox-square-checked-disabled)::after {
-webkit-animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-checkbox-square-checked .kd-checkbox-square-triangle-checked:not(.kd-checkbox-square-disabled) {
-webkit-animation: kdZoomBounceEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
animation: kdZoomBounceEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-checkbox-square-checked .kd-checkbox-square-inner-icon:not(.kd-checkbox-square-disabled) {
-webkit-animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
animation: kdZoomEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-checkbox-square-checked-disabled {
background-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
border-color: var(--kd-c-checkbox-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
cursor: not-allowed !important;
}
.kd-checkbox-square-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
}
.kd-checkbox-square.checked .kd-checkbox-children {
color: var(--kd-c-checkbox-color-text-primary, #212121);
}
.kd-checkbox-default {
border: none;
padding: var(--kd-c-checkbox-default-spacing-padding, 0);
-webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-checkbox-default:hover,
.kd-checkbox-default:hover .kd-checkbox-default-wrapper {
color: var(--kd-c-checkbox-color-text-hover, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
cursor: pointer;
}
.kd-checkbox-default-disabled,
.kd-checkbox-default-disabled:hover,
.kd-checkbox-default-disabled:hover .kd-checkbox-default-wrapper {
color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
border-color: var(--kd-c-checkbox-color-border, #d9d9d9);
cursor: not-allowed !important;
}
.kd-checkbox-default-wrapper {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
background-color: var(--kd-c-checkbox-color-background, var(--kd-g-color-background, #fff));
border: var(--kd-c-checkbox-default-input-border-width, 1px) solid var(--kd-c-checkbox-color-border, #d9d9d9);
border-radius: var(--kd-c-checkbox-default-input-radius-border, 2px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)), border-color var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s));
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-checkbox-default-wrapper:not(.kd-checkbox-default-wrapper-disabled)::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
opacity: 0.2;
-webkit-box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-checkbox-default-wrapper-size {
height: var(--kd-c-checkbox-default-input-sizing-height, 14px);
width: var(--kd-c-checkbox-default-input-sizing-width, 14px);
}
.kd-checkbox-default-margin {
margin-right: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
}
.kd-checkbox-default-checked-disabled {
background-color: var(--kd-c-checkbox-default-color-background-disabled, #e5e5e5) !important;
border-color: var(--kd-c-checkbox-default-color-background-disabled, #d9d9d9) !important;
cursor: not-allowed !important;
}
.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner {
color: var(--kd-c-checkbox-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-checkbox-default-checked {
background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
-webkit-transition: background-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: background-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), border-color calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-checkbox-default-checked:not(.kd-checkbox-default-checked-disabled)::after {
-webkit-animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: fadeEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) + 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards, waveEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-checkbox-default-inner:not(.kd-checkbox-default-checked-disabled .kd-checkbox-default-inner) {
-webkit-animation: kdZoomBounceDefaultEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
animation: kdZoomBounceDefaultEffect calc(var(--kd-c-checkbox-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) !important;
}
.kd-checkbox-default-inner {
position: absolute;
color: var(--kd-c-checkbox-default-input-icon-color, #fff);
font-size: var(--kd-c-checkbox-default-input-icon-font-size, 12px);
height: 100%;
width: 100%;
top: 5%;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-checkbox-default-inner-icon {
font-size: inherit;
line-height: 100%;
}
.kd-checkbox-default-indeterminate::before {
position: absolute;
top: 50%;
left: 50%;
width: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
height: var(--kd-c-checkbox-default-indeterminate-sizing-square, 6px);
background-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
border: 0;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
content: ' ';
}
.kd-checkbox-default.checked .kd-checkbox-children {
color: var(--kd-c-checkbox-color-text-primary, #212121);
}
.kd-checkbox-default-indeterminate .kd-checkbox-children {
color: var(--kd-c-checkbox-color-text-primary, #212121);
}
.kd-checkbox-rtl {
direction: rtl;
}
.kd-checkbox-rtl.kd-checkbox-default .kd-checkbox-default-margin {
margin-right: 0;
margin-left: var(--kd-c-checkbox-default-input-spacing-margin-right, 4px);
}
.kd-checkbox-group-rtl {
direction: rtl;
}
.kd-checkbox-group-rtl.kd-checkbox-group {
text-align: right;
}
.kd-checkbox-group-rtl.kd-checkbox-group > .kd-checkbox-rtl:not(:last-child) {
margin-left: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
margin-right: 0;
}
.kd-checkbox-group-rtl.kd-checkbox-group .kd-checkbox {
margin-left: var(--kd-c-checkbox-group-spacing-margin-right, 12px);
margin-right: 0;
}
.kd-checkbox-group-rtl .kd-checkbox-square-triangle,
.kd-checkbox-group-rtl .kd-checkbox-square-triangle-checked {
position: absolute;
content: '';
height: 0;
width: 0;
right: auto;
left: 0;
bottom: 0;
border-style: solid;
border-width: 0 var(--kd-c-checkbox-square-triangle-sizing-width, 18px) var(--kd-c-checkbox-square-triangle-sizing-height, 18px) 0;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: var(--kd-c-checkbox-color-border-active, var(--kd-g-color-theme, #5582f3));
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-city-picker {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
cursor: pointer;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.kd-city-picker-selector {
width: 100%;
}
.kd-city-picker-selector:hover .kd-city-picker-icon-active {
color: #3761ca;
}
.kd-city-picker-description {
color: #666666;
font-size: 12px;
}
.kd-city-picker-visible .kd-city-picker-icon-active {
color: #3761ca;
}
.kd-city-picker-visible div.kd-city-picker-show-search .kd-city-picker-selection-item {
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
}
.kd-city-picker-icon-arrow {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
.kd-city-picker-icon-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-city-picker-icon-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-city-picker-icon-clear {
opacity: 0;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
font-size: var(--kd-c-city-picker-icon-clear-font-size, 16px);
}
.kd-city-picker-icon-clear:hover {
color: var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-placeholder {
position: absolute;
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
right: 24px;
left: 0;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-city-picker-borderless {
border: none;
}
.kd-city-picker-underline {
border-bottom: 1px solid var(--kd-c-city-picker-color-border, var(--kd-g-color-input, #999));
}
.kd-city-picker-underline:hover:not(.kd-city-picker-disabled) {
border-bottom: 1px solid var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-bordered {
border: 1px solid var(--kd-c-city-picker-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px) !important;
border-radius: var(--kd-c-city-picker-bordered-radius-border, 2px);
}
.kd-city-picker-bordered:hover:not(.kd-city-picker-disabled) {
border: 1px solid var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-bordered .kd-city-picker-suffix {
padding-right: 8px;
}
.kd-city-picker-bordered .kd-city-picker-placeholder {
padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
}
.kd-city-picker-wrapper {
-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: var(--kd-c-city-picker-wrapper-spacing-padding, 1px 24px 1px 0);
max-width: 100%;
color: #212121;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.kd-city-picker-wrapper:hover .kd-city-picker-icon-clear {
opacity: 1;
}
.kd-city-picker-wrapper .kd-city-picker-icon-clear {
color: var(--kd-c-city-picker-icon-clear-color-text, #666666);
}
.kd-city-picker-wrapper .kd-city-picker-icon-clear:hover {
color: var(--kd-c-city-picker-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-show-search {
cursor: text;
}
.kd-city-picker-dropdown {
display: block;
z-index: var(--kd-c-city-picker-z-index, var(--kd-g-z-index-popper, 1050));
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
overflow: auto;
font-size: var(--kd-c-city-picker-dropdown-font-size, 12px);
font-variant: initial;
background-color: var(--kd-c-city-picker-dropdown-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-c-city-picker-radius-border, var(--kd-g-radius-border, 2px));
outline: none;
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.kd-city-picker-dropdown.kd-popper-bottom-start-in {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
}
.kd-city-picker-dropdown.kd-popper-bottom-start-out {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
}
.kd-city-picker-dropdown .kd-tabs-tab-list {
width: 100%;
}
.kd-city-picker-dropdown .kd-tabs-tab-list > span {
width: 50%;
}
.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane {
text-align: center;
}
.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line {
padding: 0 12px;
font-size: 12px;
}
.kd-city-picker-dropdown .kd-tabs-tab-list .kd-tab-pane-type-line .kd-tab-pane-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
.kd-city-picker-dropdown .kd-tabs-noContainer {
height: unset;
}
.kd-city-picker-dropdown .kd-tabs-right-arrows {
display: none;
}
.kd-city-picker-dropdown-empty {
height: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #b2b2b2;
font-size: 14px;
}
.kd-city-picker-dropdown-common {
height: 32px;
line-height: 32px;
padding: 0 12px;
background: #fafafa;
color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
}
.kd-city-picker-dropdown-loading {
height: 48px;
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;
}
.kd-city-picker-dropdown.topLeft.hidden,
.kd-city-picker-dropdown.bottomLeft.hidden,
.kd-city-picker-dropdown.topRight.hidden,
.kd-city-picker-dropdown.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-city-picker-list {
padding: 8px 0;
max-height: 320px;
overflow-y: auto;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.kd-city-picker-list-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
display: block;
font-weight: normal;
font-size: var(--kd-c-city-picker-dropdown-font-size, 12px);
min-height: var(--kd-c-city-picker-item-sizing-height, 22px);
padding: 5px 12px;
color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
line-height: var(--kd-c-city-picker-dropdown-line-height, 22px);
cursor: pointer;
}
.kd-city-picker-list-item-info {
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
white-space: nowrap;
}
.kd-city-picker-list-item-active:not(.kd-city-picker-list-item-disabled) {
background-color: var(--kd-c-city-picker-color-background, #f5f5f5);
}
.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) {
background-color: var(--kd-c-city-picker-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-list-item-selected:not(.kd-city-picker-list-item-disabled) .kd-city-picker-list-item-info {
color: var(--kd-c-city-picker-list-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-list-item-disabled {
color: var(--kd-c-city-picker-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
background-color: var(--kd-c-city-picker-item-color-background-disabled, #fff);
}
.kd-city-picker-list > .kd-city-picker-list-item-match {
color: var(--kd-c-city-picker-footer-color-text, var(--kd-g-color-text-primary, #212121));
}
.kd-city-picker-list > .kd-city-picker-list-item-match .kd-city-picker-list-item-info {
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
}
.kd-city-picker-highlight {
color: var(--kd-c-city-picker-highlight-color-text, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-size-small {
min-height: var(--kd-c-city-picker-sizing-height-small, 24px);
max-height: calc(var(--kd-c-city-picker-sizing-height-small, 24px) * 3 - 10px);
font-size: var(--kd-c-city-picker-font-size-small, 12px);
}
.kd-city-picker-size-middle {
min-height: var(--kd-c-city-picker-sizing-height-middle, 30px);
max-height: calc(var(--kd-c-city-picker-sizing-height-middle, 30px) * 3 - 10px);
font-size: var(--kd-c-city-picker-font-size-middle, 14px);
}
.kd-city-picker-size-large {
min-height: var(--kd-c-city-picker-sizing-height-large, 36px);
max-height: calc(var(--kd-c-city-picker-sizing-height-large, 36px) * 3 - 10px);
font-size: var(--kd-c-city-picker-font-size-large, 16px);
}
.kd-city-picker-suffix {
right: 0;
top: 0;
bottom: 0;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 8px;
cursor: pointer;
}
.kd-city-picker-focused {
border-color: var(--kd-c-city-picker-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-city-picker-focused .kd-city-picker-content-item:not(.kd-city-picker-content-item-seleted) {
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
}
.kd-city-picker-disabled {
background-color: var(--kd-c-city-picker-color-background-disabled, #fff);
color: var(--kd-c-city-picker-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
padding-right: 0;
border-color: #e5e5e5;
}
.kd-city-picker-disabled:hover {
cursor: not-allowed;
}
.kd-city-picker-disabled .kd-city-picker-suffix {
color: var(--kd-c-city-picker-arrow-icon-color-text-disabled, #b2b2b2);
}
.kd-city-picker-disabled.kd-city-picker-bordered {
padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
}
.kd-city-picker-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
font-size: 14px;
}
.kd-city-picker-content-search {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
}
.kd-city-picker-content-search-input {
outline: 0;
border-radius: 0;
border: none;
background: transparent;
height: 100%;
width: 100%;
cursor: pointer;
}
.kd-city-picker-content-item {
display: inline-block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-city-picker-content-info {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-city-picker-rtl {
direction: rtl;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-placeholder {
left: 24px;
right: 0;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-description {
text-align: right;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-wrapper {
padding: var(--kd-c-city-picker-wrapper-spacing-padding-rtl, 1px 0 1px 24px);
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-bordered.kd-city-picker-wrapper {
padding-left: 24px !important;
padding-right: 8px !important;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-bordered:hover:not(.kd-city-picker-disabled) {
border: 1px solid var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-bordered .kd-city-picker-suffix {
padding-right: 8px;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-selector .kd-city-picker-bordered .kd-city-picker-placeholder {
padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered.kd-city-picker-wrapper {
padding-right: 0;
padding-left: 24px;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-suffix {
padding-left: 8px;
padding-right: 0;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-bordered .kd-city-picker-placeholder {
padding-right: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-suffix {
left: 0;
right: auto;
margin-right: 8px;
margin-left: 0;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-disabled.kd-city-picker-bordered {
padding-right: 0;
padding-left: var(--kd-c-city-picker-bordered-spacing-padding-left, 8px);
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-item {
text-align: right;
}
.kd-city-picker-rtl.kd-city-picker .kd-city-picker-content-info {
text-align: left;
}
.kd-city-picker-rtl.kd-city-picker-dropdown.kd-popper-bottom-end-in {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
}
.kd-city-picker-rtl.kd-city-picker-dropdown.kd-popper-bottom-end-out {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-clipboard {
padding: 0;
position: relative;
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-weight: var(--kd-c-clipboard-font-weight, var(--kd-g-font-weight, 400));
color: #bbbbbb;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-clipboard:hover {
color: #5582f3;
}
.kd-clipboard:disabled,
.kd-clipboard[disabled] {
color: #bbbbbb;
cursor: not-allowed;
}
.kd-clipboard-size-small {
height: var(--kd-c-clipboard-sizing-height-small, 24px);
padding: var(--kd-c-clipboard-spacing-padding-vertical-small, 3px) var(--kd-c-clipboard-spacing-padding-horizontal-small, 8px);
font-size: var(--kd-c-clipboard-font-size-small, var(--kd-g-font-size-small, 12px));
line-height: calc(var(--kd-c-clipboard-sizing-height-small, 24px) - (var(--kd-c-clipboard-spacing-padding-vertical-small, 3px)) * 2);
}
.kd-clipboard-size-small.kd-clipboard-icon-only {
font-size: var(--kd-c-clipboard-icon-font-size-small, 14px);
padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-clipboard-size-middle {
height: var(--kd-c-clipboard-sizing-height-middle, 28px);
padding: var(--kd-c-clipboard-spacing-padding-vertical-middle, 5px) var(--kd-c-clipboard-spacing-padding-horizontal-middle, 8px);
font-size: var(--kd-c-clipboard-font-size-middle, var(--kd-g-font-size-middle, 14px));
line-height: calc(var(--kd-c-clipboard-sizing-height-middle, 28px) - (var(--kd-c-clipboard-spacing-padding-vertical-middle, 5px)) * 2);
}
.kd-clipboard-size-middle.kd-clipboard-icon-only {
font-size: var(--kd-c-clipboard-icon-font-size-middle, 16px);
padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-clipboard-size-large {
height: var(--kd-c-clipboard-sizing-height-large, 32px);
padding: var(--kd-c-clipboard-spacing-padding-vertical-large, 6px) var(--kd-c-clipboard-spacing-padding-horizontal-large, 8px);
font-size: var(--kd-c-clipboard-font-size-large, var(--kd-g-font-size-large, 16px));
line-height: calc(var(--kd-c-clipboard-sizing-height-large, 32px) - (var(--kd-c-clipboard-spacing-padding-vertical-large, 6px)) * 2);
}
.kd-clipboard-size-large.kd-clipboard-icon-only {
font-size: var(--kd-c-clipboard-icon-font-size-large, 18px);
padding: 0 var(--kd-c-clipboard-icon-spacing-padding-horizontal, 4px);
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;
}
.kd-clipboard:not(.kd-clipboard-icon-only) > i:not(:last-child) {
margin-right: 2px;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-collapse {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
}
.kd-collapse-panel:last-child {
border-top: none;
}
.kd-collapse-panel-border.kd-collapse-panel:first-child {
border-top: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-collapse-panel-border.kd-collapse-panel:not(:nth-child(1)) {
border-top: none;
}
.kd-collapse-panel {
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;
}
.kd-collapse-panel-border {
border: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-collapse-panel-top {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
padding: var(--kd-c-collapse-header-spacing-padding, 8px 50px 8px 28px);
background: var(--kd-c-collapse-header-color-background, rgba(0, 0, 0, 0));
}
.kd-collapse-panel-no-assist {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.kd-collapse-panel-top-border {
border-bottom: var(--kd-c-collapse-border-width, 1px) solid var(--kd-c-collapse-color-border-strong-2, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-collapse-panel-left {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 1.5;
}
.kd-collapse-panel-middle {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-left: 22px;
color: var(--kd-c-collapse-header-color-text-secondary, var(--kd-g-color-text-secondary, #666));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-collapse-panel-right {
margin-left: 40px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
}
.kd-collapse-panel-extra,
.kd-collapse-panel-header {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--kd-c-collapse-header-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-collapse-header-font-size, 16px);
}
.kd-collapse-panel-header {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-collapse-panel-header:hover {
color: var(--kd-c-collapse-header-color-text-hover, #666666);
}
.kd-collapse-panel-icon {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin-right: var(--kd-c-collapse-spacing-margin-right, 6px);
font-size: var(--kd-c-collapse-icon-font-size, 16px);
}
.kd-collapse-panel-icon:hover,
.kd-collapse-panel-left:hover {
cursor: pointer;
}
.kd-collapse-panel-animation-expand {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-collapse-panel-animation-collapse {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-collapse-panel-children {
overflow: hidden;
opacity: 0;
padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
-webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s));
background: var(--kd-c-collapse-content-color-background, rgba(0, 0, 0, 0));
}
.kd-collapse-panel-children-hide {
overflow: hidden;
opacity: 0;
height: 0;
padding: var(--kd-c-collapse-content-spacing-padding, 0 50px);
color: var(--kd-c-collapse-content-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-collapse-content-font-size, var(--kd-g-font-size-middle, 14px));
-webkit-transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);
transition: height var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)), opacity calc(var(--kd-c-collapse-motion-duration, var(--kd-g-duration, 0.3s)) / 2);
}
.kd-collapse-panel-children-bordered {
padding: var(--kd-c-collapse-content-bordered-spacing-padding, 12px);
overflow: hidden;
}
.kd-collapse-panel-disabled {
cursor: not-allowed !important;
color: var(--kd-c-collapse-color-disabled, raba(178, 178, 178, 1));
}
.kd-collapse-rtl {
direction: rtl;
}
.kd-collapse-rtl .kd-collapse-panel-top {
padding: 8px 28px 8px 50px;
}
.kd-collapse-rtl .kd-collapse-panel-top .kd-collapse-panel-right {
margin-right: 40px;
margin-left: 0;
}
.kd-collapse-rtl .kd-collapse-panel-icon {
margin-left: var(--kd-c-collapse-spacing-margin-right, 6px);
margin-right: 0;
}
.kd-collapse-rtl .kd-collapse-panel-animation-expand {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.kd-collapse-rtl .kd-collapse-panel-children > div {
text-align: right;
}
.kd-collapse-rtl .kd-collapse-panel-children-hide > div {
text-align: right;
}
.kd-collapse-rtl .kd-collapse-panel-middle {
margin-right: 22px;
margin-left: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-color-picker-container {
position: relative;
width: var(--kd-c-color-picker-input-sizing-width, 230px);
height: var(--kd-c-color-picker-input-sizing-height, 28px);
}
.kd-color-picker-container-pure {
width: 28px;
}
.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
margin-right: 0;
}
.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-suffix {
margin-left: 0;
}
.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input {
display: none;
}
.kd-color-picker-container .kd-color-picker-input {
height: 100%;
width: 100%;
padding: 0 8px;
font-size: var(--kd-c-color-picker-input-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-color-picker-container .kd-color-picker-icon-container {
cursor: pointer;
}
.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: var(--kd-c-color-picker-input-prefix-sizing-width, 16px);
height: var(--kd-c-color-picker-input-prefix-sizing-height, 16px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 2px;
line-height: 18px;
text-align: center;
color: #fff;
}
.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-no-color-line {
width: var(--kd-c-color-picker-input-prefix-line-sizing-width, 1px);
height: var(--kd-c-color-picker-input-prefix-line-sizing-height, 22.6px);
background-color: #ff2e3d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.kd-color-picker-container .kd-color-picker-icon-container-disabled {
cursor: not-allowed;
}
.kd-color-picker-pop {
width: var(--kd-c-color-picker-panel-sizing-width, 304px);
}
.kd-color-picker-pop.topLeft.hidden,
.kd-color-picker-pop.topRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
}
.kd-color-picker-pop.topLeft,
.kd-color-picker-pop.topRight {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
}
.kd-color-picker-pop.bottomLeft.hidden,
.kd-color-picker-pop.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
}
.kd-color-picker-pop.bottomLeft,
.kd-color-picker-pop.bottomRight {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
}
.kd-color-picker-pop .kd-color-picker-panel {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: var(--kd-c-color-picker-panel-sizing-width, 304px);
padding: 4px 12px 16px;
background: #ffffff;
-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
border-radius: 2px;
-webkit-transform-origin: top left;
transform-origin: top left;
z-index: var(--kd-c-color-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
}
.kd-color-picker-pop .kd-color-picker-panel > div {
margin-top: 12px;
}
.kd-color-picker-pop .kd-color-picker-panel-clear {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 12px;
color: #666666;
line-height: 16px;
font-weight: 400;
}
.kd-color-picker-pop .kd-color-picker-panel-clear-box {
position: relative;
width: 16px;
height: 16px;
margin-right: 4px;
border: 1px solid #d9d9d9;
border-radius: 2px;
cursor: pointer;
background-color: #fff;
}
.kd-color-picker-pop .kd-color-picker-panel-clear-box::after {
position: absolute;
left: 7.5px;
top: -3.5px;
content: '';
width: 1px;
height: 22.6px;
background-color: #ff2e3d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.kd-color-picker-pop .kd-color-picker-panel-clear-box .active {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 20px;
height: 20px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.kd-color-picker-pop .kd-color-picker-panel-clear-box:hover::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 20px;
height: 20px;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
.kd-color-picker-pop .kd-color-picker-panel-clear-box:active::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
width: 20px;
height: 20px;
border: 1px solid #d9d9d9;
border-radius: 4px;
border: 1px solid #949494;
}
.kd-color-picker-pop .kd-color-picker-panel-clear-text {
font-size: 12px;
color: #666666;
line-height: 16px;
font-weight: 400;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome {
width: 278px !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child {
padding: 9px 0 4px !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
margin-top: -1px !important;
margin-left: 4px !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal {
width: 240px !important;
height: 12px !important;
border-radius: 6px !important;
padding: unset !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child .hue-horizontal > div > div {
margin-top: 1px;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div {
width: 240px !important;
height: 12px !important;
margin: unset;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:first-child {
border-radius: 6px !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:nth-child(2) {
border-radius: 6px !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child {
margin: unset !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child > div > div:last-child > div > div {
margin-top: 1px;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:last-child {
display: none !important;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome-no-box > div:first-child {
display: none;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome-no-hue > div:last-child .flexbox-fix:first-child > div:last-child > div:first-child {
display: none;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome-no-hue > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child {
margin-top: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome-no-opacity > div:last-child .flexbox-fix:first-child > div:last-child > div:last-child {
display: none;
}
.kd-color-picker-pop .kd-color-picker-panel-chrome-no-opacity > div:last-child .flexbox-fix:first-child > div:last-child > div:first-child {
margin-top: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel .kd-color-picker-panel-chrome-no-box.kd-color-picker-panel-chrome-no-hue.kd-color-picker-panel-chrome-no-opacity {
display: none;
}
.kd-color-picker-pop .kd-color-picker-panel .kd-color-picker-panel-chrome-no-hue.kd-color-picker-panel-chrome-no-opacity > div:last-child {
display: none;
}
.kd-color-picker-pop .kd-color-picker-panel-switch {
font-size: 12px;
color: #666666;
letter-spacing: 0;
line-height: 16px;
font-weight: 400;
}
.kd-color-picker-pop .kd-color-picker-panel-switch span {
vertical-align: middle;
margin-right: 9px;
}
.kd-color-picker-pop .kd-color-picker-panel-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select {
-webkit-box-flex: 0;
-ms-flex: 0 0 64px;
flex: 0 0 64px;
display: inline-block;
position: relative;
margin-right: 8px;
font-size: var(--kd-c-color-picker-panel-select-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select {
width: 64px;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select,
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select .kd-select-selection-item {
min-height: unset;
line-height: unset;
overflow: visible;
text-overflow: unset;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-suffix {
padding-right: 4px;
margin-left: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel {
margin: 0 !important;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel.bottomLeft,
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel.topLeft {
position: absolute;
width: 64px !important;
min-width: unset !important;
background: #ffffff;
right: 0;
left: unset !important;
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item-option {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: unset;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-bordered {
border-radius: 2px;
width: var(--kd-c-color-picker-panel-select-sizing-width, 212px);
height: var(--kd-c-color-picker-panel-select-sizing-height, 28px);
min-height: 28px;
padding: 0 28px 0 0;
}
.kd-color-picker-pop .kd-color-picker-panel-container-select .active-option {
background-color: var(--kd-c-color-picker-panel-option-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
}
.kd-color-picker-pop .kd-color-picker-panel-container-input {
height: 28px;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item {
height: 28px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item.active {
z-index: 2;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 1;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2) {
margin-right: -1px;
margin-left: -1px;
border-radius: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2):hover {
z-index: 1;
}
.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-container-transparent {
-webkit-box-flex: 0;
-ms-flex: 0 0 54px;
flex: 0 0 54px;
height: 28px;
margin-left: 8px;
padding: 0;
text-align: center;
font-size: var(--kd-c-color-picker-panel-alpha-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-title {
font-size: 12px;
color: #666666;
line-height: 18px;
font-weight: 400;
margin-bottom: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li {
margin-right: 8px;
margin-top: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
margin-right: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
margin-top: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: var(--kd-c-color-picker-panel-historical-sizing-width, 16px);
height: var(--kd-c-color-picker-panel-historical-sizing-height, 16px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 2px;
list-style: none;
cursor: pointer;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li .square {
display: none;
position: absolute;
-webkit-box-sizing: inherit;
box-sizing: inherit;
top: -3px;
left: -3px;
width: calc(var(--kd-c-color-picker-panel-historical-sizing-width, 16px) + 4px);
height: calc(var(--kd-c-color-picker-panel-historical-sizing-height, 16px) + 4px);
border: 1px solid #b2b2b0;
border-radius: 4px;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li .square-click {
display: block;
-webkit-box-shadow: 0 0 0 1px #e5e5e5 !important;
box-shadow: 0 0 0 1px #e5e5e5 !important;
}
.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container li:hover .square {
display: block;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-title {
font-size: 12px;
color: #666666;
line-height: 18px;
font-weight: 400;
margin-bottom: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li {
margin-right: 8px;
margin-top: 8px;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(12n) {
margin-right: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container-ie11 li:nth-child(-n + 12) {
margin-top: 0;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container li {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: var(--kd-c-color-picker-panel-preset-sizing-width, 16px);
height: var(--kd-c-color-picker-panel-preset-sizing-height, 16px);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 2px;
list-style: none;
cursor: pointer;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container li .square {
display: none;
position: absolute;
-webkit-box-sizing: inherit;
box-sizing: inherit;
top: -3px;
left: -3px;
width: calc(var(--kd-c-color-picker-panel-preset-sizing-width, 16px) + 4px);
height: calc(var(--kd-c-color-picker-panel-preset-sizing-height, 16px) + 4px);
border: 1px solid #b2b2b0;
border-radius: 4px;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container li .square-click {
display: block;
-webkit-box-shadow: 0 0 0 1px #e5e5e5 !important;
box-shadow: 0 0 0 1px #e5e5e5 !important;
}
.kd-color-picker-pop .kd-color-picker-panel-color-box-container li:hover .square {
display: block;
}
.kd-color-picker-rtl {
direction: rtl;
}
.kd-color-picker-rtl .kd-color-picker-input .kd-input-prefix {
margin-right: 0;
margin-left: 3px;
}
.kd-color-picker-rtl .kd-color-picker-input .kd-input {
direction: ltr;
text-align: right;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel {
-webkit-transform-origin: top left;
transform-origin: top left;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-clear-box {
margin-left: 4px;
margin-right: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-switch span {
margin-right: 9px;
margin-left: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select {
margin-left: 8px;
margin-right: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-select .kd-select-bordered {
padding: 0 28px 0 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input {
direction: ltr;
text-align: right;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item {
height: 28px;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item.active {
z-index: 2;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
z-index: 1;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2) {
margin-right: -1px;
margin-left: -1px;
border-radius: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:nth-child(2):hover {
z-index: 1;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-input-group-item:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-container-transparent {
-webkit-box-flex: 0;
-ms-flex: 0 0 54px;
flex: 0 0 54px;
height: 28px;
margin-right: 8px;
margin-left: 0;
padding: 0;
text-align: center;
font-size: var(--kd-c-color-picker-panel-alpha-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-title {
font-size: 12px;
color: #666666;
line-height: 18px;
font-weight: 400;
margin-bottom: 8px;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li {
margin-right: 8px;
margin-top: 8px;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(12n) {
margin-right: 0;
}
.kd-color-picker-rtl.kd-color-picker-pop .kd-color-picker-panel-historical-color-box-container-ie11 li:nth-child(-n + 12) {
margin-top: 0;
}
.kd-color-picker-rtl.kd-color-picker-container .kd-color-picker-icon-container .kd-color-picker-icon-no-color-line {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.kd-color-picker-rtl.kd-color-picker-container-pure .kd-input-wrapper.kd-color-picker-input .kd-input-prefix {
margin-left: 0;
}
.kd-color-picker-rtl .kd-color-picker-panel-chrome > div:last-child .flexbox-fix:first-child > div:first-child > div {
margin-right: 4px !important;
margin-left: 0 !important;
}
.kd-color-picker-rtl .kd-color-picker-panel-clear-box {
margin-left: 4px;
margin-right: 0;
}
.kd-color-picker-rtl .kd-color-picker-panel-clear-box::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.kd-color-picker-rtl .kd-color-picker-panel-container-select .kd-select-dropdown-panel .kd-select-dropdown .kd-select-item {
-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-date-picker {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
border: 1px solid var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-date-picker-input-radius-border, var(--kd-g-radius-border, 2px));
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
width: var(--kd-c-date-picker-sizing-width, 230px);
}
.kd-date-picker-borderless {
border: 0;
}
.kd-date-picker-underline {
border: none;
border-bottom: 1px solid var(--kd-c-date-picker-input-underline-color, #999);
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.kd-date-picker-disabled {
background-color: var(--kd-c-date-picker-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5)) !important;
border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9)) !important;
color: var(--kd-c-date-picker-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
cursor: not-allowed !important;
}
.kd-date-picker-disabled input {
cursor: not-allowed !important;
}
.kd-date-picker-underline.kd-date-picker-disabled,
.kd-date-picker-borderless.kd-date-picker-disabled {
background-color: var(--kd-c-date-picker-input-color-background, var(--kd-g-color-white, #fff));
border-color: var(--kd-c-date-picker-input-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-date-picker-focused {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker:hover {
border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker:not(.kd-date-picker-disabled) input:focus {
color: var(--kd-c-date-picker-input-color-focused, var(--kd-g-color-text-primary, #212121));
}
.kd-date-picker-small {
height: var(--kd-c-date-picker-small-sizing-height, 20px);
line-height: calc(var(--kd-c-date-picker-small-sizing-height, 20px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
}
.kd-date-picker-small.kd-date-picker-underline {
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
}
.kd-date-picker-small input {
font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px));
}
.kd-date-picker-large {
height: var(--kd-c-date-picker-large-sizing-height, 36px);
line-height: calc(var(--kd-c-date-picker-large-sizing-height, 36px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
}
.kd-date-picker-large.kd-date-picker-underline {
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
}
.kd-date-picker-large input {
font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px));
}
.kd-date-picker-middle {
height: var(--kd-c-date-picker-middle-sizing-height, 30px);
line-height: calc(var(--kd-c-date-picker-middle-sizing-height, 30px) - (var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) * 2) - 2);
font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
}
.kd-date-picker-middle.kd-date-picker-underline {
padding: var(--kd-c-date-picker-small-spacing-padding-vertical, 4px) 0;
}
.kd-date-picker-middle input {
font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-date-picker-input {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
}
.kd-date-picker-input input {
width: 100%;
min-width: 0;
color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-primary, #212121));
line-height: inherit;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
min-width: 1px;
height: auto;
padding: 0;
background: transparent;
border: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kd-date-picker-input input::-webkit-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input::-moz-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input::-ms-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker-input input[disabled] {
background: transparent;
}
.kd-date-picker-input input::-webkit-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input::-moz-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input:-ms-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input::-ms-input-placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input input::placeholder {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-input-placeholder > input {
color: var(--kd-c-date-picker-input-color-placeholder, #f2f2f2);
}
.kd-date-picker-range {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.kd-date-picker-range-separator {
display: inline-block;
padding: 0 8px;
}
.kd-date-picker-range .kd-date-picker-clear {
right: var(--kd-c-date-picker-small-spacing-padding-horizontal, 9px);
}
.kd-date-picker-range .kd-date-picker-active-bar {
bottom: -1px;
height: 2px;
margin-left: 11px;
background: var(--kd-c-date-picker-bar-color-bg-active, var(--kd-g-color-theme, #5582f3));
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
pointer-events: none;
}
.kd-date-picker-range.kd-date-picker-focused .kd-date-picker-active-bar {
opacity: 1;
}
.kd-date-picker-suffix {
-ms-flex-item-align: center;
align-self: center;
margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-primary, #212121));
line-height: 1;
pointer-events: none;
}
.kd-date-picker-suffix > * {
vertical-align: top;
}
.kd-date-picker:not(.kd-date-picker-disabled):hover .kd-date-picker-clear {
opacity: 1;
}
.kd-date-picker-clear {
position: absolute;
top: 50%;
right: 0;
color: var(--kd-c-date-picker-icon-color, #d9d9d9);
line-height: 1;
background: var(--kd-c-date-picker-clear-color-background, var(--kd-g-color-background, #fff));
-webkit-transform: translateY(-48%);
transform: translateY(-48%);
cursor: pointer;
opacity: 0;
}
.kd-date-picker-clear > * {
vertical-align: top;
}
.kd-date-picker-clear:hover {
color: var(--kd-c-date-picker-icon-color-hover, #999);
}
.kd-date-picker .kd-date-picker-range-clear {
-ms-flex-item-align: center;
align-self: center;
margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
color: var(--kd-c-date-picker-icon-color, #d9d9d9);
line-height: 1;
cursor: pointer;
}
.kd-date-picker .kd-date-picker-range-clear:hover {
color: var(--kd-c-date-picker-icon-color-hover, #999);
}
.kd-date-picker-focused .kd-date-picker-suffix {
color: var(--kd-c-date-picker-clear-color-background-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker-error {
border-color: var(--kd-g-color-error, #fb2323);
}
.kd-date-picker-panel {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
background-color: #fff;
text-align: center;
z-index: var(--kd-c-date-picker-panel-z-index, var(--kd-g-z-index-popper, 1050));
font-size: var(--kd-c-date-picker-panel-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-date-picker-panel-range {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-panel.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-date-picker-panel .kd-date-picker-warpper {
font-size: 12px;
background: var(--kd-c-date-picker-wrapper-color-background, var(--kd-g-color-background, #fff));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter {
width: 240px;
padding: 8px 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-line {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-item,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-item,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-item,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar-item {
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;
height: 32px;
padding-bottom: 8px;
color: #212121;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-text,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-text,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-text {
line-height: 24px;
display: inline-block;
border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item {
overflow: hidden;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item:hover .kd-date-picker-year-text:not(.kd-date-picker-year-text-selected) {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item:hover:not(.kd-date-picker-year-item-disabled) .kd-date-picker-year-text-selected {
background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text {
position: relative;
z-index: 2;
width: 46px;
padding: 2px 2px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text-today {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text-today::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 6px;
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
content: '';
bottom: 0;
left: calc(50% - 3px);
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item-disabled {
pointer-events: none;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item-disabled .kd-date-picker-year-text {
color: #b2b2b2;
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year-warpper .kd-date-picker-year-item .kd-date-picker-year-text-selected {
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
color: #fff;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year .kd-date-picker-range-view::before,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year .kd-date-picker-range-start::before,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-year .kd-date-picker-range-end::before {
height: 28px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item {
overflow: hidden;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item:hover .kd-date-picker-month-text:not(.kd-date-picker-month-text-selected) {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item:hover:not(.kd-date-picker-month-item-disabled) .kd-date-picker-month-text-selected {
background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text {
position: relative;
z-index: 2;
width: 48px;
padding: 2px 5px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text-today {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text-today::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 6px;
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
content: '';
bottom: 0;
left: calc(50% - 3px);
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item-disabled {
pointer-events: none;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item-disabled .kd-date-picker-month-text {
color: #b2b2b2;
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month-warpper .kd-date-picker-month-item .kd-date-picker-month-text-selected {
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
color: #fff;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month .kd-date-picker-range-view::before,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month .kd-date-picker-range-start::before,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-month .kd-date-picker-range-end::before {
height: 28px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item {
overflow: hidden;
padding-bottom: 0;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item:hover .kd-date-picker-quarter-text:not(.kd-date-picker-quarter-text-selected) {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item:hover:not(.kd-date-picker-quarter-item-disabled) .kd-date-picker-quarter-text-selected {
background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text {
position: relative;
z-index: 2;
width: 36px;
padding: 0 5px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text-today {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text-today::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 6px;
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
content: '';
bottom: 0;
left: calc(50% - 3px);
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item-disabled {
pointer-events: none;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item-disabled .kd-date-picker-quarter-text {
color: #b2b2b2;
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-quarter-warpper .kd-date-picker-quarter-item .kd-date-picker-quarter-text-selected {
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
color: #fff;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar {
width: 240px;
padding: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-weektitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-weektitle-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
height: 32px;
line-height: 32px;
cursor: default;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-bottom: 0;
height: 32px;
padding: 3px 0;
cursor: pointer;
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled):hover .kd-date-picker-calendar-text {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled):hover .kd-date-picker-calendar-text-selected {
background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff)) !important;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled {
position: relative;
cursor: not-allowed;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled .kd-date-picker-calendar-text {
color: #b2b2b2;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled .kd-date-picker-calendar-text-selected {
color: #fff;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-line .kd-date-picker-calendar-item-disabled::before {
content: '';
width: 100%;
position: absolute;
z-index: 1;
background: #f5f5f5;
height: 24px;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-calendar-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-calendar-item ::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line:hover .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled) .kd-date-picker-calendar-week-text::before {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text::before {
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected:hover .kd-date-picker-calendar-item:not(.kd-date-picker-calendar-item-disabled) .kd-date-picker-calendar-week-text::before {
background: var(--kd-c-date-picker-square-item-color-selected, var(--kd-g-color-theme-5, #87adff));
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text {
background: transparent !important;
color: #fff !important;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text-today {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line.kd-date-picker-calendar-week-selected .kd-date-picker-calendar-week-text-today::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 6px;
background: #fff;
content: '';
bottom: 0;
left: calc(50% - 3px);
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-calendar-item-disabled {
cursor: not-allowed;
pointer-events: none;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-calendar-item-disabled .kd-date-picker-calendar-week-text {
color: #b2b2b2;
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-range-start::before {
left: 0;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-line .kd-date-picker-range-end::before {
right: 0;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-text,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text {
position: relative;
z-index: 2;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
display: inline-block;
border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
color: #b2b2b2;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-text-today,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text-today {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-text-today::after,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text-today::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 6px;
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
content: '';
bottom: 0;
left: calc(50% - 3px);
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-week-text {
width: 100%;
height: 24px;
margin: 3px 0;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-current .kd-date-picker-calendar-text {
color: #212121;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-current .kd-date-picker-calendar-week-text {
color: #212121;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-current .kd-date-picker-calendar-text-selected {
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
color: #fff;
}
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-calendar-weeknumber,
.kd-date-picker-panel .kd-date-picker-warpper .kd-date-picker-calendar .kd-date-picker-weektitle-weeknumber {
width: 24px;
height: 30px;
text-align: center;
line-height: 30px;
color: #bfbfbf;
font-weight: bold;
cursor: default;
}
.kd-date-picker-panel .kd-date-picker-range-start::before {
left: 50%;
}
.kd-date-picker-panel .kd-date-picker-range-start .kd-date-picker-calendar-text-selected {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.kd-date-picker-panel .kd-date-picker-range-end::before {
right: 50%;
}
.kd-date-picker-panel .kd-date-picker-range-end .kd-date-picker-calendar-text-selected {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.kd-date-picker-panel .kd-date-picker-range-view,
.kd-date-picker-panel .kd-date-picker-range-start,
.kd-date-picker-panel .kd-date-picker-range-end {
position: relative;
}
.kd-date-picker-panel .kd-date-picker-range-view::before,
.kd-date-picker-panel .kd-date-picker-range-start::before,
.kd-date-picker-panel .kd-date-picker-range-end::before {
content: '';
position: absolute;
z-index: 1;
height: 24px;
width: 100%;
margin: 0 -4px;
background: var(--kd-c-date-picker-range-item-color-bg, var(--kd-g-color-theme-1, #f2f8ff));
}
.kd-date-picker-panel .kd-date-picker-header-icon {
min-width: 1.6em;
font-size: 14px;
padding: 0;
color: rgba(0, 0, 0, 0.25);
background: 0 0;
border: 0;
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.kd-date-picker-panel .kd-date-picker-header-icon:hover {
color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker-panel .kd-date-picker-header-text {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.kd-date-picker-panel .kd-date-picker-header-text-inner-active {
color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-date-picker-panel .kd-date-picker-header-text-inner-hover:hover {
color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-header-text-inner:nth-child(2) {
margin-left: 13px;
}
.kd-date-picker-panel .kd-date-picker-time-header,
.kd-date-picker-panel .kd-date-picker-header {
height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
background: #fafafa;
color: #212121;
font-size: 14px;
padding: 7px;
border-bottom: 1px solid #d9d9d9;
font-weight: bold;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-date-picker-panel .kd-date-picker-time {
padding-top: 4px;
width: auto;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 242px;
border-left: 1px solid #d9d9d9;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 56px;
margin: 0;
padding: 10px 0 214px 0;
text-align: left;
-webkit-transition: background 0.3s;
transition: background 0.3s;
overflow: hidden;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column:not(:first-child) {
border-left: 1px solid #d9d9d9;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column:hover {
overflow-y: overlay;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell {
margin: 0;
padding: 0;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-inner {
display: block;
width: 100%;
height: 28px;
margin: 0;
text-align: center;
color: rgba(0, 0, 0, 0.85);
line-height: 28px;
border-radius: 0;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-inner:hover {
background: #f5f5f5;
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-selected .kd-date-picker-time-cell-inner {
background: var(--kd-c-date-picker-range-item-color-bg, var(--kd-g-color-theme-1, #f2f8ff));
}
.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column .kd-date-picker-time-cell-disabled .kd-date-picker-time-cell-inner {
color: rgba(0, 0, 0, 0.25);
background: transparent;
cursor: not-allowed;
}
.kd-date-picker-panel .kd-date-picker-datetime-panel {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-panel .kd-date-picker-datetime-panel .kd-date-picker-time {
padding: 0;
}
.kd-date-picker-panel .kd-date-picker-footer {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 100%;
line-height: 36px;
height: 40px;
border-top: 1px solid #d9d9d9;
border-bottom: 1px solid transparent;
padding: 0 12px;
color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
font-size: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: right;
background: var(--kd-c-date-picker-footer-color-background, var(--kd-g-color-background, #fff));
}
.kd-date-picker-panel .kd-date-picker-footer::after {
content: '';
vertical-align: middle;
}
.kd-date-picker-panel .kd-date-picker-footer-extra {
line-height: 34px;
text-align: left;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-today-btn,
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-ok-btn {
display: inline-block;
padding: 5px 12px;
background: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
color: #fff;
border-radius: var(--kd-c-date-picker-panel-radius-border, var(--kd-g-radius-border, 2px));
line-height: initial;
vertical-align: middle;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btn-disabled {
background-color: #e3ebff;
cursor: not-allowed;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns {
margin-bottom: 0;
overflow: hidden;
text-align: left;
list-style: none;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns li {
display: inline-block;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns li::after {
vertical-align: middle;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns .kd-date-picker-now {
text-align: left;
vertical-align: middle;
cursor: pointer;
}
.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns .kd-date-picker-ok {
float: right;
margin-left: 8px;
vertical-align: middle;
}
.kd-date-picker-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: var(--kd-c-date-picker-container-color-background, var(--kd-g-color-background-2, #f2f2f2));
}
.kd-date-picker-container-date {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-date-picker-container .kd-date-picker-ranges {
width: 160px;
color: var(--kd-c-date-picker-container-color, var(--kd-g-color-text-primary, #212121));
padding: 0 12px;
text-align: left;
overflow: auto;
max-height: 276px;
}
.kd-date-picker-container .kd-date-picker-ranges-item {
height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
line-height: var(--kd-c-date-picker-panel-header-sizing-height, 36px);
font-size: var(--kd-c-date-picker-container-font-size, var(--kd-g-font-size-small, 12px));
border-bottom: 0.5px solid var(--kd-c-date-picker-container-color-border, var(--kd-g-color-border-weak, #e5e5e5));
cursor: pointer;
}
.kd-date-picker-rtl {
direction: rtl;
}
.kd-date-picker-rtl .kd-date-picker-input .kd-date-picker-suffix {
margin-right: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
margin-left: 0;
}
.kd-date-picker-rtl .kd-date-picker-input .kd-date-picker-clear {
left: 0;
right: auto;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content {
border-right: 1px solid #d9d9d9;
border-left: none;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column {
text-align: right;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-time .kd-date-picker-content .kd-date-picker-time-column:not(:first-child) {
border-right: 1px solid #d9d9d9;
border-left: none;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-footer {
text-align: left;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-footer-extra {
text-align: right;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns {
text-align: right;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns .kd-date-picker-now {
text-align: right;
}
.kd-date-picker-rtl.kd-date-picker-panel .kd-date-picker-footer .kd-date-picker-btns .kd-date-picker-ok {
float: left;
margin-right: 8px;
margin-left: 0;
}
.kd-date-picker-rtl .kd-date-picker-suffix {
margin-right: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
margin-left: 0;
}
.kd-date-picker-rtl .kd-date-picker-range-clear {
margin-right: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
margin-left: 0;
}
.kd-date-picker-rtl .kd-date-picker-container .kd-date-picker-ranges {
text-align: right;
}
.kd-date-picker-rtl .kd-date-picker-warpper .kd-date-picker-time .kd-date-picker-content {
direction: ltr;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-divider {
color: var(--kd-c-divider-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-divider-font-size, var(--kd-g-font-size-small, 12px));
width: 900px;
padding: var(--kd-c-divider-spacing-padding-horizontal, 0px);
border-top: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-divider-vertical {
display: inline-block;
border-left: 1px solid var(--kd-g-color-border-strong, #d9d9d9);
width: 0;
height: 1em;
}
.kd-divider-solid {
border-top-style: solid;
border-left-style: solid;
}
.kd-divider-solid .kd-divider-inner-text::before,
.kd-divider-solid .kd-divider-inner-text::after {
border-block-start-style: solid;
}
.kd-divider-dashed {
border-top-style: dashed;
border-left-style: dashed;
}
.kd-divider-dashed .kd-divider-inner-text::before,
.kd-divider-dashed .kd-divider-inner-text::after {
border-block-start-style: dashed;
}
.kd-divider-dotted {
border-top-style: dotted;
border-left-style: dotted;
}
.kd-divider-dotted .kd-divider-inner-text::before,
.kd-divider-dotted .kd-divider-inner-text::after {
border-block-start-style: dotted;
}
.kd-divider-with-text {
border: unset;
}
.kd-divider-with-text .kd-divider-inner-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-divider-with-text .kd-divider-inner-text::before {
content: '';
width: 74px;
margin-right: 8px;
border-top-width: 1px;
border-top-color: var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-divider-with-text .kd-divider-inner-text::after {
content: '';
width: calc(100% - 74px);
margin-left: 8px;
border-top-width: 1px;
border-top-color: var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-divider-with-text-center .kd-divider-inner-text::before,
.kd-divider-with-text-center .kd-divider-inner-text::after {
width: 50%;
}
.kd-divider-with-text-right .kd-divider-inner-text::before {
width: calc(100% - 74px);
}
.kd-divider-with-text-right .kd-divider-inner-text::after {
width: 74px;
}
.kd-divider-margin-left .kd-divider-inner-text::before {
width: 0;
}
.kd-divider-margin-left .kd-divider-inner-text::after {
width: 100%;
}
.kd-divider-margin-right .kd-divider-inner-text::before {
width: 100%;
}
.kd-divider-margin-right .kd-divider-inner-text::after {
width: 0;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
.drawer-container-placement-horizontal {
top: 0;
bottom: 0;
}
.drawer-container-placement-vertical {
left: 0;
right: 0;
}
.overall-postion {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-drawer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: var(--kd-g-z-index-dialog, 1050);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.kd-drawer-active .kd-drawer-mask {
opacity: 1;
visibility: visible;
-webkit-transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
}
.kd-drawer-hide {
visibility: hidden;
-webkit-transition: visibility calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
transition: visibility calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
}
.kd-drawer-mask {
position: fixed;
background-color: rgba(55, 55, 55, 0.5);
z-index: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
transition: opacity calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
}
.kd-drawer-not-at-body {
position: absolute;
}
.kd-drawer-not-at-body .kd-drawer-mask {
position: absolute;
}
.kd-drawer-container-left,
.kd-drawer-container-right {
top: 0;
bottom: 0;
}
.kd-drawer-container-top,
.kd-drawer-container-bottom {
left: 0;
right: 0;
}
.kd-drawer-container-top .kd-drawer-body,
.kd-drawer-container-bottom .kd-drawer-body {
max-height: var(--kd-c-drawer-body-max-height-vertical, 470px);
overflow-y: auto;
}
.kd-drawer-container-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: var(--kd-c-drawer-color-background, var(--kd-g-color-background, #fff));
-webkit-box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: -4px 0 10px 0 rgba(0, 0, 0, 0.1);
-webkit-transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
transition: all calc(var(--kd-g-duration, 0.3s) - 0.1s) var(--kd-g-ease-out, cubic-bezier(0, 0.4, 0.4, 1));
}
.kd-drawer-container-box .kd-drawer-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: var(--kd-c-drawer-header-sizing-padding-vertical, 12px) var(--kd-c-drawer-header-sizing-padding-horizontal, 16px);
border-bottom: var(--kd-c-drawer-dividing-sizing-width, 1px) solid var(--kd-c-drawer-dividing-color-border, var(--kd-g-color-border-disabled, #ccc));
}
.kd-drawer-container-box .kd-drawer-header .kd-drawer-title {
letter-spacing: 0;
line-height: 26px;
font-size: var(--kd-c-drawer-title-font-size, var(--kd-g-font-size-x-large, 18px));
color: var(--kd-c-drawer-title-color-text, var(--kd-g-color-text-primary, #212121));
}
.kd-drawer-container-box .kd-drawer-header .kd-drawer-close-icon {
cursor: pointer;
}
.kd-drawer-container-box .kd-drawer-header .kd-drawer-close-icon i {
color: var(--kd-c-drawer-close-icon-color-text, var(--kd-g-color-text-secondary, #666));
font-size: var(--kd-c-drawer-close-icon-font-size, var(--kd-g-font-size-large, 16px));
}
.kd-drawer-container-box .kd-drawer-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: var(--kd-c-drawer-body-sizing-padding, 16px);
font-size: var(--kd-g-font-size-middle, 14px);
color: var(--kd-g-color-text-primary, #212121);
}
.kd-drawer-container-box .kd-drawer-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 40px;
font-size: var(--kd-g-font-size-small, 12px);
color: var(--kd-g-color-text-primary, #212121);
}
.kd-drawer-rtl {
direction: rtl;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-dropdown-trigger {
outline: none;
}
.kd-dropdown-trigger-container {
display: inline-block;
}
.kd-dropdown {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
opacity: 1;
visibility: visible;
z-index: var(--kd-g-z-index-popper, 1050);
background-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-g-radius-border, 2px);
min-width: var(--kd-c-dropdown-menu-sizing-min-width, 64px);
max-width: var(--kd-c-dropdown-menu-sizing-max-width, 600px);
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.kd-dropdown.hidden {
opacity: 0;
visibility: hidden;
}
.kd-dropdown.arrow::before {
position: absolute;
z-index: -2;
background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
border-style: solid;
border-width: var(--arrowSize);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
}
.kd-dropdown.arrow::after {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-g-radius-border, 2px);
}
.kd-dropdown.arrow.bottomLeft::before,
.kd-dropdown.arrow.bottom::before,
.kd-dropdown.arrow.bottomRight::before {
left: var(--arrowLeft);
top: var(--arrowSpill);
-webkit-box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
box-shadow: -2px -2px calc(10px - 1px) rgba(0, 0, 0, 0.1);
border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
}
.kd-dropdown.arrow.topLeft::before,
.kd-dropdown.arrow.top::before,
.kd-dropdown.arrow.topRight::before {
left: var(--arrowLeft);
bottom: var(--arrowSpill);
-webkit-box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
box-shadow: 3px 3px calc(10px + 1px) rgba(0, 0, 0, 0.15);
border-color: transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent;
}
.kd-dropdown.arrow.leftTop::before,
.kd-dropdown.arrow.left::before,
.kd-dropdown.arrow.leftBottom::before {
top: var(--arrowTop);
right: var(--arrowSpill);
-webkit-box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
box-shadow: 3px 0 10px rgba(0, 0, 0, 0.12), 0 -2px 10px rgba(204, 149, 149, 0.12);
border-color: var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
}
.kd-dropdown.arrow.rightTop::before,
.kd-dropdown.arrow.right::before,
.kd-dropdown.arrow.rightBottom::before {
top: var(--arrowTop);
left: var(--arrowSpill);
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), -2px 0 10px rgba(0, 0, 0, 0.1);
border-color: transparent transparent var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-dropdown-menu-color-background, var(--kd-g-color-background, #fff));
}
.kd-dropdown-menu {
max-height: var(--kd-c-dropdown-menu-sizing-max-height, 328px);
padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 4px) 0;
overflow-y: auto;
}
.kd-dropdown-menu-item {
position: relative;
padding: var(--kd-c-dropdown-item-spacing-padding-vertical, 7px) var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-dropdown-font-size, var(--kd-g-font-size-small, 12px));
line-height: 18px;
overflow: hidden;
cursor: pointer;
-webkit-transition: background-color var(--kd-g-duration, 0.3s);
transition: background-color var(--kd-g-duration, 0.3s);
}
.kd-dropdown-menu-item.disabled,
.kd-dropdown-menu-item.disabled > a {
color: var(--kd-c-dropdown-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-dropdown-menu-item:not(.disabled):hover {
background-color: var(--kd-c-dropdown-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
}
.kd-dropdown-menu-item:not(.disabled):hover > a {
color: var(--kd-c-dropdown-item-color-text-hover, var(--kd-g-color-text-primary, #212121));
}
.kd-dropdown-menu-item:not(.disabled):active,
.kd-dropdown-menu-item:not(.disabled).selected {
color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
}
.kd-dropdown-menu-item:not(.disabled):active > a,
.kd-dropdown-menu-item:not(.disabled).selected > a {
color: var(--kd-c-dropdown-item-color-text-active, var(--kd-g-color-theme, #5582f3));
}
.kd-dropdown-menu-item.divided::before {
content: '';
position: absolute;
top: 0;
left: var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
right: var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
height: var(--kd-c-dropdown-divided-sizing-height, 1px);
background-color: var(--kd-c-dropdown-divided-color-background, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-dropdown-menu-item.danger,
.kd-dropdown-menu-item.danger > a {
color: var(--kd-c-dropdown-item-color-text-danger, var(--kd-g-color-error, #fb2323));
-webkit-transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
}
.kd-dropdown-menu-item.danger:hover,
.kd-dropdown-menu-item.danger > a:hover {
color: var(--kd-g-color-white, #fff);
background-color: var(--kd-c-dropdown-item-color-background-danger-hover, var(--kd-g-color-error, #fb2323));
}
.kd-dropdown-menu-item > a {
display: block;
margin: calc(-1 * var(--kd-c-dropdown-item-spacing-padding-vertical, 7px)) calc(-1 * var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px));
padding: var(--kd-c-dropdown-item-spacing-padding-vertical, 7px) var(--kd-c-dropdown-item-spacing-padding-horizontal, 12px);
color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-dropdown-font-size, var(--kd-g-font-size-small, 12px));
line-height: 18px;
-webkit-transition: color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s);
}
.kd-dropdown-menu-item > a:hover {
color: var(--kd-c-dropdown-menu-item-color-text, var(--kd-g-color-text-primary, #212121));
}
.kd-dropdown-menu-item span {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kd-dropdown .kd-dropdown-menu-rtl {
direction: rtl;
}
.kd-dropdown .kd-dropdown-menu-rtl [dir='auto'] {
text-align: right;
}
.kd-dropdown .kd-dropdown-menu-rtl .kd-dropdown-menu-item > span {
text-align: right;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-empty {
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;
}
.kd-empty-image {
height: var(--kd-c-empty-image-sizing-height, 96px);
}
.kd-empty-image + .kd-empty-description {
margin-top: 8px;
}
.kd-empty-description {
font-size: var(--kd-c-empty-font-size, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-empty-color-text, var(--kd-g-color-text-third, #999));
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-filter .kd-filter-header {
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding: 9px 124px 9px 0;
}
.kd-filter .kd-filter-header-title {
white-space: nowrap;
color: var(--kd-c-filter-header-title-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-filter-header-title-font-size, var(--kd-g-font-size-large, 16px));
}
.kd-filter .kd-filter-header-condition {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin: 0 8px 0 40px;
}
.kd-filter .kd-filter-header-condition-label {
padding-right: 8px;
font-size: var(--kd-c-filter-condition-label-font-size, var(--kd-g-font-size-middle, 14px));
white-space: nowrap;
color: var(--kd-c-filter-condition-label-color-text, var(--kd-g-color-text-third, #999));
}
.kd-filter .kd-filter-header-condition-item-text {
max-width: 224px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.kd-filter .kd-filter-header-search {
min-width: 200px;
}
.kd-filter .kd-filter-header-handle {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: absolute;
right: 0;
bottom: -1px;
width: 100px;
height: 44px;
line-height: 44px;
text-align: center;
color: var(--kd-c-filter-handle-color-text, var(--kd-g-color-ongoing, #276ff5));
font-size: var(--kd-c-filter-handle-font-size, var(--kd-g-font-size-middle, 14px));
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-bottom: none;
}
.kd-filter .kd-filter-header-handle > i {
-webkit-transition: -webkit-transform 0.2s linear;
transition: -webkit-transform 0.2s linear;
transition: transform 0.2s linear;
transition: transform 0.2s linear, -webkit-transform 0.2s linear;
}
.kd-filter .kd-filter-header-handle.spread {
border-radius: 4px 4px 0 0;
background-color: var(--kd-c-filter-handle-color-background-spread, var(--kd-g-color-background-contain, #fafafa));
border-color: var(--kd-c-filter-handle-color-border-spread, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-filter .kd-filter-header-handle.spread > i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.kd-filter .kd-filter-body {
position: relative;
height: 0;
overflow: hidden;
}
.kd-filter .kd-filter-body.spread {
height: auto;
overflow: visible;
padding: 8px 20px;
border-radius: 4px 0 4px 4px;
background-color: var(--kd-c-filter-body-color-background, var(--kd-g-color-background-contain, #fafafa));
border: 1px solid var(--kd-c-filter-body-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-filter .kd-filter-body-tabs {
border-bottom: 1px solid var(--kd-c-filter-body-tabs-color-border, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-filter .kd-filter-body-tabs-item {
padding: 10px 0;
font-size: var(--kd-c-filter-body-tabs-item-font-size, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-filter-body-tabs-item-color-text, var(--kd-g-color-text-third, #999));
cursor: pointer;
}
.kd-filter .kd-filter-body-tabs-item:hover,
.kd-filter .kd-filter-body-tabs-item.active {
color: var(--kd-c-filter-body-tabs-item-color-text-active, var(--kd-g-color-ongoing, #276ff5));
}
.kd-filter .kd-filter-body-tabs-split {
width: 1px;
height: 16px;
background-color: var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-filter .kd-filter-body-conditions {
display: none;
}
.kd-filter .kd-filter-body-conditions.active {
display: block;
}
.kd-filter .kd-filter-body-condition {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: var(--kd-g-font-size-small, 12px);
}
.kd-filter .kd-filter-body-condition:not(:last-child) {
border-bottom: 1px solid var(--kd-g-color-border-weak, #e5e5e5);
}
.kd-filter .kd-filter-body-condition-label {
padding: 11px 0 10px;
color: var(--kd-g-color-text-third, #999);
line-height: 18px;
width: var(--kd-c-filter-body-condition-label-width);
}
.kd-filter .kd-filter-body-condition-options {
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;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-height: 64px;
margin-left: 24px;
padding: 8px 0 4px;
overflow: auto;
}
.kd-filter .kd-filter-body-condition-option {
margin-bottom: 4px;
padding: 0 12px;
color: var(--kd-g-color-text-secondary, #666);
vertical-align: middle;
line-height: 22px;
font-size: var(--kd-g-font-size-small, 12px);
border-radius: var(--kd-g-radius-border, 2px);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
max-width: var(--kd-c-filter-body-condition-option-max-width);
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
.kd-filter .kd-filter-body-condition-option:not(:last-child) {
margin-right: 24px;
}
.kd-filter .kd-filter-body-condition-option.active {
color: #276ff5;
border-color: #276ff5;
background-color: var(--kd-g-color-background, #fff);
}
.kd-filter .kd-filter-body-condition-option-customer {
margin-left: -20px;
}
.kd-filter .kd-filter-body-condition-addition {
margin-left: 24px;
line-height: 40px;
}
.kd-filter .kd-filter-body-scheme {
display: none;
}
.kd-filter .kd-filter-body-scheme.active {
display: block;
}
.kd-filter .kd-filter-body-scheme > li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 40px;
}
.kd-filter .kd-filter-body-scheme-label {
width: 96px;
color: var(--kd-g-color-text-third, #999);
font-size: var(--kd-g-font-size-small, 12px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-filter .kd-filter-body-scheme-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-filter .kd-filter-body-scheme-item {
font-size: var(--kd-g-font-size-small, 12px);
color: var(--kd-g-color-text-secondary, #666);
cursor: pointer;
}
.kd-filter .kd-filter-body-scheme-item:not(:last-child) {
margin-right: 48px;
}
.kd-filter .kd-filter-body-scheme-item.active {
color: #276ff5;
}
.kd-filter .kd-filter-body-scheme-action {
position: absolute;
right: 0;
}
.kd-filter .kd-filter-body-scheme-detail {
list-style: none;
}
.kd-filter .kd-filter-body-scheme-detail > li {
line-height: normal;
padding: 7px 0 5px 0;
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-g-font-size-small, 12px);
}
.kd-filter .kd-filter-body-scheme-detail > li > span {
display: inline-block;
}
.kd-filter .kd-filter-body-scheme-detail > li > span:not(:last-child) {
margin-right: 12px;
}
.kd-filter .kd-filter-body-scheme-detail-field {
width: 100px;
}
.kd-filter .kd-filter-body-scheme-detail-operator {
width: 140px;
}
.kd-filter .kd-filter-body-scheme-detail-value {
width: 220px;
}
.kd-filter .kd-filter-body-scheme-detail-and {
font-size: var(--kd-g-font-size-middle, 14px);
}
.kd-filter .kd-filter-body-scheme-detail-delete {
color: var(--kd-g-color-disabled, #b2b2b2);
font-size: var(--kd-g-font-size-xx-large, 20px);
cursor: pointer;
}
.kd-filter .kd-filter-body-scheme-detail-delete:hover {
color: var(--kd-g-color-error, #fb2323);
}
.kd-filter-rtl {
direction: rtl;
}
.kd-filter-rtl .kd-filter-header {
padding: 9px 0 9px 124px;
}
.kd-filter-rtl .kd-filter-header-handle {
left: 0;
right: auto;
}
.kd-filter-rtl .kd-filter-header-condition {
margin: 0 40px 0 8px;
}
.kd-filter-rtl .kd-filter-header-condition-label {
padding-left: 8px;
padding-right: 0;
}
.kd-filter-rtl .kd-filter-body.spread {
border-radius: 4px 4px 4px 0;
}
.kd-filter-rtl .kd-filter-body-condition-options {
margin-right: 24px;
margin-left: 0;
}
.kd-filter-rtl .kd-filter-body-condition-option:not(:last-child) {
margin-left: 24px;
margin-right: 0;
}
.kd-filter-rtl .kd-filter-body-condition-option.active {
color: #276ff5;
border-color: #276ff5;
background-color: var(--kd-g-color-background, #fff);
}
.kd-filter-rtl .kd-filter-body-condition-option-customer {
margin-left: -20px;
}
.kd-filter-rtl .kd-filter-body-condition-addition {
margin-left: 24px;
line-height: 40px;
}
.kd-filter-rtl .kd-filter-body-scheme-label {
text-align: right;
}
.kd-filter-rtl .kd-filter-body-scheme-action {
left: 0;
}
.kd-filter-rtl .kd-filter-body-scheme-item:not(:last-child) {
margin-left: 48px;
margin-right: 0;
}
.kd-filter-rtl .kd-filter-body-scheme-detail > li {
text-align: right;
}
.kd-filter-rtl .kd-filter-body-scheme-detail > li span:not(:last-child) {
margin-left: 12px;
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-form {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}
.kd-form-horizontal .kd-form-field,
.kd-form-vertical .kd-form-field {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-form-horizontal .kd-form-field-label {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-form-inline .kd-form-field {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.kd-form-field {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 var(--kd-c-form-field-spacing-margin-right, 30px) var(--kd-c-form-field-spacing-margin-bottom, 22px) 0;
}
.kd-form-field-vertical {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.kd-form-field-vertical .kd-form-field-label {
margin-bottom: var(--kd-c-form-field-label-spacing-margin-bottom, 5px);
}
.kd-form-field-hidden {
display: none !important;
}
.kd-form-field-extra {
margin-bottom: calc(var(--kd-c-form-field-spacing-margin-bottom, 22px) * 2);
}
.kd-form-field-label {
font-size: var(--kd-c-form-field-label-font-size, 12px);
line-height: var(--kd-c-form-field-label-line-height, 18px);
color: var(--kd-c-form-field-color, var(--kd-g-color-text-secondary, #666));
text-align: left;
margin-right: 30px;
}
.kd-form-field-label-right {
text-align: right;
}
.kd-form-field-label-required-mark {
position: relative;
}
.kd-form-field-label-required-mark::after {
content: '*';
position: absolute;
top: -1px;
right: -9px;
width: 5px;
height: 5px;
font-family: SimSun, sans-serif;
line-height: 1;
color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
}
.kd-form-field-wrapper {
position: relative;
}
.kd-form-field-wrapper-message,
.kd-form-field-wrapper-extra {
position: absolute;
left: -7px;
right: 0;
padding: var(--kd-c-form-field-message-spacing-padding-horizontal, 2px) var(--kd-c-form-field-message-spacing-padding-vertical, 8px);
font-size: var(--kd-c-form-field-message-font-size, 12px);
line-height: var(--kd-c-form-field-message-line-height, 18px);
color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
word-break: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-form-field-wrapper-extra-message {
color: var(--kd-c-form-error-color, var(--kd-g-color-error, #fb2323));
}
.kd-form-field-wrapper-extra-text {
color: var(--kd-c-form-extra-color, var(--kd-g-color-text-third, #999));
}
.kd-form-rtl {
direction: rtl;
text-align: right;
}
.kd-form-rtl .kd-form-field {
margin: 0 0 var(--kd-c-form-field-spacing-margin-bottom, 22px) var(--kd-c-form-field-spacing-margin-right, 30px);
}
.kd-form-rtl .kd-form-field-label {
text-align: right;
margin-left: 30px;
margin-right: 0;
}
.kd-form-rtl .kd-form-field-label-right {
text-align: right;
}
.kd-form-rtl .kd-form-field-label-required-mark::after {
left: -9px;
right: auto;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-geo-zone-picker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 230px;
height: var(--kd-c-geo-zone-picker-sizing-height, 32px);
border-bottom: 1px solid #949494;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-geo-zone-picker:hover {
border-color: var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker-active {
border-color: var(--kd-c-geo-zone-picker-color-border-active, #0a48c4);
}
.kd-geo-zone-picker .kd-geo-zone-picker-country-input:hover {
border-bottom: 1px solid var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker .kd-geo-zone-picker-country-input-active {
border-bottom: 1px solid var(--kd-c-geo-zone-picker-color-border-active, #0a48c4);
}
.kd-geo-zone-picker .kd-geo-zone-picker-region-input:hover {
border-bottom: 1px solid var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker .kd-geo-zone-picker-region-input-active {
border-bottom: 1px solid var(--kd-c-geo-zone-picker-color-border-active, #0a48c4);
}
.kd-geo-zone-picker-country {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
color: var(--kd-c-geo-zone-picker-color-text, var(--kd-g-color-text-primary, #212121));
min-width: 68px;
max-width: 33.3%;
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.kd-geo-zone-picker-country-input {
width: calc(100% - 30px);
height: 100%;
padding: 8px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-geo-zone-picker-country-input-text {
width: 100%;
font-size: var(--kd-c-geo-zone-picker-font-size, 12px);
line-height: var(--kd-c-geo-zone-picker-input-line-height, 16px);
height: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.kd-geo-zone-picker-country-arrow {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 30px;
font-size: 14px;
line-height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
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: 0 8px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
cursor: pointer;
}
.kd-geo-zone-picker-country-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-geo-zone-picker-country .kd-geo-zone-picker-clear-icon {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 30px;
font-size: 14px;
line-height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
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: 0 8px;
cursor: pointer;
}
.kd-geo-zone-picker-country-panel {
background: var(--kd-c-geo-zone-picker-dropdown-color-background, var(--kd-g-color-background, #fff));
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: 4px;
z-index: var(--kd-c-geo-zone-picker-z-index, 1050);
}
.kd-geo-zone-picker-country-panel-search {
padding: 0 8px;
padding-top: 8px;
}
.kd-geo-zone-picker-country-panel .kd-geo-zone-picker-country-list {
padding: 8px 0;
}
.kd-geo-zone-picker-country-panel .kd-geo-zone-picker-country-list-item {
height: 32px;
padding: 0 12px;
font-size: var(--kd-c-geo-zone-picker-font-size, 12px);
line-height: 32px;
color: #111111;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kd-geo-zone-picker-country-panel .kd-geo-zone-picker-country-list-item:hover {
background: var(--kd-c-geo-zone-picker-country-item-color-bg-hover, #f5f5f5);
}
.kd-geo-zone-picker-country-panel .kd-geo-zone-picker-country-list-item-active {
background: var(--kd-c-geo-zone-picker-country-item-color-bg-active, #edf6ff);
}
.kd-geo-zone-picker-country-panel .kd-geo-zone-picker-country-list-empty {
font-size: 14px;
color: #b2b2b2;
text-align: center;
padding: 7px 0 4px 0;
}
.kd-geo-zone-picker-country-panel-highlight-text {
color: var(--kd-c-geo-zone-picker-highlight-color-text, #0a48c4);
}
.kd-geo-zone-picker-region {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
color: var(--kd-c-geo-zone-picker-color-text, var(--kd-g-color-text-primary, #212121));
overflow: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-geo-zone-picker-region-input {
width: calc(100% - 30px);
height: 100%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 8px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-geo-zone-picker-region-input-placeholder {
line-height: 16px;
height: 16px;
font-size: var(--kd-c-geo-zone-picker-font-size, 12px);
color: #b2b2b2;
}
.kd-geo-zone-picker-region-input-text {
font-size: var(--kd-c-geo-zone-picker-font-size, 12px);
line-height: var(--kd-c-geo-zone-picker-input-line-height, 16px);
height: 16px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kd-geo-zone-picker-region-arrow {
width: 30px;
font-size: 14px;
line-height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
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-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-geo-zone-picker-region-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-geo-zone-picker-region .kd-geo-zone-picker-clear-icon {
width: 30px;
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
height: calc(var(--kd-c-geo-zone-picker-sizing-height, 32px) - 1px);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.kd-geo-zone-picker-region-panel {
width: 464px;
min-height: 112px;
max-height: 312px;
overflow-y: auto;
background: var(--kd-c-geo-zone-picker-dropdown-color-background, var(--kd-g-color-background, #fff));
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.kd-geo-zone-picker-region-panel-tabs {
height: 32px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
padding: 0 16px;
position: sticky;
top: 0;
background: #ffffff;
}
.kd-geo-zone-picker-region-panel-tabs .kd-tab-pane-type-line {
padding: 0 33px;
}
.kd-geo-zone-picker-region-panel-province-container {
margin: 8px;
}
.kd-geo-zone-picker-region-panel-province-group {
color: #b2b2b2;
font-size: 12px;
margin: 3px 8px;
height: 18px;
line-height: 18px;
}
.kd-geo-zone-picker-region-panel-province-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kd-geo-zone-picker-region-panel-province-item {
width: 112px;
height: 32px;
padding: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #111111;
font-size: 12px;
line-height: 18px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kd-geo-zone-picker-region-panel-province-item-active {
background: #edf6ff;
}
.kd-geo-zone-picker-region-panel-province-item:hover {
background: #f5f5f5;
}
.kd-geo-zone-picker-region-panel-city {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 8px;
}
.kd-geo-zone-picker-region-panel-city-item {
width: 112px;
height: 32px;
padding: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #111111;
font-size: 12px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.kd-geo-zone-picker-region-panel-city-item-active {
background: #edf6ff;
}
.kd-geo-zone-picker-region-panel-city-item:hover {
background: #f5f5f5;
}
.kd-geo-zone-picker-region-panel-district {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 8px;
}
.kd-geo-zone-picker-region-panel-district-item {
width: 112px;
height: 32px;
padding: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #111111;
font-size: 12px;
line-height: 18px;
border-radius: 2px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kd-geo-zone-picker-region-panel-district-item-active {
background: #edf6ff;
}
.kd-geo-zone-picker-region-panel-district-item:hover {
background: #f5f5f5;
}
.kd-geo-zone-picker-bordered {
border: none;
}
.kd-geo-zone-picker-bordered > .kd-geo-zone-picker-country {
border: 1px solid #d9d9d9;
border-radius: 2px 0 0 2px;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-input {
padding-left: 8px;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-input:hover {
border: none;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-input-active {
border: none;
}
.kd-geo-zone-picker-bordered > .kd-geo-zone-picker-country-hovered {
border-color: var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker-bordered > .kd-geo-zone-picker-country-border-right-active {
border-right-color: var(--kd-c-geo-zone-picker-color-border-active, #0a48c4);
}
.kd-geo-zone-picker-bordered > .kd-geo-zone-picker-region {
border: 1px solid #d9d9d9;
border-left: none;
border-radius: 0 2px 2px 0;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input {
padding-left: 8px;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input:hover {
border: none;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input-active {
border: none;
}
.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-hovered {
border-color: var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker-disabled {
border-color: var(--kd-c-geo-zone-picker-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-geo-zone-picker-disabled:hover {
border-color: var(--kd-c-geo-zone-picker-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-country {
cursor: not-allowed;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-country-input:hover {
border: none;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-country-input-text {
cursor: not-allowed;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-country-arrow {
color: var(--kd-c-geo-zone-picker-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-region {
cursor: not-allowed;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-region-input:hover {
border: none;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-region-input-text {
cursor: not-allowed;
}
.kd-geo-zone-picker-disabled .kd-geo-zone-picker-region-arrow {
color: var(--kd-c-geo-zone-picker-color-border-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-geo-zone-picker-country-dropdown {
z-index: var(--kd-c-geo-zone-picker-z-index, 1050);
}
.kd-geo-zone-picker-region-dropdown {
z-index: var(--kd-c-geo-zone-picker-z-index, 1050);
}
.kd-geo-zone-picker-rtl {
direction: rtl;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country {
border: 1px solid #d9d9d9;
border-radius: 0 2px 2px 0;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-hovered {
border-color: var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-input {
padding-right: 8px;
padding-left: 0;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-country-border-right-active {
border: 1px solid #d9d9d9;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered > .kd-geo-zone-picker-region {
border: 1px solid #d9d9d9;
border-right: none;
border-left: 1px solid #d9d9d9;
border-radius: 2px 0 0 2px;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input {
padding-right: 8px;
padding-left: 0;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input:hover {
border: none;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-input-active {
border: none;
}
.kd-geo-zone-picker-rtl.kd-geo-zone-picker-bordered .kd-geo-zone-picker-region-hovered {
border-color: var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
border-right: 1px solid var(--kd-c-geo-zone-picker-color-border-hover, #0a48c4);
}
.kd-geo-zone-picker-rtl .kd-geo-zone-picker-country-input {
text-align: right;
}
.kd-geo-zone-picker-rtl .kd-geo-zone-picker-region-input {
text-align: right;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-row {
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;
row-gap: var(--rgap);
margin: 0 calc(-1 * var(--cgap) / 2);
}
.kd-row.nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.kd-row.sogou-row {
margin-bottom: calc(-1 * var(--rgap));
}
.kd-col {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 calc(var(--cgap) / 2);
}
.kd-col.sogou-col {
margin-bottom: var(--rgap);
}
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
[class^='kdicon'] {
display: inline-block;
text-align: center;
vertical-align: middle;
}
.icon-spin::before,
.icon-spin {
-webkit-animation: loadingcircle 2s infinite linear;
animation: loadingcircle 2s infinite linear;
}
.kd-icon-rtl {
direction: rtl;
}
.kd-icon-rtl.icon-spin,
.kd-icon-rtl.icon-spin::before {
-webkit-animation: rtlloadingcircle 2s infinite linear;
animation: rtlloadingcircle 2s infinite linear;
}
.kd-icon-rtl.kdicon-tips {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-image-cropper-container {
width: 100%;
height: 100%;
}
.kd-image-cropper-modal-body-container {
padding: 28px !important;
padding-bottom: 24px !important;
}
.kd-image-cropper-bar-container {
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;
height: 44px;
background: #f2f2f2;
border-radius: 4px;
}
.kd-image-cropper-bar-container .kd-image-cropper-btn-container {
padding-left: 28px;
font-size: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-image-cropper-bar-container .kd-image-cropper-btn-container.default {
border-right: 1px solid #ccc;
}
.kd-image-cropper-bar-container .kd-image-cropper-btn-container > i,
.kd-image-cropper-bar-container .kd-image-cropper-btn-container > .kd-upload {
margin-right: 20px;
cursor: pointer;
}
.kd-image-cropper-bar-container .kd-image-cropper-btn-container .kd-upload {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-image-cropper-bar-container .kd-image-cropper-btn-container .kd-upload-handle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-image-cropper-bar-container .ok-btn {
height: 100%;
}
.kd-image-cropper-bar-container-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 20px;
margin-right: 20px;
}
/*!
* 禁止更新
* Cropper.js v1.5.7
* https://fengyuanchen.github.io/cropperjs
*
* Copyright 2015-present Chen Fengyuan
* Released under the MIT license
*
* Date: 2020-05-23T05:22:57.283Z
*/
.cropper-container {
direction: ltr;
font-size: 0;
height: 100%;
line-height: 0;
position: relative;
-ms-touch-action: none;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.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%;
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.cropper-wrap-box,
.cropper-canvas {
overflow: hidden;
}
.cropper-drag-box {
background-color: #fff;
opacity: 0;
}
.cropper-modal {
background-color: #000;
opacity: 0.5;
}
.cropper-view-box {
display: block;
height: 100%;
outline: 1px solid #39f;
outline-color: rgba(51, 153, 255, 0.75);
overflow: hidden;
width: 100%;
}
.cropper-dashed {
border: 0 dashed #eee;
display: block;
opacity: 0.5;
position: absolute;
}
.cropper-dashed.dashed-h {
border-bottom-width: 1px;
border-top-width: 1px;
height: calc(100% / 3);
left: 0;
top: calc(100% / 3);
width: 100%;
}
.cropper-dashed.dashed-v {
border-left-width: 1px;
border-right-width: 1px;
height: 100%;
left: calc(100% / 3);
top: 0;
width: calc(100% / 3);
}
.cropper-center {
display: block;
height: 0;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
width: 0;
}
.cropper-center::before,
.cropper-center::after {
background-color: #eee;
content: ' ';
display: block;
position: absolute;
}
.cropper-center::before {
height: 1px;
left: -3px;
top: 0;
width: 7px;
}
.cropper-center::after {
height: 7px;
left: 0;
top: -3px;
width: 1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
display: block;
height: 100%;
opacity: 0.1;
position: absolute;
width: 100%;
}
.cropper-face {
background-color: #fff;
left: 0;
top: 0;
}
.cropper-line {
background-color: #5582f3;
}
.cropper-line.line-e {
cursor: ew-resize;
right: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-n {
cursor: ns-resize;
height: 5px;
left: 0;
top: -3px;
}
.cropper-line.line-w {
cursor: ew-resize;
left: -3px;
top: 0;
width: 5px;
}
.cropper-line.line-s {
bottom: -3px;
cursor: ns-resize;
height: 5px;
left: 0;
}
.cropper-point {
background-color: #fff;
border: 1px solid #5582f3;
height: 5px;
opacity: 0.75;
width: 5px;
}
.cropper-point:hover {
background-color: #5582f3;
}
.cropper-point.point-e {
cursor: ew-resize;
margin-top: -3px;
right: -3px;
top: 50%;
}
.cropper-point.point-n {
cursor: ns-resize;
left: 50%;
margin-left: -3px;
top: -3px;
}
.cropper-point.point-w {
cursor: ew-resize;
left: -3px;
margin-top: -3px;
top: 50%;
}
.cropper-point.point-s {
bottom: -3px;
cursor: s-resize;
left: 50%;
margin-left: -3px;
}
.cropper-point.point-ne {
cursor: nesw-resize;
right: -3px;
top: -3px;
}
.cropper-point.point-nw {
cursor: nwse-resize;
left: -3px;
top: -3px;
}
.cropper-point.point-sw {
bottom: -3px;
cursor: nesw-resize;
left: -3px;
}
.cropper-point.point-se {
bottom: -3px;
cursor: nwse-resize;
right: -3px;
}
.cropper-invisible {
opacity: 0;
}
.cropper-bg {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}
.cropper-hide {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-image {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
border-radius: var(--kd-c-image-radius-border, var(--kd-g-radius-border, 2px));
}
.kd-image:not(.error):hover .kd-image-action {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
.kd-image.error .kd-image-img {
cursor: auto;
}
.kd-image-img {
display: block;
width: 100%;
height: auto;
cursor: pointer;
}
.kd-image-action {
position: absolute;
bottom: 0;
height: var(--kd-c-image-action-sizing-height, 28px);
width: var(--kd-c-image-action-sizing-width, 100%);
text-align: center;
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
background-color: var(--kd-c-image-action-color-background, rgba(0, 0, 0, 0.5));
}
.kd-image-action > * {
color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
cursor: pointer;
display: inline-block;
font-size: var(--kd-c-image-font-size-x-large, var(--kd-g-font-size-x-large, 18px));
}
.kd-image-action > *:not(:first-child) {
margin-left: 20px;
}
.kd-image-preview {
z-index: 3000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-transform: scale(0.15);
transform: scale(0.15);
visibility: hidden;
-webkit-transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
transition: all 0.2s cubic-bezier(0.4, 0, 1, 0.6);
-webkit-overflow-scrolling: touch;
}
.kd-image-preview.show {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
visibility: visible;
-webkit-transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
transition: all 0.2s cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-image-preview-mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background-color: rgba(0, 0, 0, 0.5);
}
.kd-image-preview-close {
position: absolute;
top: 18px;
right: 18px;
width: calc(var(--kd-c-image-preview-font-size, 28px) - 10px);
height: calc(var(--kd-c-image-preview-font-size, 28px) - 10px);
font-size: var(--kd-c-image-preview-font-size, 28px);
color: var(--kd-c-image-close-color-background, #666666);
cursor: pointer;
background-color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
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%;
}
.kd-image-preview-close:hover,
.kd-image-preview-close:active {
color: #5582f3;
}
.kd-image-preview-wrap {
position: absolute;
top: 68px;
right: 0;
bottom: 30px;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, -webkit-transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.kd-image-preview-img {
max-width: 100%;
max-height: 100%;
cursor: -webkit-grab;
cursor: grab;
}
.kd-image-preview-action {
position: absolute;
left: 50%;
bottom: 40px;
width: 240px;
height: 40px;
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: 20px;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.kd-image-preview-action i {
color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
font-size: var(--kd-c-image-icon-font-size, 26px);
cursor: pointer;
}
.kd-image-preview-action i:hover,
.kd-image-preview-action i:active {
opacity: 0.65;
}
.kd-image-preview-action i:not(:first-child) {
margin-left: 20px;
}
.kd-image-preview-action i.disabled {
opacity: 0.4;
cursor: not-allowed;
}
.kd-image-preview-previous,
.kd-image-preview-next {
position: absolute;
top: 50%;
width: 40px;
height: 40px;
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%;
color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
background-color: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
.kd-image-preview-previous {
left: 60px;
}
.kd-image-preview-next {
right: 60px;
}
.kd-image-preview-topbar {
position: absolute;
top: 0;
width: 100%;
height: 40px;
color: var(--kd-c-image-icon-color, var(--kd-g-color-white, #fff));
line-height: 40px;
background-color: rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
}
.kd-image-preview-topbar-info {
position: absolute;
left: 40px;
}
.kd-image-preview-topbar-info-size {
padding-left: 12px;
opacity: 0.65;
}
.kd-image-preview-topbar-action {
position: absolute;
right: 40px;
}
.kd-image-preview-topbar-action > * {
display: inline-block;
margin-left: 20px;
cursor: pointer;
}
.kd-image-preview-topbar-action > * i {
margin-right: 2px;
font-size: 18px;
}
.kd-image-rtl {
direction: rtl;
}
.kd-image-rtl .kd-image-preview-close {
left: 18px;
right: auto;
}
.kd-image-rtl .kd-image-preview-action i:not(:first-child) {
margin-right: 20px;
margin-left: 0;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-inputNumber-baseStep {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
cursor: pointer;
}
.kd-inputNumber-baseStep-small {
width: var(--kd-c-input-number-sizing-height-small, 20px);
}
.kd-inputNumber-baseStep-middle {
width: var(--kd-c-input-number-sizing-height-middle, 30px);
}
.kd-inputNumber-baseStep-large {
width: var(--kd-c-input-number-sizing-height-large, 36px);
}
.kd-inputNumber-baseStep .kd-inputNumber-icon {
color: var(--kd-c-input-number-color-text-baseStep, var(--kd-g-color-text-secondary, #666));
-webkit-transition: color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s);
}
.kd-inputNumber-baseStep:hover .kd-inputNumber-icon {
color: var(--kd-c-input-number-color-theme-5, var(--kd-g-color-theme-5, #87adff));
}
.kd-inputNumber-baseStep-decrease {
border-right: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-small,
.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-small {
margin-left: -9px;
}
.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-middle,
.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-middle {
margin-left: -9px;
}
.kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-large,
.kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-large {
margin-left: -9px;
}
.kd-inputNumber-baseStep-increase {
border-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-small,
.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-small {
margin-right: -9px;
}
.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-middle,
.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-middle {
margin-right: -9px;
}
.kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-large,
.kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-large {
margin-right: -9px;
}
.kd-inputNumber-embedStep {
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;
height: 100%;
border-radius: 0 1px 1px 0;
background-color: var(--kd-c-input-number-color-text, #f6f7f9);
overflow: hidden;
border-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
border: none;
}
.kd-inputNumber-embedStep.kd-inputNumber-baseStep-small,
.kd-inputNumber-embedStep.kd-inputNumber-embedStep-small {
margin-right: -9px;
}
.kd-inputNumber-embedStep.kd-inputNumber-baseStep-middle,
.kd-inputNumber-embedStep.kd-inputNumber-embedStep-middle {
margin-right: -9px;
}
.kd-inputNumber-embedStep.kd-inputNumber-baseStep-large,
.kd-inputNumber-embedStep.kd-inputNumber-embedStep-large {
margin-right: -9px;
}
.kd-inputNumber-embedStep span {
height: 50%;
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-left: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
border-bottom: 1px solid var(--kd-c-input-number-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
cursor: pointer;
font-size: 12px;
}
.kd-inputNumber-embedStep span .kd-inputNumber-icon {
-webkit-transition: color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s);
line-height: 1;
}
.kd-inputNumber-embedStep span:hover .kd-inputNumber-icon {
color: var(--kd-c-input-number-color-theme-5, var(--kd-g-color-theme-5, #87adff));
}
.kd-inputNumber-embedStep span:last-child {
border-bottom: none;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
textarea {
margin: 0;
padding: 0;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
-webkit-appearance: none;
overflow: auto;
resize: vertical;
}
.kd-input {
width: 100%;
min-width: 0;
border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
display: inline-block;
font-variant: tabular-nums;
list-style: none;
background-image: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
-webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-input::-webkit-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input::-moz-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input::-ms-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.kd-input:not(.kd-input-disabled):not(.kd-input-error):hover {
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input:not(.kd-input-disabled):not(.kd-input-error):focus {
color: #212121;
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-countWrapper {
position: relative;
display: inline-block;
width: 100%;
}
.kd-input-textarea {
width: 100%;
min-width: 0;
border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
display: inline-block;
font-variant: tabular-nums;
list-style: none;
background-image: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
-webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.kd-input-textarea::-webkit-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-textarea::-moz-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-textarea::-ms-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
color: #212121;
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-textarea-mark {
position: absolute;
right: 0;
top: calc(100% + 1px);
z-index: 1;
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
line-height: 18px;
background-color: #fff;
}
.kd-input-textarea-mark-inner {
top: auto;
bottom: 5px;
right: 8px;
}
.kd-input-textarea-mark-error {
color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-input-no-resize {
resize: none;
}
.kd-input-borderless {
border: 0;
}
.kd-input-borderless:focus {
border: 0;
}
.kd-input-underline {
border: none;
border-bottom: 1px solid var(--kd-c-input-color-border, #999);
border-radius: 0;
padding-left: 0 !important;
}
.kd-input-disabled {
background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
color: var(--kd-g-color-text-primary, #212121);
cursor: not-allowed;
}
.kd-input-underline.kd-input-disabled {
color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
border-color: var(--kd-c-input-underline-color-border-disabled, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-input-size-small {
height: var(--kd-c-input-sizing-height-small, 20px);
line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
}
.kd-input-size-small .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-small .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-small.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-size-small.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-size-middle {
height: var(--kd-c-input-sizing-height-middle, 30px);
line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
}
.kd-input-size-middle .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-middle .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-middle.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-size-middle.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-size-large {
height: var(--kd-c-input-sizing-height-large, 36px);
line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
}
.kd-input-size-large .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-large .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-size-large.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-size-large.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper {
padding-left: var(--kd-c-input-wrapper-padding-left, 0px);
width: 100%;
min-width: 0;
border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
display: inline-block;
font-variant: tabular-nums;
list-style: none;
background-image: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
-webkit-transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
transition: border-color var(--kd-c-input-motion-duration, var(--kd-g-duration, 0.3s));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden;
}
.kd-input-wrapper::-webkit-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper::-moz-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper::-ms-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):hover {
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-wrapper:not(.kd-input-wrapper-disabled):not(.kd-input-error):focus {
color: #212121;
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-wrapper .kd-input {
border: none;
padding-left: var(--kd-c-input-padding-left, 0px);
padding-right: 0;
height: 100%;
}
.kd-input-wrapper .kd-input-suffix,
.kd-input-wrapper .kd-input-prefix {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
word-break: keep-all;
color: var(--kd-c-input-affix-color-text, #999);
}
.kd-input-wrapper-size-small {
height: var(--kd-c-input-sizing-height-small, 20px);
line-height: calc(var(--kd-c-input-sizing-height-small, 20px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-small, var(--kd-g-font-size-small, 12px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-small, 9px);
}
.kd-input-wrapper-size-small .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-small .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-small.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-size-small.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-size-middle {
height: var(--kd-c-input-sizing-height-middle, 30px);
line-height: calc(var(--kd-c-input-sizing-height-middle, 30px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-middle, var(--kd-g-font-size-middle, 14px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-middle, 9px);
}
.kd-input-wrapper-size-middle .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-middle .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-middle.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-size-middle.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-size-large {
height: var(--kd-c-input-sizing-height-large, 36px);
line-height: calc(var(--kd-c-input-sizing-height-large, 36px) - (var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2) - (1px * 2));
font-size: var(--kd-c-input-font-size-large, var(--kd-g-font-size-large, 16px));
padding: var(--kd-c-input-spacing-padding-vertical-small, 3px) var(--kd-c-input-spacing-padding-horizontal-large, 9px);
}
.kd-input-wrapper-size-large .kd-input-suffix {
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-large .kd-input-prefix {
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-wrapper-size-large.kd-input-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-size-large.kd-input-wrapper-underline {
padding-right: 0;
padding-left: 0;
}
.kd-input-wrapper-borderless {
border: none !important;
}
.kd-input-wrapper-underline {
border: none;
border-bottom: 1px solid var(--kd-c-input-color-border, #999);
border-radius: 0 !important;
padding-left: 0;
}
.kd-input-wrapper-focused:not(.kd-input-error) {
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-wrapper-disabled {
border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
cursor: not-allowed;
}
.kd-input-wrapper-disabled:not(.kd-input-wrapper-underline) {
background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-input-wrapper-disabled .kd-input-suffix,
.kd-input-wrapper-disabled .kd-input-prefix {
color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-input-wrapper-textarea {
width: 100%;
min-width: 0;
border: var(--kd-c-input-sizing-border, 1px) solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
color: var(--kd-c-input-color-text, var(--kd-g-color-text-primary, #212121));
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-input-color-background, var(--kd-g-color-white, #fff));
font-variant: tabular-nums;
list-style: none;
background-image: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
border: none !important;
padding: 0 !important;
position: relative;
display: inline-block;
}
.kd-input-wrapper-textarea::-webkit-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper-textarea::-moz-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper-textarea::-ms-input-placeholder {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc)) !important;
}
.kd-input-wrapper-textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
}
.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):hover {
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-wrapper-textarea:not(.kd-input-disabled):not(.kd-input-error):focus {
color: #212121;
border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
}
.kd-input-wrapper-textarea .kd-input-textarea-clear-icon {
position: absolute;
z-index: 2;
right: 8px;
top: 3px;
}
.kd-input-clear-icon,
.kd-input-textarea-clear-icon {
cursor: pointer;
color: var(--kd-c-input-clear-color, #d9d9d9);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-input-clear-icon:hover,
.kd-input-textarea-clear-icon:hover {
color: var(--kd-c-input-clear-color-hover, #999);
}
.kd-input-clear-icon i,
.kd-input-textarea-clear-icon i {
vertical-align: middle;
font-size: 16px;
}
.kd-input-clear-icon-hidden {
visibility: hidden;
display: none;
}
.kd-input-clear-icon-rightSpace {
margin-right: 4px;
}
.kd-input-group-wrapper {
display: inline-block;
width: 100%;
text-align: start;
vertical-align: top;
}
.kd-input-group-wrapper .kd-input-group {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.kd-input-group-wrapper .kd-input-group > .kd-input-wrapper:not(:first-child):not(:last-child) {
border-radius: 0;
}
.kd-input-group-wrapper .kd-input-group > .kd-input-wrapper:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.kd-input-group-wrapper .kd-input-group > .kd-input-wrapper:not(:first-child):last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon {
position: relative;
color: var(--kd-c-input-affix-color-text, #999);
padding: 0 9px;
font-weight: 400;
font-size: 14px;
text-align: center;
border: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
border-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
white-space: nowrap;
-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;
height: var(--kd-c-input-sizing-height-middle, 30px);
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none;
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon-borderless {
border: none !important;
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon-underline {
border: none;
border-bottom: 1px solid var(--kd-c-input-color-border, #999);
border-radius: 0 !important;
padding-left: 0;
}
.kd-input-group-wrapper .kd-input-group .kd-input-group-addon-disabled {
background-color: var(--kd-c-input-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
border-color: var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
color: var(--kd-c-input-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-input-group-wrapper .kd-input-group-size-small .kd-input-group-addon {
height: var(--kd-c-input-sizing-height-small, 20px);
}
.kd-input-group-wrapper .kd-input-group-middle-small .kd-input-group-addon {
height: var(--kd-c-input-sizing-height-middle, 30px);
}
.kd-input-group-wrapper .kd-input-group-large-small .kd-input-group-addon {
height: var(--kd-c-input-sizing-height-large, 36px);
}
.kd-input-allowClear-spacing {
padding-right: 20px;
}
.kd-input-input-mark-inner {
color: var(--kd-c-input-placeholder-color-text, var(--kd-g-color-text-placeholder, #ccc));
}
.kd-input-error:not(.kd-input-disabled):not(.kd-input-wrapper-disabled):not( .kd-input-group-addon-disabled) {
border-color: var(--kd-c-input-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-input-rtl {
direction: rtl;
}
.kd-input-rtl.kd-input-group .kd-input-group-addon:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
border-bottom-right-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
border-left: none;
border-right: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-input-rtl.kd-input-group .kd-input-group-addon:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
border-bottom-left-radius: var(--kd-c-input-radius-border, var(--kd-g-radius-border, 2px));
border-right: none;
border-left: 1px solid var(--kd-c-input-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-input-rtl.kd-input-wrapper .kd-input-prefix {
margin-right: 0;
margin-left: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-rtl.kd-input-wrapper .kd-input-suffix {
margin-left: 0;
margin-right: calc(var(--kd-c-input-spacing-padding-vertical-small, 3px) * 2);
}
.kd-input-rtl.kd-input-wrapper .kd-input-clear-icon-rightSpace {
margin-left: 4px;
margin-right: 0;
}
.kd-input-rtl .kd-input-textarea-mark {
right: auto;
left: 2px;
}
.kd-input-rtl .kd-input-textarea-mark-inner {
top: auto;
left: 8px;
right: auto;
}
.kd-input-rtl .kd-input-textarea-clear-icon {
left: 8px;
right: auto;
}
.kd-input-rtl.kd-input-allowClear-spacing {
padding-right: var(--kd-c-input-spacing-padding-horizontal-small, 9px);
padding-left: 20px;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-layout {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 0;
background: var(--kd-c-layout-body-color-background, var(--kd-g-color-background-2, #f2f2f2));
}
.kd-layout,
.kd-layout * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-layout-has-sider {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.kd-layout-has-sider > .kd-layout,
.kd-layout-has-sider > .kd-layout-content {
width: 0;
}
.kd-layout-header,
.kd-layout-footer {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.kd-layout-header {
height: var(--kd-c-layout-header-sizing-height, 52px);
padding: var(--kd-c-layout-header-spacing-padding, 0 20px 0 35px);
color: var(--kd-c-layout-header-color-text, var(--kd-g-color-text-primary, #212121));
line-height: var(--kd-c-layout-header-sizing-height, 52px);
background: var(--kd-c-layout-header-color-background, var(--kd-g-color-background, #fff));
}
.kd-layout-footer {
padding: var(--kd-c-layout-footer-spacing-padding, 24px 50px);
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-g-font-size-middle, 14px);
background: var(--kd-c-layout-footer-color-background, var(--kd-g-color-background-2, #f2f2f2));
}
.kd-layout-content {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
min-height: 0;
}
.kd-layout-sider {
position: relative;
min-width: 0;
background: var(--kd-c-layout-sider-color-background, #343848);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.kd-layout-sider-children {
height: 100%;
margin-top: -0.1px;
padding-top: 0.1px;
}
.kd-layout-sider-has-trigger {
padding-bottom: var(--kd-c-layout-trigger-sizing-height, 50px);
}
.kd-layout-sider-right {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.kd-layout-sider-trigger {
position: absolute;
bottom: 0;
z-index: 1;
padding: 0 16px;
color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
height: var(--kd-c-layout-trigger-sizing-height, 50px);
line-height: calc(var(--kd-c-layout-trigger-sizing-height, 50px) - 4px);
font-size: 20px;
background: var(--kd-c-layout-trigger-color-background, #343848);
cursor: pointer;
-webkit-transition: all 0.2s;
transition: all 0.2s;
border-top: 1px solid rgba(218, 222, 237, 0.1);
}
.kd-layout-sider-zero-width > * {
overflow: hidden;
}
.kd-layout-sider-zero-width-trigger {
position: absolute;
top: var(--kd-c-layout-header-sizing-height, 52px);
right: calc(-1 * var(--kd-c-layout-trigger-sizing-width, 36px));
z-index: 1;
width: var(--kd-c-layout-trigger-sizing-width, 36px);
height: var(--kd-c-layout-trigger-sizing-height, 42px);
color: var(--kd-c-layout-trigger-color-text, var(--kd-g-color-white, #fff));
font-size: calc(var(--kd-c-layout-trigger-sizing-width, 36px) / 2);
line-height: var(--kd-c-layout-trigger-sizing-height, 42px);
text-align: center;
background: var(--kd-c-layout-sider-color-background, #343848);
border-radius: 0 var(--kd-g-radius-border, 2px) var(--kd-g-radius-border, 2px) 0;
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.kd-layout-sider-zero-width-trigger::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
content: '';
}
.kd-layout-sider-zero-width-trigger:hover::after {
background: rgba(255, 255, 255, 0.1);
}
.kd-layout-sider-zero-width-trigger-right {
left: calc(-1 * var(--kd-c-layout-trigger-sizing-width, 36px));
border-radius: var(--kd-g-radius-border, 2px) 0 0 var(--kd-g-radius-border, 2px);
}
.kd-layout-sider-light {
background: var(--kd-c-layout-sider-color-background-light, var(--kd-g-color-background, #fff));
}
.kd-layout-sider-light .kd-layout-sider-trigger {
color: var(--kd-c-layout-trigger-color-text-light, var(--kd-g-color-text-primary, #212121));
background: var(--kd-c-layout-trigger-color-background-light, var(--kd-g-color-background, #fff));
}
.kd-layout-sider-light .kd-layout-sider-zero-width-trigger {
color: var(--kd-c-layout-trigger-color-text-light, var(--kd-g-color-text-primary, #212121));
background: var(--kd-c-layout-trigger-color-background-light, var(--kd-g-color-background, #fff));
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-link {
cursor: pointer;
display: inline-block;
color: var(--kd-c-link-color-text, var(--kd-g-color-text-link, #0e5fd8));
}
.kd-link .kd-link-text {
height: auto;
width: auto;
padding: 0;
min-width: auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: inherit;
font-weight: var(--kd-c-link-font-weight, var(--kd-g-font-weight, 400));
}
.kd-link .kd-link-text:not(.kd-link-disabled):hover {
color: var(--kd-c-link-color-text-link-hover, #87A9FF);
}
.kd-link .kd-link-text:not(.kd-link-disabled):active {
color: var(--kd-c-link-color-text-link-active, #3761CA);
}
.kd-link-size-small {
height: var(--kd-c-link-sizing-height-small, 18px);
line-height: var(--kd-c-link-sizing-height-small, 18px);
font-size: var(--kd-c-link-font-size-small, var(--kd-g-font-size-small, 12px));
}
.kd-link-size-middle {
height: var(--kd-c-link-sizing-height-middle, 21px);
line-height: var(--kd-c-link-sizing-height-middle, 21px);
font-size: var(--kd-c-link-font-size-middle, var(--kd-g-font-size-middle, 14px));
}
.kd-link-size-large {
height: var(--kd-c-link-sizing-height-large, 24px);
line-height: var(--kd-c-link-sizing-height-large, 24px);
font-size: var(--kd-c-link-font-size-large, var(--kd-g-font-size-large, 16px));
}
.kd-link-underscore {
border-bottom: 1px solid;
}
.kd-link-disabled {
color: var(--kd-c-link-color-text-link-disabled, #9EBFEF) !important;
cursor: not-allowed;
}
.kd-link-prefix {
display: inline-block;
margin-right: var(--kd-c-link-prefix-horizontal, 4px);
}
.kd-link-suffix {
display: inline-block;
margin-left: var(--kd-c-link-suffix-horizontal, 4px);
}
.kd-link-rtl {
direction: rtl;
}
.kd-link-rtl .kd-link-prefix {
margin-right: 0;
margin-left: var(--kd-c-link-prefix-horizontal, 4px);
}
.kd-link-rtl .kd-link-suffix {
margin-left: 0;
margin-right: var(--kd-c-link-suffix-horizontal, 4px);
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.menu-hidden {
display: none;
opacity: 0;
visibility: hidden;
-webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-transition: opacity, visibility;
transition: opacity, visibility;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.menu-dark-hover {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.menu-dark-active {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.menu-dark-active-inline-title {
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
background: var(--kd-c-menu-color-background, #343848);
border: none;
}
.menu-light-base {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #ffffff;
}
.menu-light-base .kd-menu-item-disabled,
.menu-light-base .kd-menu-submenu-disabled {
background-color: #fff;
}
.menu-light-base .kd-menu-submenu-sub {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #fafafa;
}
.menu-light-base .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
.menu-light-base .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.menu-light-base .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.menu-light-base .kd-menu-item-hover,
.menu-light-base .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.menu-light-base .kd-menu-item-active,
.menu-light-base .kd-menu-submenu-active {
background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
border: none;
}
.menu-light-default {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #ffffff;
}
.menu-light-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.menu-light-active {
background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
border: none;
}
.menu-light-active-inline-title {
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
background: #ffffff;
border: none;
}
.kd-menu {
position: relative;
width: 100%;
height: 100%;
min-width: var(--kd-c-menu-sizing-min-width, 138px);
max-width: var(--kd-c-menu-sizing-max-width);
background-color: var(--kd-c-menu-color-background, #343848);
color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
}
.kd-menu-inline .kd-menu-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-inline .kd-menu-submenu {
padding-right: 0;
}
.kd-menu-collapsed {
width: 50px;
min-width: auto;
}
.kd-menu-item {
position: relative;
cursor: pointer;
-webkit-transition: color, background-color;
transition: color, background-color;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-item-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-item-title > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1;
-webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-item-collapsed {
padding: 0;
margin: 0;
text-align: center;
}
.kd-menu-item-collapsed .kd-menu-item-title > p,
.kd-menu-item-collapsed .kd-menu-submenu-title > p {
margin: 0 auto;
}
.kd-menu-item-collapsed .kd-menu-item-title > span,
.kd-menu-item-collapsed .kd-menu-submenu-title > span {
opacity: 0;
-webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-item-icon {
margin: 0 15px;
font-size: var(--kd-c-menu-icon-font-size, var(--kd-g-font-size-xx-large, 20px));
}
.kd-menu-item-disabled {
cursor: not-allowed;
color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-menu-color-background, #343848);
}
.kd-menu-item-arrow {
margin-left: auto;
font-size: 16px;
}
.kd-menu-item-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-item-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-submenu {
position: static;
cursor: pointer;
-webkit-transition: color, background-color;
transition: color, background-color;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-submenu-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-submenu-title > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 1;
-webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-submenu-collapsed {
padding: 0;
margin: 0;
text-align: center;
}
.kd-menu-submenu-collapsed .kd-menu-item-title > p,
.kd-menu-submenu-collapsed .kd-menu-submenu-title > p {
margin: 0 auto;
}
.kd-menu-submenu-collapsed .kd-menu-item-title > span,
.kd-menu-submenu-collapsed .kd-menu-submenu-title > span {
opacity: 0;
-webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-submenu-icon {
margin: 0 15px;
font-size: var(--kd-c-menu-icon-font-size, var(--kd-g-font-size-xx-large, 20px));
}
.kd-menu-submenu-disabled {
cursor: not-allowed;
color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-menu-color-background, #343848);
}
.kd-menu-submenu-arrow {
margin-left: auto;
font-size: 16px;
}
.kd-menu-submenu-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-menu-submenu-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-submenu-sub {
line-height: var(--kd-c-menu-item-sizing-height, 50px);
}
.kd-menu-submenu-thrid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 810px;
max-height: 492px;
padding-left: 24px;
background: var(--kd-c-menu-sub-color-background, #121319);
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow-y: auto;
cursor: default;
z-index: var(--kd-c-menu-z-index, var(--kd-g-z-index-dialog, 1050));
}
.kd-menu-submenu-thrid-item {
margin-right: 40px;
}
.kd-menu-submenu-thrid-title {
line-height: 50px;
font-size: 12px;
color: #ffffff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-submenu-thrid-title > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-submenu-thrid-list {
list-style-type: none;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
margin-top: 10px;
height: 180px;
}
.kd-menu-submenu-thrid-list > li {
width: 160px;
margin: 8px 0;
font-size: 12px;
line-height: 18px;
color: rgba(255, 255, 255, 0.65);
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;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-submenu-thrid-list > li:hover {
color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
}
.kd-menu-submenu-thrid-list > li > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-menu-submenu-thrid-list > li .kd-menu-item-title {
height: auto;
}
.kd-menu-submenu-thrid-list > .kd-menu-item-active {
color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
}
.kd-menu-dark .kd-menu-submenu-sub {
color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
}
.kd-menu-dark .kd-menu-submenu-sub-second,
.kd-menu-dark .kd-menu-submenu-sub-third {
background: var(--kd-c-menu-sub-color-background, #121319);
}
.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-dark .kd-menu-item-active {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-dark .kd-menu-item-active,
.kd-menu-dark .kd-menu-submenu-active {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-dark .kd-menu-item-hover,
.kd-menu-dark .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
.kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
background: var(--kd-c-menu-color-background, #343848);
border: none;
}
.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active) > .kd-menu-submenu-title:hover {
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
background: var(--kd-c-menu-color-background, #343848);
border: none;
}
.kd-menu-light {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #ffffff;
}
.kd-menu-light .kd-menu-item-disabled,
.kd-menu-light .kd-menu-submenu-disabled {
background-color: #fff;
}
.kd-menu-light .kd-menu-submenu-sub {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #fafafa;
}
.kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
.kd-menu-light .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-light .kd-menu-item-hover,
.kd-menu-light .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-light .kd-menu-item-active,
.kd-menu-light .kd-menu-submenu-active {
background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
border: none;
}
.kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
.kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
background: #ffffff;
border: none;
}
.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
.kd-menu-popper .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-popper.hidden {
display: none;
opacity: 0;
visibility: hidden;
-webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-transition: opacity, visibility;
transition: opacity, visibility;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-popper .kd-menu-submenu {
padding-right: 0;
}
.kd-menu-popper .kd-menu-submenu-sub {
color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
background-color: var(--kd-c-menu-sub-color-background, #121319);
color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
}
.kd-menu-popper .kd-menu-submenu-sub-second,
.kd-menu-popper .kd-menu-submenu-sub-third {
-webkit-animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
opacity: 1;
visibility: visible;
-webkit-transition: opacity, visibility;
transition: opacity, visibility;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-popper .kd-menu-submenu-sub-hide {
display: none;
opacity: 0;
visibility: hidden;
-webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
-webkit-transition: opacity, visibility;
transition: opacity, visibility;
-webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-menu-popper.light {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #ffffff;
}
.kd-menu-popper.light .kd-menu-item-disabled,
.kd-menu-popper.light .kd-menu-submenu-disabled {
background-color: #fff;
}
.kd-menu-popper.light .kd-menu-submenu-sub {
color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
background: #fafafa;
}
.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
.kd-menu-popper.light .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-popper.light .kd-menu-item-hover,
.kd-menu-popper.light .kd-menu-submenu-hover {
background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
border: none;
}
.kd-menu-popper.light .kd-menu-item-active,
.kd-menu-popper.light .kd-menu-submenu-active {
background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
border: none;
}
.kd-menu-rtl {
direction: rtl;
}
.kd-menu-rtl .kd-menu-submenu {
direction: rtl;
}
.kd-menu-rtl .kd-menu-submenu .kd-menu-submenu-title .kd-menu-submenu-arrow {
margin-left: 0;
margin-right: auto;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-message-box {
position: fixed;
width: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
pointer-events: none;
z-index: var(--kd-c-message-z-index, var(--kd-g-z-index-apex, 9999));
}
.kd-message {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: var(--kd-c-message-sizing-min-width, 280px);
max-width: var(--kd-c-message-sizing-max-width, 1000px);
margin: 0 auto var(--kd-c-message-spacing-margin-bottom, 16px);
padding: var(--kd-c-message-spacing-padding-horizontal, 10px) var(--kd-c-message-spacing-padding-vertical, 20px);
color: var(--kd-c-message-info-color-text, #0e5fd8);
border: 1px solid var(--kd-c-message-info-color-border, #b3d5ff);
border-radius: var(--kd-c-message-border-radius, 4px);
background-color: var(--kd-c-message-info-color-background, #e0efff);
pointer-events: all;
-webkit-animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdNoticeEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-message-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
font-size: var(--kd-c-message-font-size, 14px);
line-height: var(--kd-c-message-line-height, 20px);
}
.kd-message-content-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-message-content-icon-wrapper {
font-size: var(--kd-c-message-icon-font-size, 16px);
margin-right: var(--kd-c-message-icon-spacing-margin-right, 8px);
-ms-flex-item-align: start;
align-self: flex-start;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-message-content-text {
max-height: var(--kd-c-message-text-sizing-max-height, 160px);
overflow: auto;
}
.kd-message-content-close {
cursor: pointer;
color: var(--kd-c-message-close-color-text, #666);
font-size: var(--kd-c-message-font-size, 16px);
margin-left: var(--kd-c-message-close-spacing-margin-left, 12px);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.kd-message-content-close:hover {
color: var(--kd-c-message-close-color-text-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-message-success {
color: var(--kd-c-message-success-color-text, #1BA854);
background: var(--kd-c-message-success-color-background, #dcfae4);
border: 1px solid var(--kd-c-message-success-color-border, #a1e6b5);
}
.kd-message-warning {
color: var(--kd-c-message-warning-color-text, #FF991C);
background: var(--kd-c-message-warning-color-background, #fff1d4);
border: 1px solid var(--kd-c-message-warning-color-border, #ffe0a6);
}
.kd-message-error {
color: var(--kd-c-message-error-color-text, #FB2323);
background: var(--kd-c-message-error-color-background, #ffdbe0);
border: 1px solid var(--kd-c-message-error-color-border, #ffadb6);
}
.kd-message-leave {
-webkit-animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdNoticeLeaveEffect calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-message-leave-after {
padding: 0;
margin: 0;
opacity: 0;
-webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-message-leave-after.kd-message-success,
.kd-message-leave-after.kd-message-warning,
.kd-message-leave-after.kd-message-error {
-webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
border: none;
}
.kd-message-leave-after div,
.kd-message-leave-after i {
-webkit-transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.2s) cubic-bezier(0, 0.4, 0.4, 1);
height: 0;
font-size: 0;
}
.kd-message-rtl {
direction: rtl;
}
.kd-message-rtl.kd-message-content .kd-message-content-close {
margin-left: 0;
margin-right: var(--kd-c-message-close-spacing-margin-left, 12px);
}
.kd-message-rtl.kd-message-content .kd-message-content-icon-wrapper {
margin-right: 0;
margin-left: var(--kd-c-message-icon-spacing-margin-right, 8px);
-ms-flex-item-align: end;
align-self: flex-end;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
.overall-postion {
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-modal-container {
position: relative;
z-index: var(--kd-c-modal-z-index, var(--kd-g-z-index-dialog, 1050));
}
.kd-modal-container-ie {
position: absolute;
}
.kd-modal-container-show {
-webkit-animation: kdModalEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
animation: kdModalEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
}
.kd-modal-container-hidden {
display: none;
}
.kd-modal-mask {
position: fixed;
background-color: var(--kd-c-modal-mask-color-background, rgba(55, 55, 55, 0.5));
z-index: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.kd-modal-has-container-box {
position: fixed;
left: 50%;
top: 50%;
}
.kd-modal-container-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 460px;
height: 340px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #ffffff;
-webkit-box-shadow: var(--kd-c-modal-box-shadow, 0 4px 10px 0 rgba(0, 0, 0, 0.2));
box-shadow: var(--kd-c-modal-box-shadow, 0 4px 10px 0 rgba(0, 0, 0, 0.2));
border-radius: var(--kd-c-modal-boeder-radius, 2px);
outline: none;
}
.kd-modal-container-box .kd-modal-header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: var(--kd-c-modal-header-sizing-padding-vertical, 0px) var(--kd-c-modal-header-sizing-padding-horizontal, 20px);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--kd-c-modal-header-sizing-height, 50px);
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container {
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;
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container .kd-modal-title-icon {
border-radius: 50% 50%;
width: var(--kd-c-modal-icon-circle-sizing, 6px);
height: var(--kd-c-modal-icon-circle-sizing, 6px);
margin-right: var(--kd-c-modal-title-icon-sizing-margin-right, 8px);
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-confirm-title-icon-bgcolor {
background-color: var(--kd-c-modal-color-ongoing, var(--kd-g-color-ongoing, #276ff5));
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-warning-title-icon-bgcolor {
background-color: var(--kd-c-modal-color-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container .modal-error-title-icon-bgcolor {
background-color: var(--kd-c-modal-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container .kd-modal-title {
min-width: 72px;
min-height: 27px;
font-size: var(--kd-c-modal-title-font-size, 18px);
color: var(--kd-c-modal-title-text-color, var(--kd-g-color-text-primary, #212121));
line-height: 27px;
}
.kd-modal-container-box .kd-modal-header .kd-modal-title-container:active {
cursor: auto;
}
.kd-modal-container-box .kd-modal-header .kd-modal-close-icon {
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(--kd-c-modal-close-icon-font-size, 16px);
color: var(--kd-c-modal-close-icon-color-text, #666666);
cursor: pointer;
}
.kd-modal-container-box .kd-modal-header .kd-modal-close-icon:hover {
color: var(--kd-c-modal-color-theme-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-modal-container-box .kd-modal-header .kd-modal-close-icon:active {
color: var(--kd-c-modal-color-theme-active, var(--kd-g-color-theme-7, #375cca));
}
.kd-modal-container-box .kd-modal-header:active {
cursor: move;
}
.kd-modal-container-box .kd-modal-body {
display: block;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding: var(--kd-c-modal-body-sizing-padding, 20px);
font-size: var(--kd-c-modal-body-font-size, 16px);
color: var(--kd-c-modal-body-text-color, var(--kd-g-color-text-primary, #212121));
}
.kd-modal-container-box .kd-modal-footer {
height: var(--kd-c-modal-footer-sizing-height, 50px);
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(--kd-c-modal-footer-font-size, 14px);
color: var(--kd-c-modal-footer-text-color, var(--kd-g-color-text-secondary, #666));
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-modal-container-box .kd-modal-resise-handle {
position: absolute;
}
.kd-modal-container-box .kd-modal-resise-n {
top: 0;
left: 0;
width: 100%;
height: 6px;
cursor: ns-resize;
}
.kd-modal-container-box .kd-modal-resise-e {
top: 0;
right: 0;
height: 100%;
width: 6px;
cursor: ew-resize;
}
.kd-modal-container-box .kd-modal-resise-s {
bottom: 0;
left: 0;
height: 6px;
width: 100%;
cursor: ns-resize;
}
.kd-modal-container-box .kd-modal-resise-w {
left: 0;
top: 0;
height: 100%;
width: 6px;
cursor: ew-resize;
}
.kd-modal-container-box .kd-modal-resise-ne {
top: 0;
right: 0;
width: 6px;
height: 6px;
cursor: nesw-resize;
}
.kd-modal-container-box .kd-modal-resise-se {
bottom: 0;
right: 0;
width: 6px;
height: 6px;
cursor: nwse-resize;
}
.kd-modal-container-box .kd-modal-resise-sw {
bottom: 0;
left: 0;
width: 6px;
height: 6px;
cursor: nesw-resize;
}
.kd-modal-container-box .kd-modal-resise-nw {
top: 0;
left: 0;
width: 6px;
height: 6px;
cursor: nwse-resize;
}
.kd-modal-margin-btn {
margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
}
.kd-modal-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
text-align: center;
}
.kd-modal-wrapper::before {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
content: '';
}
.kd-modal-wrapper-resizable {
text-align: unset;
}
.kd-modal-wrapper-resizable::before {
height: 0;
}
.kd-modal-dialog {
display: inline-block;
vertical-align: middle;
max-width: calc(100vw);
}
.kd-modal-showline .kd-modal-header {
border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-modal-showline .kd-modal-footer {
border-top: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-modal-rtl {
direction: rtl;
}
.kd-modal-rtl .kd-modal-container-box .kd-modal-header .kd-modal-title-container .kd-modal-title-icon {
margin-right: 0;
margin-left: var(--kd-c-modal-title-icon-sizing-margin-right, 8px);
}
.kd-modal-rtl .kd-modal-container-box .kd-modal-footer .kd-modal-cancel-node .kd-modal-margin-btn {
margin-left: var(--kd-c-modal-footer-button-spacing, 12px);
margin-right: 0;
}
.kd-modal-rtl .kd-modal-has-container-box {
right: 50%;
left: auto;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-notice-box-topRight,
.kd-notice-box-topLeft,
.kd-notice-box-bottomLeft,
.kd-notice-box-bottomRight {
position: fixed;
z-index: var(--kd-c-notice-z-index, var(--kd-g-z-index-apex, 9999));
}
.kd-notice {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 320px;
margin: 0 auto 16px;
-webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
border-radius: 2px;
background-color: var(--kd-c-notice-content-color-background, var(--kd-g-color-white, #fff));
-webkit-animation: kdNoticeEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdNoticeEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-notice-content {
width: 100%;
}
.kd-notice-content-title {
height: 40px;
line-height: 40px;
white-space: nowrap;
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: var(--kd-c-notice-title-font-size, var(--kd-g-font-size-middle, 14px));
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.kd-notice-content-title-left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
margin-right: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-notice-content-title-left-icon {
margin-right: 5px;
font-size: 17px;
}
.kd-notice-content-title-left-text {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-notice-content-title-close {
cursor: pointer;
}
.kd-notice-content-description {
height: 46px;
padding: 10px 20px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.kd-notice-content-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px 15px 20px;
font-size: 12px;
color: var(--kd-c-notice-footer-color, var(--kd-g-color-text-link, #0e5fd8));
cursor: pointer;
}
.kd-notice-content-footer > div {
margin-right: 10px;
}
.kd-notice-content-footer > div:hover {
color: var(--kd-c-notice-footer-color-hover, var(--kd-g-color-text-link-hover, #3987ed));
}
.kd-notice-info .kd-notice-content-title {
color: var(--kd-c-notice-info-color, var(--kd-g-color-text-primary, #212121));
background: var(--kd-c-notice-info-header-color-background, var(--kd-g-color-white, #fff));
}
.kd-notice-info .kd-notice-content-title-left-icon {
color: var(--kd-c-notice-icon-color, var(--kd-g-color-theme, #5582f3));
}
.kd-notice-info .kd-notice-content-title-close {
color: var(--kd-c-notice-icon-color, var(--kd-g-color-theme, #5582f3));
}
.kd-notice-info .kd-notice-content-title-close:hover {
color: var(--kd-c-notice-icon-color-hover, var(--kd-g-color-border-ongoing, #85b8ff));
}
.kd-notice-primary .kd-notice-content-title {
color: var(--kd-c-notice-header-color, var(--kd-g-color-white, #fff));
background: var(--kd-c-notice-header-color-background, var(--kd-g-color-theme, #5582f3));
}
.kd-notice-primary .kd-notice-content-title-close {
color: var(--kd-c-notice-header-color, var(--kd-g-color-white, #fff));
}
.kd-notice-primary .kd-notice-content-title-close:hover {
color: var(--kd-c-notice-icon-color-hover, var(--kd-g-color-border-ongoing, #85b8ff));
}
.kd-notice-leave {
-webkit-animation: kdNoticeLeaveEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
animation: kdNoticeLeaveEffect var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1) forwards;
}
.kd-notice-leave-after {
padding: 0;
margin: 0;
opacity: 0;
-webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-notice-leave-after.kd-notice-success,
.kd-notice-leave-after.kd-notice-warning,
.kd-notice-leave-after.kd-notice-error {
-webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
border: none;
}
.kd-notice-leave-after div,
.kd-notice-leave-after i {
-webkit-transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
transition: all var(--kd-c-notice-motion-duration, var(--kd-g-duration-quickly, 0.2s)) cubic-bezier(0, 0.4, 0.4, 1);
height: 0;
font-size: 0;
}
.kd-notice-rtl {
direction: rtl;
}
.kd-notice-rtl .kd-notice-content-title-left {
margin-left: 20px;
margin-right: 0;
}
.kd-notice-rtl .kd-notice-content-title-left-icon {
margin-right: 0;
margin-left: 5px;
}
.kd-notice-rtl.kd-notice-content .kd-notice-content-footer {
padding: 0 20px 15px 20px;
}
.kd-notice-rtl.kd-notice-content .kd-notice-content-footer > div {
margin-right: 0;
margin-left: 10px;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-pagination {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
color: var(--kd-c-pagination-text-color, var(--kd-g-color-text-secondary, #666));
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-pagination .kd-pagination-total {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 12px;
}
.kd-pagination .kd-pagination-current {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 12px;
}
.kd-pagination .kd-pagination-current .kd-pagination-current-input {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 44px;
height: var(--kd-c-pagination-sizing-square, 24px);
margin: 0 3px;
padding: 0;
outline: none;
text-align: center;
background: var(--kd-g-color-background, #fff);
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination .kd-pagination-current .kd-pagination-current-input:hover,
.kd-pagination .kd-pagination-current .kd-pagination-current-input:active,
.kd-pagination .kd-pagination-current .kd-pagination-current-input:focus {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination .kd-pagination-current .kd-pagination-current-input:disabled {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
background: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
cursor: not-allowed;
}
.kd-pagination .kd-pagination-action {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered {
margin-right: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
margin-right: 0;
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered button {
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item.bordered button:disabled {
background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: var(--kd-c-pagination-sizing-square, 24px);
height: var(--kd-c-pagination-sizing-square, 24px);
border: none;
background-color: var(--kd-g-color-background, #fff);
border-radius: var(--kd-g-radius-border, 2px);
cursor: pointer;
outline: none;
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button:hover:not(:disabled),
.kd-pagination .kd-pagination-action .kd-pagination-action-item button:active:not(:disabled) {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button:hover i,
.kd-pagination .kd-pagination-action .kd-pagination-action-item button:active i {
color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button[disabled] {
cursor: not-allowed;
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button[disabled] i {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination .kd-pagination-action .kd-pagination-action-item button i {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
color: var(--kd-c-pagination-button-color, var(--kd-g-color-text-secondary, #666));
-webkit-transition: color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s);
}
.kd-pagination .kd-pagination-selector {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 20px;
outline: none;
height: var(--kd-c-pagination-sizing-square, 24px);
}
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
line-height: var(--kd-c-pagination-sizing-square, 24px);
color: var(--kd-g-color-text-primary, #212121);
border-radius: var(--kd-g-radius-border, 2px);
background: var(--kd-g-color-background, #fff);
cursor: pointer;
border: none;
outline: none;
}
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size:hover i,
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size:active i {
color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size.disabled,
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size.disabled > i {
cursor: not-allowed;
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination .kd-pagination-selector .kd-pagination-selector-size i {
margin-left: 4px;
line-height: var(--kd-c-pagination-sizing-square, 24px);
font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
color: var(--kd-c-pagination-text-color, var(--kd-g-color-text-secondary, #666));
}
.kd-pagination .kd-pagination-selector .kd-dropdown-menu-item {
text-align: right;
padding-right: var(--kd-c-pagination-dropdown-item-spacing-padding-horizontal, 24px);
padding-left: var(--kd-c-pagination-dropdown-item-spacing-padding-horizontal, 24px);
}
.kd-pagination .kd-pagination-selector .kd-dropdown-menu-item span {
white-space: nowrap;
}
.kd-pagination.simple .kd-pagination-action {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--kd-c-pagination-sizing-square, 24px);
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid transparent;
}
.kd-pagination.simple .kd-pagination-action.bordered {
border-color: var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.simple .kd-pagination-action.bordered:active:not(.disabled) {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.simple .kd-pagination-action.bordered.disabled,
.kd-pagination.simple .kd-pagination-action.bordered.disabled > .kd-pagination-item > button {
background-color: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-pagination.simple .kd-pagination-action.disabled > .kd-pagination-action-item {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination.simple .kd-pagination-action-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
height: var(--kd-c-pagination-sizing-square, 24px);
overflow: hidden;
margin: 0 8px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: var(--kd-g-color-text-primary, #212121);
}
.kd-pagination.simple .kd-pagination-action-item:first-child,
.kd-pagination.simple .kd-pagination-action-item:last-child {
margin: 0;
}
.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current {
margin-right: 2px;
}
.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input {
margin: 0;
}
.kd-pagination.simple .kd-pagination-action-item .kd-pagination-current .kd-pagination-current-input:disabled {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-pagination.simple .kd-pagination-action-item .kd-pagination-total {
margin-right: 0;
margin-left: 2px;
}
.kd-pagination.simple .kd-pagination-action-item.bordered > button {
border: none;
}
.kd-pagination.simple .kd-pagination-action-item button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
width: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
border: none;
background-color: var(--kd-g-color-background, #fff);
border-radius: var(--kd-g-radius-border, 2px);
cursor: pointer;
outline: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.simple .kd-pagination-action-item button:hover:not(:disabled),
.kd-pagination.simple .kd-pagination-action-item button:active:not(:disabled) {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.simple .kd-pagination-action-item button:hover i,
.kd-pagination.simple .kd-pagination-action-item button:active i {
color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-pagination.simple .kd-pagination-action-item button:disabled {
cursor: not-allowed;
}
.kd-pagination.simple .kd-pagination-action-item button:disabled i {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination.simple .kd-pagination-action-item button i {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
color: var(--kd-c-pagination-button-color, var(--kd-g-color-text-secondary, #666));
-webkit-transition: color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s);
}
.kd-pagination.less .kd-pagination-pages {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
display: inline-block;
}
.kd-pagination.less .kd-pagination-pages-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: var(--kd-c-pagination-button-spacing, 4px);
}
.kd-pagination.less .kd-pagination-pages-item:last-child {
margin-right: 0;
}
.kd-pagination.less .kd-pagination-pages-item.active > button:disabled {
background-color: var(--kd-g-color-background-contain, #fafafa);
}
.kd-pagination.less .kd-pagination-pages-item:hover button,
.kd-pagination.less .kd-pagination-pages-item:active button,
.kd-pagination.less .kd-pagination-pages-item.active button {
color: var(--kd-g-color-theme, #5582f3);
}
.kd-pagination.less .kd-pagination-pages-item:first-child button,
.kd-pagination.less .kd-pagination-pages-item:last-child button {
width: var(--kd-c-pagination-sizing-square, 24px);
padding: 0;
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-pagination.less .kd-pagination-pages-item:first-child button:hover,
.kd-pagination.less .kd-pagination-pages-item:last-child button:hover,
.kd-pagination.less .kd-pagination-pages-item:first-child button:active,
.kd-pagination.less .kd-pagination-pages-item:last-child button:active {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.less .kd-pagination-pages-item:first-child button:hover:disabled,
.kd-pagination.less .kd-pagination-pages-item:last-child button:hover:disabled,
.kd-pagination.less .kd-pagination-pages-item:first-child button:active:disabled,
.kd-pagination.less .kd-pagination-pages-item:last-child button:active:disabled {
border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-pagination.less .kd-pagination-pages-item button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
min-width: var(--kd-c-pagination-sizing-square, 24px);
height: var(--kd-c-pagination-sizing-square, 24px);
padding: 0 4px;
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
cursor: pointer;
outline: none;
border: none;
background: var(--kd-g-color-background, #fff);
-webkit-transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-pagination.less .kd-pagination-pages-item button:disabled {
cursor: not-allowed;
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination.nicety .kd-pagination-pages {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-pagination.nicety .kd-pagination-pages-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: var(--kd-c-pagination-button-spacing, 4px);
}
.kd-pagination.nicety .kd-pagination-pages-item:last-child {
margin-right: 0;
}
.kd-pagination.nicety .kd-pagination-pages-item:hover button,
.kd-pagination.nicety .kd-pagination-pages-item:active button,
.kd-pagination.nicety .kd-pagination-pages-item.active button {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.nicety .kd-pagination-pages-item:hover button:disabled,
.kd-pagination.nicety .kd-pagination-pages-item:active button:disabled,
.kd-pagination.nicety .kd-pagination-pages-item.active button:disabled {
border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-pagination.nicety .kd-pagination-pages-item.active > button:disabled {
background-color: var(--kd-g-color-background-contain, #fafafa);
}
.kd-pagination.nicety .kd-pagination-pages-item.active button,
.kd-pagination.nicety .kd-pagination-pages-item:hover button {
color: var(--kd-g-color-theme, #5582f3);
}
.kd-pagination.nicety .kd-pagination-pages-item.active button:not(:disabled) > .kd-pagination-pages-jumper-icon,
.kd-pagination.nicety .kd-pagination-pages-item:hover button:not(:disabled) > .kd-pagination-pages-jumper-icon {
opacity: 1;
}
.kd-pagination.nicety .kd-pagination-pages-item:first-child button,
.kd-pagination.nicety .kd-pagination-pages-item:last-child button {
width: var(--kd-c-pagination-sizing-square, 24px);
padding: 0;
line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
}
.kd-pagination.nicety .kd-pagination-pages-item button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
min-width: var(--kd-c-pagination-sizing-square, 24px);
height: var(--kd-c-pagination-sizing-square, 24px);
padding: 0 6px;
cursor: pointer;
outline: none;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-g-color-text-primary, #212121);
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border, var(--kd-g-color-border-strong, #d9d9d9));
background: var(--kd-g-color-background, #fff);
-webkit-transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
transition: color var(--kd-g-duration, 0.3s), border-color var(--kd-g-duration, 0.3s), background-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.nicety .kd-pagination-pages-item button:disabled {
cursor: not-allowed;
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination.nicety .kd-pagination-pages-item button > i {
font-size: 16px;
}
.kd-pagination.nicety .kd-pagination-pages-item button .kd-pagination-pages-jumper-icon {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
color: var(--kd-g-color-theme, #5582f3);
line-height: var(--kd-c-pagination-sizing-square, 24px);
background-color: var(--kd-g-color-background, #fff);
-webkit-transition: opacity var(--kd-g-duration, 0.3s);
transition: opacity var(--kd-g-duration, 0.3s);
}
.kd-pagination.nicety .kd-pagination-jumper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 4px;
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 40px;
height: var(--kd-c-pagination-sizing-square, 24px);
padding: 0;
outline: none;
text-align: center;
background: var(--kd-g-color-background, #fff);
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:hover,
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:active,
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:focus {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-input:disabled {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
background: var(--kd-c-pagination-button-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
cursor: not-allowed;
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
padding: 0 var(--kd-c-pagination-jumper-spacing-padding-horizontal, 4px);
height: var(--kd-c-pagination-sizing-square, 24px);
margin-left: var(--kd-c-pagination-button-spacing, 4px);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
outline: none;
color: var(--kd-g-color-text-primary, #212121);
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
background: var(--kd-g-color-background, #fff);
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:hover,
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active {
color: var(--kd-g-color-theme, #5582f3);
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:hover:disabled,
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:active:disabled {
border-color: var(--kd-c-pagination-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-pagination.nicety .kd-pagination-jumper .kd-pagination-jumper-button:disabled {
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-pagination.nicety .kd-pagination-options {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 22px;
outline: none;
height: var(--kd-c-pagination-sizing-square, 24px);
color: var(--kd-g-color-text-primary, #212121);
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 64px;
height: var(--kd-c-pagination-sizing-square, 24px);
margin-right: 8px;
padding: 0 24px 0 4px;
font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-g-color-text-primary, #212121);
border-radius: var(--kd-g-radius-border, 2px);
border: var(--kd-c-pagination-sizing-border-width, 1px) solid var(--kd-g-color-border-strong, #d9d9d9);
background: var(--kd-g-color-background, #fff);
cursor: pointer;
outline: none;
-webkit-transition: border-color var(--kd-g-duration, 0.3s);
transition: border-color var(--kd-g-duration, 0.3s);
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover,
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active {
border-color: var(--kd-c-pagination-color-border-hover, var(--kd-g-color-theme-7, #375cca));
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover.disabled,
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:active.disabled {
border-color: var(--kd-g-color-border-strong, #d9d9d9);
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.disabled,
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.disabled > i {
cursor: not-allowed;
color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size i {
position: absolute;
top: 50%;
right: 5px;
line-height: calc(var(--kd-c-pagination-sizing-square, 24px) - 2px);
font-size: var(--kd-c-pagination-icon-font-size, var(--kd-g-font-size-large, 16px));
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size:hover i {
color: var(--kd-c-pagination-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size.kd-pagination-options-dropdown-open i {
-webkit-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%);
}
.kd-pagination-options-dropdown i {
-webkit-transition: -webkit-transform var(--kd-g-duration, 0.3s);
transition: -webkit-transform var(--kd-g-duration, 0.3s);
transition: transform var(--kd-g-duration, 0.3s);
transition: transform var(--kd-g-duration, 0.3s), -webkit-transform var(--kd-g-duration, 0.3s);
}
.kd-pagination-options-dropdown-open i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.kd-pagination-rtl {
direction: rtl;
}
.kd-pagination-rtl .kd-pagination-total {
margin-left: 12px;
margin-right: 0;
}
.kd-pagination-rtl .kd-pagination-current {
margin-right: 0;
margin-left: 12px;
}
.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered {
margin-left: calc(2 * var(--kd-c-pagination-button-spacing, 4px));
margin-right: 0;
}
.kd-pagination-rtl .kd-pagination-action .kd-pagination-action-item.bordered:last-child {
margin-left: 0;
}
.kd-pagination-rtl .kd-pagination-selector {
margin-right: 20px;
margin-left: 0;
}
.kd-pagination-rtl .kd-pagination-selector .kd-pagination-selector-size i {
margin-left: 0;
margin-right: 4px;
}
.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-current {
margin-right: 0;
margin-left: 2px;
}
.kd-pagination-rtl.simple .kd-pagination-action-item .kd-pagination-total {
margin-left: 0;
margin-right: 2px;
}
.kd-pagination-rtl.less .kd-pagination-pages-item {
margin-left: var(--kd-c-pagination-button-spacing, 4px);
margin-right: 0;
}
.kd-pagination-rtl.less .kd-pagination-pages-item:last-child {
margin-left: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-pages-item {
margin-left: var(--kd-c-pagination-button-spacing, 4px);
margin-right: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-pages-item:last-child {
margin-left: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-jumper {
margin-right: var(--kd-c-pagination-button-spacing, 4px);
margin-left: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-jumper .kd-pagination-jumper-button {
margin-right: var(--kd-c-pagination-button-spacing, 4px);
margin-left: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-options {
margin-right: 22px;
margin-left: 0;
}
.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size {
margin-right: 0;
margin-left: 8px;
padding: 0 4px 0 24px;
}
.kd-pagination-rtl.nicety .kd-pagination-options .kd-pagination-options-size i {
left: 5px;
right: auto;
}
.kd-pagination-rtl.nicety .kd-pagination-options .kd-dropdown-menu-item > span {
text-align: right;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-popconfirm {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
border-radius: var(--kd-c-popconfirm-radius-border, var(--kd-g-radius-border, 2px));
background-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
opacity: 1;
z-index: var(--kd-g-z-index-popper, 1050);
visibility: visible;
}
.kd-popconfirm.hidden {
opacity: 0;
visibility: hidden;
}
.kd-popconfirm[class*='top'] {
-webkit-box-shadow: 0 6px 16px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 16px 3px rgba(0, 0, 0, 0.08);
}
.kd-popconfirm[class*='bottom'] {
-webkit-box-shadow: 0 -6px 16px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 -6px 16px 3px rgba(0, 0, 0, 0.08);
}
.kd-popconfirm[class*='left'] {
-webkit-box-shadow: 6px 0 16px 3px rgba(0, 0, 0, 0.08);
box-shadow: 6px 0 16px 3px rgba(0, 0, 0, 0.08);
}
.kd-popconfirm[class*='right'] {
-webkit-box-shadow: -6px 0 16px 3px rgba(0, 0, 0, 0.08);
box-shadow: -6px 0 16px 3px rgba(0, 0, 0, 0.08);
}
.kd-popconfirm.arrow::before {
position: absolute;
z-index: -2;
background: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
border-style: solid;
border-width: var(--arrowSize);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
}
.kd-popconfirm.arrow::after {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-g-radius-border, 2px);
}
.kd-popconfirm.arrow.bottomLeft::before,
.kd-popconfirm.arrow.bottom::before,
.kd-popconfirm.arrow.bottomRight::before {
left: var(--arrowLeft);
top: var(--arrowSpill);
-webkit-box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
box-shadow: -2px -2px calc(16px - 1px) rgba(0, 0, 0, 0.1);
border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
}
.kd-popconfirm.arrow.topLeft::before,
.kd-popconfirm.arrow.top::before,
.kd-popconfirm.arrow.topRight::before {
left: var(--arrowLeft);
bottom: var(--arrowSpill);
-webkit-box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
box-shadow: 3px 3px calc(16px + 1px) rgba(0, 0, 0, 0.15);
border-color: transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent;
}
.kd-popconfirm.arrow.leftTop::before,
.kd-popconfirm.arrow.left::before,
.kd-popconfirm.arrow.leftBottom::before {
top: var(--arrowTop);
right: var(--arrowSpill);
-webkit-box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
box-shadow: 3px 0 16px rgba(0, 0, 0, 0.12), 0 -2px 16px rgba(204, 149, 149, 0.12);
border-color: var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) transparent transparent;
}
.kd-popconfirm.arrow.rightTop::before,
.kd-popconfirm.arrow.right::before,
.kd-popconfirm.arrow.rightBottom::before {
top: var(--arrowTop);
left: var(--arrowSpill);
-webkit-box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1), -2px 0 16px rgba(0, 0, 0, 0.1);
border-color: transparent transparent var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-popconfirm-color-background, var(--kd-g-color-background, #fff));
}
.kd-popconfirm-content {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
width: var(--kd-c-popconfirm-sizing-min-width, 240px);
padding: var(--kd-c-popconfirm-spacing-padding-vertical, 16px) var(--kd-c-popconfirm-spacing-padding-horizontal, 16px);
}
.kd-popconfirm-title {
line-height: 21px;
color: var(--kd-c-popconfirm-title-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-popconfirm-title-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-popconfirm-title i {
margin-right: var(--kd-c-popconfirm-title-icon-spacing-margin-right, 6px);
vertical-align: top;
line-height: 21px;
color: var(--kd-c-popconfirm-icon-color-text, var(--kd-g-color-warning, #ff991c));
font-size: var(--kd-c-popconfirm-icon-sizing-square, 17px);
}
.kd-popconfirm-message {
color: var(--kd-c-popconfirm-message-color-text, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-popconfirm-message-font-size, var(--kd-g-font-size-small, 12px));
line-height: 18px;
margin: var(--kd-c-popconfirm-message-spacing-margin-top, 6px) 0 var(--kd-c-popconfirm-message-spacing-margin-bottom, 18px);
}
.kd-popconfirm-interaction {
text-align: right;
}
.kd-popconfirm-interaction button:not(:last-child) {
margin-right: var(--kd-c-popconfirm-button-spacing, 12px);
}
.kd-popconfirm-rtl {
direction: rtl;
}
.kd-popconfirm-rtl .kd-popconfirm-interaction {
text-align: left;
}
.kd-popconfirm-rtl .kd-popconfirm-interaction button:not(:last-child) {
margin-left: var(--kd-c-popconfirm-button-spacing, 12px);
margin-right: 0;
}
.kd-popconfirm-rtl .kd-popconfirm-title i {
margin-left: var(--kd-c-popconfirm-title-icon-spacing-margin-right, 6px);
margin-right: 0;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-popper {
opacity: 1;
z-index: var(--kd-g-z-index-popper, 1050);
visibility: visible;
}
.kd-popper.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.kd-popper .arrow {
visibility: hidden;
}
.kd-popper .arrow::before {
visibility: visible;
position: absolute;
border-style: solid;
border-width: var(--arrowSize);
content: '';
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.kd-popper[data-popper-placement^='top'] .arrow {
bottom: calc(1.07 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='top'] .arrow.transparent {
bottom: calc(0.96 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='top'] .arrow::before {
left: calc(-1 * var(--arrowSize));
border-top-color: transparent;
border-left-color: transparent;
}
.kd-popper[data-popper-placement^='bottom'] .arrow {
top: calc(-0.75 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='bottom'] .arrow.transparent {
top: calc(-0.85 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='bottom'] .arrow::before {
left: calc(-1 * var(--arrowSize));
border-bottom-color: transparent;
border-right-color: transparent;
}
.kd-popper[data-popper-placement^='left'] .arrow {
right: calc(1.07 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='left'] .arrow.transparent {
right: calc(0.9 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='left'] .arrow::before {
top: calc(-1 * var(--arrowSize));
border-left-color: transparent;
border-bottom-color: transparent;
}
.kd-popper[data-popper-placement^='right'] .arrow {
left: calc(-0.75 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='right'] .arrow.transparent {
left: calc(-0.85 * var(--arrowSize));
}
.kd-popper[data-popper-placement^='right'] .arrow::before {
top: calc(-1 * var(--arrowSize));
border-top-color: transparent;
border-right-color: transparent;
}
.kd-popper-rtl {
direction: rtl;
text-align: right;
}
.kd-popper-top {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-top-in {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-top-out {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-left {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-left-in {
-webkit-animation-name: kdZoomRightIn;
animation-name: kdZoomRightIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-left-out {
-webkit-animation-name: kdZoomRightOut;
animation-name: kdZoomRightOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-right {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-right-in {
-webkit-animation-name: kdZoomLeftIn;
animation-name: kdZoomLeftIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-right-out {
-webkit-animation-name: kdZoomLeftOut;
animation-name: kdZoomLeftOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-bottom {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-bottom-in {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-bottom-out {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-top-start {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-top-start-in {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-top-start-out {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-right-end {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-right-end-in {
-webkit-animation-name: kdZoomLeftBottomIn;
animation-name: kdZoomLeftBottomIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-right-end-out {
-webkit-animation-name: kdZoomLeftBottomOut;
animation-name: kdZoomLeftBottomOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-top-end {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-top-end-in {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-top-end-out {
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-left-end {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-left-end-in {
-webkit-animation-name: kdZoomRightBottomIn;
animation-name: kdZoomRightBottomIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-left-end-out {
-webkit-animation-name: kdZoomRightBottomOut;
animation-name: kdZoomRightBottomOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-left-start {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-left-start-in {
-webkit-animation-name: kdZoomTopRightIn;
animation-name: kdZoomTopRightIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-left-start-out {
-webkit-animation-name: kdZoomTopRightOut;
animation-name: kdZoomTopRightOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-bottom-end {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-bottom-end-in {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-bottom-end-out {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-right-start {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-right-start-in {
-webkit-animation-name: kdZoomTopLeftIn;
animation-name: kdZoomTopLeftIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-right-start-out {
-webkit-animation-name: kdZoomTopLeftOut;
animation-name: kdZoomTopLeftOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
.kd-popper-bottom-start {
-webkit-animation-duration: calc(0.3s - 0.1s);
animation-duration: calc(0.3s - 0.1s);
}
.kd-popper-bottom-start-in {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
-webkit-animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-popper-bottom-start-out {
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.6);
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-progress {
display: inline-block;
font-variant: tabular-nums;
-webkit-box-sizing: border-box;
box-sizing: border-box;
line-height: 1;
font-size: 0;
vertical-align: top;
}
.kd-progress-show-info {
font-size: var(--kd-c-progress-line-text-font-size, 16px);
}
.kd-progress-type-line {
width: 100%;
color: var(--kd-c-progress-line-color-font, #212121);
}
.kd-progress-type-line .kd-progress-special-text {
margin-top: var(--kd-c-progress-line-text-spacing-margin-top, 12px);
line-height: 24px;
}
.kd-progress-type-circle {
color: var(--kd-c-progress-circle-color-font, #666);
}
.kd-progress-type-circle .kd-progress-special-text {
margin-top: var(--kd-c-progress-circle-text-spacing-margin-top, 8px);
padding: 0;
line-height: 24px;
}
.kd-progress-outer {
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-right: 0;
padding-right: 0;
font-size: 0;
}
.kd-progress-show-info:not(.kd-progress-position-bottom) .kd-progress-outer {
margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 2 - 8px);
padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
}
.kd-progress-inner {
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
vertical-align: middle;
font-size: 0;
border-radius: var(--kd-c-progress-radius-border, 100px);
background-color: var(--kd-c-progress-color-remaining, #e5e5e5);
}
.kd-progress-success-bg,
.kd-progress-bg {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: var(--kd-c-progress-radius-border, 100px);
background-color: var(--kd-c-progress-color-default, #5582f3);
height: var(--kd-c-progress-line-stroke-sizing-width, 8px);
-webkit-transition: all 0.3s cubic-bezier(0.66, 0, 0.34, 1);
transition: all 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}
.kd-progress-success-bg {
position: absolute;
top: 0;
left: 0;
background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-progress-text {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: calc(var(--kd-c-progress-line-text-font-size, 16px)*2);
margin-left: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
white-space: nowrap;
text-align: left;
vertical-align: middle;
word-break: normal;
}
.kd-progress-special-text {
font-size: var(--kd-c-progress-line-special-text-font-size, 16px);
text-align: center;
overflow: hidden;
padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*2 + 8px);
}
.kd-progress-position-bottom .kd-progress-special-text {
padding-right: 0;
}
.kd-progress-status-success .kd-progress-bg {
background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-progress-status-success .kd-progress-text,
.kd-progress-status-success .kd-progress-special-text {
color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-progress-status-success .kd-progress-text {
font-size: 0;
}
.kd-progress-status-success .kd-progress-icon {
font-size: var(--kd-c-progress-line-icon-font-size, 16px);
color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-progress-status-success .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
stroke: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-progress-status-failure .kd-progress-bg {
background-color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
}
.kd-progress-status-failure .kd-progress-text,
.kd-progress-status-failure .kd-progress-special-text {
color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
}
.kd-progress-status-failure .kd-progress-text {
font-size: 0;
}
.kd-progress-status-failure .kd-progress-icon {
font-size: var(--kd-c-progress-line-icon-font-size, 16px);
color: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
}
.kd-progress-status-failure .kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
stroke: var(--kd-c-progress-color-failure, var(--kd-g-color-error, #fb2323));
}
.kd-progress-circle-box {
position: relative;
}
.kd-progress-circle-box .kd-progress-circle-trail {
stroke: var(--kd-c-progress-color-remaining, #e5e5e5);
}
.kd-progress-circle-box .kd-progress-circle-path {
-webkit-transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}
.kd-progress-circle-box .kd-progress-text {
position: absolute;
width: auto;
text-align: center;
font-size: 28px;
margin: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.kd-progress-circle-box .kd-progress-text-percent,
.kd-progress-circle-box .kd-progress-text-unit {
display: inline-block;
vertical-align: top;
}
.kd-progress-circle-box .kd-progress-text-percent {
line-height: var(--kd-c-progress-circle-percent-line-height, 48px);
}
.kd-progress-circle-box .kd-progress-text-unit {
line-height: var(--kd-c-progress-circle-unit-line-height, 18px);
font-size: 12px;
margin-top: var(--kd-c-progress-circle-unit-spacing-margin-top, 18px);
}
.kd-progress-circle-box .kd-progress-icon {
font-size: 48px;
}
.kd-progress-circle-box:not(.kd-progress-circle-gradient) .kd-progress-circle-path {
stroke: var(--kd-c-progress-color-default, #5582f3);
-webkit-transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
transition: stroke-dasharray 0.3s cubic-bezier(0.66, 0, 0.34, 1), stroke-dashoffset 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}
.kd-progress-rtl {
direction: rtl;
}
.kd-progress-rtl.kd-progress-show-info .kd-progress-rtl .kd-progress-position-bottom .kd-progress-outer {
margin-left: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 2 - 8px);
margin-right: 0;
padding-right: 0;
padding-left: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
}
.kd-progress-rtl .kd-progress-text {
margin-right: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
margin-left: 0;
text-align: right;
right: auto !important;
-webkit-transform: translate(-50%, -50%) !important;
transform: translate(-50%, -50%) !important;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-qrcode {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
border-radius: var(--kd-c-qrcode-border-radius, 2px);
border: var(--kd-c-qrcode-size-border, 1px) solid var(--kd-c-qrcode-color-border, rgba(5, 5, 5, 0.06));
padding: var(--kd-c-qrcode-spacing-padding-horizontal, 8px);
font-size: var(--kd-c-qrcode-font-size, 12px);
list-style: none;
overflow: hidden;
}
.kd-qrcode-expired {
margin-bottom: var(--kd-c-qrcode-spacing-margin-vertical, 4px);
}
.kd-qrcode-mask {
position: absolute;
z-index: 10;
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;
width: 100%;
height: 100%;
color: var(--kd-c-qrcode-color-text, #111111);
background: var(--kd-c-qrcode-color-background, rgba(255, 255, 255, 0.96));
text-align: center;
}
.kd-qrcode-borderless {
border: none;
}
.kd-qrcode-rtl {
direction: rtl;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-radio {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: inline-block;
padding-left: var(--kd-c-radio-square-sizing-width-height, 14px);
margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
vertical-align: middle;
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
max-width: var(--kd-c-radio-default-label-max-width);
min-height: var(--kd-c-radio-square-sizing-width-height, 14px);
}
.kd-radio::before {
position: absolute;
top: 50%;
left: 0;
height: var(--kd-c-radio-square-sizing-width-height, 14px);
width: var(--kd-c-radio-square-sizing-width-height, 14px);
content: '';
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
transition: border-color 0.3s, -webkit-box-shadow 0.3s;
transition: border-color 0.3s, box-shadow 0.3s;
transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
.kd-radio::after {
position: absolute;
top: 50%;
left: 2px;
width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
content: '';
border-radius: 50%;
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-animation: kdRadioLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
animation: kdRadioLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
visibility: hidden;
opacity: 0;
}
.kd-radio-input {
position: absolute;
opacity: 0;
left: 0;
}
.kd-radio > span {
padding: 0 6px 0 var(--kd-c-radio-spacing-padding-left, 4px);
}
.kd-radio:hover {
color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio:hover::before {
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-checked::before {
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-checked:focus-within::before {
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
}
.kd-radio-checked::after {
position: absolute;
top: 50%;
left: 2px;
width: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
height: calc(var(--kd-c-radio-square-sizing-width-height, 14px) - 4px);
content: '';
border-radius: 50%;
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-animation: kdRadioEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
animation: kdRadioEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
opacity: 1;
visibility: visible;
}
.kd-radio-disabled,
.kd-radio-disabled:hover {
cursor: not-allowed;
color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-radio-disabled::before,
.kd-radio-disabled:hover::before {
border-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-radio-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
-webkit-box-shadow: none;
box-shadow: none;
}
.kd-radio-disabled::after,
.kd-radio-disabled:hover::after {
background-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-webkit-animation: none;
animation: none;
}
.kd-radio-disabled.kd-radio-checked,
.kd-radio-disabled:hover.kd-radio-checked {
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
}
.kd-radio-text {
line-height: 1.5;
}
.kd-radio-square {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
white-space: nowrap;
text-overflow: ellipsis;
position: relative;
display: inline-block;
height: var(--kd-c-radio-square-sizing-height, 32px);
padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
margin-right: var(--kd-c-radio-spacing-margin-right, 8px);
line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
vertical-align: middle;
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
cursor: pointer;
background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
overflow: hidden;
border-radius: 2px;
border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-webkit-transition: all 0.3s;
transition: all 0.3s;
max-width: var(--kd-c-radio-square-label-max-width);
}
.kd-radio-square::after {
position: absolute;
right: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
bottom: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
width: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
height: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
content: '';
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: kdRadioSquareLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
animation: kdRadioSquareLeaveEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1);
opacity: 0;
visibility: hidden;
}
.kd-radio-square-input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
}
.kd-radio-square-input[disabled] {
cursor: not-allowed;
}
.kd-radio-square:hover {
color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-square-checked {
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-square-checked:focus-within {
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
}
.kd-radio-square-checked::after {
position: absolute;
right: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
bottom: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
width: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
height: calc(var(--kd-c-radio-square-sizing-height, 32px) - 10px);
content: '';
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: kdRadioSquareEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
animation: kdRadioSquareEffect calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1) both;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
opacity: 1;
visibility: visible;
}
.kd-radio-square-disabled,
.kd-radio-square-disabled:hover {
color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
border-color: var(--kd-c-radio-color-border-disabled, var(--kd-g-color-border-strong, #d9d9d9));
background-color: var(--kd-c-radio-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
-webkit-box-shadow: none;
box-shadow: none;
cursor: not-allowed;
}
.kd-radio-square-disabled::after,
.kd-radio-square-disabled:hover::after {
background-color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-webkit-animation: none;
animation: none;
}
.kd-radio-square-disabled.kd-radio-square-checked,
.kd-radio-square-disabled:hover.kd-radio-square-checked {
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
}
.kd-radio-square-text {
line-height: 1.5;
}
.kd-radio-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
display: inline-block;
height: var(--kd-c-radio-square-sizing-height, 32px);
padding-top: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
padding-right: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
padding-bottom: var(--kd-c-radio-square-spacing-padding-vertical, 6px);
padding-left: var(--kd-c-radio-square-spacing-padding-horizontal, 12px);
line-height: calc(var(--kd-c-radio-square-sizing-height, 32px) - (var(--kd-c-radio-square-spacing-padding-vertical, 6px) * 2) - (var(--kd-c-radio-radius-border-width, 1px) * 2));
vertical-align: middle;
color: var(--kd-c-radio-color-font, var(--kd-g-color-text-primary, #212121));
font-size: var(--kd-c-radio-font-size, var(--kd-g-font-size-small, 12px));
cursor: pointer;
background-color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-left: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
max-width: var(--kd-c-radio-button-label-max-width);
}
.kd-radio-button:first-child {
border-radius: 2px 0 0 2px;
border-left: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-radio-button:first-child::before {
content: none;
}
.kd-radio-button:last-child {
border-radius: 0 2px 2px 0;
}
.kd-radio-button::before {
z-index: 10;
position: absolute;
top: calc(-1 * var(--kd-c-radio-radius-border-width, 1px));
left: calc(-1 * var(--kd-c-radio-radius-border-width, 1px));
height: var(--kd-c-radio-square-sizing-height, 32px);
width: var(--kd-c-radio-radius-border-width, 1px);
content: '';
background-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-radio-button-input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
}
.kd-radio-button-input[disabled] {
cursor: not-allowed;
}
.kd-radio-button:hover {
color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-button-checked {
z-index: 1;
color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
border-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-button-checked:focus-within {
-webkit-box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
box-shadow: 0 0 0 3px rgba(85, 130, 243, 0.1);
}
.kd-radio-button-checked:hover {
color: var(--kd-c-radio-color-background, var(--kd-g-color-white, #fff));
}
.kd-radio-button-checked:not(.kd-radio-button-disabled)::before {
background-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-button-checked:first-child {
border-left-color: var(--kd-c-radio-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-radio-button-checked:first-child::before {
content: none;
}
.kd-radio-button-checked + .kd-radio-button::before {
content: none;
}
.kd-radio-button-checked.kd-radio-button-disabled {
background-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-left-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-webkit-box-shadow: none;
box-shadow: none;
}
.kd-radio-button-disabled,
.kd-radio-button-disabled:hover {
color: var(--kd-c-radio-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
border-color: var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
cursor: not-allowed;
}
.kd-radio-button-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
line-height: 1.5;
}
.kd-radio-rtl {
direction: rtl;
}
.kd-radio-rtl.kd-radio {
text-align: right;
padding-right: var(--kd-c-radio-square-sizing-width-height, 14px);
padding-left: 0;
margin-left: var(--kd-c-radio-spacing-margin-right, 8px);
margin-right: 0;
}
.kd-radio-rtl.kd-radio .kd-radio-input {
right: 0;
left: auto;
}
.kd-radio-rtl.kd-radio .kd-radio-checked::after {
right: 2px;
left: auto;
}
.kd-radio-rtl.kd-radio::before {
right: 0;
left: auto;
}
.kd-radio-rtl.kd-radio::after {
right: 2px;
left: auto;
}
.kd-radio-button-rtl {
direction: rtl;
}
.kd-radio-button-rtl.kd-radio-button {
border: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-right: none;
}
.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child {
border-radius: 0 2px 2px 0;
border-right: var(--kd-c-radio-radius-border-width, 1px) solid var(--kd-c-radio-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-radio-button-rtl.kd-radio-button.kd-radio-button:first-child::before {
content: none;
}
.kd-radio-button-rtl.kd-radio-button.kd-radio-button:last-child {
border-radius: 2px 0 0 2px;
}
.kd-radio-square-rtl {
direction: rtl;
}
.kd-radio-square-rtl.kd-radio-square {
margin-left: var(--kd-c-radio-spacing-margin-right, 8px);
margin-right: 0;
}
.kd-radio-square-rtl.kd-radio-square.kd-radio-square::after {
left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
right: auto;
}
.kd-radio-square-rtl.kd-radio-square.kd-radio-square-checked .kd-radio-square-checked::after {
left: calc(-1 * (var(--kd-c-radio-square-sizing-height, 32px) - 10px) / 2);
right: auto;
}
.kd-radio-group-rtl {
direction: rtl;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-rate {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.kd-rate-size-large {
font-size: var(--kd-c-rate-font-size-large, 20px);
}
.kd-rate-size-middle {
font-size: var(--kd-c-rate-font-size-middle, 16px);
}
.kd-rate-size-small {
font-size: var(--kd-c-rate-font-size-small, 12px);
}
.kd-rate-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
line-height: 100%;
margin-right: var(--kd-c-rate-spacing-margin-right, 8px);
}
.kd-rate-item .kd-rate-icon-view {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-transition: -webkit-transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-rate-item .kd-rate-icon-view:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.kd-rate-item .kd-rate-icon-wrapper {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.kd-rate-item .kd-rate-icon-first {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
color: var(--kd-c-rate-color-text-not-selected, #E5E5E5);
opacity: 1;
cursor: pointer;
-webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-rate-item .kd-rate-icon-first:hover {
color: var(--kd-c-rate-color-text-selected, #FEC104);
}
.kd-rate-item .kd-rate-icon-second {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
color: var(--kd-c-rate-color-text-not-selected, #E5E5E5);
opacity: 1;
cursor: pointer;
-webkit-transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-rate-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-rate-item .kd-rate-icon-second-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.kd-rate-item .kd-rate-icon-second:hover {
color: var(--kd-c-rate-color-text-selected, #FEC104);
}
.kd-rate-item .kd-rate-icon-selected {
color: var(--kd-c-rate-color-text-selected, #FEC104);
opacity: 1;
}
.kd-rate-item:last-child {
margin-right: 0;
}
.kd-rate-disabled {
pointer-events: none;
}
.kd-rate-rtl {
direction: rtl;
}
.kd-rate-rtl .kd-rate-item {
direction: rtl;
margin-right: 0;
margin-left: var(--kd-c-rate-spacing-margin-right, 8px);
}
.kd-rate-rtl .kd-rate-item .kd-rate-icon-view .kd-rate-icon-first {
left: auto;
right: 0;
}
.kd-rate-rtl .kd-rate-item .kd-rate-icon-view .kd-rate-icon-first .kd-rate-icon-wrapper .kd-image {
position: absolute;
left: 0;
}
.kd-rate-rtl .kd-rate-item:last-child {
margin-left: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
@-webkit-keyframes SlideDownIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes SlideDownIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@-webkit-keyframes SlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes SlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@-webkit-keyframes animate_loading {
50% {
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes animate_loading {
50% {
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
.kd-search {
border-bottom: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
}
.kd-search-size-small {
width: var(--kd-c-search-sizing-width-small, 200px);
}
.kd-search-size-middle {
width: var(--kd-c-search-sizing-width-middle, 260px);
}
.kd-search-size-large {
width: var(--kd-c-search-sizing-width-large, 320px);
}
.kd-search-disabled {
cursor: not-allowed;
}
.kd-search-borderless {
border: none !important;
}
.kd-search-border {
border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
border-radius: var(--kd-c-search-radius-border, var(--kd-g-radius-border, 2px));
}
.kd-search-prefix,
.kd-search-suffix {
font-size: var(--kd-c-search-icon-font-size, 16px);
color: var(--kd-c-search-icon-color, #B2B2B2);
}
.kd-search-focused,
.kd-search:not(.kd-search-disabled):hover {
border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-search-focused .kd-search-prefix,
.kd-search:not(.kd-search-disabled):hover .kd-search-prefix {
color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-search-focused .kd-search-suffix,
.kd-search:not(.kd-search-disabled):hover .kd-search-suffix {
color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-quick-search {
display: inline-block;
max-width: var(--kd-c-search-sizing-width-max, 400px);
width: var(--kd-c-search-sizing-width-default, 200px);
height: var(--kd-c-search-sizing-height-default, 24px);
position: relative;
border-bottom: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
-webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-quick-search-borderless {
border: none !important;
}
.kd-quick-search-border {
border: var(--kd-c-search-sizing-border-width, 1px) solid var(--kd-c-search-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));
border-radius: var(--kd-c-search-radius-border, var(--kd-g-radius-border, 2px));
}
.kd-quick-search:hover:not(.kd-quick-search-disabled) {
border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-quick-search:hover:not(.kd-quick-search-disabled) .kd-quick-search-prefix {
color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-quick-search-focused:not(.kd-quick-search-disabled) {
max-width: var(--kd-c-search-sizing-width-max, 400px);
width: 100% !important;
border-color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-quick-search-focused:not(.kd-quick-search-disabled) .kd-quick-search-prefix {
color: var(--kd-c-search-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-quick-search-disabled {
cursor: not-allowed;
}
.kd-quick-search-prefix {
margin-right: 4px;
-ms-flex-item-align: center;
align-self: center;
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 1;
font-size: var(--kd-c-search-icon-font-size, 16px);
color: var(--kd-c-search-icon-color, #B2B2B2);
}
.kd-quick-search-selector {
cursor: text;
padding-left: 24px;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kd-quick-search-selector-disabled {
cursor: not-allowed;
}
.kd-quick-search-selection-overflow {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 100%;
}
.kd-quick-search-selection-overflow-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 2px;
border: 1px solid var(--kd-c-search-color-end, var(--kd-g-color-end, #666));
margin: 2px 12px 2px 0;
cursor: pointer;
max-width: 100%;
height: 20px;
}
.kd-quick-search-selection-overflow-item:hover .kd-quick-search-selection-overflow-item-del {
display: block;
}
.kd-quick-search-selection-overflow-item-tag {
padding: 0 4px 0 4px;
-ms-flex-negative: 0;
flex-shrink: 0;
max-width: 170px;
background: var(--kd-c-search-color-end, var(--kd-g-color-end, #666));
line-height: 20px;
font-size: var(--kd-c-search-dropdown-font-size, 12px);
color: #fff;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-quick-search-selection-overflow-item-label {
font-size: var(--kd-c-search-dropdown-font-size, 12px);
color: #212121;
letter-spacing: 0;
padding: 0 4px;
-ms-flex-item-align: center;
align-self: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: var(--kd-c-search-tag-sizing-max-width);
}
.kd-quick-search-selection-overflow-item-del {
height: 14px;
width: 14px;
line-height: 1;
font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
border-radius: 50%;
position: absolute;
right: -7px;
top: -6px;
display: none;
background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
}
.kd-quick-search-selection-overflow-item-del:hover {
color: var(--kd-c-search-selected-tags-del-color-background-hover, #999999);
}
.kd-quick-search-selection-placeholder {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: var(--kd-c-search-selection-placeholder-color-text, #B2B2B2);
font-size: var(--kd-c-search-placeholder-font-size, 12px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-quick-search-selection-search {
position: relative;
max-width: 100%;
margin-top: 2px;
margin-bottom: 2px;
}
.kd-quick-search-selection-search-mirror {
position: absolute;
top: 0;
left: 0;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.kd-quick-search-input {
outline: 0;
border-radius: 0;
border: none;
width: 100%;
background: transparent;
font-size: var(--kd-c-search-input-font-size, 12px);
color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
}
.kd-quick-search-input::-webkit-input-placeholder {
font-size: 12px;
color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
letter-spacing: 0;
}
.kd-quick-search-input::-moz-placeholder {
font-size: 12px;
color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
letter-spacing: 0;
}
.kd-quick-search-input:-ms-input-placeholder {
font-size: 12px;
color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
letter-spacing: 0;
}
.kd-quick-search-input::-ms-input-placeholder {
font-size: 12px;
color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
letter-spacing: 0;
}
.kd-quick-search-input::placeholder {
font-size: 12px;
color: var(--kd-c-search-input-color-text, var(--kd-g-color-disabled, #b2b2b2));
letter-spacing: 0;
}
.kd-quick-search-dropdown {
padding: 8px 0;
margin: 0;
z-index: 1050;
font-size: var(--kd-c-search-dropdown-font-size, 12px);
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
border-radius: var(--kd-c-search-dropdown-radius-border, var(--kd-g-radius-border, 2px));
background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
overflow: auto;
}
.kd-quick-search-dropdown-scroll {
overflow-y: auto;
}
.kd-quick-search-dropdown-empty {
padding: 5px 12px;
}
.kd-quick-search-dropdown-desc {
padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
padding-right: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--kd-c-search-dropdown-desc-color-text, #999999);
font-size: var(--kd-c-search-dropdown-desc-font-size, 12px);
}
.kd-quick-search-option {
padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
padding-right: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
}
.kd-quick-search-option-tag {
margin-right: 12px;
}
.kd-quick-search-option:hover:not(.kd-quick-search-option-selected) {
background: var(--kd-c-search-color-background-contain-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) {
background: var(--kd-c-search-dropdown-tags-color-background-selected, #F2F6FF);
}
.kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) .kd-quick-search-option-tag {
color: var(--kd-c-search-color-hover, #5582F3);
}
.kd-quick-search-option-selected:not(.kd-quick-search-option-disabled) .kd-quick-search-option-content {
color: var(--kd-c-search-color-hover, #5582F3);
}
.kd-quick-search-npl {
border-top: 1px solid var(--kd-c-search-npl-color-border, #D8D8D8);
}
.kd-quick-search-npl-loading {
height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
line-height: var(--kd-c-search-dropdown-option-sizing-height, 32px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
padding-left: var(--kd-c-search-dropdown-option-spacing-padding-horizontal, 12px);
}
.kd-quick-search-npl-loading-item {
width: 4px;
height: 4px;
margin-right: 5px;
border-radius: 50% 50% 50% 50%;
-webkit-animation: animate_loading 1s infinite;
animation: animate_loading 1s infinite;
}
.kd-quick-search-npl-loading-item:nth-child(1) {
background-color: var(--kd-c-search-dot-color-first, var(--kd-g-color-logo-1, #2486ee));
}
.kd-quick-search-npl-loading-item:nth-child(2) {
background-color: #02ccfe;
}
.kd-quick-search-npl-loading-item:nth-child(3) {
background-color: #05c8c7;
}
.kd-quick-search-npl-loading-item:nth-child(4) {
background-color: #a06eff;
}
.kd-search-panel {
width: var(--kd-c-search-panel-sizing-width, 800px);
border-radius: 4px;
background: var(--kd-c-search-color-background, var(--kd-g-color-background, #fff));
}
.kd-search-panel-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--kd-c-search-panel-sizing-height, 60px);
border-radius: 4px;
}
.kd-search-panel-recommend {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 24px;
}
.kd-search-panel-recommend-icon {
font-size: 18px;
margin: 0 8px;
-webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-search-panel-type {
width: 230px;
max-height: 400px;
overflow: auto;
}
.kd-search-panel-type-list {
line-height: 30px;
display: block;
padding-left: 24px;
}
.kd-search-panel-type-list:hover {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
color: var(--kd-c-search-panel-color-hover, #597cfc);
}
.kd-search-panel-type-list-active {
color: var(--kd-c-search-panel-color-hover, #597cfc);
}
.kd-search-panel-dropDown {
height: 400px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border-top: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-search-panel-dropDown-result {
width: 300px;
height: 400px;
border-right: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
}
.kd-search-panel-dropDown-result-wrapper {
max-height: 330px;
overflow: auto;
border-bottom: 1px solid var(--kd-c-search-panel-color-border, #E6E8ED);
}
.kd-search-panel-dropDown-result-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
height: 48px;
padding: 5px 13px 2px 17px;
font-size: 12px;
line-height: 20px;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-search-panel-dropDown-result-list:hover {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
}
.kd-search-panel-dropDown-result-list-active {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
}
.kd-search-panel-dropDown-result-list-title {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 1;
}
.kd-search-panel-dropDown-result-list-type {
color: var(--kd-c-search-color-text-third, var(--kd-g-color-text-third, #999));
}
.kd-search-panel-dropDown-result-list-sub-title {
color: var(--kd-c-search-color-text-third, var(--kd-g-color-text-third, #999));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 95px;
}
.kd-search-panel-dropDown-result-list img {
height: 18px;
width: 18px;
margin-right: 4px;
margin-top: 2px;
}
.kd-search-panel-dropDown-summary {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-top: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.kd-search-panel-dropDown-summary-pic {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
margin-bottom: 20px;
}
.kd-search-panel-dropDown-summary-icon {
position: absolute;
width: 48px;
height: 48px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.kd-search-panel-dropDown-summary-title {
margin-bottom: 10px;
font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-search-color-text-primary, var(--kd-g-color-text-primary, #212121));
}
.kd-search-panel-dropDown-summary-list {
margin-top: 4px;
color: var(--kd-c-search-color-text-secondary, var(--kd-g-color-text-secondary, #666));
font-size: var(--kd-c-search-font-size-small, var(--kd-g-font-size-small, 12px));
line-height: 20px;
}
.kd-search-panel-dropDown-search {
height: 48px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 17px;
font-size: var(--kd-c-search-font-size-middle, var(--kd-g-font-size-middle, 14px));
cursor: pointer;
}
.kd-search-panel-dropDown-search:hover {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
}
.kd-search-panel-dropDown-search-active {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
}
.kd-search-panel-dropDown-search-value {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-search-panel-dropDown-loading {
margin-left: 30px;
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-search-panel-tooltip::before {
display: none;
}
.kd-search-panel-tooltip-content {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.kd-search-panel-tooltip-content:hover {
background: var(--kd-c-search-panel-color-background-hover, #eef3fe);
}
.kd-quick-search-dropdown-wrapper.topLeft.hidden,
.kd-quick-search-dropdown-wrapper.bottomLeft.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(var(--kd-c-search-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-quick-search-dropdown-wrapper.bottomLeft-active {
padding: 10px 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
@-webkit-keyframes SlideDownIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@keyframes SlideDownIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
@-webkit-keyframes SlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@keyframes SlideDownOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 0;
}
}
@-webkit-keyframes SlideUpIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@keyframes SlideUpIn {
0% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
}
@-webkit-keyframes SlideUpOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
@keyframes SlideUpOut {
0% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 1;
}
100% {
-webkit-transform: scaleY(0.8);
transform: scaleY(0.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
opacity: 0;
}
}
.kd-select {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
cursor: pointer;
vertical-align: middle;
}
.kd-select-selector:hover .kd-select-icon-active {
color: #3761ca;
}
.kd-select-visible .kd-select-icon-active {
color: #3761ca;
}
.kd-select-visible div.kd-select-show-search .kd-select-selection-item {
color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
}
.kd-select-icon-arrow {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
.kd-select-icon-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-select-icon-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-select-icon-clear {
opacity: 0;
z-index: 1;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
background: #fff;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.kd-select-icon-clear:hover {
color: var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select-focused:not(.kd-select-error) {
border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-select-placeholder {
position: absolute;
color: var(--kd-c-select-placeholder-color-text, #b2b2b2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
right: 28px;
left: 0;
top: 0;
bottom: 0;
pointer-events: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-select-borderless {
border: none;
}
.kd-select-underline {
border-bottom: 1px solid var(--kd-c-select-color-border, var(--kd-g-color-input, #999));
}
.kd-select-underline:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled):not( .kd-select-error) {
border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select-bordered {
border: 1px solid var(--kd-c-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
padding-left: var(--kd-c-select-bordered-spacing-padding-left, 8px) !important;
border-radius: var(--kd-c-select-bordered-radius-border, 2px);
}
.kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled):not( .kd-select-error) {
border: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select-bordered .kd-select-suffix {
padding-right: 8px;
}
.kd-select-bordered.kd-select-single .kd-select-selection-search {
padding-left: var(--kd-c-select-bordered-spacing-padding-left, 8px);
}
.kd-select-bordered .kd-select-placeholder {
padding-left: var(--kd-c-select-bordered-spacing-padding-left, 8px);
}
.kd-select-wrapper {
-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: var(--kd-c-select-wrapper-spacing-padding, 1px 28px 1px 0);
max-width: 100%;
color: #212121;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.kd-select-show-search {
cursor: text;
}
.kd-select-show-search.kd-select-single .kd-select-selection-search .kd-select-selection-search-input {
cursor: text;
}
.kd-select-dropdown {
display: block;
left: 0;
z-index: var(--kd-c-select-z-index, var(--kd-g-z-index-popper, 1050));
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--kd-c-select-dropdown-spacing-padding-vertical, 8px) 0;
margin: 0;
overflow: auto;
font-size: var(--kd-c-select-dropdown-font-size, 12px);
font-variant: initial;
background-color: var(--kd-c-select-dropdown-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-c-select-radius-border, var(--kd-g-radius-border, 2px));
outline: none;
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.kd-select-dropdown-scroll {
overflow-y: auto;
}
.kd-select-dropdown-empty {
padding: 5px 12px;
}
.kd-select-dropdown-search {
padding: 5px 6px;
}
.kd-select-dropdown-search-hidden {
display: none;
}
.kd-select-multiple-dropdown-panel .kd-select-dropdown:not(.kd-select-dropdown-no-data) {
padding-bottom: 0;
}
.kd-select-item {
position: relative;
display: block;
font-weight: normal;
font-size: var(--kd-c-select-dropdown-font-size, 12px);
min-height: var(--kd-c-select-item-sizing-height, 22px);
padding: 5px 12px;
color: var(--kd-c-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
line-height: var(--kd-c-select-dropdown-line-height, 22px);
cursor: pointer;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.kd-select-item-option {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 75px;
}
.kd-select-item-option-content {
max-width: var(--kd-c-select-item-sizing-max-width);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-select-item-option-content .kd-checkbox {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.kd-select-item-option-content .kd-checkbox .kd-checkbox-children {
display: inline-block;
}
.kd-select-item-option-active:not(.kd-select-item-option-disabled) {
background-color: var(--kd-c-select-color-background, #f5f5f5);
}
.kd-select-item-option-selected:not(.kd-select-item-option-disabled) {
color: var(--kd-c-select-item-color-text-selected, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-select-color-background-selected, var(--kd-g-color-theme-3, #e3eeff));
}
.kd-select-item-option-disabled {
color: var(--kd-c-select-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
background-color: var(--kd-c-select-item-color-background-disabled, #fff);
}
.kd-select-size-small {
min-height: var(--kd-c-select-sizing-height-small, 24px);
max-height: calc(var(--kd-c-select-sizing-height-small, 24px) * 3 - 10px);
font-size: var(--kd-c-select-font-size-small, 12px);
}
.kd-select-size-small .kd-select-selection-item {
min-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
line-height: calc(var(--kd-c-select-sizing-height-small, 24px) - 4px);
}
.kd-select-size-middle {
min-height: var(--kd-c-select-sizing-height-middle, 30px);
max-height: calc(var(--kd-c-select-sizing-height-middle, 30px) * 3 - 10px);
font-size: var(--kd-c-select-font-size-middle, 14px);
}
.kd-select-size-middle .kd-select-selection-item {
min-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
line-height: calc(var(--kd-c-select-sizing-height-middle, 30px) - 4px);
}
.kd-select-size-large {
min-height: var(--kd-c-select-sizing-height-large, 36px);
max-height: calc(var(--kd-c-select-sizing-height-large, 36px) * 3 - 10px);
font-size: var(--kd-c-select-font-size-large, 16px);
}
.kd-select-size-large .kd-select-selection-item {
min-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
line-height: calc(var(--kd-c-select-sizing-height-large, 36px) - 4px);
}
.kd-select-suffix {
right: 0;
top: 0;
bottom: 0;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 8px;
}
.kd-select .kd-select-single .kd-select-selection-search {
position: absolute;
right: 28px;
left: 0;
height: 100%;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-select .kd-select-single .kd-select-selection-search-input {
outline: 0;
border-radius: 0;
border: none;
background: transparent;
height: 100%;
width: 100%;
cursor: pointer;
}
.kd-select .kd-select-single .kd-select-selection-item {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-select .kd-select-single-focused:not(.kd-select-error) {
border-color: var(--kd-c-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-select .kd-select-single-disabled {
background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-select .kd-select-single-disabled:hover {
cursor: not-allowed;
}
.kd-select .kd-select-single-disabled .kd-select-suffix {
color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
}
.kd-select .kd-select-single:hover .kd-select-icon-clear {
opacity: 1;
}
.kd-select .kd-select-single .kd-select-icon-clear {
color: var(--kd-c-select-icon-clear-color-text, #666);
}
.kd-select .kd-select-single .kd-select-icon-clear:hover {
color: var(--kd-c-select-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select .kd-select-single-text {
color: var(--kd-c-select-single-color-text, var(--kd-g-color-text-primary, #212121));
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-select .kd-select-single-disabled-text {
color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-select .kd-select-selection-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
max-width: 100%;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-select .kd-select-selection-item.kd-select-selection-item-small {
height: 20px;
line-height: 18px;
font-size: 12px;
}
.kd-select .kd-select-selection-item.kd-select-selection-item-middle {
font-size: 12px;
height: 20px;
line-height: 18px;
}
.kd-select .kd-select-selection-item.kd-select-selection-item-large {
font-size: 14px;
line-height: 22px;
height: 22px;
}
.kd-select .kd-select-selection-item-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
padding: 0 7px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
color: #212121;
}
.kd-select .kd-select-selection-item-span {
position: relative;
margin-left: 0.5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-select .kd-select-selection-item-input {
cursor: text;
margin: 0;
padding: 0;
background: 0 0;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 20px;
}
.kd-select-multiple .kd-select-selection-tag {
max-width: calc(100% - 5px);
}
.kd-select-multiple .kd-select-selection-tag .kd-tag {
margin: 2px 8px 2px 0;
max-width: 100%;
}
.kd-select-multiple .kd-select-selection-search {
position: relative;
max-width: 100%;
}
.kd-select-multiple .kd-select-selection-search-input {
outline: 0;
border-radius: 0;
border: none;
background: transparent;
width: 100%;
}
.kd-select-multiple .kd-select-selection-search-mirror {
position: absolute;
top: 0;
left: 0;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.kd-select-multiple-disabled {
cursor: not-allowed;
background-color: var(--kd-c-select-color-background-disabled, #f5f5f5);
color: var(--kd-c-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-select-multiple-disabled .kd-select-suffix {
color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2);
}
.kd-select-multiple:hover .kd-select-icon-clear {
opacity: 1;
}
.kd-select-multiple .kd-select-icon-clear {
color: var(--kd-c-select-icon-clear-color-text, #666);
}
.kd-select-multiple .kd-select-icon-clear:hover {
color: var(--kd-c-select-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select-multiple-selector {
position: relative;
cursor: text;
padding-right: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-select-multiple .kd-select-wrapper:hover:not(.kd-select-multiple-disabled) {
border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-select-multiple-footer {
color: var(--kd-c-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 0 12px;
height: 40px;
line-height: 30px;
border-top: 1px solid #d9d9d9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-select-multiple-footer-hadSelected {
color: #999999;
padding-left: 12px;
}
.kd-select-multiple-footer-hadSelected-number {
color: var(--kd-c-select-footer-color-text-selected, #0e5fd8);
padding: 0 2px;
}
.kd-select-error:not(.kd-select-single-disabled):not(.kd-select-multiple-disabled) {
border-color: var(--kd-c-select-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-select-dropdown-panel.topLeft.hidden,
.kd-select-dropdown-panel.bottomLeft.hidden,
.kd-select-dropdown-panel.topRight.hidden,
.kd-select-dropdown-panel.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-select-rtl {
direction: rtl;
}
.kd-select-rtl .kd-select-selector .kd-select-wrapper {
padding: 1px 0 1px 28px;
}
.kd-select-rtl .kd-select-selector .kd-select-wrapper .kd-select-suffix {
position: absolute;
right: auto;
left: 0;
margin-left: 0;
margin-right: 8px;
}
.kd-select-rtl .kd-select-selector .kd-select-wrapper .kd-select-placeholder {
right: 0;
left: 28px;
}
.kd-select-rtl .kd-select-selector .kd-select-wrapper.kd-select-single .kd-select-selection-search {
padding-left: auto;
position: absolute;
left: 28px;
right: 0;
height: 100%;
top: 0;
bottom: 0;
}
.kd-select-rtl .kd-select-selector .kd-select-multiple .kd-select-selection-tag .kd-tag {
margin: 2px 0 2px 8px;
}
.kd-select-rtl .kd-select-selector .kd-select-multiple .kd-select-selection-tag .kd-tag-closeWrapper {
margin-right: 4px;
margin-left: 0;
}
.kd-select-rtl .kd-select-selector .kd-select-bordered {
padding-left: auto !important;
padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px) !important;
}
.kd-select-rtl .kd-select-selector .kd-select-bordered .kd-select-suffix {
padding-left: 8px;
}
.kd-select-rtl .kd-select-selector .kd-select-bordered.kd-select-single .kd-select-selection-search {
padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px);
}
.kd-select-rtl .kd-select-selector .kd-select-bordered .kd-select-placeholder {
padding-right: var(--kd-c-select-bordered-spacing-padding-left, 8px);
}
.kd-select-rtl .kd-select-dropdown .kd-select-multiple-footer-hadSelected {
padding-right: 12px;
padding-left: 0;
}
.kd-select-rtl .kd-select-dropdown .kd-select-multiple-footer .kd-checkbox-default-margin {
margin-right: 0;
margin-left: 4px;
}
.kd-select-item-rtl {
direction: rtl;
}
.kd-select-item-rtl.kd-select-item .kd-select-item-option-content .kd-checkbox-default-margin {
margin-right: 0;
margin-left: 4px;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-signature {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
}
.kd-signature-image {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-signature-image img {
width: 100%;
height: 100%;
}
.kd-signature-empty {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 1px dashed #e5e5e5;
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;
background: var(--kd-c-signature-bg-color, #fafafa);
color: var(--kd-c-signature-color-text, #999999);
font-size: var(--kd-c-signature-font-size, 12px);
cursor: pointer;
border-radius: var(--kd-c-signature-border-radius, var(--kd-g-radius-border, 2px));
-webkit-transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
transition: border-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-signature-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-signature-empty:hover {
border-color: var(--kd-c-signature-border-color-hover, var(--kd-g-color-theme-5, #87adff));
background-color: var(--kd-c-signature-bg-color-hover, var(--kd-g-color-theme-1, #f2f8ff));
}
.kd-signature.kd-signature-disabled {
cursor: not-allowed;
border: 1px solid var(--kd-g-color-border-disabled, #ccc);
background: var(--kd-c-signature-bg-color, #fafafa);
color: var(--kd-c-signature-color-text, #999999);
}
.kd-signature-drawing-board {
width: 100%;
height: 100%;
border: 1px solid #e5e5e5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: var(--kd-c-signature-drawing-board-bg-color, #fafafa);
position: relative;
}
.kd-signature-drawing-board-operation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 9px;
right: 9px;
color: #b2b2b2;
z-index: 9999;
}
.kd-signature-drawing-board-operation > * {
cursor: pointer;
}
.kd-signature-drawing-board-operation > *:not(:last-child) {
margin-right: 13px;
}
.kd-signature-drawing-board-operation span:nth-of-type(2) {
-webkit-transform: scaleX(-1) !important;
transform: scaleX(-1) !important;
}
.kd-signature-drawing-board-operation.enabled {
color: #666666;
}
.kd-signature-drawing-board-tip {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: var(--kd-c-signature-board-tip-color, #b2b2b2);
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-signature-modal .kd-modal-header {
position: relative;
}
.kd-signature-modal-footer .kd-btn:not(:last-child) {
margin-right: 12px;
}
.kd-signature-modal .kd-modal-expand-icon {
position: absolute;
right: 43.5px;
font-size: 14px;
cursor: pointer;
}
.kd-signature-modal.kd-signature-modal-fullscreen .kd-modal-container-box {
width: 90vw !important;
height: 90vh !important;
top: 5vh;
left: 5vw;
-webkit-transform: none !important;
transform: none !important;
}
.kd-signature-rtl {
direction: rtl;
}
.kd-signature-rtl.kd-signature-modal .kd-signature-modal-footer .kd-btn:not(:last-child) {
margin-right: 0;
margin-left: 12px;
}
.kd-signature-rtl.kd-signature-modal .kd-modal-expand-icon {
left: 43.5px;
right: auto;
}
.kd-signature-rtl .kd-signature-drawing-board-operation {
top: 9px;
left: 9px;
right: auto;
}
.kd-signature-rtl .kd-signature-drawing-board-operation > * {
cursor: pointer;
}
.kd-signature-rtl .kd-signature-drawing-board-operation > *:not(:last-child) {
margin-left: 13px;
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.slider {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 12px;
margin: 10px 6px;
padding: 4px 0;
cursor: pointer;
-ms-touch-action: none;
touch-action: none;
}
.slider-vertical {
width: 12px;
height: 100%;
margin: 6px 10px;
padding: 0 4px;
}
.slider-dot {
position: absolute;
top: -2px;
margin-left: -4px;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8px;
height: 8px;
background-color: #fff;
border: 2px solid #f0f0f0;
border-radius: 50%;
cursor: pointer;
}
.slider-handle {
position: absolute;
top: -1px;
margin-left: -7px;
width: 14px;
height: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border: 2px solid var(--kd-c-slider-handle-color-border, var(--kd-g-color-theme, #5582f3));
border-radius: 50%;
cursor: pointer;
}
.kd-slider {
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 12px;
margin: 10px 6px;
padding: 4px 0;
cursor: pointer;
-ms-touch-action: none;
touch-action: none;
}
.kd-slider-rail {
position: absolute;
width: 100%;
height: 4px;
background-color: var(--kd-c-slider-trail-color-background, var(--kd-g-color-border-weak, #e5e5e5));
border-radius: 2px;
}
.kd-slider-track {
position: absolute;
height: 4px;
background-color: var(--kd-c-slider-track-color-background, var(--kd-g-color-theme, #5582f3));
}
.kd-slider-step {
position: absolute;
width: 100%;
}
.kd-slider-dot {
position: absolute;
top: -2px;
margin-left: -4px;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8px;
height: 8px;
background-color: #fff;
border: 2px solid #f0f0f0;
border-radius: 50%;
cursor: pointer;
}
.kd-slider-dot.kd-slider-dot-actived {
border-color: var(--kd-c-slider-dot-color-border-actived, var(--kd-g-color-theme, #5582f3));
}
.kd-slider-handle {
position: absolute;
top: -1px;
margin-left: -7px;
width: 14px;
height: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
border: 2px solid var(--kd-c-slider-handle-color-border, var(--kd-g-color-theme, #5582f3));
border-radius: 50%;
cursor: pointer;
}
.kd-slider-mark {
position: absolute;
width: 100%;
top: 14px;
}
.kd-slider-mark-text {
position: absolute;
display: inline-block;
color: var(--kd-c-slider-mark-color-text, var(--kd-g-color-text-primary, #212121));
word-break: keep-all;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.kd-slider-mark-text.kd-slider-mark-text-actived {
color: var(--kd-c-slider-mark-color-text-actived, var(--kd-g-color-text-primary-2, #ffffff));
}
.kd-slider:hover > .kd-slider-rail {
background-color: #e1e1e1;
}
.kd-slider:not(.kd-slider-disabled):hover > .kd-slider-handle {
border-color: var(--kd-c-slider-handle-color-border-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-slider:not(.kd-slider-disabled):hover .kd-slider-track {
background-color: var(--kd-c-slider-track-color-background-hover, var(--kd-g-color-theme-5, #87adff));
}
.kd-slider-reverse .kd-slider-dot {
top: -2px;
margin-right: -4px;
margin-left: 0;
}
.kd-slider-reverse .kd-slider-mark-text {
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
.kd-slider-reverse.kd-slider-handle {
top: -1px;
margin-right: -7px;
margin-left: 0;
}
.kd-slider-vertical {
width: 12px;
height: 100%;
margin: 6px 10px;
padding: 0 4px;
}
.kd-slider-vertical .kd-slider-rail {
width: 4px;
height: 100%;
}
.kd-slider-vertical .kd-slider-track {
width: 4px;
}
.kd-slider-vertical .kd-slider-step {
width: 4px;
height: 100%;
}
.kd-slider-vertical .kd-slider-dot {
top: auto;
margin-left: 0;
left: -2px;
margin-bottom: -4px;
}
.kd-slider-vertical .kd-slider-mark {
width: 4px;
height: 100%;
top: auto;
left: 14px;
}
.kd-slider-vertical .kd-slider-mark-text {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.kd-slider-vertical .kd-slider-handle {
left: -1px;
margin-left: 0;
margin-bottom: -7px;
}
.kd-slider-vertical .kd-slider-reverse .kd-slider-dot {
top: auto;
margin-left: 0;
left: -2px;
margin-top: -4px;
}
.kd-slider-vertical .kd-slider-reverse .kd-slider-mark-text {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.kd-slider-vertical .kd-slider-reverse.kd-slider-handle {
margin-left: 0;
margin-top: -7px;
}
.kd-slider-disabled {
cursor: not-allowed;
}
.kd-slider-disabled .kd-slider-track {
background-color: var(--kd-c-slider-track-color-background-hover, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-slider-disabled .kd-slider-dot {
border-color: var(--kd-c-slider-dot-color-border-actived, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-slider-disabled .kd-slider-handle {
border-color: var(--kd-c-slider-handle-color-border-hover, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-slider-rtl {
direction: rtl;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-space {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
row-gap: var(--rgap);
}
.kd-space.kd-space-horizontal > *:not(:last-child) {
margin-right: var(--cgap);
}
.kd-space.kd-space-vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.kd-space.kd-space-vertical > *:not(:last-child) {
margin-bottom: var(--cgap);
}
.kd-space.kd-space-wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.kd-space.kd-space-align-start {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.kd-space.kd-space-align-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-space.kd-space-align-end {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.kd-space.kd-space-align-baseline {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.kd-space-rtl {
direction: rtl;
}
.kd-space-rtl.kd-space-horizontal > *:not(:last-child) {
margin-left: var(--cgap);
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-spin-page .kd-spin-dot-spin {
width: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
height: var(--kd-c-spin-page-dot-spin-sizing-square, 48px);
padding: var(--kd-c-spin-page-dot-spin-spacing-padding, 4px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
}
.kd-spin-page .kd-spin-dot-item {
width: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
height: var(--kd-c-spin-page-dot-item-sizing-square, 16px);
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
border-radius: 50%;
}
.kd-spin-page .kd-spin-dot-item:nth-child(2n+1) {
-webkit-animation: pageLoading 1s 0.3s ease-in-out infinite;
animation: pageLoading 1s 0.3s ease-in-out infinite;
}
.kd-spin-page .kd-spin-dot-item:nth-child(2n+2) {
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
-webkit-animation: pageLoading 1s 0.2s ease-in-out infinite;
animation: pageLoading 1s 0.2s ease-in-out infinite;
}
.kd-spin-page .kd-spin-dot-item:nth-child(2n+3) {
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
-webkit-animation: pageLoading 1s 0.1s ease-in-out infinite;
animation: pageLoading 1s 0.1s ease-in-out infinite;
}
.kd-spin-page .kd-spin-dot-item:nth-child(2n+4) {
background-color: var(--kd-c-spin-dot-color-backgroung-fourth, var(--kd-g-color-logo-4, #a06eff));
-webkit-animation: pageLoading 1s ease-in-out infinite;
animation: pageLoading 1s ease-in-out infinite;
}
@-webkit-keyframes pageLoading {
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pageLoading {
50% {
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.kd-spin-container .kd-spin-dot-spin {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 15px;
width: 35px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item {
width: var(--kd-c-spin-dot-container-sizing-square, 5px);
height: var(--kd-c-spin-dot-container-sizing-square, 5px);
background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2486ee));
border-radius: 50%;
}
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
-webkit-animation: containerLoading 1s 0.6s ease-in-out infinite;
animation: containerLoading 1s 0.6s ease-in-out infinite;
}
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
-webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
animation: containerLoading 1s 0.45s ease-in-out infinite;
}
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
-webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
animation: containerLoading 1s 0.3s ease-in-out infinite;
}
.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+4) {
background-color: var(--kd-c-spin-dot-color-backgroung-fourth, var(--kd-g-color-logo-4, #a06eff));
-webkit-animation: containerLoading 1s 0.15s ease-in-out infinite;
animation: containerLoading 1s 0.15s ease-in-out infinite;
}
@-webkit-keyframes containerLoading {
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes containerLoading {
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.kd-spin-component .kd-spin-dot-spin {
width: var(--kd-c-spin-dot-component-sizing-square, 24px);
height: var(--kd-c-spin-dot-component-sizing-square, 24px);
border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid var(--kd-c-spin-component-dot-color-border, #ebebeb);
border-radius: 50%;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
width: var(--kd-c-spin-dot-component-sizing-square, 24px);
height: var(--kd-c-spin-dot-component-sizing-square, 24px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: var(--kd-c-spin-dot-component-sizing-border, 2px) solid transparent;
border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--kd-g-color-theme, #5582f3));
border-radius: 50%;
position: absolute;
top: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: componentRotate 1s linear infinite;
animation: componentRotate 1s linear infinite;
}
@-webkit-keyframes componentRotate {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
@keyframes componentRotate {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
100% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
}
.kd-spin-children-wrapper {
position: relative;
}
.kd-spin-has-children {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.kd-spin-children-container {
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
.kd-spin-indicator-container {
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;
}
.kd-spin-rtl.kd-spin.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+1) {
-webkit-animation: containerLoading 1s 0.15s ease-in-out infinite;
animation: containerLoading 1s 0.15s ease-in-out infinite;
}
.kd-spin-rtl.kd-spin.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+2) {
background-color: var(--kd-c-spin-dot-color-backgroung-second, var(--kd-g-color-logo-2, #02ccfe));
-webkit-animation: containerLoading 1s 0.3s ease-in-out infinite;
animation: containerLoading 1s 0.3s ease-in-out infinite;
}
.kd-spin-rtl.kd-spin.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+3) {
background-color: var(--kd-c-spin-dot-color-backgroung-third, var(--kd-g-color-logo-3, #05c8c7));
-webkit-animation: containerLoading 1s 0.45s ease-in-out infinite;
animation: containerLoading 1s 0.45s ease-in-out infinite;
}
.kd-spin-rtl.kd-spin.kd-spin-container .kd-spin-dot-spin .kd-spin-dot-item:nth-child(2n+4) {
background-color: var(--kd-c-spin-dot-color-backgroung-fourth, var(--kd-g-color-logo-4, #a06eff));
-webkit-animation: containerLoading 1s 0.6s ease-in-out infinite;
animation: containerLoading 1s 0.6s ease-in-out infinite;
}
@keyframes containerLoading {
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.kd-spin-rtl.kd-spin-component .kd-spin-dot-spin .kd-spin-dot-item {
right: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
left: calc(-1 * var(--kd-c-spin-dot-component-sizing-border, 2px));
-webkit-animation: rtlComponentRotate 1s linear infinite;
animation: rtlComponentRotate 1s linear infinite;
}
@-webkit-keyframes rtlComponentRotate {
0% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
@keyframes rtlComponentRotate {
0% {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
100% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-split-wrapper {
position: relative;
width: 100%;
height: 100%;
border: var(--kd-c-split-panel-wrapper-sizing-border, 1px) solid var(--kd-c-split-panel-color-border, #d9d9d9);
overflow: hidden;
}
.kd-split-panel {
position: absolute;
overflow: hidden;
}
.kd-split-panel.left-panel,
.kd-split-panel.right-panel {
top: 0;
bottom: 0;
}
.kd-split-panel.left-panel {
left: 0;
margin-right: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
}
.kd-split-panel.right-panel {
right: 0;
margin-left: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
}
.kd-split-panel.top-panel,
.kd-split-panel.bottom-panel {
left: 0;
right: 0;
}
.kd-split-panel.top-panel {
top: 0;
margin-bottom: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
}
.kd-split-panel.bottom-panel {
bottom: 0;
margin-top: calc(var(--kd-c-split-panel-line-sizing-border, 1px) / 2);
}
.kd-split-panel-moving {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-split-trigger-con {
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
}
.kd-split-trigger-con.is-active .kd-split-trigger-arrow {
border-color: var(--kd-c-split-panel-arrow-color-background, #999);
background: var(--kd-c-split-panel-arrow-color-background, #999);
color: white;
}
.kd-split-trigger-con.can-drag .kd-split-trigger-vertical {
cursor: col-resize;
}
.kd-split-trigger-con.can-drag .kd-split-trigger-horizontal {
cursor: row-resize;
}
.kd-split-trigger-con.is-disabled .kd-split-trigger-vertical {
cursor: not-allowed;
}
.kd-split-trigger-con:not(.is-disabled):hover .kd-split-trigger-arrow {
border-color: var(--kd-c-split-panel-arrow-color-background, #999);
}
.kd-split-trigger-con:not(.is-disabled) .kd-split-trigger-arrow:hover {
cursor: pointer;
background: #fff !important;
color: var(--kd-c-split-panel-arrow-color-background-hover, var(--kd-g-color-theme, #5582f3)) !important;
border-color: var(--kd-c-split-panel-arrow-color-background-hover, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-split-trigger-arrow {
position: absolute;
color: var(--kd-c-split-panel-arrow-color-background, #999);
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: var(--kd-c-split-panel-arrow-sizing-border, 1px) solid transparent;
}
.kd-split-trigger-arrow .kdicon {
font-size: 12px;
}
.kd-split-trigger-arrow.is-vertical {
width: var(--kd-c-split-panel-arrow-sizing-width-vertical, 16px);
height: var(--kd-c-split-panel-arrow-sizing-height-vertical, 16px);
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.kd-split-trigger-arrow.is-horizontal {
width: var(--kd-c-split-panel-arrow-sizing-width-horizontal, 16px);
height: var(--kd-c-split-panel-arrow-sizing-height-horizontal, 16px);
left: 50%;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.kd-split-trigger-arrow.top {
bottom: 100%;
border-bottom: none;
border-radius: var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) 0 0;
}
.kd-split-trigger-arrow.bottom {
top: 100%;
border-top: none;
border-radius: 0 0 var(--kd-c-split-panel-arrow-radius-border-vertical, 8px) var(--kd-c-split-panel-arrow-radius-border-vertical, 8px);
}
.kd-split-trigger-arrow.left {
right: 100%;
border-right: none;
border-radius: var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) 0 0 var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px);
}
.kd-split-trigger-arrow.right {
left: 100%;
border-left: none;
border-radius: 0 var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) var(--kd-c-split-panel-arrow-radius-border-horizontal, 8px) 0;
}
.kd-split-trigger-vertical {
width: var(--kd-c-split-panel-line-sizing-border, 1px);
height: 100%;
background: var(--kd-c-split-panel-line-color-background, #d9d9d9);
border-top: none;
border-bottom: none;
}
.kd-split-trigger-horizontal {
height: var(--kd-c-split-panel-line-sizing-border, 1px);
width: 100%;
background: var(--kd-c-split-panel-line-color-background, #d9d9d9);
border-left: none;
border-right: none;
}
.kd-split-trigger.is-disabled {
cursor: not-allowed;
}
.kd-split-horizontal > .kd-split-trigger-con {
top: 50%;
height: 100%;
}
.kd-split-vertical > .kd-split-trigger-con {
left: 50%;
width: 100%;
}
.kd-split .no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-inputNumber-stepper {
width: 100px;
}
.kd-inputNumber-stepper.kd-input-wrapper {
padding-left: var(--kd-c-stepper-padding-left, 9px) !important;
}
.kd-inputNumber-stepper.kd-input-wrapper .kd-input {
padding-left: var(--kd-c-stepper-input-padding-left, 0px);
}
.kd-inputNumber-stepper.kd-input-wrapper-size-middle {
height: var(--kd-c-stepper-sizing-height, 28px);
line-height: var(--kd-c-stepper-sizing-height, 28px);
}
.kd-inputNumber-stepper input {
text-align: center;
color: var(--kd-c-stepper-input-color, var(--kd-g-color-text-primary, #212121));
margin: 0 4px;
font-size: var(--kd-c-stepper-input-font-size, 12px);
}
.kd-inputNumber-stepper-icon {
font-size: 14px;
}
.kd-inputNumber-stepper-baseStep {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
cursor: pointer;
}
.kd-inputNumber-stepper-baseStep-small {
width: var(--kd-c-stepper-input-small-sizing-height, 20px);
}
.kd-inputNumber-stepper-baseStep-middle {
width: var(--kd-c-stepper-input-middle-sizing-height, 28px);
}
.kd-inputNumber-stepper-baseStep-large {
width: var(--kd-c-stepper-input-large-sizing-height, 36px);
}
.kd-inputNumber-stepper-baseStep .kd-inputNumber-stepper-icon {
color: var(--kd-c-stepper-icon-color, var(--kd-g-color-text-secondary, #666));
-webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
font-size: 16px;
}
.kd-inputNumber-stepper-baseStep .kd-inputNumber-stepper-icon:hover {
color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-inputNumber-stepper-baseStep:hover:not(.kd-inputNumber-stepper-baseStep-disabled) .kd-inputNumber-stepper-icon {
color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-inputNumber-stepper-baseStep-disabled {
cursor: not-allowed;
color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-inputNumber-stepper-baseStep-disabled .kd-inputNumber-stepper-icon {
color: unset !important;
}
.kd-inputNumber-stepper-baseStep-decrease {
border-right: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-small,
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-small {
margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-middle,
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-middle {
margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-baseStep-large,
.kd-inputNumber-stepper-baseStep-decrease.kd-inputNumber-stepper-embedStep-large {
margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-baseStep-increase {
border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-small,
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-small {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-middle,
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-middle {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-baseStep-large,
.kd-inputNumber-stepper-baseStep-increase.kd-inputNumber-stepper-embedStep-large {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-embedStep {
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;
height: 100%;
border-radius: 0 1px 1px 0;
background-color: var(--kd-c-stepper-embed-icon-color-background, transparent);
overflow: hidden;
border-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
border: none;
}
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-small,
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-small {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-middle,
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-middle {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-baseStep-large,
.kd-inputNumber-stepper-embedStep.kd-inputNumber-stepper-embedStep-large {
margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px));
}
.kd-inputNumber-stepper-embedStep span {
height: 50%;
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-left: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
border-bottom: 1px solid var(--kd-c-stepper-color-border-strong, var(--kd-g-color-border-strong, #d9d9d9));
cursor: pointer;
font-size: 12px;
}
.kd-inputNumber-stepper-embedStep span .kd-inputNumber-stepper-icon {
-webkit-transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-stepper-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-inputNumber-stepper-embedStep span:hover .kd-inputNumber-stepper-icon {
color: var(--kd-c-stepper-icon-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-inputNumber-stepper-embedStep span:last-child {
border-bottom: none;
}
.kd-inputNumber-stepper-embedStep-disabled {
cursor: not-allowed !important;
color: var(--kd-c-stepper-icon-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-inputNumber-stepper-embedStep-disabled .kd-inputNumber-stepper-icon {
color: unset !important;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-steps {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.kd-steps .kd-steps-icon {
border: 2px solid;
padding-top: 1px;
}
.kd-steps .kdicon-exclamatory {
font-size: 30px;
}
.kd-steps-item {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 0;
}
.kd-steps-item-clickable {
cursor: pointer;
}
.kd-steps-item-clickable .kd-steps-item-iconContainer-icon .kd-steps-icon {
background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
}
.kd-steps-item-clickable.kd-steps-item-wait .kd-steps-icon,
.kd-steps-item-clickable.kd-steps-item-wait .kd-steps-item-title {
-webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-icon {
background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-title,
.kd-steps-item-clickable.kd-steps-item-wait:hover .kd-steps-item-description {
color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-steps-item-clickable.kd-steps-item-finish .kd-steps-item-title {
-webkit-transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
transition: all var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) ease;
}
.kd-steps-item-clickable.kd-steps-item-finish:hover .kd-steps-item-title {
color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
}
.kd-steps-item-container {
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;
}
.kd-steps-item-iconContainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
}
.kd-steps-item-iconContainer::after {
content: '';
width: 100%;
height: var(--kd-c-steps-line-sizing-height, 1px);
border-bottom: 1px dashed var(--kd-c-steps-color-wait, #999);
border-left: 1px dashed var(--kd-c-steps-color-wait, #999);
position: absolute;
left: 50%;
top: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
-webkit-transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
}
.kd-steps-item-iconContainer:last-child::after {
display: none;
}
.kd-steps-item-iconContainer-icon {
z-index: 1;
width: var(--kd-c-steps-icon-sizing-width, 28px);
height: var(--kd-c-steps-icon-sizing-width, 28px);
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;
}
.kd-steps-item-iconContainer-icon .kd-steps-icon {
width: var(--kd-c-steps-icon-sizing-width, 28px);
height: var(--kd-c-steps-icon-sizing-width, 28px);
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(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
color: var(--kd-c-steps-color-wait, #999);
font-size: calc(var(--kd-c-steps-icon-sizing-width, 28px) - 13px);
border-radius: 50%;
border-color: var(--kd-c-steps-color-wait, #999);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-steps-item-content {
text-align: center;
}
.kd-steps-item-content .kd-steps-item-title {
line-height: 20px;
font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-steps-color-wait, #999);
}
.kd-steps-item-content .kd-steps-item-description {
line-height: 20px;
font-size: var(--kd-c-steps-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-steps-color-wait, #999);
width: var(--kd-c-steps-vertical-description-sizing-width, 200px);
}
.kd-steps-item-process {
color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-steps-item-process .kd-steps-icon {
background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
border-color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-steps-item-process .kd-steps-item-title,
.kd-steps-item-process .kd-steps-item-description {
color: var(--kd-c-steps-color-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-steps-item:last-child .kd-steps-item-iconContainer::after {
display: none;
}
.kd-steps-item-finish .kd-steps-icon {
background-color: var(--kd-c-steps-color-white, var(--kd-g-color-white, #fff));
color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
border-color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-steps-item-finish .kd-steps-item-content .kd-steps-item-title,
.kd-steps-item-finish .kd-steps-item-content .kd-steps-item-description {
color: var(--kd-c-steps-color-completed, var(--kd-g-color-success, #1ba854));
}
.kd-steps-item-error .kd-steps-icon {
color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
border-color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-steps-item-error .kd-steps-item-content .kd-steps-item-title,
.kd-steps-item-error .kd-steps-item-content .kd-steps-item-description {
color: var(--kd-c-steps-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-steps-bottomLable .kd-steps-item-iconContainer {
margin-bottom: 4px;
}
.kd-steps-horizontal .kd-steps-item {
min-width: 88px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 0 22px;
}
.kd-steps-horizontal .kd-steps-item:first-child {
padding-left: 0;
}
.kd-steps-horizontal .kd-steps-item:last-child {
padding-right: 0;
}
.kd-steps-horizontal .kd-steps-item .kd-steps-item-description {
height: var(--kd-c-steps-horizontal-description-sizing-height, 60px);
width: auto;
}
.kd-steps-horizontal .kd-steps-item-iconContainer::after {
width: calc(100% + 44px);
}
.kd-steps-vertical {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.kd-steps-vertical .kd-steps-item {
width: 100%;
min-height: 68px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 22px 0;
}
.kd-steps-vertical .kd-steps-item:first-child {
padding-top: 0;
}
.kd-steps-vertical .kd-steps-item:last-child {
padding-bottom: 0;
}
.kd-steps-vertical .kd-steps-item-container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.kd-steps-vertical .kd-steps-item-iconContainer {
margin-bottom: 0;
margin-right: 4px;
}
.kd-steps-vertical .kd-steps-item-iconContainer::after {
width: var(--kd-c-steps-line-sizing-height, 1px);
height: calc(100% + 44px);
top: 2px;
left: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
}
.kd-steps-vertical .kd-steps-item-content {
text-align: left;
margin-top: 1px;
}
.kd-steps-rtl {
direction: rtl;
}
.kd-steps-rtl .kd-steps-item:first-child .kd-steps-item-iconContainer::before {
display: none;
}
.kd-steps-rtl.kd-steps-horizontal:first-child {
padding-right: 0;
}
.kd-steps-rtl.kd-steps-horizontal:last-child {
padding-right: 0;
padding-left: 0;
}
.kd-steps-rtl.kd-steps-horizontal .kd-steps-item .kd-steps-item-container .kd-steps-item-iconContainer::after {
display: none;
}
.kd-steps-rtl.kd-steps-horizontal .kd-steps-item .kd-steps-item-container .kd-steps-item-iconContainer::before {
content: '';
width: calc(100% + 35px);
height: var(--kd-c-steps-line-sizing-height, 1px);
border-bottom: 1px dashed var(--kd-c-steps-color-wait, #999);
border-left: 1px dashed var(--kd-c-steps-color-wait, #999);
position: absolute;
left: 50%;
top: calc(50% - var(--kd-c-steps-line-sizing-height, 1px) / 2);
-webkit-transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
transition: width var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96), background-color var(--kd-c-steps-motion-duration, var(--kd-g-duration, 0.3s)) cubic-bezier(0.48, 0.04, 0.52, 0.96);
}
.kd-steps-rtl.kd-steps-vertical .kd-steps-item-iconContainer {
margin-left: 4px;
margin-right: 0;
}
.kd-steps-rtl.kd-steps-vertical .kd-steps-item-content {
text-align: right;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-switch {
padding: 0;
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: var(--kd-c-switch-color-off, #B2B2B2);
cursor: pointer;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-switch::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
border-radius: 50%;
background-color: #fff;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
}
.kd-switch .kd-switch-inner {
color: var(--kd-c-switch-color-font, var(--kd-g-color-white, #fff));
font-size: var(--kd-c-switch-inner-font-size-small, var(--kd-g-font-size-small, 12px));
margin: var(--kd-c-switch-inner-spacing-margin, 0 5px 0 17px);
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-switch .kd-switch-loading-icon {
color: #b2b2b2;
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
left: 1px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
}
.kd-switch .kd-switch-loading-icon .kdicon-loadding-circle {
-webkit-animation: loadingcircle 1s infinite;
animation: loadingcircle 1s infinite;
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
font-size: var(--kd-c-switch-small-font-size, var(--kd-g-font-size-small, 12px));
line-height: 1;
vertical-align: baseline;
}
.kd-switch-disabled {
background-color: var(--kd-c-switch-color-off-background-disabled, #D9D9D9);
cursor: not-allowed;
}
.kd-switch-checked {
background-color: var(--kd-c-switch-color-on, var(--kd-g-color-theme-6, #5582f3));
text-align: right;
}
.kd-switch-checked::after {
left: 100%;
margin-left: -1px;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.kd-switch-checked .kd-switch-loading-icon {
left: unset;
right: 1px;
color: var(--kd-c-switch-color-loading, var(--kd-g-color-ongoing, #276ff5));
}
.kd-switch-checked.kd-switch-disabled {
background-color: var(--kd-c-switch-color-on-background-disabled, var(--kd-g-color-theme-4, #b5cfff));
}
.kd-switch-checked .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-checked, 0 17px 0 5px);
}
.kd-switch-checked.kd-switch-size-large .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-large-checked, 0 21px 0 5px);
}
.kd-switch-size-small {
height: var(--kd-c-switch-small-sizing-height, 16px);
min-width: var(--kd-c-switch-small-sizing-width, 32px);
line-height: var(--kd-c-switch-small-line-height, 16px);
font-size: var(--kd-c-switch-small-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-c-switch-small-radius-border, 8px);
}
.kd-switch-size-small::after {
width: calc(var(--kd-c-switch-small-sizing-height, 16px) - 2px);
height: calc(var(--kd-c-switch-small-sizing-height, 16px) - 2px);
}
.kd-switch-size-small .kd-switch-loading-icon {
width: calc(var(--kd-c-switch-small-sizing-height, 16px) - 2px);
height: calc(var(--kd-c-switch-small-sizing-height, 16px) - 2px);
}
.kd-switch-size-large {
height: var(--kd-c-switch-large-sizing-height, 20px);
min-width: var(--kd-c-switch-large-sizing-width, 40px);
line-height: var(--kd-c-switch-large-line-height, 20px);
font-size: var(--kd-c-switch-large-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-c-switch-large-sizing-border-radius, 10px);
}
.kd-switch-size-large::after {
width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
}
.kd-switch-size-large .kd-switch-loading-icon {
width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
}
.kd-switch-size-large .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-large, 0 5px 0 21px);
}
.kd-switch-rtl {
direction: rtl;
}
.kd-switch-rtl .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-checked, 0 17px 0 5px);
}
.kd-switch-rtl .kd-switch-inner .kd-switch-loading-icon {
right: 0;
left: unset;
}
.kd-switch-rtl .kd-switch-inner .kd-switch-loading-icon .kdicon-loadding-circle {
-webkit-animation: rtlloadingcircle 2s infinite;
animation: rtlloadingcircle 2s infinite;
}
.kd-switch-rtl.kd-switch::after {
right: 1px;
left: unset;
}
.kd-switch-rtl.kd-switch-checked {
text-align: left;
}
.kd-switch-rtl.kd-switch-checked .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin, 0 5px 0 17px);
}
.kd-switch-rtl.kd-switch-checked .kd-switch-inner .kd-switch-loading-icon {
left: 1px;
right: unset;
}
.kd-switch-rtl.kd-switch-checked .kd-switch-inner .kd-switch-loading-icon .kdicon-loadding-circle {
-webkit-animation: rtlloadingcircle 2s infinite;
animation: rtlloadingcircle 2s infinite;
}
.kd-switch-rtl.kd-switch-checked.kd-switch-size-large .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-large, 0 5px 0 21px);
}
.kd-switch-rtl.kd-switch-checked::after {
right: 100%;
margin-right: -1px;
margin-left: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.kd-switch-rtl.kd-switch-size-large {
height: var(--kd-c-switch-large-sizing-height, 20px);
min-width: var(--kd-c-switch-large-sizing-width, 40px);
line-height: var(--kd-c-switch-large-line-height, 20px);
font-size: var(--kd-c-switch-large-font-size, var(--kd-g-font-size-small, 12px));
border-radius: var(--kd-c-switch-large-sizing-border-radius, 10px);
}
.kd-switch-rtl.kd-switch-size-large::after {
width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
}
.kd-switch-rtl.kd-switch-size-large .kd-switch-loading-icon {
width: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
height: calc(var(--kd-c-switch-large-sizing-height, 20px) - 2px);
}
.kd-switch-rtl.kd-switch-size-large .kd-switch-inner {
margin: var(--kd-c-switch-inner-spacing-margin-large-checked, 0 21px 0 5px);
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
.kd-table-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
}
.kd-tabs-noContainer {
height: var(--kd-c-tabs-sizing-height, 48px);
}
.kd-tabs-tab-wrap {
position: relative;
height: calc(100% + 1px);
overflow: hidden;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: 0;
}
.kd-tabs-tab-list {
display: inline-block;
position: absolute;
white-space: nowrap;
top: 0;
left: 0;
-webkit-transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
}
.kd-tabs-bottom {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.kd-tabs-left {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.kd-tabs-right {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.kd-tabs-left-arrows {
-webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
box-shadow: 2px 0 2px rgba(0, 0, 0, 0.08);
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-tabs-left-arrows-line {
background-color: #fff;
}
.kd-tabs-left-arrows-noshadow {
-webkit-box-shadow: unset;
box-shadow: unset;
}
.kd-tabs-right-arrows {
-webkit-box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
box-shadow: -2px 0 2px rgba(0, 0, 0, 0.08);
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-tabs-right-arrows-line {
background-color: #fff;
}
.kd-tabs-right-arrows-line .kd-tabs-more-btn {
width: 24px;
}
.kd-tabs-right-arrows-grid {
background-color: #fff;
-webkit-box-shadow: unset;
box-shadow: unset;
border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tabs-right-arrows-grid .kd-tabs-more-btn {
line-height: 22px;
}
.kd-tabs-right-arrows-noshadow {
-webkit-box-shadow: unset;
box-shadow: unset;
}
.kd-tabs-right-arrows .kdicon {
font-size: 14px;
}
.kd-tabs-left-operations {
position: relative;
margin-right: 2px;
}
.kd-tabs-left-operations-item {
padding: 0 12px;
cursor: pointer;
}
.kd-tabs-right-operations {
position: relative;
padding-right: 18px;
}
.kd-tabs-right-operations-item {
padding-left: 12px;
cursor: pointer;
}
.kd-tabs-more-btn {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48px;
text-align: center;
cursor: pointer;
}
.kd-tabs-more-btn:hover {
color: var(--kd-c-tabs-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tabs-more-btn-disabled {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-tabs-more-btn-disabled:hover {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tabs-navs {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: var(--kd-c-tabs-sizing-height, 48px);
border-bottom: var(--kd-c-tabs-sizing-border, 1px) solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tabs-navs-line.kd-tabs-navs-middle {
height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
}
.kd-tabs-navs-line.kd-tabs-navs-small {
height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px) !important;
}
.kd-tabs-navs-line .kd-tab-pane-middle {
line-height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
height: var(--kd-c-tabs-pane-type-line-sizing-height-middle, 32px);
}
.kd-tabs-navs-line .kd-tab-pane-small {
line-height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
height: var(--kd-c-tabs-pane-type-line-sizing-height-small, 32px);
}
.kd-tabs-navs-line.kd-tabs-navs-bottom {
border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-bottom: unset;
}
.kd-tabs-navs-line.kd-tabs-navs-bottom .kd-tabs-tab-wrap {
margin-top: -1px;
}
.kd-tabs-navs-line.kd-tabs-navs-bottom .kd-tabs-tab-list {
top: -1px;
}
.kd-tabs-navs-line.kd-tabs-navs-bottom .kd-active-line {
top: 1px;
bottom: unset;
}
.kd-tabs-navs-card {
border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-tabs-navs-card .kd-tabs-tab-wrap {
top: -1px;
height: calc(100% + 2px);
}
.kd-tabs-navs-card.kd-tabs-navs-left,
.kd-tabs-navs-card.kd-tabs-navs-right {
min-width: 120px;
height: 100%;
font-size: 0;
border-top: 1px solid transparent;
}
.kd-tabs-navs-card.kd-tabs-navs-left::before,
.kd-tabs-navs-card.kd-tabs-navs-right::before,
.kd-tabs-navs-card.kd-tabs-navs-left::after,
.kd-tabs-navs-card.kd-tabs-navs-right::after {
position: absolute;
content: '';
display: inline-block;
width: 1px;
height: 100%;
background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tabs-navs-card.kd-tabs-navs-left::before,
.kd-tabs-navs-card.kd-tabs-navs-right::before {
left: 0;
}
.kd-tabs-navs-card.kd-tabs-navs-left::after,
.kd-tabs-navs-card.kd-tabs-navs-right::after {
right: 0;
}
.kd-tabs-navs-card.kd-tabs-navs-left .kd-tabs-tab-wrap,
.kd-tabs-navs-card.kd-tabs-navs-right .kd-tabs-tab-wrap {
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 120px;
width: 100%;
z-index: 2;
}
.kd-tabs-navs-card.kd-tabs-navs-left .kd-tabs-tab-list,
.kd-tabs-navs-card.kd-tabs-navs-right .kd-tabs-tab-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
white-space: normal;
width: 100%;
height: 100%;
min-width: 120px;
max-height: 100%;
overflow: auto;
}
.kd-tabs-navs-grid {
height: 24px;
border-bottom: unset;
}
.kd-tabs-navs-dynamic {
background-color: var(--kd-c-tabs-card-color-background, var(--kd-g-color-background-contain-disabled, #f5f5f5));
border-bottom: unset;
height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
}
.kd-tabs-navs-dynamic .kd-tabs-tab-wrap {
height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
}
.kd-tabs-navs-dynamic .kd-tabs-more-btn {
line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
}
.kd-tabs-navs-small:not(.kd-tabs-navs-left):not(.kd-tabs-navs-right) {
height: 36px;
}
.kd-tabs-navs-small:not(.kd-tabs-navs-left):not(.kd-tabs-navs-right).kd-tabs-card-more {
padding-right: 36px;
}
.kd-tab-pane {
display: inline-block;
vertical-align: middle;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: var(--kd-c-tabs-pane-font-size, var(--kd-g-font-size-middle, 14px));
color: var(--kd-c-tabs-color-text, var(--kd-g-color-text-secondary, #666));
height: var(--kd-c-tabs-pane-sizing-height, 48px);
line-height: var(--kd-c-tabs-pane-height, 48px);
cursor: pointer;
}
.kd-tab-pane-text {
display: inline-block;
-webkit-transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s));
overflow: hidden;
text-overflow: ellipsis;
max-width: var(--kd-c-tabs-pane-text-sizing-max-width);
}
.kd-tab-pane-text-active,
.kd-tab-pane-text-notMobile:hover {
color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
}
.kd-tab-pane-text-disabled:hover {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tab-pane-disabled {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-tab-pane-disabled:hover {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tab-pane-type-line {
padding: 0 var(--kd-c-tabs-pane-line-paddinng-horizontal, 20px);
}
.kd-tab-pane-type-card {
margin-right: 0;
padding: 0 var(--kd-c-tabs-pane-card-paddinng-horizontal, 18px);
border: 1px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-box-active {
background-color: #fff;
border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
border-top: 2px solid;
border-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
-webkit-transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
}
.kd-tab-pane-type-card.kd-tab-pane-box-active:first-of-type {
border-left-color: transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-left {
border-left: 2px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-left.kd-tab-pane-box-active {
border-left: 2px solid;
border-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent transparent var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
}
.kd-tab-pane-type-card.kd-tab-pane-right {
border-right: 1px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-right.kd-tab-pane-box-active {
border-right: 2px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
border-left: 1px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-left,
.kd-tab-pane-type-card.kd-tab-pane-right {
width: 100%;
border-top: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tab-pane-type-card.kd-tab-pane-left:last-of-type,
.kd-tab-pane-type-card.kd-tab-pane-right:last-of-type {
border-bottom: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tab-pane-type-card.kd-tab-pane-bottom {
border-top: 1px solid transparent;
border-bottom: 2px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active {
border-bottom: 2px solid;
border-color: transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tab-pane-type-card.kd-tab-pane-bottom.kd-tab-pane-box-active:first-of-type {
border-left-color: transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-top {
border-top: 2px solid transparent;
}
.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active {
border-top: 2px solid;
border-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)) transparent var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-tab-pane-type-card.kd-tab-pane-top.kd-tab-pane-box-active:first-of-type {
border-left-color: transparent;
}
.kd-tab-pane-type-dynamic {
height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
margin: 0 0 0 4px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-tab-pane-type-dynamic .kd-tab-pane-operations .kdicon {
font-size: 16px;
}
.kd-tab-pane-type-dynamic.kd-tab-pane-box-active.kd-tab-pane-isMobile:not(.kd-tab-pane-disabled):hover .kd-tab-pane-operations span:first-child {
opacity: 1;
cursor: pointer;
}
.kd-tab-pane-type-dynamic-notMobile:not(.kd-tab-pane-disabled):hover .kd-tab-pane-operations span:first-child {
opacity: 1;
cursor: pointer;
}
.kd-tab-pane-type-grid {
height: 24px;
line-height: 22px;
padding: 0 var(--kd-c-tabs-pane-grid-paddinng-horizontal, 20px);
border: 1px solid var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9));
margin-right: -1px;
}
.kd-tab-pane-type-grid:first-of-type {
border-radius: 2px 0 0 2px;
}
.kd-tab-pane-type-grid:last-of-type {
border-radius: 0 2px 2px 0;
}
.kd-tab-pane-type-grid.kd-tab-pane-box-active {
position: relative;
z-index: 2;
background-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
border: 1px solid var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
-webkit-transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
transition: background-color 0.2s var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
}
.kd-tab-pane-type-grid.kd-tab-pane-box-active .kd-tab-pane-text-active {
color: #fff;
}
.kd-tab-pane-type-grid.kd-tab-pane-disabled {
background-color: var(--kd-c-tabs-color-background-disabled, transparent);
}
.kd-tab-pane-notMobile:hover {
color: var(--kd-c-tabs-color-text-active, var(--kd-g-color-theme, #5582f3));
}
.kd-tab-pane-operations {
position: relative;
display: inline-block;
line-height: 1;
padding: 0 4px;
}
.kd-tab-pane-operations span:first-child {
display: inline-block;
vertical-align: top;
font-size: 0;
opacity: 0;
}
.kd-tab-pane-small {
height: 36px;
line-height: 36px;
}
.kd-active-line {
position: absolute;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
left: 0;
bottom: 0;
height: 2px;
background-color: var(--kd-c-tabs-line-color-active, var(--kd-g-color-theme, #5582f3));
-webkit-transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
transition: all var(--kd-c-tabs-motion-duration, var(--kd-g-duration, 0.3s)) var(--kd-c-tabs-motion-timing-function, cubic-bezier(0.42, 0, 1, 1));
}
.kd-arrow-button {
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48px;
text-align: center;
cursor: pointer;
}
.kd-arrow-button:hover {
color: var(--kd-c-tabs-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-arrow-button-line {
width: 24px;
}
.kd-arrow-button-dynamic {
width: 24px;
line-height: var(--kd-c-tabs-pane-type-dynamic-sizing-height, 32px);
}
.kd-arrow-button-disabled {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-arrow-button-disabled:hover {
color: var(--kd-c-tabs-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-arrow-button .kdicon {
font-size: 14px;
}
.kd-tabs-rtl {
direction: rtl;
}
.kd-tabs-rtl .kd-tabs-tab-wrap .kd-tabs-tab-list {
left: auto;
}
.kd-tabs-rtl .kd-tabs-right-operations {
padding-left: 18px;
padding-right: 0;
}
.kd-tabs-rtl .kd-tabs-right-operations-item {
padding-right: 12px;
padding-left: 0;
}
.kd-tabs-rtl .kd-tabs-left-operations {
margin-left: 2px;
margin-right: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-tag {
-webkit-transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
transition: all var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tag-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-tag-size-small {
font-size: var(--kd-c-tag-font-size-small, var(--kd-g-font-size-small, 12px));
height: var(--kd-c-tag-sizing-height-small, 20px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
padding: 0 var(--kd-c-tag-spacing-padding-horizontal-small, 6px);
border-radius: calc(var(--kd-c-tag-sizing-height-small, 20px) / 2);
max-width: var(--kd-c-tag-sizing-max-width);
min-width: var(--kd-c-tag-sizing-min-width);
}
.kd-tag-size-middle {
font-size: var(--kd-c-tag-font-size-middle, var(--kd-g-font-size-small, 12px));
height: var(--kd-c-tag-sizing-height-middle, 20px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
padding: 0 var(--kd-c-tag-spacing-padding-horizontal-middle, 7px);
border-radius: calc(var(--kd-c-tag-sizing-height-middle, 20px) / 2);
max-width: var(--kd-c-tag-sizing-max-width);
min-width: var(--kd-c-tag-sizing-min-width);
}
.kd-tag-size-large {
font-size: var(--kd-c-tag-font-size-large, var(--kd-g-font-size-middle, 14px));
height: var(--kd-c-tag-sizing-height-large, 24px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
padding: 0 var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
border-radius: calc(var(--kd-c-tag-sizing-height-large, 24px) / 2);
max-width: var(--kd-c-tag-sizing-max-width);
min-width: var(--kd-c-tag-sizing-min-width);
}
.kd-tag-shape-status {
border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
}
.kd-tag-shape-status:hover {
background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
color: #fff;
}
.kd-tag-shape-status.kd-tag-process {
border: 1px solid var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
}
.kd-tag-shape-status.kd-tag-process:hover {
background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
color: #fff;
}
.kd-tag-shape-status.kd-tag-success {
border: 1px solid var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-tag-shape-status.kd-tag-success:hover {
background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
color: #fff;
}
.kd-tag-shape-status.kd-tag-warning {
border: 1px solid var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-tag-shape-status.kd-tag-warning:hover {
background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
color: #fff;
}
.kd-tag-shape-status.kd-tag-error {
border: 1px solid var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-tag-shape-status.kd-tag-error:hover {
background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
color: #fff;
}
.kd-tag-shape-status.kd-tag-end {
border: 1px solid var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
}
.kd-tag-shape-status.kd-tag-end:hover {
background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
color: #fff;
}
.kd-tag-shape-status.kd-tag-expired {
border: 1px solid var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tag-shape-status.kd-tag-expired:hover {
background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
color: #fff;
}
.kd-tag-shape-attribute {
color: #fff;
background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
}
.kd-tag-shape-attribute.kd-tag-process {
color: #fff;
background-color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
}
.kd-tag-shape-attribute.kd-tag-success {
color: #fff;
background-color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-tag-shape-attribute.kd-tag-warning {
color: #fff;
background-color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-tag-shape-attribute.kd-tag-error {
color: #fff;
background-color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-tag-shape-attribute.kd-tag-end {
color: #fff;
background-color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
}
.kd-tag-shape-attribute.kd-tag-expired {
color: #fff;
background-color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tag-shape-text {
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-process {
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-process.kd-tag-size-middle {
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-process.kd-tag-size-large {
color: var(--kd-c-tag-color-process, var(--kd-g-color-ongoing, #276ff5));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-success {
color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-success.kd-tag-size-middle {
color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-success.kd-tag-size-large {
color: var(--kd-c-tag-color-success, var(--kd-g-color-success, #1ba854));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-warning {
color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-warning.kd-tag-size-middle {
color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-warning.kd-tag-size-large {
color: var(--kd-c-tag-color-warning, var(--kd-g-color-warning, #ff991c));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-error {
color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-error.kd-tag-size-middle {
color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-error.kd-tag-size-large {
color: var(--kd-c-tag-color-error, var(--kd-g-color-error, #fb2323));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-end {
color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-end.kd-tag-size-middle {
color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-end.kd-tag-size-large {
color: var(--kd-c-tag-color-end, var(--kd-g-color-end, #666));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-expired {
color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-expired.kd-tag-size-middle {
color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-text.kd-tag-expired.kd-tag-size-large {
color: var(--kd-c-tag-color-expired, var(--kd-g-color-disabled, #b2b2b2));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0;
border-radius: 0;
}
.kd-tag-shape-edit {
border: 1px solid var(--kd-c-tag-edit-color-border, var(--kd-g-color-text-placeholder, #ccc));
border-radius: 2px;
line-height: var(--kd-c-tag-sizing-height-middle, 20px);
padding-left: 6px;
padding-right: 6px;
color: var(--kd-c-tag-edit-color-text, var(--kd-g-color-text-primary, #212121));
}
.kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover {
border-color: var(--kd-c-tag-edit-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover .kd-tag-closeWrapper {
color: var(--kd-c-tag-edit-cloesWrapper-color-text-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tag-shape-edit.kd-tag-closable {
padding-right: 8px;
}
.kd-tag-clickable {
cursor: pointer;
}
.kd-tag-has-color {
color: var(--kd-c-tag-attribute-color-text, var(--kd-g-color-white, #fff));
}
.kd-tag-text {
margin-left: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-tag-closable-disabled {
background-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
border-color: var(--kd-c-tag-edit-color-background-disabled, var(--kd-g-color-border-strong, #d9d9d9));
color: var(--kd-c-tag-edit-color-text-disabled, var(--kd-g-color-border-strong, #d9d9d9));
cursor: not-allowed;
}
.kd-tag-closable.kd-tag-size-middle {
line-height: var(--kd-c-tag-sizing-height-middle, 20px);
}
.kd-tag-closable.kd-tag-size-large {
line-height: var(--kd-c-tag-sizing-height-large, 24px);
padding-left: var(--kd-c-tag-spacing-padding-horizontal-large, 8px);
}
.kd-tag-closable.kd-tag-size-large .kd-tag-closeWrapper .kd-tag-close-icon {
font-size: 14px;
}
.kd-tag-closeWrapper {
margin-left: 4px;
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;
-webkit-transition: color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
transition: color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-tag-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tag-close-icon {
cursor: pointer;
font-size: 12px;
}
.kd-tag-rtl {
direction: rtl;
}
.kd-tag-rtl .kd-tag-closeWrapper {
margin-right: 4px;
margin-left: 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-timeline {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
font-variant: tabular-nums;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
margin: 0;
padding: 0 4px;
overflow: hidden;
list-style: none;
}
.kd-timeline .kd-timeline-item {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
margin: 0;
padding-bottom: var(--kd-c-timeline-spacing-padding-bottom, 24px);
font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
}
.kd-timeline .kd-timeline-item-tail {
position: absolute;
left: calc((var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
height: calc(100% - var(--kd-c-timeline-dot-sizing, 9px) * 2 + 4px);
border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-timeline .kd-timeline-item.pending .kd-timeline-item-dot {
font-size: var(--kd-c-timeline-content-font-size, var(--kd-g-font-size-small, 12px));
}
.kd-timeline .kd-timeline-item.pending .kd-timeline-item-tail {
display: none;
}
.kd-timeline .kd-timeline-item-dot {
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
width: var(--kd-c-timeline-dot-sizing, 9px);
height: var(--kd-c-timeline-dot-sizing, 9px);
border-radius: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kd-timeline .kd-timeline-item-dot.blue {
color: var(--kd-c-timeline-finished-color, var(--kd-g-color-theme, #5582f3));
background-color: var(--kd-c-timeline-finished-color, var(--kd-g-color-theme, #5582f3));
}
.kd-timeline .kd-timeline-item-dot.red {
color: var(--kd-c-timeline-error-color, var(--kd-g-color-error, #fb2323));
background-color: var(--kd-c-timeline-error-color, var(--kd-g-color-error, #fb2323));
}
.kd-timeline .kd-timeline-item-dot.green {
color: var(--kd-c-timeline-success-color, var(--kd-g-color-success, #1ba854));
background-color: var(--kd-c-timeline-success-color, var(--kd-g-color-success, #1ba854));
}
.kd-timeline .kd-timeline-item-dot.gray {
color: var(--kd-c-timeline-disabled-color, var(--kd-g-color-disabled, #b2b2b2));
background-color: var(--kd-c-timeline-disabled-color, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-timeline .kd-timeline-item-dot.custom {
position: absolute;
left: calc(var(--kd-c-timeline-dot-sizing, 9px) / 2);
width: auto;
height: auto;
margin-top: 0;
padding: 1px;
line-height: 1;
text-align: center;
border: 0;
border-radius: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: transparent !important;
}
.kd-timeline .kd-timeline-item-content {
position: relative;
margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
word-break: break-word;
color: var(--kd-c-timeline-content-color-text, var(--kd-g-color-text-primary, #212121));
max-width: var(--kd-c-timeline-content-sizing-max-width);
min-width: var(--kd-c-timeline-content-sizing-min-width);
}
.kd-timeline .kd-timeline-item-content > * {
margin: 0;
padding: 0;
}
.kd-timeline .kd-timeline-item.last > .kd-timeline-item-tail {
display: none;
}
.kd-timeline .kd-timeline-item.last > .kd-timeline-item-content {
min-height: 48px;
}
.kd-timeline.alternate .kd-timeline-item-tail,
.kd-timeline.alternate .kd-timeline-item-dot,
.kd-timeline.alternate .kd-timeline-item-dot.custom {
left: 50%;
}
.kd-timeline.alternate .kd-timeline-item-dot {
margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline.alternate .kd-timeline-item-dot.custom {
margin-left: 1px;
}
.kd-timeline.alternate .kd-timeline-item:nth-child(2n + 1) .kd-timeline-item-content {
left: calc(50% - 4px);
width: calc(50% - 24px);
text-align: left;
}
.kd-timeline.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-content {
width: calc(50% - 24px);
margin: 0;
text-align: right;
}
.kd-timeline.right .kd-timeline-item-tail,
.kd-timeline.right .kd-timeline-item-dot,
.kd-timeline.right .kd-timeline-item-dot.custom {
left: auto;
right: 4.5px;
}
.kd-timeline.right .kd-timeline-item-dot {
margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline.right .kd-timeline-item-dot.custom {
margin-right: -18px;
}
.kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
left: 0;
text-align: right;
margin: 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
width: auto;
}
.kd-timeline.label.left .kd-timeline-item-tail,
.kd-timeline.label.left .kd-timeline-item-dot,
.kd-timeline.label.left .kd-timeline-item-dot.custom {
left: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
}
.kd-timeline.label.left .kd-timeline-item-dot {
margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline.label.left .kd-timeline-item-dot.custom {
margin-left: 1px;
}
.kd-timeline.label.left .kd-timeline-item .kd-timeline-item-label {
position: absolute;
text-align: right;
color: var(--kd-c-timeline-label-color-text, #666666);
}
.kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
left: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
text-align: left;
margin-right: 16px;
}
.kd-timeline.label.right .kd-timeline-item-tail,
.kd-timeline.label.right .kd-timeline-item-dot,
.kd-timeline.label.right .kd-timeline-item-dot.custom {
left: auto;
right: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
}
.kd-timeline.label.right .kd-timeline-item-dot {
margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline.label.right .kd-timeline-item-dot.custom {
right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
position: absolute;
right: 0;
text-align: left;
}
.kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
left: auto;
right: calc(var(--kd-c-timeline-dot-sizing, 9px) + 7.5px);
text-align: right;
margin-left: 17px;
}
.kd-timeline.label.alternate .kd-timeline-item:nth-child(2n + 1) .kd-timeline-item-label {
position: absolute;
width: calc(50% - 18px);
text-align: right;
}
.kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
position: absolute;
left: calc(50% + (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - var(--kd-c-timeline-dot-sizing, 9px) / 2);
width: calc(50% - (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + var(--kd-c-timeline-dot-sizing, 9px) / 2);
text-align: left;
}
.kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail {
display: block;
height: calc(100% - 14px);
border-left: 1px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-timeline.reverse .kd-timeline-item.last .kd-timeline-item-tail {
display: none;
}
.kd-timeline.reverse .kd-timeline-item.pending .kd-timeline-item-tail {
display: block;
height: calc(100% - 15px);
border-left: 1px dotted var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-timeline.reverse .kd-timeline-item.pending .kd-timeline-item-content {
min-height: 48px;
}
.kd-timeline-rtl {
direction: rtl;
}
.kd-timeline-rtl .kd-timeline-item-tail {
right: calc((var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
left: auto;
border-left: var(--kd-c-timeline-sizing-width, 1px) solid var(--kd-c-timeline-line-color, var(--kd-g-color-border-weak, #e5e5e5));
}
.kd-timeline-rtl .kd-timeline-item-content {
margin: 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) 0 0;
text-align: right;
}
.kd-timeline-rtl .kd-timeline-item-dot.custom {
right: calc(var(--kd-c-timeline-dot-sizing, 9px) / 2);
left: auto;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item-tail,
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item-dot,
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item-dot.custom {
right: 50%;
left: auto;
}
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item-dot {
margin-left: 0;
margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item-dot.custom {
margin-right: 1px;
margin-left: 0;
}
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item:nth-child(2n + 1) .kd-timeline-item-content {
right: calc(50% - 4px);
left: auto;
text-align: right;
}
.kd-timeline-rtl.kd-timeline.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-content {
text-align: left;
}
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item-tail,
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item-dot,
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item-dot.custom {
right: auto;
left: 4.5px;
}
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item-dot {
margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
margin-right: 0;
}
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item-dot.custom {
margin-left: -18px;
margin-right: 0;
}
.kd-timeline-rtl.kd-timeline.right .kd-timeline-item .kd-timeline-item-content {
right: 0;
text-align: left;
margin: 0 0 0 calc(2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px);
}
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item-tail,
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item-dot,
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item-dot.custom {
right: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
left: auto;
}
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item-dot {
margin-left: 0;
margin-right: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item-dot.custom {
margin-left: 0;
margin-right: 1px;
}
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item .kd-timeline-item-label {
text-align: left;
}
.kd-timeline-rtl.kd-timeline.label.left .kd-timeline-item .kd-timeline-item-content {
right: calc(var(--kd-c-timeline-dot-sizing, 9px) + 35px);
left: auto;
text-align: right;
margin-right: 0;
margin-left: 16px;
}
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item-tail,
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item-dot,
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item-dot.custom {
left: calc((2 * 8px) + (var(--kd-c-timeline-dot-sizing, 9px) / 2));
right: auto;
}
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item-dot {
margin-right: 0;
margin-left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 1px) / 2);
}
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item-dot.custom {
right: auto;
left: calc(-1 * (var(--kd-c-timeline-dot-sizing, 9px) - 23px) / 2);
}
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item .kd-timeline-item-label {
left: 0;
right: auto;
text-align: right;
}
.kd-timeline-rtl.kd-timeline.label.right .kd-timeline-item .kd-timeline-item-content {
right: auto;
left: calc(var(--kd-c-timeline-dot-sizing, 9px) + 35px);
text-align: left;
margin-right: 17px;
margin-left: 0;
}
.kd-timeline-rtl.kd-timeline.label.alternate .kd-timeline-item:nth-child(2n + 1) .kd-timeline-item-label {
text-align: left;
}
.kd-timeline-rtl.kd-timeline.label.alternate .kd-timeline-item:nth-child(2n) .kd-timeline-item-label {
right: calc(50% + (2 * (var(--kd-c-timeline-dot-sizing, 9px) - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - var(--kd-c-timeline-dot-sizing, 9px) / 2);
left: auto;
text-align: right;
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-tooltip {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
max-width: var(--kd-c-tooltip-sizing-max-width, 360px);
padding: var(--kd-c-tooltip-spacing-padding-vertical, 8px) var(--kd-c-tooltip-spacing-padding-horizontal, 12px);
color: var(--kd-c-tooltip-color-text, var(--kd-g-color-text-primary, #212121));
border-radius: var(--kd-c-tooltip-radius-border, var(--kd-g-radius-border, 2px));
font-size: var(--kd-c-tooltip-color-text, var(--kd-g-font-size-small, 12px));
line-height: 1.5;
background-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
-webkit-filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}
.kd-tooltip .arrow::before {
border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff));
}
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-transfer {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.kd-transfer .kd-checkbox {
background: transparent;
margin-right: 6px;
}
.kd-transfer-disabled .kd-transfer-list {
background: var(--kd-c-transfer-color-background-disabled, var(--kd-g-color-background-contain-disabled, #f5f5f5));
}
.kd-transfer-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: var(--kd-c-transfer-list-sizing-width, 250px);
min-height: 300px;
border: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-transfer-list-with-pagination {
width: var(--kd-c-transfer-list-sizing-width, 250px);
height: auto;
}
.kd-transfer-list-header {
height: var(--kd-c-transfer-header-sizing-height, 36px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-negative: 0;
flex-shrink: 0;
font-size: var(--kd-c-transfer-font-size, 12px);
background-color: var(--kd-c-transfer-header-color-background, #f5f5f5);
border-bottom: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
padding: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
}
.kd-transfer-list-header-left {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.kd-transfer-list-header-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-transfer-list-header-select-all {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-transfer-list-search {
height: var(--kd-c-transfer-search-sizing-height, 32px);
position: relative;
}
.kd-transfer-list-search-prefix i {
color: var(--kd-c-transfer-search-icon-color-text-prefix, #999);
}
.kd-transfer-list-search-suffix {
cursor: pointer;
}
.kd-transfer-list-search-suffix i {
color: var(--kd-c-transfer-search-icon-color-text-suffix, #bbb);
}
.kd-transfer-list-search-suffix i:hover {
color: var(--kd-c-transfer-search-icon-color-text-suffix-hover, #999);
}
.kd-transfer-list-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
font-size: var(--kd-c-transfer-font-size, 12px);
}
.kd-transfer-list-body-search-wrapper {
position: relative;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
padding: 0 12px;
margin: 8px 0;
}
.kd-transfer-list-content {
height: var(--kd-c-transfer-list-item-content-sizing-height, 320px);
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
padding-bottom: 8px;
}
.kd-transfer-list-content-item {
height: var(--kd-c-transfer-list-item-sizing-height, 32px);
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: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
cursor: pointer;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.kd-transfer-list-content-item-disabled {
color: var(--kd-c-transfer-list-item-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
}
.kd-transfer-list-content-item:hover:not(.kd-transfer-list-content-item-disabled) {
background: var(--kd-c-transfer-list-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
}
.kd-transfer-list-content-item-checked {
color: var(--kd-c-transfer-list-item-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-transfer-list-content-item-text {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kd-transfer-list-content-item-remove {
cursor: pointer;
}
.kd-transfer-list-content-item-remove i {
color: var(--kd-c-transfer-search-icon-color-text-suffix, #bbb);
}
.kd-transfer-list-content-item-remove i:hover {
color: var(--kd-c-transfer-search-icon-color-text-suffix-hover, #999);
}
.kd-transfer-list-pagination {
height: var(--kd-c-transfer-pagination-sizing-height, 36px);
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: 0 var(--kd-c-transfer-spacing-horizontal, 14px);
border-top: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-transfer-list-footer {
border-top: 1px solid var(--kd-c-transfer-color-border, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-transfer-list-body-not-found {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-bottom: 8px;
color: #999999;
}
.kd-transfer-list-body-not-found-tip {
font-size: 12px;
line-height: 16px;
margin-top: 8px;
}
.kd-transfer-operation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: center;
align-self: center;
margin: 0 8px;
overflow: hidden;
vertical-align: middle;
}
.kd-transfer-operation .kd-btn {
display: block;
height: 28px;
padding: 0 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-width: 40px;
}
.kd-transfer-operation .kd-btn + .kd-btn {
margin-top: 20px;
}
.kd-transfer-rtl {
direction: rtl;
}
.kd-transfer-rtl .kd-checkbox {
background: transparent;
margin-left: 6px;
margin-right: 0;
}
.kd-transfer-rtl .kd-transfer-list-content-item {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: start;
}
.kd-transfer-rtl .kd-transfer-list-content-item-text {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-tree-select {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
cursor: pointer;
vertical-align: middle;
}
.kd-tree-select-selector:hover .kd-tree-select-icon-active {
color: #3761ca;
}
.kd-tree-select-visible .kd-tree-select-icon-active {
color: #3761ca;
}
.kd-tree-select-visible .kd-tree-select-selection-item {
color: var(--kd-c-tree-select-placeholder-color-text, #b2b2b2);
}
.kd-tree-select-icon-arrow {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
}
.kd-tree-select-icon-arrow-up {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-tree-select-icon-arrow-down {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
}
.kd-tree-select-icon-arrow-focus {
color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-select-icon-clear {
opacity: 0;
z-index: 1;
position: absolute;
background: #fff;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.kd-tree-select-icon-clear:hover {
color: var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-select-focused:not(.kd-tree-select-error) {
border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-tree-select-placeholder {
position: absolute;
color: var(--kd-c-tree-select-placeholder-color-text, #b2b2b2);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
right: 28px;
left: 0;
}
.kd-tree-select-borderless {
border: none;
}
.kd-tree-select-underline {
border-bottom: 1px solid var(--kd-c-tree-select-color-border, var(--kd-g-color-input, #999));
}
.kd-tree-select-underline:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-select-bordered {
border: 1px solid var(--kd-c-tree-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9));
padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px) !important;
border-radius: var(--kd-c-tree-select-bordered-radius-border, 2px);
}
.kd-tree-select-bordered:hover:not(.kd-tree-select-multiple-disabled):not(.kd-tree-select-single-disabled):not( .kd-tree-select-error) {
border: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-select-bordered .kd-tree-select-suffix {
padding-right: 8px;
}
.kd-tree-select-bordered.kd-tree-select-single .kd-tree-select-selection-search {
padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
}
.kd-tree-select-bordered .kd-tree-select-placeholder {
padding-left: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
}
.kd-tree-select-wrapper {
-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: var(--kd-c-tree-select-wrapper-spacing-padding, 1px 28px 1px 0);
max-width: 100%;
color: #212121;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.kd-tree-select-dropdown {
display: block;
left: 0;
z-index: var(--kd-c-tree-select-z-index, var(--kd-g-z-index-popper, 1050));
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: var(--kd-c-tree-select-dropdown-spacing-padding-vertical, 8px) 0;
margin: 0;
overflow: auto;
font-size: var(--kd-c-tree-select-dropdown-font-size, 12px);
font-variant: initial;
background-color: var(--kd-c-tree-select-dropdown-color-background, var(--kd-g-color-background, #fff));
border-radius: var(--kd-c-tree-select-radius-border, var(--kd-g-radius-border, 2px));
outline: none;
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
max-height: 200px;
}
.kd-tree-select-dropdown .kd-tree {
padding: 0;
}
.kd-tree-select-dropdown .kd-tree-node-item {
padding: 0 var(--kd-c-tree-select-dropdown-node-spacing-padding-horizontal, 16px);
}
.kd-tree-select-dropdown-scroll {
overflow-y: auto;
}
.kd-tree-select-dropdown-empty {
padding: 5px 12px;
}
.kd-tree-select-dropdown-search {
padding: 5px 6px;
}
.kd-tree-select-dropdown-search-hidden {
display: none;
}
.kd-tree-select-size-small {
min-height: var(--kd-c-tree-select-sizing-height-small, 24px);
max-height: calc(var(--kd-c-tree-select-sizing-height-small, 24px) * 3 - 10px);
font-size: var(--kd-c-tree-select-font-size-small, 12px);
}
.kd-tree-select-size-middle {
min-height: var(--kd-c-tree-select-sizing-height-middle, 32px);
max-height: calc(var(--kd-c-tree-select-sizing-height-middle, 32px) * 3 - 10px);
font-size: var(--kd-c-tree-select-font-size-middle, 14px);
}
.kd-tree-select-size-large {
min-height: var(--kd-c-tree-select-sizing-height-large, 36px);
max-height: calc(var(--kd-c-tree-select-sizing-height-large, 36px) * 3 - 10px);
font-size: var(--kd-c-tree-select-font-size-large, 16px);
}
.kd-tree-select-suffix {
right: 0;
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: 8px;
}
.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-search {
position: absolute;
right: 28px;
left: 0;
height: 100%;
}
.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-search-input {
outline: 0;
border-radius: 0;
border: none;
background: transparent;
height: 100%;
width: 100%;
}
.kd-tree-select .kd-tree-select-single .kd-tree-select-selection-item {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-tree-select .kd-tree-select-single-focused:not(.kd-tree-select-error) {
border-color: var(--kd-c-tree-select-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
}
.kd-tree-select .kd-tree-select-single-disabled {
background-color: var(--kd-c-tree-select-color-background-disabled, #f5f5f5);
color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tree-select .kd-tree-select-single-disabled:hover {
cursor: not-allowed;
}
.kd-tree-select .kd-tree-select-single-disabled .kd-tree-select-suffix {
color: var(--kd-c-tree-select-arrow-icon-color-text-disabled, #b2b2b2);
}
.kd-tree-select .kd-tree-select-single:hover .kd-tree-select-icon-clear {
opacity: 1;
}
.kd-tree-select .kd-tree-select-single .kd-tree-select-icon-clear {
color: var(--kd-c-tree-select-icon-clear-color-text, #d9d9d9);
}
.kd-tree-select .kd-tree-select-single .kd-tree-select-icon-clear:hover {
color: var(--kd-c-tree-select-icon-clear-color-text-hover, #999);
}
.kd-tree-select .kd-tree-select-single-text {
color: var(--kd-c-tree-select-single-color-text, var(--kd-g-color-text-primary, #212121));
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.kd-tree-select .kd-tree-select-single-disabled-text {
color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tree-select .kd-tree-select-selection-item {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
max-width: 100%;
height: 20px;
line-height: 20px;
margin: 2px 8px 2px 0;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-tree-select .kd-tree-select-selection-item-small {
height: 20px;
line-height: 18px;
font-size: 12px;
}
.kd-tree-select .kd-tree-select-selection-item-middle {
font-size: 12px;
height: 20px;
line-height: 18px;
}
.kd-tree-select .kd-tree-select-selection-item-large {
font-size: 14px;
line-height: 22px;
height: 22px;
}
.kd-tree-select .kd-tree-select-selection-item-content {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
vertical-align: middle;
padding: 0 7px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
color: #212121;
}
.kd-tree-select .kd-tree-select-selection-item-span {
position: relative;
margin-left: 0.5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-tree-select .kd-tree-select-selection-item-input {
cursor: text;
margin: 0;
padding: 0;
background: 0 0;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
min-width: 20px;
}
.kd-tree-select-multiple .kd-tree-select-selection-tag {
max-width: calc(100% - 5px);
}
.kd-tree-select-multiple .kd-tree-select-selection-tag .kd-tag {
margin: 2px 8px 2px 0;
max-width: 100%;
}
.kd-tree-select-multiple .kd-tree-select-selection-search {
position: relative;
max-width: 100%;
}
.kd-tree-select-multiple .kd-tree-select-selection-search-input {
outline: 0;
border-radius: 0;
border: none;
background: transparent;
width: 100%;
}
.kd-tree-select-multiple .kd-tree-select-selection-search-mirror {
position: absolute;
top: 0;
left: 0;
z-index: 999;
white-space: pre;
visibility: hidden;
}
.kd-tree-select-multiple-disabled {
cursor: not-allowed;
background-color: var(--kd-c-tree-select-color-background-disabled, #f5f5f5);
color: var(--kd-c-tree-select-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tree-select-multiple-disabled .kd-tree-select-suffix {
color: var(--kd-c-tree-select-arrow-icon-color-text-disabled, #b2b2b2);
}
.kd-tree-select-multiple:hover .kd-tree-select-icon-clear {
opacity: 1;
}
.kd-tree-select-multiple .kd-tree-select-icon-clear {
color: var(--kd-c-tree-select-icon-clear-color-text, #d9d9d9);
}
.kd-tree-select-multiple .kd-tree-select-icon-clear:hover {
color: var(--kd-c-tree-select-icon-clear-color-text-hover, #999);
}
.kd-tree-select-multiple-selector {
position: relative;
cursor: text;
padding-right: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-tree-select-multiple .kd-tree-select-wrapper:hover:not(.kd-tree-select-multiple-disabled) {
border-bottom: 1px solid var(--kd-c-tree-select-color-border-hover, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-select-multiple-footer {
color: var(--kd-c-tree-select-footer-color-text, var(--kd-g-color-text-primary, #212121));
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 0 12px;
height: 32px;
line-height: 32px;
border-top: 1px solid #d9d9d9;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kd-tree-select-multiple-footer-hadSelected {
color: #999999;
padding-left: 12px;
}
.kd-tree-select-multiple-footer-hadSelected > span {
color: var(--kd-c-tree-select-footer-color-text-selected, #0e5fd8);
padding: 0 2px;
}
.kd-tree-select-error:not(.kd-tree-select-single-disabled):not(.kd-tree-select-multiple-disabled) {
border-color: var(--kd-c-tree-select-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-tree-select-panel.topLeft.hidden,
.kd-tree-select-panel.topRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideDownOut;
animation-name: kdSlideDownOut;
}
.kd-tree-select-panel.topLeft,
.kd-tree-select-panel.topRight {
-webkit-animation-name: kdSlideDownIn;
animation-name: kdSlideDownIn;
}
.kd-tree-select-panel.bottomLeft.hidden,
.kd-tree-select-panel.bottomRight.hidden {
opacity: 0;
visibility: hidden;
-webkit-transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
transition: all calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
-webkit-animation-name: kdSlideUpOut;
animation-name: kdSlideUpOut;
}
.kd-tree-select-panel.bottomLeft,
.kd-tree-select-panel.bottomRight {
-webkit-animation-name: kdSlideUpIn;
animation-name: kdSlideUpIn;
}
.kd-tree-select-rtl {
direction: rtl;
}
.kd-tree-select-rtl .kd-tree-select-wrapper {
padding: 1px 0 1px 28px;
}
.kd-tree-select-rtl .kd-tree-select-wrapper.kd-tree-select-single .kd-tree-select-selection-search {
left: 28px;
right: 0;
}
.kd-tree-select-rtl .kd-tree-select-placeholder {
left: 28px;
right: 0;
text-align: right;
}
.kd-tree-select-rtl .kd-tree-select-suffix {
right: auto;
left: 0;
margin-left: 0;
margin-right: 8px;
}
.kd-tree-select-rtl .kd-tree-select-selection-item {
margin: 2px 0 2px 8px;
}
.kd-tree-select-rtl .kd-tree-select-bordered {
padding-right: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px) !important;
padding-left: 0;
}
.kd-tree-select-rtl .kd-tree-select-bordered .kd-tree-select-suffix {
padding-left: 8px;
padding-right: 0;
}
.kd-tree-select-rtl .kd-tree-select-bordered.kd-tree-select-single .kd-tree-select-selection-search {
padding-right: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
padding-left: 0;
}
.kd-tree-select-rtl .kd-tree-select-bordered .kd-tree-select-placeholder {
padding-left: 0;
padding-right: var(--kd-c-tree-select-bordered-spacing-padding-left, 8px);
}
.kd-tree-select-rtl .kd-tree-select-multiple .kd-tree-select-selection-tag .kd-tag {
margin: 2px 0 2px 8px;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.node-hover-hover {
-webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
}
.node-hover-hover:hover {
background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
cursor: pointer;
}
.node-selected {
background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.node-selected .kd-tree-node-title {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.node-selected .kd-tree-node-icon {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree {
position: relative;
overflow: auto;
height: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-size: var(--kd-c-tree-font-size, var(--kd-g-font-size-small, 12px));
color: var(--kd-c-tree-color-text, var(--kd-g-color-text-primary, #212121));
margin-left: var(--kd-c-tree-spacing-margin-left, 0px);
padding: var(--kd-c-tree-spacing-padding-vertical, 3px) 0;
max-width: var(--kd-c-tree-root-sizing-max-width);
min-width: var(--kd-c-tree-root-sizing-min-width);
}
.kd-tree-root {
min-width: 100%;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-tree-show-line .kd-tree-node-indent {
position: relative;
}
.kd-tree-show-line .kd-tree-node-indent::before {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 1px;
border-left: 1px solid #d9d9d9;
content: '';
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
bottom: 0;
}
.kd-tree-show-line .kd-tree-node-indent-active::before {
border-color: var(--kd-c-tree-color-theme, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-root {
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;
}
.kd-tree-node-root .kd-spin-dot-spin {
border: 2px solid transparent;
width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
}
.kd-tree-node-root .kd-spin-dot-spin .kd-spin-dot-item {
width: var(--kd-c-tree-expand-icon-loading-sizing-width, 16px);
height: var(--kd-c-tree-expand-icon-loading-sizing-height, 16px);
}
.kd-tree-node-fb-children-pointerEvents * {
pointer-events: none;
}
.kd-tree-node-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.kd-tree-node-item-hover {
-webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tree-node-item-hover:hover {
background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
cursor: pointer;
}
.kd-tree-node-indent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: var(--kd-c-tree-expand-icon-sizing-width, 16px);
margin-right: 6px;
height: 100%;
cursor: default;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.kd-tree-node-icon {
cursor: pointer;
height: var(--kd-c-tree-expand-icon-sizing-height, 16px);
width: var(--kd-c-tree-expand-icon-sizing-width, 16px);
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(--kd-c-tree-node-icon-font-size, 16px);
color: var(--kd-c-tree-node-icon-color-text, #666666);
}
.kd-tree-node-icon-hover:hover {
background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
cursor: pointer;
}
.kd-tree-node-icon-hidden {
height: var(--kd-c-tree-node-icon-sizing-height, 16px);
width: var(--kd-c-tree-node-icon-sizing-width, 16px);
-ms-flex-negative: 0;
flex-shrink: 0;
opacity: 0;
cursor: default;
}
.kd-tree-node-animation-expand {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tree-node-animation-collapse {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tree-node-disabled {
cursor: not-allowed !important;
border-color: var(--kd-c-tree-node-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
}
.kd-tree-node-title-disabled {
color: var(--kd-c-tree-node-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tree-node-title-wrap {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding-left: 4px;
}
.kd-tree-node-title-wrap-hover {
-webkit-transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
transition: background-color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s)), color var(--kd-c-tree-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-tree-node-title-wrap-hover:hover {
background-color: var(--kd-c-tree-node-color-backgroung-hover, var(--kd-g-color-hover, #f5f5f5));
cursor: pointer;
}
.kd-tree-node-title-wrap-selected {
background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-title-wrap-selected .kd-tree-node-title {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-title-wrap-selected .kd-tree-node-icon {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-title-wrap .kd-checkbox-default-disabled .kd-checkbox-default-indeterminate::before {
background-color: var(--kd-c-tree-node-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
}
.kd-tree-node-title {
white-space: nowrap;
}
.kd-tree-node-selected {
background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--kd-g-color-theme-3, #e3eeff)) !important;
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-selected .kd-tree-node-title {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-selected .kd-tree-node-icon {
color: var(--kd-c-tree-node-color-text-checked, var(--kd-g-color-theme, #5582f3));
}
.kd-tree-node-draggabled {
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;
width: 100%;
height: 100%;
}
.kd-tree-node-draggabled.kd-tree-node-dragging .kd-tree-node-indent::before {
border-color: transparent;
}
.kd-tree-node-drag-over {
background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
-webkit-box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
box-shadow: inset 0 0 0 2px var(--kd-c-tree-node-drag-over-color-border, #5582f3);
}
.kd-tree-node-drag-line-top,
.kd-tree-node-drag-line-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
}
.kd-tree-node-drag-line-top::before,
.kd-tree-node-drag-line-bottom::before {
content: '';
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 50%;
border: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
position: absolute;
top: -1px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.kd-tree-node-drag-line-top {
top: 0;
}
.kd-tree-node-drag-line-bottom {
top: 100%;
}
.kd-tree-node-leaf-icon {
height: var(--kd-c-tree-node-icon-sizing-height, 16px);
width: var(--kd-c-tree-node-icon-sizing-width, 16px);
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;
}
.kd-tree-rtl {
direction: rtl;
}
.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-indent {
margin-right: 0;
margin-left: 6px;
}
.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-title-wrap {
padding-right: 4px;
padding-left: 0;
}
.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-title-wrap .kd-checkbox-default-margin {
margin-right: 0;
margin-left: 4px;
}
.kd-tree-rtl .kd-tree-root .kd-tree-node-item .kd-tree-node-root .kd-tree-node-animation-expand {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
/*! rtl:end:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
.kd-typography {
color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
overflow-wrap: break-word;
line-height: 2;
max-width: var(--kd-c-typography-sizing-width-max, 830px);
}
.kd-typography.kd-typography-second {
color: var(--kd-c-typography-color-text-secondary, var(--kd-g-color-text-secondary, #666));
}
.kd-typography.kd-typography-success {
color: var(--kd-c-typography-color-success, var(--kd-g-color-success, #1ba854));
}
.kd-typography.kd-typography-warning {
color: var(--kd-c-typography-color-warning, var(--kd-g-color-warning, #ff991c));
}
.kd-typography.kd-typography-danger {
color: var(--kd-c-typography-color-error, var(--kd-g-color-error, #fb2323));
}
.kd-typography.kd-typography-disabled {
color: var(--kd-c-typography-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.kd-typography.kd-typography-assist {
color: var(--kd-c-typography-color-text-third, var(--kd-g-color-text-third, #999));
}
.kd-typography + h1.kd-typography,
.kd-typography + h2.kd-typography,
.kd-typography + h3.kd-typography,
.kd-typography + h4.kd-typography,
.kd-typography + h5.kd-typography {
margin-top: var(--kd-c-typography-title-spacing-margin-top, 1.2em);
}
article.kd-typography > div.kd-typography {
margin-bottom: var(--kd-c-typography-paragraph-spacing-margin-bottom, 24px);
}
article.kd-typography > div.kd-typography:first-child {
margin-bottom: var(--kd-c-typography-spacing-margin-bottom, 80px);
}
article.kd-typography > div.kd-typography + div.kd-typography h2 {
margin-top: var(--kd-c-typography-spacing-margin-bottom, 80px);
}
article.kd-typography h1 {
margin-top: 0;
margin-bottom: var(--kd-c-typography-spacing-margin-bottom-1, 12px);
color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-1, 40px);
line-height: 1.5;
}
article.kd-typography h2 {
margin-top: 0;
margin-bottom: var(--kd-c-typography-spacing-margin-bottom-2, 24px);
color: var(--kd-c-typography-title-color-text, #276ff5);
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-2, 28px);
line-height: 1.5;
}
article.kd-typography h3 {
margin-top: 0;
margin-bottom: var(--kd-c-typography-spacing-margin-bottom-3, 12px);
color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-3, 18px);
line-height: 1.5;
}
h1.kd-typography,
.kd-typography h1 {
margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-1, 40px);
line-height: 1.5;
}
h2.kd-typography,
.kd-typography h2 {
margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
color: var(--kd-c-typography-title-color-text, #276ff5);
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-2, 28px);
line-height: 1.5;
}
h3.kd-typography,
.kd-typography h3 {
margin-bottom: var(--kd-c-typography-title-spacing-margin-bottom, 0.5em);
color: var(--kd-c-typography-color-text-primary, var(--kd-g-color-text-primary, #212121));
font-weight: var(--kd-c-typography-title-font-weight, 600);
font-size: var(--kd-c-typography-font-size-3, 18px);
line-height: 1.5;
}
.kd-typography code {
margin: 0 0.2em;
padding: 0.2em 0.4em 0.1em;
font-size: 85%;
background: rgba(150, 150, 150, 0.1);
border: 1px solid rgba(100, 100, 100, 0.2);
border-radius: 3px;
}
.kd-typography kbd {
margin: 0 0.2em;
padding: 0.15em 0.4em 0.1em;
font-size: 90%;
background: rgba(150, 150, 150, 0.06);
border: 1px solid rgba(100, 100, 100, 0.2);
border-bottom-width: 2px;
border-radius: 3px;
}
.kd-typography strong {
font-weight: 600;
}
.kd-typography ul,
.kd-typography ol {
margin: 0 0 var(--kd-c-typography-spacing-margin-bottom-2, 24px) 0;
padding: 0;
}
.kd-typography ul li,
.kd-typography ol li {
margin: 0 0 0 20px;
padding: 0 0 0 4px;
}
.kd-typography ul {
list-style-type: disc;
}
.kd-typography ul ul {
list-style-type: disc;
}
.kd-typography ol {
list-style-type: decimal;
}
/*! rtl:begin:ignore */
.kd-typography-rtl {
direction: rtl;
text-align: right;
}
.kd-typography-rtl ul li,
.kd-typography-rtl ol li {
margin: 0 20px 0 0;
padding: 0 4px 0 0;
}
/*! rtl:end:ignore */
/*! rtl:begin:ignore */
/* ----------- color ——————---- start */
/* ----------- color ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- font ——————---- start */
/* ----------- font ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* ----------- Button ——————---- start */
/* ----------- Button ——————---- end */
/* ----------- Collapse ——————---- start */
/* ----------- Collapse ——————---- end */
/* ----------- Card ——————---- start */
/* ----------- Card ——————---- end */
/* ----------- Carousel ——————---- start */
/* ----------- Carousel ——————---- end */
/* ----------- Cascader ——————---- start */
/* ----------- Cascader ——————---- end */
/* ----------- Switch ——————---- start */
/* ----------- Switch ——————---- end */
/* ----------- Input ——————---- start */
/* ----------- Input ——————---- end */
/* ----------- InputNumber ——————---- start */
/* ----------- InputNumber ——————---- end */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- start */
/* ----------- checkbox ——————---- end */
/* ----------- Radio ——————---- start */
/* ----------- Radio ——————---- end */
/* ----------- icon ——————---- start */
/* ----------- icon ——————---- end */
/* ----------- Popconfirm ——————---- start */
/* ----------- Popconfirm ——————---- end */
/* ----------- Progress ——————---- start */
/* ----------- Progress ——————---- end */
/* ----------- Pagination ——————---- start */
/* ----------- Pagination ——————---- end */
/* ----------- Timeline ——————---- start */
/* ----------- Timeline ——————---- end */
/* ----------- Tabs ——————---- start */
/* ----------- Tabs ——————---- end */
/* ----------- Select ——————---- start */
/* ----------- Select ——————---- end */
/* ----------- Rate ——————---- start */
/* ----------- Rate ——————---- end */
/* ----------- Dropdown ——————---- start */
/* ----------- Dropdown ——————---- end */
/* ----------- Tooltip ——————---- start */
/* ----------- Tooltip ——————---- end */
/* ----------- Transfer ——————---- start */
/* ----------- Transfer ——————---- end */
/* ----------- DatePicker ——————---- start */
/* ----------- DatePicker ——————---- end */
/* ----------- ColorPicker ——————---- start */
/* ----------- ColorPicker ——————---- end */
/* ----------- Tree ——————---- start */
/* ----------- Tree ——————---- end */
/* ----------- Alert ——————---- start */
/* ----------- Alert ——————---- end */
/* ----------- Split-Panel ——————---- start */
/* ----------- Split-Panel ——————---- end */
/* ----------- Modal ——————---- start */
/* ----------- Modal ——————---- end */
/* ----------- Steps ——————---- start */
/* ----------- Steps ——————---- end */
/* ----------- Form ——————---- start */
/* ----------- Form ——————---- end */
/* ----------- Tag ——————---- start */
/* ----------- Tag ——————---- end */
/* ----------- Menu ——————---- start */
/* ----------- Menu ——————---- end */
/* ----------- notice ——————---- start */
/* ----------- message ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Spin ——————---- start */
/* ----------- Spin ——————---- end */
/* ----------- Layout ——————---- start */
/* ----------- Layout ——————---- end */
/* ----------- Typography ——————---- start */
/* ----------- Typography ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Search ——————---- start */
/* ----------- Badge ——————---- start */
/* ----------- Badge ——————---- end */
/* ----------- Anchor ——————---- start */
/* ----------- Anchor ——————---- end */
/* ----------- Avatar ——————---- start */
/* ----------- Avatar ——————---- end */
/* ----------- AdvancedSelector ——————---- start */
/* ----------- AdvancedSelector ——————---- end */
/* ----------- motion ——————---- start */
/* ----------- motion ——————---- end */
/* ----------- transition ——————---- start */
/* ----------- transition ——————---- end */
/* ----------- zIndex ——————---- start */
/*
普通组件内部自身层级应设置在0-100间
*/
/* ----------- zIndex ——————---- end */
/* 多行显示省略号 */
/* 单行显示省略号 */
/** 浮层箭头样式 **/
.kd-upload {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}
.kd-upload-select {
position: relative;
display: inline-block;
cursor: pointer;
}
.kd-upload-drag {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 80px;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
border: 1px dashed var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
background-color: var(--kd-c-upload-color-background, var(--kd-g-color-background-contain, #fafafa));
-webkit-transition: border-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: border-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-upload-drag.hover,
.kd-upload-drag:hover,
.kd-upload-drag:active {
border-color: var(--kd-c-upload-color-border-active, var(--kd-g-color-text-link, #0e5fd8));
background-color: var(--kd-c-upload-color-background-ongoing, var(--kd-g-color-background-ongoing, #f2f9ff));
}
.kd-upload-input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
overflow: hidden;
}
.kd-upload-input input[type='file'] {
position: absolute;
top: -20%;
left: 0;
width: 100%;
height: 120%;
font-size: 0;
cursor: pointer;
}
.kd-upload .kd-upload-text-list {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
margin-top: var(--kd-c-upload-text-list-margin-top, 16px);
font-size: var(--kd-c-upload-font-size, var(--kd-g-font-size-middle, 14px));
border-top: 1px dashed var(--kd-c-upload-division-color, var(--kd-g-color-border-strong, #d9d9d9));
}
.kd-upload .kd-upload-text-list-item {
position: relative;
padding: 0 var(--kd-c-upload-text-list-item-padding-horizontal, 20px);
height: var(--kd-c-upload-list-item-height, 44px);
overflow: hidden;
white-space: nowrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: background-color var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-upload .kd-upload-text-list-item:hover {
background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
}
.kd-upload .kd-upload-text-list-item:hover .kd-upload-text-list-item-action {
opacity: 1;
visibility: visible;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.kd-upload .kd-upload-text-list-item.error i,
.kd-upload .kd-upload-text-list-item.error .kd-upload-text-list-item-name {
color: var(--kd-c-upload-error-color, var(--kd-g-color-error, #fb2323));
}
.kd-upload .kd-upload-text-list-item-icon > i {
font-size: var(--kd-c-upload-font-size, var(--kd-g-font-size-middle, 14px));
}
.kd-upload .kd-upload-text-list-item-name,
.kd-upload .kd-upload-text-list-item-icon {
cursor: pointer;
}
.kd-upload .kd-upload-text-list-item-name {
display: inline-block;
margin: 0 var(--kd-c-upload-text-list-item-name-padding-right, 8px) 0 var(--kd-c-upload-text-list-item-name-padding-left, 4px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--kd-c-upload-panel-color, var(--kd-g-color-text-primary, #212121));
}
.kd-upload .kd-upload-text-list-item-size {
color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
}
.kd-upload .kd-upload-text-list-item-action {
position: absolute;
top: 0;
right: 0;
padding: 0 var(--kd-c-upload-text-list-item-padding-horizontal, 20px);
height: var(--kd-c-upload-list-item-height, 44px);
line-height: var(--kd-c-upload-list-item-height, 44px);
background: transparent;
opacity: 0;
visibility: hidden;
-webkit-transform: translateX(5px);
transform: translateX(5px);
-webkit-transition: -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s)), -webkit-transform var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-upload .kd-upload-text-list-item-action a {
display: inline-block;
vertical-align: middle;
color: var(--kd-c-upload-panel-button-color, #0E5FD8);
}
.kd-upload .kd-upload-text-list-item-action a:not(:first-child) {
margin-left: 20px;
}
.kd-upload .kd-upload-picture-list {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
font-variant: tabular-nums;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
}
.kd-upload .kd-upload-picture-list-item {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 28px 28px 0;
vertical-align: middle;
overflow: hidden;
border-radius: var(--kd-c-upload-radius-border, var(--kd-g-radius-border, 2px));
border: 1px solid var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
background-color: var(--kd-c-upload-color-background, var(--kd-g-color-background-contain, #fafafa));
}
.kd-upload .kd-upload-picture-list-item .kd-upload-select {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
color: var(--kd-c-upload-color, var(--kd-g-color-text-third, #999));
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px dashed var(--kd-c-upload-color-border, var(--kd-g-color-border-weak, #e5e5e5));
-webkit-transition: all var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
transition: all var(--kd-c-upload-motion-duration, var(--kd-g-duration, 0.3s));
}
.kd-upload .kd-upload-picture-list-item .kd-upload-select:hover,
.kd-upload .kd-upload-picture-list-item .kd-upload-select:active {
border-color: var(--kd-c-upload-color-border-active, var(--kd-g-color-text-link, #0e5fd8));
background-color: var(--kd-c-upload-color-background-ongoing, var(--kd-g-color-background-ongoing, #f2f9ff));
}
.kd-upload .kd-upload-picture-list-item .kd-upload-select .kd-upload-handle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-upload .kd-upload-picture-list-item img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
.kd-upload .kd-upload-picture-list-item.error {
border-color: var(--kd-c-upload-color-border-error, var(--kd-g-color-border-error, #fc808B));
background-color: var(--kd-c-upload-color-background-error, var(--kd-g-color-background-error, #fff2f4));
}
.kd-upload .kd-upload-picture-list-item-loading {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-upload .kd-upload-picture-list-item-loading > * {
width: 80%;
}
.kd-upload .kd-upload-picture-list-item-error {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.kd-upload .kd-upload-picture-list-item-error-text {
margin-bottom: 4px;
color: var(--kd-c-upload-error-color, var(--kd-g-color-error, #fb2323));
}
.kd-upload .kd-upload-picture-list-item-error a {
display: inline-block;
}
.kd-upload .kd-upload-picture-list-item-error a:not(:first-child) {
margin-left: 10px;
}
.kd-upload .kd-upload-picture-list-item-action > a {
color: var(--kd-c-upload-panel-button-color, #0E5FD8);
font-size: var(--kd-c-upload-picture-action-font-size, var(--kd-g-font-size-small, 12px));
}
.kd-upload-rtl {
direction: rtl;
}
.kd-upload-rtl.kd-upload .kd-upload-text-list-item-name {
margin: 0 var(--kd-c-upload-text-list-item-name-padding-left, 4px) 0 var(--kd-c-upload-text-list-item-name-padding-right, 8px);
}
.kd-upload-rtl.kd-upload .kd-upload-text-list-item-action {
left: 0;
right: auto;
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
.kd-upload-rtl.kd-upload .kd-upload-text-list-item-action a:not(:first-child) {
margin-right: 20px;
margin-left: 0;
}
.kd-upload-rtl.kd-upload .kd-upload-picture-list-item {
margin: 0 0 28px 28px;
}
.kd-upload-rtl.kd-upload .kd-upload-picture-list-item-error a:not(:first-child) {
margin-right: 10px;
margin-left: auto;
}
/*! rtl:end:ignore */
.header {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 1000;
-webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.08);
}
.header .header-m {
display: none;
}
.header .header-wapper {
-webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
}
.header .header-wapper .header-logo {
height: 100%;
width: 297px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header .header-wapper .header-logo .header-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.header .header-wapper .header-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
min-width: 450px;
}
.header .header-wapper .header-content .header-nav {
height: 100%;
white-space: nowrap;
}
.header .header-wapper .header-content .header-search {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 230px;
}
.header .header-wapper .header-content .header-search .header-version {
color: #999;
font-size: 12px;
margin-left: 20px;
width: 47px;
white-space: nowrap;
}
.header .header-wapper .header-content .header-search .header-github-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: 20px;
}
.header .header-wapper .header-content .header-search .search-wapper {
position: relative;
height: 36px;
}
.header .header-wapper .header-content .header-search .search-wapper .search-wrapper-container {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .header-wapper .header-content .header-search .search-wapper .search-wrapper-container .kd-input-wrapper-size-middle,
.header .header-wapper .header-content .header-search .search-wapper .search-wrapper-container .kd-input {
background: #F3F6FA;
height: 36px;
font-size: 12px;
}
.header .header-wapper .header-content .header-search .search-wapper .search-wrapper-container .kd-input-wrapper.ie-input .kd-input-prefix {
margin-right: calc(8px * 2);
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper {
position: absolute;
top: 60px;
width: 462px;
background: #fff;
z-index: 999;
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
min-height: 100px;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper::before {
left: 40px;
display: block;
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 998;
top: -7px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 2px;
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li {
margin: 0 20px;
height: 66px;
border-bottom: 1px solid #d6e3ee;
line-height: normal;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li:last-of-type {
border: none;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a {
display: inline-block;
width: 100%;
height: 100%;
padding: 15px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a .item-left {
font-size: 14px;
float: left;
width: 250px;
color: #111111;
cursor: pointer;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a .item-left .category {
width: 100%;
line-height: 26px;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a .item-left .details {
width: 100%;
font-size: 12px;
color: #999;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a .item-right {
float: right;
color: #999999;
width: 150px;
text-align: right;
font-size: 14px;
line-height: 26px;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper ul li a .algolia-docsearch-suggestion--highlight {
color: #5582f3;
padding: 0 1px;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper .no-res {
text-align: center;
color: #999;
font-size: 14px;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper .algolia-docsearch-footer {
width: 134px;
height: 20px;
z-index: 2000;
padding: 10px 20px;
float: right;
font-size: 0;
line-height: 0;
}
.header .header-wapper .header-content .header-search .search-wapper .res-wapper .algolia-docsearch-footer--logo {
background-image: url("data:image/svg+xml,%3Csvg width='168' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M78.988.938h16.594a2.968 2.968 0 0 1 2.966 2.966V20.5a2.967 2.967 0 0 1-2.966 2.964H78.988a2.967 2.967 0 0 1-2.966-2.964V3.897A2.961 2.961 0 0 1 78.988.938zm41.937 17.866c-4.386.02-4.386-3.54-4.386-4.106l-.007-13.336 2.675-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-10.846-2.18c.821 0 1.43-.047 1.855-.129v-2.719a6.334 6.334 0 0 0-1.574-.199c-.295 0-.596.021-.897.069a2.699 2.699 0 0 0-.814.24c-.24.116-.439.28-.582.491-.15.212-.219.335-.219.656 0 .628.219.991.616 1.23s.938.362 1.615.362zm-.233-9.7c.883 0 1.629.109 2.231.328.602.218 1.088.525 1.444.915.363.396.609.922.76 1.483.157.56.232 1.175.232 1.85v6.874c-.41.089-1.034.19-1.868.314-.834.123-1.772.185-2.813.185-.69 0-1.327-.069-1.895-.198a4.001 4.001 0 0 1-1.471-.636 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.803 0-.656.13-1.073.384-1.525.26-.45.608-.819 1.047-1.106.445-.287.95-.492 1.532-.615a8.8 8.8 0 0 1 1.82-.185 8.404 8.404 0 0 1 1.972.24v-.438c0-.307-.035-.6-.11-.874a1.88 1.88 0 0 0-.384-.73 1.784 1.784 0 0 0-.724-.493 3.164 3.164 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164a7.735 7.735 0 0 0-1.26.307l-.321-2.192c.335-.117.834-.233 1.478-.349a10.98 10.98 0 0 1 2.073-.178zm52.842 9.626c.822 0 1.43-.048 1.854-.13V13.7a6.347 6.347 0 0 0-1.574-.199c-.294 0-.595.021-.896.069a2.7 2.7 0 0 0-.814.24 1.46 1.46 0 0 0-.582.491c-.15.212-.218.335-.218.656 0 .628.218.991.615 1.23.404.245.938.362 1.615.362zm-.226-9.694c.883 0 1.629.108 2.231.327.602.219 1.088.526 1.444.915.355.39.609.923.759 1.483.158.56.233 1.175.233 1.852v6.873c-.41.088-1.034.19-1.868.314-.834.123-1.772.184-2.813.184-.69 0-1.327-.068-1.895-.198a4.001 4.001 0 0 1-1.471-.635 3.085 3.085 0 0 1-.951-1.134c-.226-.465-.343-1.12-.343-1.804 0-.656.13-1.073.384-1.524.26-.45.608-.82 1.047-1.107.445-.286.95-.491 1.532-.614a8.803 8.803 0 0 1 2.751-.13c.329.034.671.096 1.04.185v-.437a3.3 3.3 0 0 0-.109-.875 1.873 1.873 0 0 0-.384-.731 1.784 1.784 0 0 0-.724-.492 3.165 3.165 0 0 0-1.143-.205c-.616 0-1.177.075-1.69.164-.514.089-.938.191-1.26.307l-.321-2.193c.335-.116.834-.232 1.478-.348a11.633 11.633 0 0 1 2.073-.177zm-8.034-1.271a1.626 1.626 0 0 1-1.628-1.62c0-.895.725-1.62 1.628-1.62.904 0 1.63.725 1.63 1.62 0 .895-.733 1.62-1.63 1.62zm1.348 13.22h-2.689V7.27l2.69-.423v11.956zm-4.714 0c-4.386.02-4.386-3.54-4.386-4.107l-.008-13.336 2.676-.424v13.254c0 .322 0 2.358 1.718 2.364v2.248zm-8.698-5.903c0-1.156-.253-2.119-.746-2.788-.493-.677-1.183-1.01-2.067-1.01-.882 0-1.574.333-2.065 1.01-.493.676-.733 1.632-.733 2.788 0 1.168.246 1.953.74 2.63.492.683 1.183 1.018 2.066 1.018.882 0 1.574-.342 2.067-1.019.492-.683.738-1.46.738-2.63zm2.737-.007c0 .902-.13 1.584-.397 2.33a5.52 5.52 0 0 1-1.128 1.906 4.986 4.986 0 0 1-1.752 1.223c-.685.286-1.739.45-2.265.45-.528-.006-1.574-.157-2.252-.45a5.096 5.096 0 0 1-1.744-1.223c-.487-.527-.863-1.162-1.137-1.906a6.345 6.345 0 0 1-.41-2.33c0-.902.123-1.77.397-2.508a5.554 5.554 0 0 1 1.15-1.892 5.133 5.133 0 0 1 1.75-1.216c.679-.287 1.425-.423 2.232-.423.808 0 1.553.142 2.237.423.685.286 1.274.69 1.753 1.216a5.644 5.644 0 0 1 1.135 1.892c.287.738.431 1.606.431 2.508zm-20.138 0c0 1.12.246 2.363.738 2.882.493.52 1.13.78 1.91.78.424 0 .828-.062 1.204-.178.377-.116.677-.253.917-.417V9.33a10.476 10.476 0 0 0-1.766-.226c-.971-.028-1.71.37-2.23 1.004-.513.636-.773 1.75-.773 2.788zm7.438 5.274c0 1.824-.466 3.156-1.404 4.004-.936.846-2.367 1.27-4.296 1.27-.705 0-2.17-.137-3.34-.396l.431-2.118c.98.205 2.272.26 2.95.26 1.074 0 1.84-.219 2.299-.656.459-.437.684-1.086.684-1.948v-.437a8.07 8.07 0 0 1-1.047.397c-.43.13-.93.198-1.492.198-.739 0-1.41-.116-2.018-.349a4.206 4.206 0 0 1-1.567-1.025c-.431-.45-.774-1.017-1.013-1.694-.24-.677-.363-1.885-.363-2.773 0-.834.13-1.88.384-2.577.26-.696.629-1.298 1.129-1.796.493-.498 1.095-.881 1.8-1.162a6.605 6.605 0 0 1 2.428-.457c.87 0 1.67.109 2.45.24.78.129 1.444.265 1.985.415V18.17z' fill='%235468FF'/%3E%3Cpath d='M6.972 6.677v1.627c-.712-.446-1.52-.67-2.425-.67-.585 0-1.045.13-1.38.391a1.24 1.24 0 0 0-.502 1.03c0 .425.164.765.494 1.02.33.256.835.532 1.516.83.447.192.795.356 1.045.495.25.138.537.332.862.582.324.25.563.548.718.894.154.345.23.741.23 1.188 0 .947-.334 1.691-1.004 2.234-.67.542-1.537.814-2.601.814-1.18 0-2.16-.229-2.936-.686v-1.708c.84.628 1.814.942 2.92.942.585 0 1.048-.136 1.388-.407.34-.271.51-.646.51-1.125 0-.287-.1-.55-.302-.79-.203-.24-.42-.42-.655-.542-.234-.123-.585-.29-1.053-.503-.276-.127-.47-.218-.582-.271a13.67 13.67 0 0 1-.55-.287 4.275 4.275 0 0 1-.567-.351 6.92 6.92 0 0 1-.455-.4c-.18-.17-.31-.34-.39-.51-.08-.17-.155-.37-.224-.598a2.553 2.553 0 0 1-.104-.742c0-.915.333-1.638.998-2.17.664-.532 1.523-.798 2.576-.798.968 0 1.793.17 2.473.51zm7.468 5.696v-.287c-.022-.607-.187-1.088-.495-1.444-.309-.357-.75-.535-1.324-.535-.532 0-.99.194-1.373.583-.382.388-.622.949-.717 1.683h3.909zm1.005 2.792v1.404c-.596.34-1.383.51-2.362.51-1.255 0-2.255-.377-3-1.132-.744-.755-1.116-1.744-1.116-2.968 0-1.297.34-2.316 1.021-3.055.68-.74 1.548-1.11 2.6-1.11 1.033 0 1.852.323 2.458.966.606.644.91 1.572.91 2.784 0 .33-.033.676-.096 1.038h-5.314c.107.702.405 1.239.894 1.611.49.372 1.106.558 1.85.558.862 0 1.58-.202 2.155-.606zm6.605-1.77h-1.212c-.596 0-1.045.116-1.349.35-.303.234-.454.532-.454.894 0 .372.117.664.35.877.235.213.575.32 1.022.32.51 0 .912-.142 1.204-.424.293-.281.44-.651.44-1.108v-.91zm-4.068-2.554V9.325c.627-.361 1.457-.542 2.489-.542 2.116 0 3.175 1.026 3.175 3.08V17h-1.548v-.957c-.415.68-1.143 1.02-2.186 1.02-.766 0-1.38-.22-1.843-.661-.462-.442-.694-1.003-.694-1.684 0-.776.293-1.38.878-1.81.585-.431 1.404-.647 2.457-.647h1.34V11.8c0-.554-.133-.971-.399-1.253-.266-.282-.707-.423-1.324-.423a4.07 4.07 0 0 0-2.345.718zm9.333-1.93v1.42c.394-1 1.101-1.5 2.123-1.5.148 0 .313.016.494.048v1.531a1.885 1.885 0 0 0-.75-.143c-.542 0-.989.24-1.34.718-.351.479-.527 1.048-.527 1.707V17h-1.563V8.91h1.563zm5.01 4.084c.022.82.272 1.492.75 2.019.479.526 1.15.79 2.01.79.639 0 1.235-.176 1.788-.527v1.404c-.521.319-1.186.479-1.995.479-1.265 0-2.276-.4-3.031-1.197-.755-.798-1.133-1.792-1.133-2.984 0-1.16.38-2.151 1.14-2.975.761-.825 1.79-1.237 3.088-1.237.702 0 1.346.149 1.93.447v1.436a3.242 3.242 0 0 0-1.77-.495c-.84 0-1.513.266-2.019.798-.505.532-.758 1.213-.758 2.042zM40.24 5.72v4.579c.458-1 1.293-1.5 2.505-1.5.787 0 1.42.245 1.899.734.479.49.718 1.17.718 2.042V17h-1.564v-5.106c0-.553-.14-.98-.422-1.284-.282-.303-.652-.455-1.11-.455-.531 0-1.002.202-1.411.606-.41.405-.615 1.022-.615 1.851V17h-1.563V5.72h1.563zm14.966 10.02c.596 0 1.096-.253 1.5-.758.404-.506.606-1.157.606-1.955 0-.915-.202-1.62-.606-2.114-.404-.495-.92-.742-1.548-.742-.553 0-1.05.224-1.491.67-.442.447-.662 1.133-.662 2.058 0 .958.212 1.67.638 2.138.425.469.946.703 1.563.703zM53.004 5.72v4.42c.574-.894 1.388-1.341 2.44-1.341 1.022 0 1.857.383 2.506 1.149.649.766.973 1.781.973 3.047 0 1.138-.309 2.109-.925 2.912-.617.803-1.463 1.205-2.537 1.205-1.075 0-1.894-.447-2.457-1.34V17h-1.58V5.72h1.58zm9.908 11.104l-3.223-7.913h1.739l1.005 2.632 1.26 3.415c.096-.32.48-1.458 1.15-3.415l.909-2.632h1.66l-2.92 7.866c-.777 2.074-1.963 3.11-3.559 3.11a2.92 2.92 0 0 1-.734-.079v-1.34c.17.042.351.064.543.064 1.032 0 1.755-.57 2.17-1.708z' fill='%235D6494'/%3E%3Cpath d='M89.632 5.967v-.772a.978.978 0 0 0-.978-.977h-2.28a.978.978 0 0 0-.978.977v.793c0 .088.082.15.171.13a7.127 7.127 0 0 1 1.984-.28c.65 0 1.295.088 1.917.259.082.02.164-.04.164-.13m-6.248 1.01l-.39-.389a.977.977 0 0 0-1.382 0l-.465.465a.973.973 0 0 0 0 1.38l.383.383c.062.061.15.047.205-.014.226-.307.472-.601.746-.874.281-.28.568-.526.883-.751.068-.042.075-.137.02-.2m4.16 2.453v3.341c0 .096.104.165.192.117l2.97-1.537c.068-.034.089-.117.055-.184a3.695 3.695 0 0 0-3.08-1.866c-.068 0-.136.054-.136.13m0 8.048a4.489 4.489 0 0 1-4.49-4.482 4.488 4.488 0 0 1 4.49-4.482 4.488 4.488 0 0 1 4.489 4.482 4.484 4.484 0 0 1-4.49 4.482m0-10.85a6.363 6.363 0 1 0 0 12.729c3.518 0 6.372-2.85 6.372-6.368a6.358 6.358 0 0 0-6.371-6.36' fill='%23FFF'/%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
overflow: hidden;
text-indent: -9000px;
padding: 0 !important;
width: 100%;
height: 100%;
display: block;
}
@media (max-width: 1200px) {
.header,
.header-wapper {
width: 100% !important;
}
}
@media (max-width: 576px) {
.header {
height: 50px !important;
line-height: 50px;
-webkit-box-shadow: none;
box-shadow: none;
}
.header .header-m {
width: 100%;
min-width: 380px;
height: 50px;
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;
}
.header .header-m .header-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header .header-m .header-content-m {
padding-left: 5px;
padding-top: 10px;
}
.header .header-m .header-logo {
padding-top: 12px;
text-align: center;
}
.header .header-m .header-search-m {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -16px;
}
.header .header-m .loginButton {
margin-right: 0;
}
.header .header-wapper {
display: none !important;
}
}
.header-content .header-search .kd-input-wrapper-size-middle {
background: #f8f8f8;
border-radius: 16px;
border: none;
}
.header-content .header-search .kd-input-wrapper .kd-input {
background: #f8f8f8;
}
.header-content .header-search .algolia-docsearch-footer {
display: none;
}
.header-content .header-search input::-webkit-input-placeholder {
color: #b1b1b1;
}
.header-content .header-search input::-moz-placeholder {
color: #b1b1b1;
}
.header-content .header-search input::-ms-input-placeholder {
color: #b1b1b1;
}
.navbar-menus-handle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding-left: 40px;
}
.navbar-menus-handle > img {
cursor: pointer;
}
.navbar-menus-handle-split {
display: inline-block;
width: 1px;
height: 24px;
margin: 0 20px;
background-color: rgba(0, 0, 0, 0.1);
}
@media only screen and (min-width: 768px) {
.navbar-menus-handle.hiddenInPc {
display: none;
}
}
@media only screen and (max-width: 578px) {
.navbar-menus-handle {
padding-left: 10px;
}
.navbar-menus-handle-split {
margin: 0 10px;
}
}
.navbar-menus-dropdown {
z-index: 100;
position: fixed !important;
left: 0 !important;
top: 64px !important;
width: 250px;
max-height: calc(100vh - 124px);
padding: 30px 0;
overflow-y: overlay;
background-color: #fff;
-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 578px) {
.navbar-menus-dropdown {
top: 50px !important;
bottom: 0 !important;
max-height: calc(100vh - 110px);
}
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu {
list-style: none;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu > li {
line-height: 40px;
padding-left: 40px;
font-size: 14px;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu > li h3 {
margin: 0 0 10px 0;
color: #666;
font-size: 14px;
font-weight: normal;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu > li a {
display: block;
color: #212121;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu > li a:hover {
color: #276ff5;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu > li:not(:last-child) > a {
margin-bottom: 20px;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu .navbar-menus-dropdown-menu-sub {
margin-bottom: 10px;
list-style: none;
}
.navbar-menus-dropdown .navbar-menus-dropdown-menu .navbar-menus-dropdown-menu-sub li {
padding-left: 20px;
}
.loginButton {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 64px;
height: 64px;
margin-right: 30px;
border-radius: 50%;
cursor: pointer;
}
.loginButton .logout {
position: relative;
height: 36px;
}
.loginButton .logout:hover .logout-panel {
display: block;
}
.loginButton .logout-panel {
display: none;
position: absolute;
width: 134px;
right: 0;
top: 22px;
font-size: 14px;
color: #212121;
}
.loginButton .logout-panel .transparent {
height: 28px;
background-color: transparent;
}
.loginButton .logout-panel-button {
height: 48px;
text-align: center;
line-height: 48px;
background: #ffffff;
border-radius: 4px;
-webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}
.loginButton .logout-panel-button:hover {
color: #2386ee;
}
.loginButton .logout img {
width: 36px;
height: 36px;
border-radius: 50%;
}
.loginButton:hover > svg path {
fill: #3059ff !important;
}
.loginButton:hover .logout .mask {
display: block;
}
.header-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: 60px;
}
.header-nav .nav-item {
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #333;
margin: 0 32px;
}
.header-nav .nav-item:hover {
color: #3863ff;
border-bottom: 2px solid;
}
.header-nav .nav-item.nav-active-item {
color: #3863ff;
border-bottom: 2px solid;
}
.kdm-modal-mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
z-index: 1999;
background-color: rgba(0, 0, 0, 0.4);
}
.kdm-modal-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
z-index: 1999;
-webkit-overflow-scrolling: touch;
outline: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translateZ(1px);
transform: translateZ(1px);
}
.kdm-modal-wrap-popup {
display: block;
}
.kdm-modal-popup {
position: fixed;
top: 0;
width: 100%;
}
.kdm-modal-content {
position: relative;
background-color: #fff;
border: 0;
background-clip: padding-box;
text-align: center;
height: 100%;
overflow: hidden;
}
.kdm-modal-popup .kdm-modal-content {
padding-bottom: env(safe-area-inset-bottom);
}
.kdm-modal-body {
font-size: 15px;
color: #888;
height: 100%;
line-height: 1.5;
overflow: auto;
}
.kdm-list-header {
padding: 15px 15px 9px;
font-size: 14px;
color: #888;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.kdm-list-body {
position: relative;
background-color: #fff;
}
.popup-list .kdm-list-body {
height: 40px;
overflow: auto;
padding: 0 20px;
}
.search-wapper .res-wapper {
position: fixed;
top: 64px;
width: 100%;
background: #fff;
z-index: 2999;
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.08);
min-height: 100px;
}
.search-wapper .res-wapper::before {
left: 40px;
display: block;
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 998;
top: -7px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-radius: 2px;
-webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
}
.search-wapper .res-wapper ul li {
margin: 0 20px;
height: 66px;
border-bottom: 1px solid #d6e3ee;
line-height: normal;
}
.search-wapper .res-wapper ul li:last-of-type {
border: none;
}
.search-wapper .res-wapper ul li a {
width: 100%;
height: 100%;
padding-top: 12px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: grid;
grid-template-columns: auto 150px;
grid-template-rows: 45px;
}
.search-wapper .res-wapper ul li a .item-left {
font-size: 14px;
color: #111111;
cursor: pointer;
}
.search-wapper .res-wapper ul li a .item-left .category {
width: 100%;
line-height: 26px;
}
.search-wapper .res-wapper ul li a .item-left .details {
width: 100%;
font-size: 12px;
color: #999;
}
.search-wapper .res-wapper ul li a .item-right {
color: #999999;
text-align: right;
font-size: 14px;
line-height: 26px;
}
.search-wapper .res-wapper ul li a .algolia-docsearch-suggestion--highlight {
color: #5582f3;
padding: 0 1px;
}
.search-wapper .res-wapper .no-res {
text-align: center;
color: #999;
font-size: 14px;
line-height: 50px;
}
.search-wapper .res-wapper .algolia-docsearch-footer {
display: none;
}
@media only screen and (max-width: 578px) {
.side-menu-wrapper::before {
z-index: 100;
position: fixed;
top: 50px;
right: 0;
bottom: 0;
left: 0;
content: '';
opacity: 0;
visibility: hidden;
background-color: rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.side-menu-wrapper[data-mobile-show]::before {
opacity: 1;
visibility: visible;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
}
.side-menu {
position: fixed;
z-index: 100;
top: 0;
left: 0;
bottom: 0;
width: 260px;
background-color: #f2f5fa;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: left 0.3s;
transition: left 0.3s;
display: none;
}
@media only screen and (max-width: 578px) {
.side-menu {
left: -240px;
top: 50px;
display: block !important;
width: 240px;
background-color: #fff;
}
.side-menu[data-mobile-show] {
left: 0;
}
.side-menu[data-mobile-show] .side-menu-inner {
z-index: 1;
position: relative;
-webkit-box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.1);
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, 0.1);
}
.side-menu[data-mobile-show] .side-menu-toggle-icon {
background-color: transparent;
}
.side-menu[data-mobile-show] .side-menu-toggle-icon::before,
.side-menu[data-mobile-show] .side-menu-toggle-icon::after {
top: 50%;
left: 50%;
width: 20px;
background-color: #333;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.side-menu[data-mobile-show] .side-menu-toggle-icon::after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
}
.side-menu-inner {
width: 100%;
height: 100%;
overflow: auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
[data-prefers-color='dark'] .side-menu-inner {
background-color: #262626;
}
.side-menu .menu-list {
min-height: 100%;
font-family: PingFangSC-Regular, "PingFang SC", serif;
}
.side-menu .menu-list .menu-item-title {
line-height: 40px;
color: #333333;
font-size: 14px;
}
.side-menu .menu-list .sub-menu-item-title {
line-height: 40px;
cursor: pointer;
}
.side-menu .menu-list .sub-menu-item {
color: #333333;
font-size: 14px;
}
.side-menu .menu-list .is-active {
background: rgba(35, 134, 238, 0.1);
color: #3863ff;
border-left: 4px solid;
}
.side-menu .menu-list .is-active a {
color: #3863ff !important;
-webkit-transform: translateX(-4px);
transform: translateX(-4px);
}
.side-menu .menu-list a {
display: inline-block;
width: 100%;
height: 100%;
color: #333333;
}
.side-menu .menu-list .menu-components-wapper > ul > li.menu-item-title {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height: 20px;
}
.side-menu .menu-list .menu-components-wapper > ul > li.sub-menu-item .menu-item-title a {
font-size: 14px;
font-weight: 400;
color: #212121;
line-height: 20px;
}
.side-menu .menu-list .menu-components-wapper .menu-item-title {
padding-left: 40px;
}
.side-menu .menu-list .menu-components-wapper .menu-item-title:hover a {
color: #276FF5 !important;
}
.side-menu .menu-list .menu-components-wapper .menu-item-title.is-active {
padding-left: 36px;
}
.side-menu .menu-list .menu-components-wapper > .menu-item-title,
.side-menu .menu-list .menu-components-wapper > ul > .menu-item-title {
font-size: 14px;
margin: 6px 0;
}
.side-menu .menu-list .menu-components-wapper .sub-menu-item .menu-item-title {
padding-left: 60px;
}
.side-menu-toggle {
z-index: 0;
position: absolute;
top: 72px;
right: -40px;
display: none;
width: 40px;
height: 40px;
border: 0;
outline: none;
-webkit-box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.1);
border-radius: 0 4px 4px 0;
background-color: #fff;
}
.side-menu-toggle-icon {
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background-color: #999;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.side-menu-toggle-icon::before,
.side-menu-toggle-icon::after {
position: absolute;
top: -6px;
left: 0;
width: 14px;
height: 2px;
content: '';
background-color: #999;
-webkit-transition: 0.2s all 0.2s;
transition: 0.2s all 0.2s;
}
.side-menu-toggle-icon::after {
top: auto;
bottom: -6px;
}
@media only screen and (max-width: 578px) {
.side-menu-toggle {
display: block;
}
}
.overview-card-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.overview-card-item-title {
font-size: 24px;
padding-left: 16px;
position: relative;
color: #212121;
padding-top: 80px;
margin-bottom: 14px;
line-height: 28px;
}
.overview-card-item-title::before {
content: "";
width: 4px;
height: 24px;
background: #3488f8;
border-radius: 5px;
position: absolute;
bottom: 2px;
left: 0;
}
.overview-card-dl {
margin-right: 20px;
margin-bottom: 12px;
}
.overview-card-dt {
margin-bottom: 6px;
}
.overview-card-dd {
font-size: 16px;
color: #333;
line-height: 28px;
}
.overview-card-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 240px;
height: 137px;
border: 1px solid #e6e6e6;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 4px;
background: #F6F8FB;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
}
.overview-card-link:hover {
-webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(168, 115, 115, 0.05);
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(168, 115, 115, 0.05);
}
.footer {
padding: 0 100px;
color: #fff;
background: #1d2c43;
position: relative;
z-index: 98;
}
.footer-top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.footer-top > div:nth-child(2) {
text-align: center;
margin-top: 43px;
margin-right: 200px;
}
.footer-top > div:nth-child(2) img {
width: 70px;
margin-bottom: 7px;
}
.footer-top > div:nth-child(2) div {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
}
.footer-logo {
height: 120px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.footer-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 30px;
}
.footer-main-item {
margin-right: 120px;
}
.footer-main-item a {
cursor: pointer;
margin-right: 20px;
color: #fff;
text-decoration: none;
}
.footer-main-item a:hover {
color: #2386ee;
}
.footer-main-item > div:nth-child(1) {
color: #fff;
opacity: 0.7;
font-size: 14px;
}
.footer-main-item > div:nth-child(2) {
font-size: 16px;
margin-top: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.footer-bottom {
color: #fff;
opacity: 0.7;
height: 62px;
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;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.footer-bottom a {
color: #fff;
opacity: 0.7;
text-decoration: none;
margin-left: 10px;
}
.footer-bottom a:hover {
color: #fff;
}
.footer.transparent {
background: #9342f3;
}
.footer.transparent .link-button {
cursor: pointer;
}
.footer.transparent .link-button:hover {
color: rgba(255, 255, 255, 0.78);
}
@media only screen and (max-width: 960px) {
.footer {
padding: 0 10px;
}
.footer-main {
display: block;
}
.footer-main > div:nth-child(1) {
margin-top: -10px;
}
.footer-main a {
display: inline-block;
margin: 10px 20px 0 0;
}
.footer-main-item {
margin-right: 0;
margin-top: 10px;
}
.footer-main-item > div:nth-child(2) {
display: block;
}
}
.kd-dropdown-version {
float: right;
color: #111111;
font-size: 20px;
}