.filt-container { width: 100%; background: #e2e7ef; } .btn-bar { display: flex; align-items: center; background-color: #fff; padding: 11px 0; } .station_filt-wrapper { width: 100%; padding: 10px 10px 0 10px; background-color: #e2e7ef; } .station_filt-wrapper .filt-bar { height: 50px; padding: 0 24px 0 10px; background: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d9d9d9; } .station_filt-wrapper .filt-board { display: flex; flex-wrap: wrap; overflow: hidden; transition: all 0.3s; background: #fafafa; border-bottom: 1px solid #d9d9d9; border-radius: 2px; } .station_filt-wrapper .filt-board .filt-list { width: 100%; display: flex; flex-wrap: wrap; padding-top: 8px; padding-left: 12px; } .station_filt-wrapper .filt-board .scheme-edit { width: 100%; border-top: 1px solid #ccc; display: flex; flex-wrap: wrap; align-items: center; padding-left: 12px; } .station_filt-wrapper .filt-board .scheme-edit .form-group { margin-bottom: 0; } .form-group { width: 350px; height: 50px; margin: 0 20px 0 0; display: flex; align-items: center; justify-content: flex-end; } .form-group .title { position: relative; display: flex; align-items: center; font-size: 14px; color: #666; padding-right: 10px; } .form-group .title .txt { word-break: break-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .form-group .title .icon { font-size: 16px; color: #666; margin-left: 3px; } .form-group .title.required { position: relative; } .form-group .title.required:after { content: "*"; color: #f00; } .form-group .info { width: 218px; height: 30px; display: flex; align-items: center; } .form-group .inp-icon { cursor: pointer; } .form-group .inp-icon:hover { color: var(--theme-color-level5); } .form-group .kd-input, .form-group .kd-select-wrapper { padding-left: 5px !important; color: #212121; } .form-group .kd-select-bordered .kd-select-suffix { right: 0 !important; } .form-group .kd-date-picker-input input { color: #212121 !important; } .form-group input:disabled { background-color: #fafafa !important; color: #666 !important; border-color: #e5e5e5 !important; } .form-btn-group { display: flex; justify-content: flex-end; align-items: center; align-self: self-end; margin: 0 20px 0 0; flex: 1; height: 50px; } .i-collapse-board-btn.kd-btn-text { display: flex; align-items: center; font-size: 14px; color: var(--theme-color); } .i-collapse-board-btn.kd-btn-text .icon { margin-left: 5px; } .i-drop-btn .kd-btn-primary { background: #fff; color: var(--theme-color); border-color: var(--theme-color); } .i-drop-btn .kd-btn-primary:hover:not(.kd-btn-loading) { background: #fff; color: var(--theme-color-level5); border-color: var(--theme-color-level5); } .i-drop-btn .kd-btn-group-trigger .kd-btn-primary { background: #fff; color: var(--theme-color); border: 1px solid var(--theme-color) !important; } .i-drop-btn .kd-btn-group-trigger .kd-btn-primary.kd-btn-icon-only { border-left: none; } .i-drop-btn .kd-btn-group-trigger .kd-btn-primary:hover:not(.kd-btn-loading) { background: #fff; color: var(--theme-color-level5); border: 1px solid var(--theme-color-level5) !important; } .compose-btn.kd-btn-ghost { display: flex; align-items: center; justify-content: center; border-color: #d9d9d9; color: #666; } .kd-select-wrapper.kd-select-multiple { height: 30px; overflow: hidden; flex-wrap: nowrap; } .kd-select-wrapper.kd-select-multiple > span { flex-shrink: 0; } .kd-select-wrapper.kd-select-multiple .kd-tag-shape-edit::after { content: "\FF1B"; } .kd-select-wrapper.kd-select-multiple .kd-tag-shape-edit { border: none; position: relative; margin: 0 0 0 0 !important; padding: 0; font-size: 14px; } .kd-select-wrapper.kd-select-multiple .kd-tag-shape-edit .kd-tag-closeWrapper { display: none; position: absolute; right: -8px; top: 0; } .kd-select-wrapper.kd-select-multiple .kd-tag-shape-edit:hover .kd-tag-closeWrapper { display: block; } .kd-select-wrapper.kd-select-multiple .kd-select-suffix { background-color: #fff; padding: 0 10px; right: 1px; } .kd-tag-shape-edit:not(.kd-tag-closable-disabled):hover .kd-tag-closeWrapper { background-color: #fff !important; color: var(--theme-color-level5) !important; } .kd-select-dropdown-search { display: none; } .filt-select .kd-select-single-text .kd-tag { display: none; } .kd-btn-group-trigger .kd-btn-primary::before { background-color: unset !important; } .filt-select.not-curr .kd-select-single-text:after { content: "*"; } .kd-select.bottomLeft.bottomLeft-active { z-index: 1049 !important; } .kd-btn-ghost:hover:not(.kd-btn-loading) { background-color: var(--theme-color) !important; color: #fff; } .i-ellipsis-inp input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .station_container { position: relative; padding: 1px 10px 0 10px; flex: 1; } .station_container .chart_wrapper .chart_view_wrapper { height: 100%; overflow: hidden; background: #fff; } .preview-icon { position: absolute; right: 20px; top: 15px; z-index: 1; color: var(--theme-color); } .unshow { display: none; } .ghover > rect:first-child { stroke: #38f; } .card-group * { cursor: auto; } .card-group .op-icon { cursor: pointer; } .card-group.edit * { cursor: pointer; } .op-icon.gray { fill: #ccc; } .unshow { display: none; } .kd-tooltip.i-tool-tips.left.arrow { height: 20px; background: #F5F5F5; border: 1px solid #d9d9d9; border-radius: 2px; line-height: 20px; padding: 0 10px; font-size: 12px; box-shadow: none; color: #666666; } .kd-tooltip.i-tool-tips.left.arrow::before { content: ""; display: none; } .ghover > rect:first-child { stroke: #0E5FD8; } .card-group * { cursor: auto; } .card-group.edit * { cursor: pointer; } .card-group .op-icon { cursor: pointer; } .null_data { width: 100%; height: 100%; color: #aaa; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #fff; } .null_data .img { width: 256px; height: 160px; background-size: 100% 100%; } .null_data .img.err1 { background-image: url(./image/e0cfd11f7287d1b29bec8542dbe343fb.png); } .null_data .img.err2 { background-image: url(./image/f49544dd8aa30f83e2704dc6298b22c3.png); } .null_data .img.err3 { background-image: url(./image/04d7b06133dc2740215d2cdb8994107a.png); } .null_data p { font-size: 14px; color: #999; text-align: center; } .hoverMenu { fill: #212121; cursor: pointer; } .cardmenu-svgwrapper:hover .hoverMenu, .hoverMenu:hover { fill: var(--theme-color, #5582F3); } .preview-slide-rect { stroke: var(--theme-color, #5582F3); } /*! * * @kdcloudjs/kdesign v1.3.1 * * Copyright 2020-present, Kingdee, Inc. * All rights reserved. * */ @font-face { font-family: "kdicon"; src: url(data:font/woff;base64,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) format("woff"); } .kdicon { font-family: 'kdicon' !important; font-size: 16px; 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-solid:before { content: "\E657"; } .kdicon-arrow-left:before { content: "\E63F"; } .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-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: "\E6BB"; } .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"; } /* ----------- 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 */ /* ----------- 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 */ @-webkit-keyframes loadingcircle { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loadingcircle { 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; } } .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; } } .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.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-select.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.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.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.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.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: 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); } @-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; } } /*! 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: 'Microsoft YaHei', 'PingFangSC-Regular', 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 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 { width: 10px !important; height: 10px !important; } ::-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; } /* ----------- 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 */ /* ----------- 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; width: 100%; padding: var(--kd-c-alert-sizing-padding-top, 8px) var(--kd-c-alert-sizing-padding-horizontal, 12px) var(--kd-c-alert-sizing-padding-bottom, 12px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: display 3s; transition: display 3s; } .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-font-color { color: var(--kd-c-alert-color-text-success, var(--kd-g-color-success, #1ba854)); } .kd-alert.alert-warning-font-color { color: var(--kd-c-alert-color-text-warning, var(--kd-g-color-warning, #ff991c)); } .kd-alert.alert-error-font-color { color: var(--kd-c-alert-color-text-error, var(--kd-g-color-error, #fb2323)); } .kd-alert.alert-info-font-color { color: var(--kd-c-alert-color-text-info, var(--kd-g-color-ongoing, #276ff5)); } .kd-alert-icon { display: -webkit-box; display: -ms-flexbox; display: flex; cursor: default; 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-message { font-size: var(--kd-c-alert-message-font-size, var(--kd-g-font-size-small, 12px)); line-height: 18px; 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: min-height 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: min-height 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; 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; 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)); justify-self: flex-end; cursor: pointer; } .kd-alert-close-icon:hover { color: var(--kd-c-alert-close-icon-color-text-hover, var(--theme-color-level5, #87adff)); } .kd-alert-close-icon:active { color: var(--theme-color-level7, #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); } } /* ----------- 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 */ /* ----------- 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; } .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(--theme-color, #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(--theme-color, #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: 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-ink-line-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(--theme-color, #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-ink { position: absolute; left: var(--kd-c-anchor-spacing-horizontal, 7px); top: 0; height: 100%; } .kd-anchor-ink::before { position: relative; display: block; width: var(--kd-c-anchor-ink-line-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-ink-line { position: absolute; display: none; width: 0; height: 16px; border-right: var(--kd-c-anchor-ink-line-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--theme-color, #5582f3)); -webkit-transition: top 0.3s ease-in-out; transition: top 0.3s ease-in-out; } .kd-anchor-ink-line.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(--theme-color, #5582f3)); } .kd-anchor-link-active > .kd-anchor-link-title { color: var(--kd-c-anchor-color-theme, var(--theme-color, #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); } /* ----------- 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 */ /* ----------- 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: unset !important; } .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: unset !important; } .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: unset !important; } .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: unset !important; } .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; } /* ----------- 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 */ /* ----------- 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; } } /* ----------- 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 */ /* ----------- 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(--theme-color, #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(--theme-color, #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(--theme-color, #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); } .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; } .topLeft.hidden, .bottomLeft.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-baseData-dropdown-wrapper.topLeft.hidden, .kd-baseData-dropdown-wrapper.bottomLeft.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); } /* ----------- 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 */ /* ----------- 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; -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(--theme-color, #5582f3); box-shadow: 0 0 0 0 var(--theme-color, #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(--theme-color, #5582f3)); color: var(--kd-c-button-second-color-text-hover, var(--theme-color, #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(--theme-color-level7, #375cca)); color: var(--kd-c-button-second-color-text-active, var(--theme-color-level7, #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(--theme-color, #5582f3)); background-color: var(--kd-c-button-primary-color-background, var(--theme-color, #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(--theme-color-level5, #87adff)); border-color: var(--kd-c-button-primary-color-border-hover, var(--theme-color-level5, #87adff)); } .kd-btn-primary:active:not(.kd-btn-loading) { border-color: var(--kd-c-button-primary-color-border-active, var(--theme-color, #5582f3)); background-color: var(--kd-c-button-primary-color-background-active, var(--theme-color-level7, #375cca)); } .kd-btn-primary:disabled { background-color: var(--kd-c-button-primary-color-background-disabled, var(--theme-color-level4, #b5cfff)) !important; border-color: var(--kd-c-button-primary-color-border-disabled, var(--theme-color-level4, #b5cfff)) !important; } .kd-btn-ghost { border-color: var(--kd-c-button-ghost-color-border, var(--theme-color-level6, #5582f3)); background-color: var(--kd-c-button-ghost-color-background, transparent); color: var(--kd-c-button-ghost-color-text, var(--theme-color, #5582f3)); } .kd-btn-ghost:hover:not(.kd-btn-loading) { background-color: var(--kd-c-button-ghost-color-background-hover, var(--theme-color-level5, #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(--theme-color-level7, #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(--theme-color, #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); } .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); } .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); } .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); } .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); } .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); } .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(--theme-color-level6, #5582f3)); padding: 0; min-width: auto; } .kd-btn-text:hover { color: var(--kd-c-button-text-color-text-hover, var(--theme-color-level5, #87adff)); } .kd-btn-text:active { color: var(--kd-c-button-text-color-text-active, var(--theme-color-level7, #375cca)); } .kd-btn-text[disabled] { color: var(--kd-c-button-text-color-text-disabled, var(--theme-color-level4, #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(--theme-color, #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; } .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-trigger .kd-btn-primary { background: var(--theme-color, #4367c1); } .kd-btn-group-trigger .kd-btn-primary:hover { background: var(--theme-color-level5, #4c74da); border-color: var(--theme-color-level5, #4c74da); } .kd-btn-group-trigger .kd-btn-primary:active { background: var(--theme-color-level7, #3B5AA9); } .kd-btn-group-trigger .kd-btn-primary:disabled { background: var(--theme-color-disabled, #95a4c8) !important; } .kd-btn-group-trigger .kd-btn { margin-left: -1px; } .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-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .kd-btn-group .kd-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .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); } /* ----------- 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 */ /* ----------- 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(--theme-color, #5582f3)); } .kd-card .kd-card-actions > a:hover { color: var(--kd-c-card-actions-color-hover, var(--theme-color-level5, #87adff)); } .kd-card .kd-card-actions > a:active { color: var(--kd-c-card-actions-color-active, var(--theme-color-level7, #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; } /* ----------- 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 */ /* ----------- 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; 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; } .kd-carousel-list-fade .kd-carousel-list-item-hidden { opacity: 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; } .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; } .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); } /* ----------- 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 */ /* ----------- 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; display: inline-block; outline: none; cursor: pointer; } .kd-cascader-picker:focus > .kd-cascader-picker-input { border-color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); } .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix, .kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] { color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); } .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix, .kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] { color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); } .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 9px; 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 !important; -webkit-transition: all 0.2s; transition: all 0.2s; } .kd-cascader-picker-input > input { color: transparent !important; cursor: pointer; } .kd-cascader-picker-input.expand { border-color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); } .kd-cascader-picker-input.expand i[class*="kdicon"] { color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); -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: 9px; opacity: 0; cursor: pointer; visibility: hidden; color: var(--kd-c-cascader-color-active, var(--theme-color, #5582f3)); -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-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-table; 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; 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(--theme-color, #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: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label { width: 92px; } .kd-cascader-menus .kd-empty { padding: 10px 0 20px; } /* ----------- 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 */ /* ----------- 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; } .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; } .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(--theme-color, #5582f3)); box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--theme-color, #5582f3)); } .kd-checkbox-square:hover { color: var(--kd-c-checkbox-color-text-hover, var(--theme-color, #5582f3)); border-color: var(--kd-c-checkbox-color-border-active, var(--theme-color, #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(--theme-color, #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(--theme-color, #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(--theme-color, #5582f3)); border-color: var(--kd-c-checkbox-color-border-active, var(--theme-color, #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)); } .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(--theme-color, #5582f3)); box-shadow: 0 0 0 0 var(--kd-c-checkbox-color-theme, var(--theme-color, #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-no-child { height: 100%; width: 100%; } .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(--theme-color, #5582f3)); border-color: var(--kd-c-checkbox-color-border-active, var(--theme-color, #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(--theme-color, #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); } /* ----------- 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 */ /* ----------- 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-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: relative; border-bottom: 1px solid #999; } .kd-city-picker-container .kd-city-picker-content { position: relative; 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; font-size: 14px; color: #999999; letter-spacing: 0; line-height: 21px; } .kd-city-picker-container .kd-city-picker-title { margin-bottom: 9px; font-size: 12px; color: #666666; letter-spacing: 0; line-height: 18px; } .kd-city-picker-container .kd-city-picker-info { margin-right: 20px; } .kd-city-picker-container .kd-city-picker-input { border: 0; outline: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 50%; color: #212121; } .kd-city-picker-container .kd-city-picker-arrow { font-size: 16px; position: absolute; right: 0; bottom: 0; -webkit-transition: -webkit-transform 0.2s ease; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .kd-city-picker-container .kd-city-picker-arrow.arrow-up { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .kd-city-picker-panel-container { width: var(--kd-c-city-picker-panel-sizing-width, 460px); height: var(--kd-c-city-picker-panel-sizing-height, 373px); font-size: var(--kd-c-city-picker-panel-font-size, 12px); line-height: 18px; letter-spacing: 0; } .kd-city-picker-panel-container .kd-city-picker-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-tab-item { position: relative; cursor: pointer; padding: 3px 0; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-tab-item.active { color: var(--kd-c-city-picker-color, var(--theme-color, #5582f3)); z-index: 1; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-tab-item.active::before { z-index: -1; background: #fff; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-header-domestic { width: 94px; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-header-domestic::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background: var(--kd-c-city-picker-color-background, var(--kd-g-color-background-contain, #fafafa)); border-radius: 2px 4px 0 0; -webkit-transform: scaleY(1.25) perspective(18px) rotateX(10deg); transform: scaleY(1.25) perspective(18px) rotateX(10deg); -webkit-transform-origin: bottom left; transform-origin: bottom left; -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.2); } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-header-internation { width: 108px; margin-left: -13px; } .kd-city-picker-panel-container .kd-city-picker-header .kd-city-picker-header-internation::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background: var(--kd-c-city-picker-color-background, var(--kd-g-color-background-contain, #fafafa)); border-radius: 4px 4px 0 0; -webkit-transform: scaleY(1.25) perspective(18px) rotateX(10deg); transform: scaleY(1.25) perspective(18px) rotateX(10deg); -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.2); } .kd-city-picker-panel-item { margin: 4px 6px; padding: 3px 6px; color: #212121; width: 72px; cursor: pointer; } .kd-city-picker-panel-item:hover { background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5)); border-radius: 2px; } .kd-city-picker-content-container { height: 349px; padding: 0 20px 12px 20px; background: #fff; -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2); border-radius: 0 var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px)) var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px)) var(--kd-c-city-picker-panel-radius-border, var(--kd-g-radius-border, 2px)); } .kd-city-picker-group-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-pack: distribute; justify-content: space-around; } .kd-city-picker-group-item { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; padding: 10px 0; max-height: 39px; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 2px solid #F5F5F5; cursor: pointer; text-align: center; } .kd-city-picker-group-item:hover { color: var(--kd-c-city-picker-color, var(--theme-color, #5582f3)); } .kd-city-picker-group-item.active { color: var(--kd-c-city-picker-color, var(--theme-color, #5582f3)); border-bottom: 2px solid var(--kd-c-city-picker-color, var(--theme-color, #5582f3)); } .kd-city-picker-group-item.last { -ms-flex-negative: 1; flex-shrink: 1; } .kd-city-picker-city-table { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 10px; max-height: calc(100% - 39px - 10px); overflow: scroll; } .kd-city-picker-city-table .kd-city-picker-city-table-group { display: -webkit-box; display: -ms-flexbox; display: flex; } .kd-city-picker-city-table .kd-city-picker-city-table-group .kd-city-picker-city-table-key { 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: 32px; height: 32px; color: #999; margin-right: 32px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .kd-city-picker-city-table .kd-city-picker-city-table-item-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .kd-city-picker-city-table .kd-city-picker-city-table-cell { margin: 4px 6px; padding: 3px 6px; color: var(--kd-c-city-picker-panel-item-color, var(--kd-g-color-text-primary, #212121)); cursor: pointer; width: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kd-city-picker-city-table .kd-city-picker-city-table-cell:hover { background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5)); border-radius: 2px; } .kd-city-picker-search-panel { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 256px; height: 320px; padding: 8px 0; font-size: 12px; color: #212121; letter-spacing: 0; line-height: 18px; overflow: scroll; -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; background: #fff; } .kd-city-picker-search-panel .kd-city-picker-search-panel-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: 7px 8px; cursor: pointer; } .kd-city-picker-search-panel .kd-city-picker-search-panel-item:hover { background: var(--kd-c-city-picker-color-background-hover, var(--kd-g-color-hover, #f5f5f5)); } .kd-city-picker-search-panel .kd-city-picker-search-panel-item .kd-city-picker-search-panel-item-left { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 168px; } .kd-city-picker-search-panel .kd-city-picker-search-panel-item .kd-city-picker-search-panel-item-right { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0; max-width: 112px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; color: #999999; } .kd-city-picker-search-keyword { color: var(--kd-c-city-picker-color, var(--theme-color, #5582f3)); } .kd-city-picker-no-data { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* ----------- 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 */ /* ----------- 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 { 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-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)); } /* ----------- 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 */ /* ----------- 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 { width: var(--kd-c-date-picker-sizing-width, 230px); 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)); } .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 input { font-size: var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)); } .kd-date-picker-small .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 1px); } .kd-date-picker-small.kd-date-picker-range .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 9px); } .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 input { font-size: var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)); } .kd-date-picker-large .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 1px); } .kd-date-picker-large.kd-date-picker-range .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-large-font-size, var(--kd-g-font-size-large, 16px)) + 9px); } .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 input { font-size: var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)); } .kd-date-picker-middle .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 1px); } .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear { right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 9px); } .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; } .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(--theme-color, #5582f3)); } .kd-date-picker:hover { border-color: var(--kd-c-date-picker-color-background-checked, var(--theme-color, #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-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-secondary, #666)); 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, var(--kd-g-color-text-secondary, #666)); } .kd-date-picker-input input::-moz-input-placeholder { color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666)); } .kd-date-picker-input input::-ms-input-placeholder { color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666)); } .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(--theme-color, #5582f3)); } .kd-date-picker-input input[disabled] { background: transparent; } .kd-date-picker-input-placeholder > input { color: var(--kd-c-date-picker-input-color-placeholder, var(--kd-g-color-text-secondary, #666)); } .kd-date-picker-range { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; 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(--theme-color, #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-icon-color, var(--kd-g-color-disabled, #b2b2b2)); line-height: 1; pointer-events: none; } .kd-date-picker-suffix > * { vertical-align: top; } .kd-date-picker:hover .kd-date-picker-clear { opacity: 1; } .kd-date-picker-clear { position: absolute; top: 50%; color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2)); 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-clear-color-background-hover, var(--theme-color-level5, #87adff)); } .kd-date-picker-focused .kd-date-picker-suffix { color: var(--kd-c-date-picker-clear-color-background-focused, var(--theme-color, #5582f3)); } .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: 999; 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(--theme-color-level5, #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(--theme-color, #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(--theme-color, #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(--theme-color-level5, #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(--theme-color, #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(--theme-color, #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(--theme-color-level5, #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(--theme-color, #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(--theme-color, #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; } .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(--theme-color-level5, #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; pointer-events: none; } .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(--theme-color, #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(--theme-color-level5, #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: 32px; height: 32px; text-align: center; line-height: 32px; 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(--theme-color, #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: 32px; 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(--theme-color, #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-end::before { right: 50%; } .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(--theme-color-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: rgba(0, 0, 0, 0.85); } .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-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; 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: 224px; 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: 0 0 196px 0; overflow-y: hidden; text-align: left; -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:not(:first-child) { border-left: 1px solid #f0f0f0; } .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; padding: 0 0 0 14px; 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(--theme-color-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: 34px; border-top: 1px solid #f0f0f0; border-bottom: 1px solid transparent; padding: 0 16px; 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(--theme-color, #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)); } /* ----------- 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 */ /* ----------- 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); } /* ----------- 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 */ /* ----------- 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-link { color: var(--theme-color, #5582f3); text-decoration: none; background-color: transparent; outline: noned; cursor: pointer; -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); -webkit-text-decoration-skip: objects; } .kd-dropdown-link.disabled, .kd-dropdown-link.disabled:hover { cursor: default; color: var(--kd-g-color-disabled, #b2b2b2); } .kd-dropdown-link:hover { color: var(--theme-color-level5, #87adff); } .kd-dropdown-trigger { outline: none; } .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-g-color-background, #fff); border-radius: var(--kd-g-radius-border, 2px); min-width: var(--kd-c-dropdown-menu-sizing-min-width, 136px); max-width: var(--kd-c-dropdown-menu-sizing-max-width, 320px); -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-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-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-g-color-background, #fff) transparent transparent 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-g-color-background, #fff) 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-g-color-background, #fff) 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-g-color-background, #fff) var(--kd-g-color-background, #fff); } .kd-dropdown-menu { max-height: var(--kd-c-dropdown-menu-sizing-max-height, 336px); padding: var(--kd-c-dropdown-menu-spacing-padding-vertical, 8px) 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):active, .kd-dropdown-menu-item:not(.disabled).selected { color: var(--theme-color, #5582f3); background-color: var(--kd-c-dropdown-item-color-background-active, var(--theme-color-1, #f2f8ff)); } .kd-dropdown-menu-item:not(.disabled):active > a, .kd-dropdown-menu-item:not(.disabled).selected > a { color: var(--theme-color, #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; } /* ----------- 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 */ /* ----------- 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)); } /* ----------- 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 */ /* ----------- 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; } .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; } .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; } .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); } .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: 40px; 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); } /* ----------- 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 */ /* ----------- 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-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: 5px; } .kd-form-field-hidden { display: none !important; } .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; 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 { 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; } /* ----------- 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 */ /* ----------- 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-col { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 calc(var(--cgap) / 2); } /* ----------- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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 { margin-right: 20px; cursor: pointer; } .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; } /* ----------- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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(--theme-color-level5, #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); } .kd-inputNumber-embedStep span:hover .kd-inputNumber-icon { color: var(--kd-c-input-number-color-theme-5, var(--theme-color-level5, #87adff)); } .kd-inputNumber-embedStep span:last-child { border-bottom: none; } /* ----------- 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 */ /* ----------- 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):hover { border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input:not(.kd-input-disabled):focus { color: #212121; border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #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):hover { border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-textarea:not(.kd-input-disabled):focus { color: #212121; border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #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)); } .kd-input-no-resize { resize: none; } .kd-input-borderless { border: 0; padding-left: 0 !important; } .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-c-input-affix-color-text, 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-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-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-wrapper { 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):hover { border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-wrapper:not(.kd-input-wrapper-disabled):focus { color: #212121; border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-wrapper .kd-input { border: none; padding-left: 0; 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, var(--kd-g-color-text-primary, #212121)); } .kd-input-wrapper .kd-input-suffix { margin-left: 4px; } .kd-input-wrapper .kd-input-prefix { margin-right: 4px; } .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-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-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-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 { border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .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):hover { border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-wrapper-textarea:not(.kd-input-disabled):focus { color: #212121; border-color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-wrapper-textarea .kd-input-textarea-clear-icon { position: absolute; right: 8px; top: -2px; } .kd-input-clear-icon, .kd-input-textarea-clear-icon { cursor: pointer; color: var(--kd-c-input-color-border-focused, var(--theme-color, #5582f3)); } .kd-input-clear-icon i, .kd-input-textarea-clear-icon i { vertical-align: middle; font-size: 12px !important; } .kd-input-clear-icon-hidden { visibility: hidden; } .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, var(--kd-g-color-text-primary, #212121)); 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)); 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; } /* ----------- 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 */ /* ----------- 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)); } /* ----------- 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 */ /* ----------- 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); } /* ----------- 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 */ /* ----------- 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 */ /* 多行显示省略号 */ /* 单行显示省略号 */ /** 浮层箭头样式 **/ .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)); } .light-hover { background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff)); color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5)); } .light-default { color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121)); background: #ffffff; } .kd-menu { position: relative; width: 100%; height: 100%; min-width: 138px; 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-item-active { color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff)); } .kd-menu-inline .kd-menu-submenu { padding-right: 0; } .kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover { color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff)); } .kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover, .kd-menu-vertical .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-vertical .kd-menu-submenu { padding-right: 0; } .kd-menu-vertical .kd-menu-submenu-sub { background: var(--kd-c-menu-sub-color-background, #121319); } .kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item:hover, .kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item-active { color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff)); } .kd-menu-vertical .kd-menu-submenu-sub-second, .kd-menu-vertical .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-vertical .kd-menu-submenu-sub-hide { 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-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-collapsed { width: 50px; min-width: auto; } .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-submenu-hover, .kd-menu-light .kd-menu-submenu-sub { color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121)); background: #ffffff; } .kd-menu-light .kd-menu-submenu-title:hover { color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5)); } .kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover { color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121)); background: #ffffff; } .kd-menu-light .kd-menu-item-active { background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff)); color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5)); } .kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):hover { background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff)); color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5)); } .kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub { -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-light.kd-menu-vertical .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover { color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5)); background: #fff; border: none; } .kd-menu-light.kd-menu-vertical .kd-menu-item-active { color: var(--kd-c-menu-light-color-text-active, var(--theme-color, #5582f3)); background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff)); border: none !important; } .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; } .kd-menu-item-title > span { 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)); } .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-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-item:not(.kd-menu-item-disabled):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-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; } .kd-menu-submenu-title > span { 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)); } .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-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-hover { color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)); } .kd-menu-submenu-sub { line-height: var(--kd-c-menu-item-sizing-height, 50px); color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65)); } .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 { 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); } /* ----------- 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 */ /* ----------- 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(--theme-color-level5, #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; } /* ----------- 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 */ /* ----------- 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-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); } .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(--theme-color-level5, #87adff)); } .kd-modal-container-box .kd-modal-header .kd-modal-close-icon:active { color: var(--kd-c-modal-color-theme-active, var(--theme-color-level7, #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)); } .kd-modal-ok-btn, .kd-modal-cancel-btn { min-width: 88px; min-height: 32px; font-size: var(--kd-c-modal-footer-font-size, 14px); } .kd-modal-margin-btn { margin-right: 20px; } .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)); } /* ----------- 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 */ /* ----------- 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(--theme-color, #5582f3)); } .kd-notice-info .kd-notice-content-title-close { color: var(--kd-c-notice-icon-color, var(--theme-color, #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(--theme-color, #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; } /* ----------- 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 */ /* ----------- 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)); } .kd-pagination .kd-pagination-total { display: inline-block; margin-right: 12px; vertical-align: middle; } .kd-pagination .kd-pagination-current { display: inline-block; margin-right: 12px; vertical-align: middle; } .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(--theme-color-level7, #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: inline-block; vertical-align: middle; } .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: inline-block; } .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; vertical-align: middle; -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(--theme-color-level7, #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(--theme-color, #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: inline-block; margin-left: 20px; outline: none; height: var(--kd-c-pagination-sizing-square, 24px); vertical-align: middle; } .kd-pagination .kd-pagination-selector .kd-pagination-selector-size { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; padding: 0; line-height: var(--kd-c-pagination-sizing-square, 24px); 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); 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(--theme-color, #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 { 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.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.bordered:active:not(.disabled) { border-color: var(--kd-c-pagination-color-border-hover, var(--theme-color-level7, #375cca)); } .kd-pagination.simple.bordered.disabled, .kd-pagination.simple.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.disabled > .kd-pagination-item { color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2)); } .kd-pagination.simple .kd-pagination-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: inline-block; height: var(--kd-c-pagination-sizing-square, 24px); overflow: hidden; margin: 0 8px; vertical-align: middle; color: var(--kd-g-color-text-primary, #212121); } .kd-pagination.simple .kd-pagination-item:first-child, .kd-pagination.simple .kd-pagination-item:last-child { margin: 0; } .kd-pagination.simple .kd-pagination-item .kd-pagination-current { margin-right: 2px; vertical-align: middle; } .kd-pagination.simple .kd-pagination-item .kd-pagination-current .kd-pagination-current-input { margin: 0; } .kd-pagination.simple .kd-pagination-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-item .kd-pagination-total { vertical-align: middle; margin-right: 0; } .kd-pagination.simple .kd-pagination-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; vertical-align: middle; -webkit-transition: border-color var(--kd-g-duration, 0.3s); transition: border-color var(--kd-g-duration, 0.3s); } .kd-pagination.simple .kd-pagination-item button:hover:not(:disabled), .kd-pagination.simple .kd-pagination-item button:active:not(:disabled) { border-color: var(--kd-c-pagination-color-border-hover, var(--theme-color-level7, #375cca)); } .kd-pagination.simple .kd-pagination-item button:hover i, .kd-pagination.simple .kd-pagination-item button:active i { color: var(--kd-c-pagination-color-text-hover, var(--theme-color, #5582f3)); } .kd-pagination.simple .kd-pagination-item button:disabled { cursor: not-allowed; } .kd-pagination.simple .kd-pagination-item button:disabled i { color: var(--kd-c-pagination-color-disabled, var(--kd-g-color-disabled, #b2b2b2)); } .kd-pagination.simple .kd-pagination-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: inline-block; margin-right: var(--kd-c-pagination-button-spacing, 4px); vertical-align: middle; } .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, .kd-pagination.less .kd-pagination-pages-item:first-child button, .kd-pagination.less .kd-pagination-pages-item:last-child button { color: var(--theme-color, #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(--theme-color-level7, #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); } .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: inline-block; } .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: inline-block; margin-right: var(--kd-c-pagination-button-spacing, 4px); vertical-align: middle; } .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(--theme-color-level7, #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(--theme-color, #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; 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(--theme-color, #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: inline-block; margin-left: 4px; vertical-align: middle; } .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(--theme-color-level7, #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'; width: var(--kd-c-pagination-sizing-square, 24px); height: var(--kd-c-pagination-sizing-square, 24px); margin-left: var(--kd-c-pagination-button-spacing, 4px); line-height: var(--kd-c-pagination-sizing-square, 24px); vertical-align: top; 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(--theme-color, #5582f3); border-color: var(--kd-c-pagination-color-border-hover, var(--theme-color-level7, #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: inline-block; margin-left: 22px; outline: none; height: var(--kd-c-pagination-sizing-square, 24px); color: var(--kd-g-color-text-primary, #212121); vertical-align: middle; } .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; min-width: 64px; height: var(--kd-c-pagination-sizing-square, 24px); margin-right: 8px; padding: 0 24px 0 4px; line-height: var(--kd-c-pagination-sizing-square, 24px); font-size: var(--kd-c-pagination-font-size, var(--kd-g-font-size-small, 12px)); color: var(--kd-g-color-text-primary, #212121); text-align: left; 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(--theme-color-level7, #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)); color: var(--kd-c-pagination-color-text-hover, var(--theme-color, #5582f3)); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .kd-pagination.nicety .kd-pagination-options .kd-pagination-options-size .kd-pagination-dropdown-icon-open { -webkit-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%); } .kd-pagination-dropdown-icon { -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-dropdown-icon-open { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /* ----------- 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 */ /* ----------- 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); } /* ----------- 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 */ /* ----------- 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%; } .kd-progress-type-circle .kd-progress-special-text { padding: 0; } .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 .kd-progress-outer { margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 3 - 8px); padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 3 + 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)*3); 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)*3 + 8px); } .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); } /* ----------- 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 */ /* ----------- 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)); } .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(--theme-color, #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; } .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(--theme-color, #5582f3)); } .kd-radio:hover::before { border-color: var(--kd-c-radio-color-theme, var(--theme-color, #5582f3)); } .kd-radio-checked::before { border-color: var(--kd-c-radio-color-theme, var(--theme-color, #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(--theme-color, #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; } .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(--theme-color, #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:hover { color: var(--kd-c-radio-color-theme, var(--theme-color, #5582f3)); border-color: var(--kd-c-radio-color-theme, var(--theme-color, #5582f3)); } .kd-radio-square-checked { border-color: var(--kd-c-radio-color-theme, var(--theme-color, #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(--theme-color, #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'; 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; } .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:hover { color: var(--kd-c-radio-color-theme, var(--theme-color, #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(--theme-color, #5582f3)); background-color: var(--kd-c-radio-color-theme, var(--theme-color, #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::before { background-color: var(--kd-c-radio-color-theme, var(--theme-color, #5582f3)); } .kd-radio-button-checked:first-child { border-left-color: var(--kd-c-radio-color-theme, var(--theme-color, #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; } /* ----------- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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)); } .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(--theme-color, #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(--theme-color, #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(--theme-color, #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)); } .kd-quick-search:hover:not(.kd-quick-search-disabled) { border-color: var(--kd-c-search-color-theme, var(--theme-color, #5582f3)); } .kd-quick-search:hover:not(.kd-quick-search-disabled) .kd-quick-search-prefix { color: var(--kd-c-search-color-theme, var(--theme-color, #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(--theme-color, #5582f3)); } .kd-quick-search-focused:not(.kd-quick-search-disabled) .kd-quick-search-prefix { color: var(--kd-c-search-color-theme, var(--theme-color, #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; } .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-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, #2386ee)); } .kd-quick-search-npl-loading-item:nth-child(2) { background-color: #00ccfe; } .kd-quick-search-npl-loading-item:nth-child(3) { background-color: #05c8c8; } .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 .kd-input-clear-icon { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--kd-c-search-color-end, var(--kd-g-color-end, #666)); position: relative; } .kd-search-panel .kd-input-clear-icon .kdicon { position: absolute; right: 2.5px; top: -2px; color: #fff; } .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; } /* ----------- 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 */ /* ----------- 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; margin: 0 8px 2px 0; vertical-align: middle; } .kd-select-selector:hover .kd-select-icon-active { color: #3761ca; } .kd-select-visible .kd-select-icon-active { color: #3761ca; } .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-arrow-focus { color: var(--kd-c-select-color-border-foucs, var(--theme-color, #5582f3)); } .kd-select-icon-clear { opacity: 0; -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(--theme-color, #5582f3)); } .kd-select-selection-search { position: absolute; top: 0; bottom: 0; left: 11px; } .kd-select-selection-search-input { opacity: 0; margin: 0; padding: 0; background: 0 0; border: none; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .kd-select-selection-search-input:hover { cursor: pointer; } .kd-select-focused { border-color: var(--kd-c-select-color-border-foucs, var(--theme-color, #5582f3)) !important; } .kd-select-placeholder { color: var(--kd-c-select-placeholder-color-text, #b2b2b2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .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) { border-bottom: 1px solid var(--kd-c-select-color-border-hover, var(--theme-color, #5582f3)); } .kd-select-bordered { border: 1px solid var(--kd-c-select-border-color-border, var(--kd-g-color-border-strong, #d9d9d9)); padding-left: 8px !important; border-radius: 2px; } .kd-select-bordered:hover:not(.kd-select-multiple-disabled):not(.kd-select-single-disabled) { border: 1px solid var(--kd-c-select-color-border-hover, var(--theme-color, #5582f3)); } .kd-select-bordered .kd-select-suffix { right: 10px; } .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: 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; } .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: 4px 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-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 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: auto; flex: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kd-select-item-option:hover:not(.kd-select-item-option-selected):not(.kd-select-item-option-disabled) { background-color: var(--kd-c-select-color-background, #f5f5f5); } .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(--theme-color, #5582f3)); background-color: var(--kd-c-select-color-background-selected, var(--theme-color-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, var(--kd-g-color-background-contain-disabled, #f5f5f5)); } .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); line-height: var(--kd-c-select-line-height-small, 14px); font-size: var(--kd-c-select-font-size-small, 12px); } .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); line-height: var(--kd-c-select-line-height-middle, 22px); font-size: var(--kd-c-select-font-size-middle, 14px); } .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); line-height: var(--kd-c-select-line-height-large, 28px); font-size: var(--kd-c-select-font-size-large, 16px); } .kd-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-select-single-focused { border-color: var(--kd-c-select-color-border-foucs, var(--theme-color, #5582f3)) !important; } .kd-select-single-disabled { background-color: var(--kd-c-select-color-background-disabled, #f5f5f5); color: var(--kd-c-select-color-text-disabled, #212121); } .kd-select-single-disabled:hover { cursor: not-allowed; } .kd-select-single-disabled .kd-select-suffix { color: var(--kd-c-select-arrow-icon-color-text-disabled, #b2b2b2); } .kd-select-single:hover .kd-select-icon-clear { opacity: 1; } .kd-select-single-text { color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kd-select-single-disabled-text { color: var(--kd-c-select-color-text-disabled, #212121); } .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%; 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-select .kd-select-selection-item-small { height: 18px; line-height: 18px; font-size: 12px; } .kd-select .kd-select-selection-item-middle { font-size: 12px; height: 18px; line-height: 18px; } .kd-select .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-disabled { cursor: not-allowed; background-color: var(--kd-c-select-color-background-disabled, #f5f5f5); color: var(--kd-c-select-color-text-disabled, #212121); } .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-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(--theme-color, #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: 32px; line-height: 32px; 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 > span { color: var(--kd-c-select-footer-color-text-selected, #0e5fd8); padding: 0 2px; } .kd-select.topLeft.hidden, .kd-select.bottomLeft.hidden, .kd-select.topRight.hidden, .kd-select.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); } /* ----------- 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 */ /* ----------- 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(--theme-color, #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(--theme-color, #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(--theme-color, #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(--theme-color, #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(--theme-color-level5, #87adff)); } .kd-slider:not(.kd-slider-disabled):hover .kd-slider-track { background-color: var(--kd-c-slider-track-color-background-hover, var(--theme-color-level5, #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; } /* ----------- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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: 50px; height: 50px; padding: 5px; -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-sizing, 15px); height: var(--kd-c-spin-page-sizing, 15px); background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee)); border-radius: 50%; } .kd-spin-page .kd-spin-dot-item:nth-child(2n+1) { margin-right: 10px; -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, #00ccfe)); -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, #05c8c8)); -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.3); transform: scale(1.3); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pageLoading { 50% { -webkit-transform: scale(1.3); transform: scale(1.3); } 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, 5px); height: var(--kd-c-spin-dot-container-sizing, 5px); background-color: var(--kd-c-spin-dot-color-backgroung-first, var(--kd-g-color-logo-1, #2386ee)); 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, #00ccfe)); -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, #05c8c8)); -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: 13px; height: 13px; border: 1px solid var(--kd-c-spin-component-dot-color-border, #e1e1e1); 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: 13px; height: 13px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid transparent; border-right-color: var(--kd-c-spin-component-dot-item-color-border, var(--theme-color, #5582f3)); border-radius: 50%; position: absolute; top: -1px; left: -1px; -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; } /* ----------- 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 */ /* ----------- 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; -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-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; -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-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(--theme-color, #5582f3)) !important; border-color: var(--kd-c-split-panel-arrow-color-background-hover, var(--theme-color, #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-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-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; } /* ----------- 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 */ /* ----------- 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 { width: 100px; height: var(--kd-c-stepper-input-middle-sizing-height, 28px); } .kd-inputNumber 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-icon { font-size: 14px; } .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-stepper-input-small-sizing-height, 20px); } .kd-inputNumber-baseStep-middle { width: var(--kd-c-stepper-input-middle-sizing-height, 28px); } .kd-inputNumber-baseStep-large { width: var(--kd-c-stepper-input-large-sizing-height, 36px); } .kd-inputNumber-baseStep .kd-inputNumber-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-baseStep .kd-inputNumber-icon:hover { color: var(--kd-c-stepper-icon-color-hover, var(--theme-color, #5582f3)); } .kd-inputNumber-baseStep:hover:not(.kd-inputNumber-baseStep-disabled) .kd-inputNumber-icon { color: var(--kd-c-stepper-icon-color-hover, var(--theme-color, #5582f3)); } .kd-inputNumber-baseStep-disabled { cursor: not-allowed; } .kd-inputNumber-baseStep-disabled .kd-inputNumber-icon { color: unset !important; } .kd-inputNumber-baseStep-decrease { border-right: 1px solid var(--kd-c-stepper-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: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-middle, .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-middle { margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-baseStep-decrease.kd-inputNumber-baseStep-large, .kd-inputNumber-baseStep-decrease.kd-inputNumber-embedStep-large { margin-left: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-baseStep-increase { border-left: 1px solid var(--kd-c-stepper-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: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-middle, .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-middle { margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-baseStep-increase.kd-inputNumber-baseStep-large, .kd-inputNumber-baseStep-increase.kd-inputNumber-embedStep-large { margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 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-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-embedStep.kd-inputNumber-baseStep-small, .kd-inputNumber-embedStep.kd-inputNumber-embedStep-small { margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-embedStep.kd-inputNumber-baseStep-middle, .kd-inputNumber-embedStep.kd-inputNumber-embedStep-middle { margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 9px)); } .kd-inputNumber-embedStep.kd-inputNumber-baseStep-large, .kd-inputNumber-embedStep.kd-inputNumber-embedStep-large { margin-right: calc(-1 * var(--kd-c-stepper-input-spacing-padding-horizontal, 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-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-embedStep span .kd-inputNumber-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-embedStep span:hover .kd-inputNumber-icon { color: var(--kd-c-stepper-icon-color-hover, var(--theme-color, #5582f3)); } .kd-inputNumber-embedStep span:last-child { border-bottom: none; } .kd-inputNumber-embedStep-disabled { cursor: not-allowed !important; } .kd-inputNumber-embedStep-disabled .kd-inputNumber-icon { color: unset !important; } /* ----------- 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 */ /* ----------- 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(--theme-color, #5582f3)); border-color: var(--kd-c-steps-color-hover, var(--theme-color, #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(--theme-color, #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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .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); overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; } .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); overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; width: var(--kd-c-steps-vertical-description-sizing-width, 200px); } .kd-steps-item-process { color: var(--kd-c-steps-color-hover, var(--theme-color, #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(--theme-color, #5582f3)); border-color: var(--kd-c-steps-color-hover, var(--theme-color, #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(--theme-color, #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; } /* ----------- 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 */ /* ----------- 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(--theme-color-level6, #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(--theme-color-level4, #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, 14px); 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); } /* ----------- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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); } .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); } .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; line-height: 40px; margin-right: 8px; } .kd-tabs-left-operations::after { position: absolute; content: ''; width: 1px; height: 28px; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)); } .kd-tabs-left-operations-item { padding: 0 12px; cursor: pointer; } .kd-tabs-right-operations { position: relative; line-height: 40px; } .kd-tabs-right-operations::before { position: absolute; content: ''; width: 1px; height: 100%; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)); } .kd-tabs-right-operations-item { padding: 0 12px; cursor: pointer; } .kd-tabs-more-btn { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 48px; height: 100%; line-height: 46px; text-align: center; cursor: pointer; } .kd-tabs-more-btn:hover { color: var(--kd-c-tabs-color-text-hover, var(--theme-color, #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-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; } .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: 40px; } .kd-tabs-navs-dynamic .kd-tabs-tab-wrap { height: 40px; } .kd-tabs-navs-dynamic .kd-tabs-more-btn { line-height: 40px; } .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-line-height, 48px); margin-right: var(--kd-c-tabs-pane-spacing-margin-right, 24px); 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)); } .kd-tab-pane-text-active, .kd-tab-pane-text:hover { color: var(--kd-c-tabs-color-text-active, var(--theme-color, #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-card { margin-right: 0; } .kd-tab-pane-type-card .kd-tab-pane-text { padding: 0 24px; } .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(--theme-color, #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: unset; } .kd-tab-pane-type-card.kd-tab-pane-left, .kd-tab-pane-type-card.kd-tab-pane-right { width: 100%; padding: 0; text-align: center; 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-left { border-left: 1px solid transparent; } .kd-tab-pane-type-card.kd-tab-pane-left.kd-tab-pane-box-active { border-left: 2px solid var(--kd-c-tabs-line-color-active, var(--theme-color, #5582f3)); border-right: 1px solid transparent; } .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(--theme-color, #5582f3)); border-left: 1px 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(--theme-color, #5582f3)) var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)); } .kd-tab-pane-type-dynamic { height: 40px; line-height: 40px; margin: 0 0 0 8px; 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:hover .kd-tab-pane-operations span:first-child { opacity: 1; cursor: pointer; } .kd-tab-pane-type-dynamic .kd-tab-pane-operations .kdicon { font-size: 14px; } .kd-tab-pane-type-grid { height: 24px; line-height: 22px; padding: 0 19px; 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(--theme-color, #5582f3)); border: 1px solid var(--kd-c-tabs-line-color-active, var(--theme-color, #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, var(--kd-g-color-background-2, #f2f2f2)); } .kd-tab-pane-type-grid:hover { color: var(--kd-c-tabs-color-text-active, var(--theme-color, #5582f3)); } .kd-tab-pane-operations { position: relative; display: inline-block; line-height: 1; padding: 0 18px 0 8px; } .kd-tab-pane-operations span:first-child { display: inline-block; vertical-align: top; font-size: 0; opacity: 0; } .kd-tab-pane-operations::after { position: absolute; content: ''; width: 1px; height: 14px; background-color: var(--kd-c-tabs-color-border, var(--kd-g-color-border-strong, #d9d9d9)); right: 0; top: 50%; opacity: 1; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .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(--theme-color, #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; height: 100%; line-height: 46px; text-align: center; cursor: pointer; } .kd-arrow-button:hover { color: var(--kd-c-tabs-color-text-hover, var(--theme-color, #5582f3)); } .kd-arrow-button-line { width: 24px; } .kd-arrow-button-dynamic { width: 24px; line-height: 40px; } .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; } /* ----------- 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 */ /* ----------- 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-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); } .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); } .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); } .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(--theme-color, #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(--theme-color, #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; } .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; } /* ----------- 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 */ /* ----------- 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; font-variant: tabular-nums; -webkit-font-feature-settings: 'tnum'; font-feature-settings: 'tnum'; margin: 0; padding: 0; 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, 26px); 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((9px - 1px) / 2); height: calc(100% - 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: 9px; height: 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(--theme-color, #5582f3)); background-color: var(--kd-c-timeline-finished-color, var(--theme-color, #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(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 * (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)); } .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 * (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 * (9px - 1px) / 2); } .kd-timeline.right .kd-timeline-item-dot.custom { margin-right: 1px; } .kd-timeline.right .kd-timeline-item .kd-timeline-item-content { left: 0; text-align: right; margin: 0 calc(2 * (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) + (9px / 2)); } .kd-timeline.label.left .kd-timeline-item-dot { margin-left: calc(-1 * (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(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) + (9px / 2)); } .kd-timeline.label.right .kd-timeline-item-dot { margin-right: calc(-1 * (9px - 1px) / 2); } .kd-timeline.label.right .kd-timeline-item-dot.custom { right: calc(-1 * (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(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 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) - 9px / 2); width: calc(50% - (2 * (9px - var(--kd-c-timeline-sizing-width, 1px)) + 8px) + 9px / 2); text-align: left; } .kd-timeline.pending .kd-timeline-item.last .kd-timeline-item-tail { display: block; height: calc(100% - 14px); border-left: 2px 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 { top: 15px; display: block; height: calc(100% - 15px); border-left: 2px 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; } /* ----------- 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 */ /* ----------- 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-vertical, 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-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2); opacity: 1; z-index: var(--kd-g-z-index-popper, 1050); visibility: visible; } .kd-tooltip.hidden { opacity: 0; visibility: hidden; } .kd-tooltip.arrow::before { position: absolute; z-index: -2; background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)); border-style: solid; border-width: var(--arrowSize); -webkit-transform: rotate(45deg); transform: rotate(45deg); content: ''; } .kd-tooltip.arrow::after { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ''; background: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)); border-radius: var(--kd-g-radius-border, 2px); } .kd-tooltip.arrow.bottomLeft::before, .kd-tooltip.arrow.bottom::before, .kd-tooltip.arrow.bottomRight::before { left: var(--arrowLeft); top: var(--arrowSpill); -webkit-box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1); box-shadow: -2px -2px calc(6px - 1px) rgba(0, 0, 0, 0.1); border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)); } .kd-tooltip.arrow.topLeft::before, .kd-tooltip.arrow.top::before, .kd-tooltip.arrow.topRight::before { left: var(--arrowLeft); bottom: var(--arrowSpill); -webkit-box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15); box-shadow: 3px 3px calc(6px + 1px) rgba(0, 0, 0, 0.15); border-color: transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent; } .kd-tooltip.arrow.leftTop::before, .kd-tooltip.arrow.left::before, .kd-tooltip.arrow.leftBottom::before { top: var(--arrowTop); right: var(--arrowSpill); -webkit-box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12); box-shadow: 3px 0 6px rgba(0, 0, 0, 0.12), 0 -2px 6px rgba(204, 149, 149, 0.12); border-color: var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) transparent transparent; } .kd-tooltip.arrow.rightTop::before, .kd-tooltip.arrow.right::before, .kd-tooltip.arrow.rightBottom::before { top: var(--arrowTop); left: var(--arrowSpill); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), -2px 0 6px rgba(0, 0, 0, 0.1); border-color: transparent transparent var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)) var(--kd-c-tooltip-color-background, var(--kd-g-color-background, #fff)); } /* ----------- 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 */ /* ----------- 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: 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: 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(--theme-color, #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-operation .kd-btn .kd-btn-iconWrapper-left { float: none; } /* ----------- 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 */ /* ----------- 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 { 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)); } .kd-tree-root { min-width: 100%; -ms-flex-negative: 0; flex-shrink: 0; } .kd-tree-plantom { position: absolute; min-width: 100%; z-index: -1; } .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-fb-children-pointerEvents * { pointer-events: none; } .kd-tree-node-item { height: var(--kd-c-tree-node-sizing-height, 32px); 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: 1px; border-top: 0; border-left: 11px; border-bottom: 0; border-right: 10px; border-color: white; border-style: solid; height: var(--kd-c-tree-node-sizing-height, 32px); cursor: default; opacity: 0; } .kd-tree-node-indent-line { background-color: black; opacity: 1; } .kd-tree-node-icon { cursor: pointer; height: var(--kd-c-tree-expand-icon-sizing-height, 22px); width: var(--kd-c-tree-expand-icon-sizing-width, 22px); 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-hidden { height: var(--kd-c-tree-node-icon-sizing-height, 20px); width: var(--kd-c-tree-node-icon-sizing-width, 20px); -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 { white-space: nowrap; margin-left: 6px; } .kd-tree-node-selected { background-color: var(--kd-c-tree-node-color-backgroung-checked, var(--theme-color-3, #e3eeff)) !important; color: var(--kd-c-tree-node-color-text-checked, var(--theme-color, #5582f3)); } .kd-tree-node-selected .kd-tree-node-title { color: var(--kd-c-tree-node-color-text-checked, var(--theme-color, #5582f3)); } .kd-tree-node-selected .kd-tree-node-icon { color: var(--kd-c-tree-node-color-text-checked, var(--theme-color, #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-drag-line { position: absolute; left: 0; top: 100%; width: 100%; border-top: 1px solid #fc8555; } .kd-tree-node-leaf-icon { height: var(--kd-c-tree-node-icon-sizing-height, 20px); width: var(--kd-c-tree-node-icon-sizing-width, 20px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* ----------- color ——————---- 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 */ /* ----------- 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; } /* ----------- 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 */ /* ----------- 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: 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: 12px 20px; 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); background-color: var(--kd-c-upload-color-background-hover, var(--kd-g-color-hover, #f5f5f5)); } .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-name { display: inline-block; margin: 0 5px; 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: 12px 20px; background-color: 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, #ff8088)); } .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: 5px; 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; } .station-container { height: 100%; display: flex; flex-direction: column; } .station-container .chart_wrapper { height: 100%; }