vexip-ui/css/transfer.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-transfer-vars{--vxp-transfer-d-color:var(--vxp-border-color-light-2);--vxp-transfer-panel-bg-color:transparent;--vxp-transfer-panel-bg-color-disabled:var(--vxp-fill-color-humble);--vxp-transfer-panel-b-color:var(--vxp-border-color-base);--vxp-transfer-panel-b-color-hover:var(--vxp-color-primary-light-1);--vxp-transfer-panel-b-color-focus:var(--vxp-transfer-panel-b-color-hover);--vxp-transfer-panel-b-color-disabled:var(--vxp-border-color-light-2);--vxp-transfer-panel-s-color-focus:var(--vxp-color-primary-opacity-6);--vxp-transfer-panel-radius:var(--vxp-radius-base);--vxp-transfer-panel-width:200px;--vxp-transfer-panel-height:280px;--vxp-transfer-header-bg-color:var(--vxp-fill-color-background);--vxp-transfer-reverse-color:var(--vxp-content-color-secondary);--vxp-transfer-reverse-color-hover:var(--vxp-color-primary-base);--vxp-transfer-reverse-color-disabled:var(--vxp-content-color-disabled);--vxp-transfer-option-color-hitting:var(--vxp-color-primary-base);--vxp-transfer-option-color-disabled:var(--vxp-content-color-disabled);--vxp-transfer-option-bg-color:transparent;--vxp-transfer-option-bg-color-hover:var(--vxp-fill-color-hover);--vxp-transfer-option-bg-color-hitting:var(--vxp-fill-color-humble);--vxp-transfer-empty-color:var(--vxp-content-color-placeholder)}.vxp-transfer{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;align-items:center}.vxp-transfer,.vxp-transfer *,.vxp-transfer ::after,.vxp-transfer ::before{box-sizing:border-box}.vxp-transfer--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-transfer--success{--vxp-transfer-panel-b-color:var(--vxp-color-success-light-1);--vxp-transfer-panel-b-color-hover:var(--vxp-color-success-light-1);--vxp-transfer-panel-s-color-focus:var(--vxp-color-success-opacity-6);--vxp-transfer-reverse-color-hover:var(--vxp-color-success-base)}.vxp-transfer--error{--vxp-transfer-panel-b-color:var(--vxp-color-error-light-1);--vxp-transfer-panel-b-color-hover:var(--vxp-color-error-light-1);--vxp-transfer-panel-s-color-focus:var(--vxp-color-error-opacity-6);--vxp-transfer-reverse-color-hover:var(--vxp-color-error-base)}.vxp-transfer--warning{--vxp-transfer-panel-b-color:var(--vxp-color-warning-light-1);--vxp-transfer-panel-b-color-hover:var(--vxp-color-warning-light-1);--vxp-transfer-panel-s-color-focus:var(--vxp-color-warning-opacity-6);--vxp-transfer-reverse-color-hover:var(--vxp-color-warning-base)}.vxp-transfer__panel{display:flex;flex-direction:column;width:var(--vxp-transfer-panel-width);height:var(--vxp-transfer-panel-height);-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--vxp-border-shape) var(--vxp-transfer-panel-b-color);border-radius:var(--vxp-transfer-panel-radius);outline:0;transition:var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-transfer__panel:hover{border-color:var(--vxp-transfer-panel-b-color-hover)}.vxp-transfer__panel:focus,.vxp-transfer__panel:focus-within{border-color:var(--vxp-transfer-panel-b-color-focus);box-shadow:var(--vxp-shadow-focus) var(--vxp-transfer-panel-s-color-focus)}.vxp-transfer__panel--disabled{cursor:not-allowed}.vxp-transfer__panel--disabled,.vxp-transfer__panel--disabled:focus,.vxp-transfer__panel--disabled:focus-within,.vxp-transfer__panel--disabled:hover{background-color:var(--vxp-transfer-panel-bg-color-disabled);border-color:var(--vxp-transfer-panel-b-color-disabled);box-shadow:none}.vxp-transfer__header{display:flex;align-items:center;padding:8px 12px 9px;background-color:var(--vxp-transfer-header-bg-color);border-bottom:var(--vxp-border-shape) var(--vxp-transfer-d-color);border-radius:var(--vxp-transfer-panel-radius) var(--vxp-transfer-panel-radius) 0 0}.vxp-transfer__body{flex:1 0 0;padding:3px 0;margin:0;overflow:hidden}.vxp-transfer__footer{display:flex;align-items:center;padding:7px 12px 6px;border-top:var(--vxp-border-shape) var(--vxp-transfer-d-color);border-radius:0 0 var(--vxp-transfer-panel-radius) var(--vxp-transfer-panel-radius)}.vxp-transfer__checkbox{margin-inline-end:6px}.vxp-transfer__reverse{display:flex;align-items:center;justify-content:center;width:18px;margin-inline-end:6px;color:var(--vxp-transfer-reverse-color);cursor:pointer;transition:var(--vxp-transition-color)}.vxp-transfer__reverse:hover{color:var(--vxp-transfer-reverse-color-hover)}.vxp-transfer__reverse--disabled{cursor:not-allowed}.vxp-transfer__reverse--disabled,.vxp-transfer__reverse--disabled:hover{color:var(--vxp-transfer-reverse-color-disabled)}.vxp-transfer__counter{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-transfer__title{display:flex;flex:1 0 0;justify-content:flex-end}.vxp-transfer__loading{display:flex;margin-inline-start:4px}.vxp-transfer__filter{padding:0 6px;border-bottom:var(--vxp-border-shape) var(--vxp-transfer-d-color)}.vxp-transfer__filter .vxp-input{background-color:transparent;border:0;box-shadow:none}.vxp-transfer__actions{display:flex;flex-direction:column;margin:0 8px}.vxp-transfer__option{display:flex;align-items:center;height:32px;padding:0 12px;cursor:pointer;background-color:var(--vxp-transfer-option-bg-color);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-transfer__option:hover{background-color:var(--vxp-transfer-option-bg-color-hover)}.vxp-transfer__option--hitting{color:var(--vxp-transfer-option-color-hitting);background-color:var(--vxp-transfer-option-bg-color-hitting)}.vxp-transfer__option--disabled{color:var(--vxp-transfer-option-color-disabled);cursor:not-allowed}.vxp-transfer__option--disabled:hover{background-color:var(--vxp-transfer-option-bg-color)}.vxp-transfer__label{padding:0 4px}.vxp-transfer__pagination{display:flex;align-items:center;margin-inline-start:auto;line-height:1}.vxp-transfer__page-input{width:60px}.vxp-transfer__page-minus,.vxp-transfer__page-plus{color:var(--vxp-content-color-secondary);cursor:pointer;transition:var(--vxp-transition-color)}.vxp-transfer__page-minus:hover,.vxp-transfer__page-plus:hover{color:var(--vxp-color-primary-base)}.vxp-transfer__page-minus--disabled,.vxp-transfer__page-plus--disabled{cursor:not-allowed}.vxp-transfer__page-minus--disabled,.vxp-transfer__page-minus--disabled:hover,.vxp-transfer__page-plus--disabled,.vxp-transfer__page-plus--disabled:hover{color:var(--vxp-content-color-disabled)}.vxp-transfer__page-plus{margin-inline-end:2px}.vxp-transfer__page-minus{margin-inline-start:2px}.vxp-transfer__empty{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 16px 3px;color:var(--vxp-transfer-empty-color);white-space:nowrap;cursor:default}