@opentiny/vue-theme/transfer/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-transfer{--tv-Transfer-font-size:var(--tv-font-size-default, 14px);--tv-Transfer-buttons-padding-left:var(--tv-space-xl, 16px);--tv-Transfer-buttons-padding-right:var(--tv-space-xl, 16px);--tv-Transfer-buttons-padding-top:0;--tv-Transfer-buttons-padding-bottom:0;--tv-Transfer-buttons-defaultButton-margin-left:0;--tv-Transfer-buttons-defaultButton-margin-right:0;--tv-Transfer-buttons-defaultButton-margin-top:var(--tv-space-lg, 12px);--tv-Transfer-buttons-defaultButton-margin-bottom:0;--tv-Transfer-buttons-margin-left:0;--tv-Transfer-buttons-margin-right:0;--tv-Transfer-buttons-margin-top:0;--tv-Transfer-buttons-margin-bottom:var(--tv-space-md, 8px);--tv-Transfer-button-margin-left:auto;--tv-Transfer-button-margin-right:auto;--tv-Transfer-button-margin-top:0;--tv-Transfer-button-margin-bottom:0;--tv-Transfer-button-bg-color:var(--tv-color-bg-active-control, #1476ff);--tv-Transfer-button-padding-left:var(--tv-space-xs, 2px);--tv-Transfer-button-padding-right:var(--tv-space-xs, 2px);--tv-Transfer-button-padding-top:var(--tv-space-xs, 2px);--tv-Transfer-button-padding-bottom:var(--tv-space-xs, 2px);--tv-Transfer-button-border-radius:var(--tv-border-radius-sm, 4px);--tv-Transfer-button-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Transfer-button-disabled-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-Transfer-button-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Transfer-button-disabled-line-height:1;--tv-Transfer-first-button-margin-bottom:var(--tv-space-lg, 12px);--tv-Transfer-panel-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Transfer-panel-body-height:260px;--tv-Transfer-panel-border-color:var(--tv-color-border, #c2c2c2);--tv-Transfer-panel-border-radius:var(--tv-border-radius-md, 6px);--tv-Transfer-panel-item-height:32px;--tv-Transfer-panel-item-text-color:var(--tv-color-text, #191919);--tv-Transfer-panel-item-hover-text-color:var(--tv-color-text, #191919);--tv-Transfer-panel-item-hover-bg-color:var(--tv-color-bg, #f5f5f5);--tv-Transfer-panel-item-active-bg-color:var(--tv-color-bg-active-emphasize-light, #f0f7ff);--tv-Transfer-panel-filter-height:32px;--tv-Transfer-panel-filter-font-size:var(--tv-font-size-default, 14px);--tv-Transfer-panel-filter-border-radius:var(--tv-border-radius-md, 6px);--tv-Transfer-panel-body-filter-height:216px;--tv-Transfer-panel-body-padding-right:var(--tv-space-xs, 2px);--tv-Transfer-panel-body-padding-left:0;--tv-Transfer-panel-body-footer-padding-bottom:40px;--tv-Transfer-panel-body-footer-height:calc(100% - 40px);--tv-Transfer-panel-width:200px;--tv-Transfer-header-height:38px;--tv-Transfer-header-bg-color:var(--tv-color-bg-secondary, #fff);--tv-Transfer-header-border-color:var(--tv-color-border-divider, #f0f0f0);--tv-Transfer-header-text-color:var(--tv-color-text, #191919);--tv-Transfer-header-span-text-color:var(--tv-color-text, #191919);--tv-Transfer-header-font-size:var(--tv-font-size-default, 14px);--tv-Transfer-header-sort-width:20px;--tv-Transfer-header-sort-icon-color:var(--tv-color-icon-control, #191919);--tv-Transfer-footer-height:40px;--tv-Transfer-footer-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Transfer-footer-border-color:var(--tv-color-border, #c2c2c2);--tv-Transfer-empty-height:30px;--tv-Transfer-empty-text-color:var(--tv-color-text-weaken, #808080);--tv-Transfer-panel-body-tree-height:100%;--tv-Transfer-panel-body-tree-padding-left:var(--tv-space-md, 8px);--tv-Transfer-panel-body-tree-padding-right:var(--tv-space-md, 8px);--tv-Transfer-panel-body-tree-padding-top:0;--tv-Transfer-panel-body-tree-padding-bottom:var(--tv-space-md, 8px);--tv-Transfer-panel-body-tree-filter-height:calc(100% - 50px);--tv-Transfer-panel-body-list-margin-left:0;--tv-Transfer-panel-body-list-margin-right:0;--tv-Transfer-panel-body-list-margin-top:0;--tv-Transfer-panel-body-list-margin-bottom:0;--tv-Transfer-panel-body-list-padding-left:0;--tv-Transfer-panel-body-list-padding-right:0;--tv-Transfer-panel-body-list-padding-top:4px;--tv-Transfer-panel-body-list-padding-bottom:4px;--tv-Transfer-panel-body-filter-padding-top:0;--tv-Transfer-panel-item-padding-left:var(--tv-space-xl, 16px);--tv-Transfer-panel-item-checkbox-padding-left:22px;--tv-Transfer-panel-filter-padding-left:var(--tv-space-xl, 16px);--tv-Transfer-panel-filter-padding-right:var(--tv-space-xl, 16px);--tv-Transfer-panel-filter-padding-top:var(--tv-space-md, 8px);--tv-Transfer-panel-filter-padding-bottom:var(--tv-space-md, 8px);--tv-Transfer-header-margin-left:0;--tv-Transfer-header-margin-right:0;--tv-Transfer-header-margin-top:0;--tv-Transfer-header-margin-bottom:0;--tv-Transfer-header-padding-left:var(--tv-space-xl, 16px);--tv-Transfer-header-padding-right:var(--tv-space-xl, 16px);--tv-Transfer-header-padding-top:0;--tv-Transfer-header-padding-bottom:0;--tv-Transfer-header-span-font-weight:var(--tv-font-weight-regular, normal);--tv-Transfer-header-sort-margin-right:var(--tv-space-md, 8px);--tv-Transfer-header-sort-border-radius:50%;--tv-Transfer-footer-margin-left:0;--tv-Transfer-footer-margin-right:0;--tv-Transfer-footer-margin-top:0;--tv-Transfer-footer-margin-bottom:0;--tv-Transfer-footer-padding-left:0;--tv-Transfer-footer-padding-right:0;--tv-Transfer-footer-padding-top:0;--tv-Transfer-footer-padding-bottom:0;--tv-Transfer-footer-checkbox-padding-left:20px;--tv-Transfer-empty-padding-top:6px;--tv-Transfer-empty-padding-right:15px;--tv-Transfer-empty-padding-bottom:0;--tv-Transfer-empty-padding-left:0;--tv-Transfer-table-padding-left:var(--tv-space-md, 8px);--tv-Transfer-table-padding-top:0;--tv-Transfer-table-padding-right:var(--tv-space-md, 8px);--tv-Transfer-table-padding-bottom:0;--tv-Transfer-pager-padding-left:10px;--tv-Transfer-pager-padding-top:10px;--tv-Transfer-pager-padding-right:10px;--tv-Transfer-pager-padding-bottom:10px;--tv-Transfer-checkbox-label-padding-left:var(--tv-space-md, 8px);--tv-Transfer-button-width:16px;--tv-Transfer-button-height:16px;--tv-Transfer-svg-font-size:10px;--tv-Transfer-svg-color:var(--tv-color-icon-inverse, #ffffff);--tv-Transfer-text-color:var(--tv-color-text-inverse, #ffffff);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--tv-Transfer-font-size)}.tiny-transfer__buttons{padding-left:var(--tv-Transfer-buttons-padding-left);padding-right:var(--tv-Transfer-buttons-padding-right);padding-top:var(--tv-Transfer-buttons-padding-top);padding-bottom:var(--tv-Transfer-buttons-padding-bottom)}.tiny-transfer__buttons .defaultButton{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-transfer__buttons .defaultButton .tiny-button+.tiny-button{margin-left:var(--tv-Transfer-buttons-defaultButton-margin-left)}.tiny-transfer__buttons .defaultButton+.tiny-button{margin-right:var(--tv-Transfer-buttons-defaultButton-margin-right);margin-top:var(--tv-Transfer-buttons-defaultButton-margin-top);margin-bottom:var(--tv-Transfer-buttons-defaultButton-margin-bottom)}.tiny-transfer__buttons .tiny-button{min-width:auto;margin-left:var(--tv-Transfer-buttons-margin-left);margin-right:var(--tv-Transfer-buttons-margin-right);margin-top:var(--tv-Transfer-buttons-margin-top);margin-bottom:var(--tv-Transfer-buttons-margin-bottom)}.tiny-transfer__button{display:block;margin-left:var(--tv-Transfer-button-margin-left);margin-right:var(--tv-Transfer-button-margin-right);margin-top:var(--tv-Transfer-button-margin-top);margin-bottom:var(--tv-Transfer-button-margin-bottom);background-color:var(--tv-Transfer-button-bg-color);width:var(--tv-Transfer-button-width);height:var(--tv-Transfer-button-height);border-radius:var(--tv-Transfer-button-border-radius);line-height:normal;padding-left:var(--tv-Transfer-button-padding-left);padding-right:var(--tv-Transfer-button-padding-right);padding-top:var(--tv-Transfer-button-padding-top);padding-bottom:var(--tv-Transfer-button-padding-bottom);text-overflow:clip}.tiny-transfer__button:not(.is-disabled){border-color:var(--tv-Transfer-button-bg-color)!important}.tiny-transfer__button.is-with-texts{border-radius:var(--tv-Transfer-button-border-radius);min-width:60px}.tiny-transfer__button.tiny-button:not(.is-circle) .tiny-svg{font-size:var(--tv-Transfer-svg-font-size);margin-right:0;fill:var(--tv-Transfer-svg-color)}.tiny-transfer__button.tiny-button:not(.is-disabled){background-color:var(--tv-Transfer-button-bg-color)}.tiny-transfer__button:first-child{margin-bottom:var(--tv-Transfer-first-button-margin-bottom)}.tiny-transfer__button:nth-child(2){margin:0}.tiny-transfer__button i,.tiny-transfer__button span{font-size:var(--tv-Transfer-font-size);-webkit-transform:translateY(-3px);transform:translateY(-3px);display:inline-block;color:var(--tv-Transfer-text-color)}.tiny-transfer__button [class*=tiny-icon]+span{margin-left:0}.tiny-transfer .tiny-transfer__button.is-disabled,.tiny-transfer .tiny-transfer__button.is-disabled:hover{border:1px solid var(--tv-Transfer-button-disabled-border-color);background-color:var(--tv-Transfer-button-disabled-bg-color);color:var(--tv-Transfer-button-disabled-text-color);line-height:var(--tv-Transfer-button-disabled-line-height)}.tiny-transfer .tiny-transfer__button.is-disabled .tiny-svg,.tiny-transfer .tiny-transfer__button.is-disabled:hover .tiny-svg{fill:var(--tv-Transfer-button-disabled-text-color)}.tiny-transfer-panel{border:1px solid var(--tv-Transfer-panel-border-color);border-radius:var(--tv-Transfer-panel-border-radius);overflow:hidden;background:var(--tv-Transfer-panel-bg-color);width:var(--tv-Transfer-panel-width);max-height:100%;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tiny-transfer-panel__body{position:relative;height:var(--tv-Transfer-panel-body-height);overflow:auto;text-align:left;padding-right:var(--tv-Transfer-panel-body-padding-right);padding-left:var(--tv-Transfer-panel-body-padding-left);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-transfer-panel__body .tiny-table.simple table tbody tr:has(tdsvg.is-check){background-color:var(--tv-Transfer-panel-item-active-bg-color)}.tiny-transfer-panel__body .tiny-tree{height:var(--tv-Transfer-panel-body-tree-height);padding-left:var(--tv-Transfer-panel-body-tree-padding-left);padding-right:var(--tv-Transfer-panel-body-tree-padding-right);padding-top:var(--tv-Transfer-panel-body-tree-padding-top);padding-bottom:var(--tv-Transfer-panel-body-tree-padding-bottom);overflow:auto}.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar{width:8px;height:8px}.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-track-piece{background:#fafafa}.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb{background:#bfbfbf;border-radius:calc(8px / 2)}.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb:hover{background:#999}.tiny-transfer-panel__body .tiny-tree::-webkit-scrollbar-thumb:active{background:#999}.tiny-transfer-panel__body .tiny-transfer-panel__filter~.tiny-tree{height:var(--tv-Transfer-panel-body-tree-filter-height)}.tiny-transfer-panel__list{margin-left:var(--tv-Transfer-panel-body-list-margin-left);margin-right:var(--tv-Transfer-panel-body-list-margin-right);margin-top:var(--tv-Transfer-panel-body-list-margin-top);margin-bottom:var(--tv-Transfer-panel-body-list-margin-bottom);padding-left:var(--tv-Transfer-panel-body-list-padding-left);padding-right:var(--tv-Transfer-panel-body-list-padding-right);padding-top:var(--tv-Transfer-panel-body-list-padding-top);padding-bottom:var(--tv-Transfer-panel-body-list-padding-bottom);list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:block}.tiny-transfer-panel__list.tiny-checkbox-group{display:block}.tiny-transfer-panel__list.is-filterable{padding-top:var(--tv-Transfer-panel-body-filter-padding-top)}.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar{width:8px;height:8px}.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-track-piece{background:#fafafa}.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb{background:#bfbfbf;border-radius:calc(8px / 2)}.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb:hover{background:#999}.tiny-transfer-panel .tiny-transfer-panel__list::-webkit-scrollbar-thumb:active{background:#999}.tiny-transfer-panel__item{line-height:var(--tv-Transfer-panel-item-height);padding-left:var(--tv-Transfer-panel-item-padding-left);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transition:all .5s;transition:all .5s}.tiny-transfer-panel__item+.tiny-transfer-panel__item{margin-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-transfer-panel__item:hover{background:var(--tv-Transfer-panel-item-hover-bg-color);color:var(--tv-Transfer-panel-item-hover-text-color)}.tiny-transfer-panel__item.is-disabled:hover{background:0}.tiny-transfer-panel__item.tiny-checkbox__input{position:absolute;top:7px}.tiny-transfer-panel__filter{text-align:center;margin-left:var(--tv-Transfer-panel-filter-padding-left);margin-right:var(--tv-Transfer-panel-filter-padding-right);margin-top:var(--tv-Transfer-panel-filter-padding-top);margin-bottom:var(--tv-Transfer-panel-filter-padding-bottom);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;width:auto}.tiny-transfer-panel__filter .tiny-input__inner{height:var(--tv-Transfer-panel-filter-height);line-height:var(--tv-Transfer-panel-filter-height);width:100%;font-size:var(--tv-Transfer-panel-filter-font-size);display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--tv-Transfer-panel-filter-border-radius);border-bottom-color:var(--tv-Transfer-header-border-color)!important;padding-left:24px;padding-right:0}.tiny-transfer-panel__filter .tiny-input__prefix{left:0}.tiny-transfer-panel__filter .tiny-input__suffix{right:4px}.tiny-transfer-panel .tiny-transfer-panel__header{height:var(--tv-Transfer-header-height);line-height:var(--tv-Transfer-header-height);background:var(--tv-Transfer-header-bg-color);margin-left:var(--tv-Transfer-header-margin-left);margin-right:var(--tv-Transfer-header-margin-right);margin-top:var(--tv-Transfer-header-margin-top);margin-bottom:var(--tv-Transfer-header-margin-bottom);padding-left:var(--tv-Transfer-header-padding-left);padding-right:var(--tv-Transfer-header-padding-right);padding-top:var(--tv-Transfer-header-padding-top);padding-bottom:var(--tv-Transfer-header-padding-bottom);border-bottom:1px solid var(--tv-Transfer-header-border-color);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--tv-Transfer-header-text-color);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox{width:100%;line-height:1;text-align:left}.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox .tiny-checkbox__label{font-size:var(--tv-Transfer-header-font-size);color:var(--tv-Transfer-header-text-color);font-weight:400;width:calc(100% - 38px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tiny-transfer-panel .tiny-transfer-panel__header .tiny-checkbox .tiny-checkbox__label span{position:absolute;right:0;color:var(--tv-Transfer-header-span-text-color);font-size:var(--tv-Transfer-header-font-size);font-weight:var(--tv-Transfer-header-span-font-weight)}.tiny-transfer-panel .tiny-transfer-panel__header .headSort{position:absolute;left:50%;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.tiny-transfer-panel .tiny-transfer-panel__header .headSort div{width:var(--tv-Transfer-header-sort-width);height:var(--tv-Transfer-header-sort-width);line-height:var(--tv-Transfer-header-sort-width);margin-right:var(--tv-Transfer-header-sort-margin-right);text-align:center;border:1px solid;border-radius:var(--tv-Transfer-header-sort-border-radius);color:var(--tv-Transfer-header-sort-icon-color);display:inline-block;cursor:pointer}.tiny-transfer-panel .tiny-transfer-panel__header .headSort div .tiny-svg{fill:var(--tv-Transfer-header-sort-icon-color);vertical-align:text-top}.tiny-transfer-panel .tiny-transfer-panel__footer{height:var(--tv-Transfer-footer-height);background:var(--tv-Transfer-footer-bg-color);margin-left:var(--tv-Transfer-footer-margin-left);margin-right:var(--tv-Transfer-footer-margin-right);margin-top:var(--tv-Transfer-footer-margin-top);margin-bottom:var(--tv-Transfer-footer-margin-bottom);padding-left:var(--tv-Transfer-footer-padding-left);padding-right:var(--tv-Transfer-footer-padding-right);padding-top:var(--tv-Transfer-footer-padding-top);padding-bottom:var(--tv-Transfer-footer-padding-bottom);border-top:1px solid var(--tv-Transfer-footer-border-color);width:100%;z-index:1}.tiny-transfer-panel .tiny-transfer-panel__footer::after{display:inline-block;content:'';height:100%;vertical-align:middle}.tiny-transfer-panel .tiny-transfer-panel__footer .tiny-checkbox{padding-left:var(--tv-Transfer-footer-checkbox-padding-left)}.tiny-transfer-panel .tiny-transfer-panel__empty{position:absolute;width:100%;top:calc(50% - 33px);margin:0;height:var(--tv-Transfer-empty-height);line-height:var(--tv-Transfer-empty-height);padding-left:var(--tv-Transfer-empty-padding-left);padding-right:var(--tv-Transfer-empty-padding-right);padding-top:var(--tv-Transfer-empty-padding-top);padding-bottom:var(--tv-Transfer-empty-padding-bottom);color:var(--tv-Transfer-empty-text-color);text-align:center}.tiny-transfer-panel.transferGrid{width:600px}.tiny-transfer-panel.transferGrid .tiny-transfer-panel__body{height:100%}.tiny-transfer-panel.transferGrid .tiny-table.simple{width:100%;padding-left:var(--tv-Transfer-table-padding-left);padding-right:var(--tv-Transfer-table-padding-right);padding-top:var(--tv-Transfer-table-padding-top);padding-bottom:var(--tv-Transfer-table-padding-bottom);height:var(--tv-Transfer-table-dyn-height,400px);overflow-y:auto}.tiny-transfer-panel.transferGrid .tiny-table.simple table{width:100%}.tiny-transfer-panel.transferGrid .tiny-pager{padding-left:var(--tv-Transfer-pager-padding-left);padding-top:var(--tv-Transfer-pager-padding-top);padding-bottom:var(--tv-Transfer-pager-padding-bottom);padding-right:var(--tv-Transfer-pager-padding-right)}.tiny-transfer-panel .tiny-checkbox__label{padding-left:var(--tv-Transfer-checkbox-label-padding-left)}