element-plus/theme-chalk/el-transfer.css

A Component Library for Vue 3

.el-transfer{--el-transfer-border-color:var(--el-border-color-lighter);--el-transfer-border-radius:var(--el-border-radius-base);--el-transfer-panel-width:200px;--el-transfer-panel-header-height:40px;--el-transfer-panel-header-bg-color:var(--el-fill-color-light);--el-transfer-panel-footer-height:40px;--el-transfer-panel-body-height:278px;--el-transfer-item-height:30px;--el-transfer-filter-height:32px;font-size:var(--el-font-size-base)}.el-transfer__buttons{vertical-align:middle;padding:0 30px;display:inline-block}.el-transfer__button{vertical-align:top}.el-transfer__button:nth-child(2){margin:0 0 0 10px}.el-transfer__button i,.el-transfer__button span{font-size:14px}.el-transfer__button .el-icon+span{margin-left:0}.el-transfer-panel{background:var(--el-bg-color-overlay);text-align:left;vertical-align:middle;width:var(--el-transfer-panel-width);box-sizing:border-box;max-height:100%;display:inline-block;position:relative;overflow:hidden}.el-transfer-panel__body{height:var(--el-transfer-panel-body-height);border-left:1px solid var(--el-transfer-border-color);border-right:1px solid var(--el-transfer-border-color);border-bottom:1px solid var(--el-transfer-border-color);border-bottom-left-radius:var(--el-transfer-border-radius);border-bottom-right-radius:var(--el-transfer-border-radius);overflow:hidden}.el-transfer-panel__body.is-with-footer{border-bottom:none;border-bottom-right-radius:0;border-bottom-left-radius:0}.el-transfer-panel__list{height:var(--el-transfer-panel-body-height);box-sizing:border-box;margin:0;padding:6px 0;list-style:none;overflow:auto}.el-transfer-panel__list.is-filterable{height:calc(100% - var(--el-transfer-filter-height) - 30px);padding-top:0}.el-transfer-panel__item{height:var(--el-transfer-item-height);line-height:var(--el-transfer-item-height);padding-left:15px;display:block!important}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:var(--el-text-color-regular);margin-right:30px}.el-transfer-panel__item:hover{color:var(--el-color-primary)}.el-transfer-panel__item.el-checkbox .el-checkbox__label{text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;width:100%;line-height:var(--el-transfer-item-height);padding-left:22px;display:block;overflow:hidden}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:8px}.el-transfer-panel__filter{text-align:center;box-sizing:border-box;padding:15px}.el-transfer-panel__filter .el-input__inner{height:var(--el-transfer-filter-height);box-sizing:border-box;width:100%;font-size:12px;display:inline-block}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.el-transfer-panel .el-transfer-panel__header{height:var(--el-transfer-panel-header-height);background:var(--el-transfer-panel-header-bg-color);border:1px solid var(--el-transfer-border-color);border-top-left-radius:var(--el-transfer-border-radius);border-top-right-radius:var(--el-transfer-border-radius);box-sizing:border-box;color:var(--el-color-black);align-items:center;margin:0;padding-left:15px;display:flex}.el-transfer-panel .el-transfer-panel__header .el-checkbox{align-items:center;width:100%;display:flex;position:relative}.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{min-width:0;color:var(--el-text-color-primary);flex:1;align-items:center;font-size:16px;font-weight:400;display:flex}.el-transfer-panel .el-transfer-panel__header-title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.el-transfer-panel .el-transfer-panel__header-count{color:var(--el-text-color-secondary);flex-shrink:0;margin-left:8px;margin-right:15px;font-size:12px}.el-transfer-panel .el-transfer-panel__footer{height:var(--el-transfer-panel-footer-height);background:var(--el-bg-color-overlay);border:1px solid var(--el-transfer-border-color);border-bottom-left-radius:var(--el-transfer-border-radius);border-bottom-right-radius:var(--el-transfer-border-radius);margin:0;padding:0}.el-transfer-panel .el-transfer-panel__footer:after{content:"";vertical-align:middle;height:100%;display:inline-block}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{color:var(--el-text-color-regular);padding-left:20px}.el-transfer-panel .el-transfer-panel__empty{height:var(--el-transfer-item-height);line-height:var(--el-transfer-item-height);color:var(--el-text-color-secondary);text-align:center;margin:0;padding:6px 15px 0}.el-transfer-panel .el-checkbox__label{padding-left:8px}