mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
136 lines
3.4 KiB
SCSS
136 lines
3.4 KiB
SCSS
@import './mixins/mixins.scss';
|
|
@import './themes/vars.scss';
|
|
|
|
@include b(transfer) {
|
|
display: flex;
|
|
@include b(transfer-list) {
|
|
width: 182px;
|
|
height: 312px;
|
|
background-color: rgba(75,81,106,1);
|
|
border-radius: 6px;
|
|
@include b(transfer-list-header) {
|
|
background:rgba(255,255,255,0.2);
|
|
display: flex;
|
|
border-radius: 6px 6px 0 0;
|
|
align-items: center;
|
|
height: 40px;
|
|
@include e(checkbox) {
|
|
position: relative;
|
|
padding: 0 8px 0 14px;
|
|
@include b(checkbox) {
|
|
display: block;
|
|
}
|
|
}
|
|
@include e(header) {
|
|
flex: 1;
|
|
line-height: 1;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: rgba(255, 255, 255, 1);
|
|
@include m(disabled) {
|
|
color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
}
|
|
@include e(label) {
|
|
font-size: 12px;
|
|
justify-self: flex-end;
|
|
margin-right: 14px;
|
|
}
|
|
}
|
|
@include b(transfer-list-body) {
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 272px;
|
|
@include b(scrollbar-content) {
|
|
width: 100%;
|
|
}
|
|
@include b(transfer-list-body-content) {
|
|
padding: 0;
|
|
margin: 0;
|
|
position: relative;
|
|
@include b(transfer-list-light-bar) {
|
|
@include fade-in-transition(transfer-list-light-bar);
|
|
height: 34px;
|
|
transition: top .15s $default-cubic-bezier;
|
|
background-color: rgba(96, 220, 178, 0.3);
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
@include b(transfer-list-item) {
|
|
@include slide-right-transition(transfer-list-item-source);
|
|
@include slide-left-transition(transfer-list-item-target);
|
|
position: relative;
|
|
cursor: pointer;
|
|
max-height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
height: 34px;
|
|
color: rgba(255, 255, 255, 1);
|
|
@include e(label) {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
padding-right: 4px;
|
|
}
|
|
@include e(checkbox) {
|
|
position: relative;
|
|
padding: 0 8px 0 14px;
|
|
@include b(checkbox) {
|
|
display: block;
|
|
}
|
|
}
|
|
@include m(disabled) {
|
|
color: rgba(255, 255, 255, 0.25);
|
|
cursor: not-allowed;
|
|
}
|
|
@include m(selected) {
|
|
color: rgba(99, 226, 183, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
@include b(transfer-gap) {
|
|
width: 96px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
@include b(transfer-button) {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
cursor: pointer;
|
|
&:first-child {
|
|
margin-bottom: 12px;
|
|
}
|
|
@include e(icon) {
|
|
pointer-events: none;
|
|
fill: rgba(255, 255, 255, 0.3);
|
|
transition: fill .3s $default-cubic-bezier;
|
|
}
|
|
&:hover {
|
|
@include e(icon) {
|
|
fill: rgba(99, 226, 183, 1);
|
|
}
|
|
}
|
|
&:active {
|
|
@include e(icon) {
|
|
fill: rgba(77, 177, 153, 1);
|
|
}
|
|
}
|
|
@include m(to) {
|
|
transform: rotate(180deg);
|
|
}
|
|
@include m(disabled) {
|
|
cursor: not-allowed;
|
|
@include e(icon) {
|
|
fill: rgba(255, 255, 255, .15)!important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|