amis2/scss/components/form/_transfer-select.scss

121 lines
3.3 KiB
SCSS

.#{$ns}TransferSelectControl {
display: flex;
height: px2rem(300px);
.#{$ns}TransferSelect {
&-allOptions,
&-selectedOptions {
height: 100%;
flex: 1;
border: $borderWidth solid $borderColor;
overflow: auto;
.#{$ns}TransferSelect-heading {
position: relative;
height: px2rem(40px);
line-height: px2rem(40px);
padding-left: px2rem(20px);
border-bottom: $TransferSelect-heading-borderBottom;
}
.#{$ns}TransferSelect-body {
table tbody tr td,
ul li {
position: relative;
}
ul {
margin: 0;
padding: 0;
padding-top: px2rem(10px);
}
li {
height: px2rem(30px);
line-height: px2rem(30px);
list-style: none;
padding-left: px2rem(20px);
}
}
.#{$ns}TransferSelect-selectAll,
.#{$ns}TransferSelect-clearAll {
position: absolute;
right: 20px;
cursor: pointer;
color: $primary;
}
.#{$ns}TransferSelect-searchWrapper {
i {
height: px2rem(17px);
line-height: px2rem(17px);
}
}
}
&-allOptions {
&--table {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--table-heading-bg;
display: flex;
}
.#{$ns}TransferSelect-searchWrapper {
display: inline-block;
padding: px2rem(3px) px2rem(10px);
flex: 1;
margin-left: px2rem(30px);
}
}
&--normal {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--normal-heading-bg;
}
.#{$ns}TransferSelect-searchWrapper {
padding: px2rem(10px) px2rem(20px);
}
}
}
&-selectedOptions {
&--table {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--table-heading-bg;
}
}
&--normal {
.#{$ns}TransferSelect-heading {
background-color: $TransferSelect--normal-heading-bg;
}
}
}
&-option-close {
width: px2rem(12px);
height: px2rem(12px);
position: absolute;
right: px2rem(20px);
cursor: pointer;
}
&-action {
padding: 0 px2rem(20px);
.#{$ns}TransferSelect-actionIcon {
display: inline-block;
width: 0;
height: 0;
border-top: px2rem(12px) solid transparent;
border-left: px2rem(12px) solid #b7b7b7;
border-bottom: px2rem(12px) solid transparent;
position: relative;
top: calc(50% - 6px);
}
}
}
}