ten-design-vue
Version:
ten-vue
233 lines (201 loc) • 4.56 kB
text/less
/* dependencies icon,checkbox,input, */
@import "../vars.less";
@default-border-color: #d9d9d9;
@active-color: @primary-color;
.ten-transfer {
&__select-box {
display: inline-block;
height: @transfer-height-default;
width: 176px;
vertical-align: middle;
border: 1px solid @default-border-color;
border-radius: @transfer-border-radius-default;
position: relative;
padding-top: 40px;
background: #fff;
&-header {
position: absolute;
top: 0;
width: 100%;
height: 40px;
border-bottom: solid 1px @default-border-color;
// padding-top: 10px;
line-height: 40px;
font-size: 14px;
color: @text-color;
.ten-checkbox {
margin-left: 8px;
}
&-title {
position: absolute;
right: 8px;
opacity: 0.6;
}
&-selected {
padding-left: 8px;
opacity: 0.8;
}
}
&-main {
position: relative;
height: 100%;
font-size: @font-size-base;
&--search {
padding-top: 40px;
}
&-notfound {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
color: @disabled-color;
}
&-content {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
list-style: none;
&-item {
position: relative;
transition: all .3s;
height: 40px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: @text-color;
cursor: pointer;
&-title {
opacity: 0.8;
}
.ten-checkbox {
margin: 0;
display: block;
padding: 12px 8px;
}
&__text {
padding-left: 8px;
}
&--disabled {
cursor: not-allowed;
color: @disabled-color;
}
&:not(.ten-transfer__select-box-main-content-item--disabled):hover {
background: @primary-color-ligher-7;
}
// drag
&::after {
content: '';
display: none;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background: @primary-color-ligher-6;
}
&--dragpos {
&-center {
background-color: @primary-color-ligher-6;
}
&-top {
&::after {
display: block;
top: -2px;
}
}
&-bottom {
&::after {
display: block;
bottom: -2px;
}
}
}
}
}
}
}
&__search {
position: absolute;
top: 0;
left: 0;
right: 0;
input {
width: 100%;
height: 40px;
border: none;
border-bottom: solid 1px @default-border-color;
height: inherit;
line-height: 40px;
width: 100%;
padding: 0 12px;
outline: none;
transition: all 0.3s;
&:focus {
border-bottom-color: @primary-color;
}
}
&-icon {
&-search {
position: absolute;
right: 14px;
font-size: 12px;
line-height: 41px;
color: #999999;
opacity: 1;
transition: all 0.3s;
.ten-icon {
position: relative;
top: 5px;
}
.ten-icon svg {
width: 16px;
height: 16px;
}
}
&--hide {
opacity: 0;
}
}
}
&__action {
display: inline-block;
margin: 0 9px;
overflow: hidden;
vertical-align: middle;
&_button {
cursor: pointer;
display: block;
height: 24px;
min-width: 24px;
line-height: 24px;
padding: 0 4px;
box-sizing: border-box;
font-size: 14px;
text-align: center;
background: @primary-color;
border: @primary-color solid 1px;
color: #fff;
transition: all 0.3s;
polygon {
fill: #fff;
}
&--disabled {
border-color: rgba(0, 0, 0, 0.15);
background: rgba(0, 0, 0, 0.04);
color: @disabled-color;
cursor: not-allowed;
polygon {
fill: rgba(0, 0, 0, 0.15);
}
}
i {
position: relative;
top: 0.09em;
}
}
&_button+&_button {
margin-top: 4px;
}
}
}