UNPKG

ten-design-vue

Version:

ten-vue

233 lines (201 loc) 4.56 kB
/* 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; } } }