@fesjs/fes-design
Version:
fes-design for PC
112 lines (111 loc) • 4.22 kB
CSS
.fes-transfer {
box-sizing: border-box;
min-height: 350px;
}
.fes-transfer .fes-transfer-panel {
padding: var(--f-padding-middle);
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-header {
display: flex;
align-items: center;
height: 22px;
font-size: var(--f-font-size-base);
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-header .fes-transfer-panel-count {
margin-left: var(--f-padding-middle);
color: var(--f-sub-head-color);
}
.fes-transfer .fes-transfer-panel.fes-transfer-empty-panel {
position: relative;
}
.fes-transfer .fes-transfer-panel.fes-transfer-empty-panel .fes-transfer-empty {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-filter,
.fes-transfer .fes-transfer-panel .fes-transfer-panel-list {
margin-top: var(--f-padding-middle);
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-list {
width: calc(100% + var(--f-padding-xsmall) * 2);
margin-left: calc(0px - var(--f-padding-xsmall));
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-list .fes-transfer-option {
height: 32px;
padding: 0 var(--f-padding-xsmall);
font-size: var(--f-font-size-base);
}
.fes-transfer .fes-transfer-panel .fes-transfer-panel-list .fes-transfer-option:hover {
background-color: var(--f-hover-color-light);
}
.fes-transfer.fes-transfer-one-way {
display: flex;
border: 1px solid var(--f-border-color-disabled);
border-radius: var(--f-border-radius-base);
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel {
flex: 1 0 50%;
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-source-panel {
border-right: 1px solid var(--f-border-color-disabled);
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-header {
justify-content: space-between;
color: var(--f-sub-head-color);
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-header .fes-transfer-panel-clear-button {
cursor: pointer;
transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-header .fes-transfer-panel-clear-button:hover {
color: var(--f-primary-color);
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-list .fes-transfer-checked-option {
display: flex;
align-items: center;
justify-content: space-between;
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-list .fes-transfer-checked-option .fes-transfer-checked-option-remove-button {
display: none;
color: var(--f-text-color-disabled);
cursor: pointer;
}
.fes-transfer.fes-transfer-one-way > .fes-transfer-panel.fes-transfer-target-panel .fes-transfer-panel-list .fes-transfer-checked-option:hover .fes-transfer-checked-option-remove-button {
display: block;
}
.fes-transfer.fes-transfer-two-way {
display: flex;
align-items: stretch;
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-panel {
flex: 1 0 calc(50% - 32px / 2 - var(--f-padding-xsmall));
border: 1px solid var(--f-border-color-disabled);
border-radius: var(--f-border-radius-base);
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-panel .fes-transfer-panel-list .fes-transfer-option {
display: flex;
align-items: center;
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-panel .fes-transfer-panel-list .fes-transfer-option .fes-transfer-option-label {
margin-left: var(--f-padding-xsmall);
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-actions {
display: flex;
flex-direction: column;
align-items: center;
align-self: center;
justify-content: space-between;
height: calc(32px * 2 + var(--f-padding-xsmall));
padding: 0 var(--f-padding-xsmall);
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-actions > .fes-transfer-action-button {
width: 32px;
min-width: 32px;
height: 32px;
padding: unset;
}
.fes-transfer.fes-transfer-two-way > .fes-transfer-actions > .fes-transfer-action-button > .fes-transfer-action-button-icon {
margin-right: unset;
}