@import './variables.scss';
@import '../transfer/variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/transfer/scss/variable';
.#{$css-prefix}transfer {
// 白色主题下样式
&.#{$css-prefix}white {
.#{$css-prefix}transfer-panel {
border: 0px solid transparent;
// background: $b-design-transfer-white-bgc;
box-shadow: $b-design-transfer-white-shadow;
.#{$css-prefix}transfer-panel-header,
.#{$css-prefix}transfer-panel-footer {
background-color: transparent;
}
.#{$css-prefix}transfer-panel-list {
// background: $b-design-transfer-white-bgc;
// 一般情况下
.#{$css-prefix}transfer-panel-item:not(.#{$css-prefix}disabled):hover {
background-color: $b-design-transfer-white-hover-color;
}
// disabeld
.#{$css-prefix}disabled {
background: $b-design-transfer-white-bgc;
}
// not found状态
.#{$css-prefix}transfer-panel-not-found-container {
position: relative;
&.#{$css-prefix}transfer-panel-not-found-container::before {
width: $b-design-transfer-not-fond-svg-size;
height: $b-design-transfer-not-fond-svg-size;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: url('data:image/svg+xml; utf8, ');
position: absolute;
}
.#{$css-prefix}transfer-panel-not-found {
display: none;
}
}
}
// 滚动条颜色
.#{$css-prefix}transfer-panel-list::-webkit-scrollbar-track {
background-color: $b-design-transfer-white-bgc;
}
}
.#{$css-prefix}transfer-operations {
.#{$css-prefix}transfer-operation[disabled] {
background-color: $b-design-transfer-simple-operation-bgc;
border-color: $b-design-transfer-simple-operation-bgc;
border-width: 0px;
}
}
}
//灰色主题
&.#{$css-prefix}grey {
.#{$css-prefix}transfer-panel {
border: 0px solid transparent;
.#{$css-prefix}transfer-panel-header {
background-color: transparent;
}
.#{$css-prefix}transfer-panel-list {
.#{$css-prefix}transfer-panel-item:not(.#{$css-prefix}disabled):hover {
background-color: $b-design-transfer-grey-hover-color;
}
// not found状态
.#{$css-prefix}transfer-panel-not-found-container {
position: relative;
&.#{$css-prefix}transfer-panel-not-found-container::before {
width: $b-design-transfer-not-fond-svg-size;
height: $b-design-transfer-not-fond-svg-size;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: url('data:image/svg+xml; utf8, ');
position: absolute;
}
.#{$css-prefix}transfer-panel-not-found {
display: none;
}
}
}
// 滚动条颜色
.#{$css-prefix}transfer-panel-list::-webkit-scrollbar-track {
background-color: $b-design-transfer-grey-bgc;
}
}
.#{$css-prefix}transfer-operations {
.#{$css-prefix}transfer-operation[disabled] {
background-color: $b-design-transfer-grey-bgc;
border-color: $b-design-transfer-grey-bgc;
border-width: 0px;
}
}
}
// 白灰通用
.#{$css-prefix}transfer-panel {
.#{$css-prefix}transfer-panel-list {
//去掉内部的投影
.#{$css-prefix}menu {
box-shadow: none;
}
// 普通情况
.#{$css-prefix}transfer-panel-item:not(.#{$css-prefix}disabled) {
.#{$css-prefix}checkbox-wrapper:not(.checked) {
.#{$css-prefix}checkbox-inner {
border: $b-design-transfer-checkbox-border;
background: transparent;
}
}
.#{$css-prefix}menu-item-text {
color: $b-design-transfer-list-text-color;
}
}
// 禁用状态
.#{$css-prefix}disabled {
color: $b-design-transfer-checkbox-disabled-color;
.#{$css-prefix}checkbox-wrapper .#{$css-prefix}checkbox-inner {
border: 1px solid $b-design-transfer-checkbox-disabled-color;
background: transparent;
}
}
// 选中状态
.#{$css-prefix}transfer-panel-item[aria-checked='true'] {
.#{$css-prefix}menu-item-text {
color: $b-design-transfer-checkbox-selected-color;
}
}
}
// 滚动条样式
.#{$css-prefix}transfer-panel-list::-webkit-scrollbar {
width: $s-1;
}
.#{$css-prefix}transfer-panel-list::-webkit-scrollbar-thumb {
border-radius: 10px;
background: $color-fill1-3;
}
}
// btn样式
.#{$css-prefix}transfer-operations {
.#{$css-prefix}medium {
padding: 0 10px !important;
}
}
}
// simple模式
.#{$css-prefix}transfer-simple {
.#{$css-prefix}transfer-panel-footer {
padding: $b-design-transfer-simple-footer-padding;
.#{$css-prefix}transfer-panel-move-all {
display: inline-block;
width: $b-design-transfer-simple-footer-btn-width;
height: $b-design-transfer-simple-footer-btn-height;
line-height: $b-design-transfer-simple-footer-btn-height;
border-radius: $s-1;
text-align: center;
}
.#{$css-prefix}transfer-panel-move-all:active {
text-decoration: none;
}
.#{$css-prefix}transfer-panel-move-all:hover {
background: $b-design-transfer-simple-footer-hover;
}
}
.#{$css-prefix}transfer-operations {
background-color: $b-design-transfer-simple-operation-bgc;
width: $b-design-transfer-simple-operation-size;
height: $b-design-transfer-simple-operation-size;
border-radius: $s-1;
line-height: $b-design-transfer-simple-operation-size;
text-align: center;
}
&.#{$css-prefix}grey {
.#{$css-prefix}transfer-operations {
background-color: $b-design-transfer-grey-bgc;
}
}
&.#{$css-prefix}white {
.#{$css-prefix}menu {
background-color: $b-design-transfer-white-bgc;
}
}
}
// search搜索框样式
// 白灰通用样式
.#{$css-prefix}white,
.#{$css-prefix}grey {
.#{$css-prefix}transfer-panel {
.#{$css-prefix}search {
margin-bottom: $b-design-transfer-search-margin-b;
.#{$css-prefix}search-left {
border-color: $b-design-transfer-search-bgc;
background: $b-design-transfer-search-bgc;
.#{$css-prefix}focus {
border: $b-design-transfer-search-focus-border;
border-radius: $b-design-transfer-search-focus-border-radius;
}
}
}
}
.#{$css-prefix}search:hover {
box-shadow: none;
.#{$css-prefix}select {
box-shadow: $b-design-transfer-search-hover-shadow;
}
}
}
//treeSelect样式
.#{$css-prefix}transfer-tree {
.#{$css-prefix}transfer-panel-list {
.#{$css-prefix}tree-node-inner[aria-disabled='false'] {
.#{$css-prefix}tree-node-label-wrapper {
.#{$css-prefix}tree-node-label {
color: $b-design-transfer-list-text-color !important;
}
}
}
.#{$css-prefix}tree-node-inner[aria-disabled='true'] {
.#{$css-prefix}tree-node-label-wrapper {
.#{$css-prefix}tree-node-label {
background-color: transparent;
}
}
}
}
}
// table样式
.#{$css-prefix}transfer-table {
// 保证两个panel高度相同
display: flex;
.#{$css-prefix}table {
height: 100%;
}
// 中间按钮保持局中
.#{$css-prefix}transfer-operations {
display: flex;
flex-direction: column;
justify-content: center;
}
.#{$css-prefix}transfer-panel {
box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
display: flex;
flex-direction: column;
.#{$css-prefix}transfer-panel-list {
width: auto;
height: auto;
flex: 1;
display: flex;
border-top-left-radius: $b-design-transfer-search-focus-border-radius;
border-top-right-radius: $b-design-transfer-search-focus-border-radius;
margin-right: $b-design-transfer-table-margin;
margin-left: $b-design-transfer-table-margin;
margin-top: $b-design-transfer-table-margin;
table {
height: 100%;
}
.#{$css-prefix}table-header {
th {
border-right: none;
border-left: 1px solid #e5e5e5;
}
th:first-child {
border-left: none;
}
}
.#{$css-prefix}table-body {
.selected {
color: $b-design-transfer-checkbox-selected-color;
}
td {
border-left: 1px solid #e5e5e5;
border-right: none;
}
td:first-child {
border-left: none;
}
tr:last-child {
td {
border-bottom: none;
}
}
}
}
// 去掉中间的缝隙，保持border和父元素一致；
.#{$css-prefix}transfer-panel-footer {
margin-right: $b-design-transfer-table-margin;
margin-left: $b-design-transfer-table-margin;
border-bottom-left-radius: $b-design-transfer-search-focus-border-radius;
border-bottom-right-radius: $b-design-transfer-search-focus-border-radius;
}
}
.#{$css-prefix}checkbox-wrapper:not(.checked) {
.#{$css-prefix}checkbox-inner {
background: transparent;
}
}
}
// 白色主题样式
.#{$css-prefix}transfer-table {
&.#{$css-prefix}white {
.#{$css-prefix}table-body {
// background: $b-design-transfer-white-bgc;
.#{$css-prefix}table-row {
// background: $b-design-transfer-white-bgc;
cursor: pointer;
}
.#{$css-prefix}table-row {
&.hovered {
background: $b-design-transfer-table-hover-color;
}
}
.#{$css-prefix}table-empty {
height: 100%;
color: transparent;
&.#{$css-prefix}table-empty::before {
width: $b-design-transfer-not-fond-svg-size;
height: $b-design-transfer-not-fond-svg-size;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: url('data:image/svg+xml; utf8, ');
position: absolute;
}
}
}
}
&.#{$css-prefix}grey {
.#{$css-prefix}table-body {
background: $b-design-transfer-grey-bgc;
.#{$css-prefix}table-row {
// background: $b-design-transfer-grey-bgc;
cursor: pointer;
}
.#{$css-prefix}table-row {
&.hovered {
background: $b-design-transfer-grey-hover-color;
}
}
.#{$css-prefix}table-empty {
height: 100%;
color: transparent;
&.#{$css-prefix}table-empty::before {
width: $b-design-transfer-not-fond-svg-size;
height: $b-design-transfer-not-fond-svg-size;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: url('data:image/svg+xml; utf8, ');
position: absolute;
}
}
}
}
}