sci-pro
Version:
180 lines (179 loc) • 5.4 kB
CSS
.scroll-y {
overflow-y: auto;
}
.scroll-y::-webkit-scrollbar {
width: 6px ;
height: 4px ;
background: transparent ;
border-radius: 4px ;
}
.scroll-y::-webkit-scrollbar-thumb {
cursor: pointer ;
background: #bebebe ;
border: 2px solid transparent ;
border-radius: 4px ;
}
.scroll-y::-webkit-scrollbar-track {
background: transparent ;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sci-transfer-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 600px;
max-width: 800px;
padding: 8px;
background-color: #fff;
}
.sci-transfer-container .sci-transfer-list-header {
display: flex;
flex-basis: 28px;
gap: 32px;
width: 100%;
height: 28px;
font-weight: 700;
}
.sci-transfer-container .sci-transfer-list-header span {
flex: 1;
}
.sci-transfer-container .sci-transfer-content {
display: flex;
flex: 1;
width: 100%;
min-height: 400px;
max-height: 400px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content {
display: flex;
flex: 1;
flex-direction: column;
width: calc(50% - 16px);
border: 1px solid #ccc;
border-radius: 4px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-operation-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px;
padding: 5px 10px;
color: #999;
background-color: #f8f8fa;
border-bottom: 1px solid #ccc;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-operation-content input {
width: 45%;
height: 30px;
padding-left: 6px;
border: 1px solid #ccc;
border-radius: 3px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-operation-content span {
font-size: 14px;
color: #409eff;
cursor: pointer;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list {
flex: 1;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item {
display: flex;
gap: 8px;
align-items: center;
height: 30px;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item:hover {
background-color: #e8f4ff;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item .sci-checkbox-input {
position: relative;
display: inline-flex;
align-items: center;
width: 14px;
height: 14px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item .sci-checkbox-input input {
position: absolute;
z-index: -1;
width: 0;
height: 0;
margin: 0;
outline: none;
opacity: 0;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item .sci-checkbox-input .sci-checkbox__inner {
position: relative;
box-sizing: border-box;
display: inline-block;
width: 14px;
height: 14px;
background: #fff;
border: 1px solid #dcdfe6;
border-radius: 2px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item .sci-checkbox-input .sci-checkbox__inner::after {
position: absolute;
top: 1px;
left: 4px;
box-sizing: content-box;
width: 3px;
height: 7px;
content: '';
border: 1px solid transparent;
border-top: 0;
border-left: 0;
transition: transform 0.15s ease-in 0.05s;
transform: rotate(45deg) scaleY(0);
transform-origin: center;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item .sci-transfer-item-text {
flex: 1;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item.is-checked .sci-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item.is-checked .sci-checkbox__inner::after {
border-color: #fff;
transform: rotate(45deg) scaleY(1);
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-list .sci-transfer-list-item.is-disabled {
color: #ccc;
cursor: not-allowed;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-selected-item {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
height: 30px;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-selected-item i {
height: 20px;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-selected-item:hover {
background-color: #e8f4ff;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-list-content .sci-transfer-selected-item.moving {
opacity: 0.5;
}
.sci-transfer-container .sci-transfer-content .sci-transfer-icon {
display: flex;
align-items: center;
width: 32px;
padding: 0 4px;
}