@arco-design/web-vue/es/transfer/style/index.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';
@import '../../style/mixins/index.less';

@transfer-prefix-cls: ~'@{prefix}-transfer';

.@{transfer-prefix-cls} {
  display: flex;
  align-items: center;

  &-view {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: @transfer-width;
    height: @transfer-height;
    border: @transfer-border-width solid @transfer-border-color;
    border-radius: @transfer-border-radius;

    &-search {
      padding: @transfer-search-padding-top @transfer-search-padding-right
        @transfer-search-padding-bottom @transfer-search-padding-left;
    }

    &-list {
      flex: 1;
    }

    &-custom-list {
      flex: 1;
      overflow: auto;
    }

    &-header {
      display: flex;
      align-items: center;
      padding: 0 @transfer-item-padding-horizontal;
    }

    &-header > *:first-child {
      flex: 1;
      .text-ellipsis();

      &:not(:last-child) {
        margin-right: 8px;
      }
    }

    &-header {
      height: @transfer-height-title;
      color: @transfer-color-text-header;
      font-weight: @transfer-font-weight-header;
      font-size: @transfer-font-size-header;
      line-height: $height;
      background-color: @transfer-color-bg-header;

      &-title {
        display: flex;
        align-items: center;

        .@{prefix}-checkbox {
          .text-ellipsis();

          font-size: inherit;

          &-text {
            color: inherit;
          }
          // fix the title in checkbox-label ellipsis not work
          &-label {
            .text-ellipsis();
          }
        }
        // fix simple mode the title  ellipsis not work
        &-simple {
          .text-ellipsis();
        }
      }

      &-clear-btn {
        color: @transfer-color-icon;
        font-size: @transfer-font-size-icon;
        cursor: pointer;

        &:hover::before {
          background-color: @transfer-color-bg-icon;
        }
      }

      &-count {
        margin-right: 2px;
        color: @transfer-color-text-header-unit;
        font-weight: normal;
        font-size: @transfer-font-size-header-unit;
      }
    }

    &-body {
      flex: 1 1 auto;
      overflow: hidden;

      .@{transfer-prefix-cls}-view-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }

    .@{prefix}-scrollbar {
      height: 100%;

      &-container {
        height: 100%;
        overflow: auto;
      }
    }

    .@{prefix}-list {
      border-radius: 0;

      &-footer {
        position: relative;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        height: @transfer-height-footer;
        padding: 0 @transfer-padding-horizontal-footer;
      }

      .@{prefix}-pagination {
        position: absolute;
        top: 50%;
        right: @transfer-padding-horizontal-footer;
        margin: 0;
        transform: translateY(-50%);

        &-jumper-input {
          width: @transfer-pagination-width-input;
        }

        &-jumper-separator {
          padding: 0 @transfer-pagination-gap-separator;
        }
      }
    }

    .@{prefix}-checkbox {
      padding-left: 6px;

      &-wrapper {
        display: inline;
      }

      .@{prefix}-icon-hover:hover::before {
        background-color: @transfer-color-bg-icon;
      }
    }
  }

  &-list-item {
    position: relative;
    display: flex;
    align-items: center;
    height: @transfer-item-height;
    padding: 0 @transfer-item-padding-horizontal;
    color: @transfer-item-color_default;
    line-height: $height;
    list-style: none;
    background-color: @transfer-item-color-bg_default;
    cursor: default;

    &-content {
      font-size: @transfer-item-font-size;
      .text-ellipsis();
    }

    &-checkbox {
      .@{prefix}-checkbox-label {
        .text-ellipsis();
      }
    }

    &-disabled {
      color: @transfer-item-color_disabled;
      background-color: @transfer-item-color-bg_disabled;
      cursor: not-allowed;
    }

    &:not(&-disabled):hover {
      color: @transfer-item-color_hover;
      background-color: @transfer-item-color-bg_hover;
    }

    .@{prefix}-checkbox {
      width: 100%;

      &-text {
        color: inherit;
      }
    }

    &-remove-btn {
      margin-left: auto;
      color: @transfer-color-icon;
      font-size: @transfer-font-size-icon;
      cursor: pointer;

      &:hover::before {
        background-color: @transfer-color-bg-icon;
      }
    }

    // 拖动样式
    &-draggable::before {
      position: absolute;
      right: 0;
      left: 0;
      display: block;
      height: @transfer-item-draggable-height-gap;
      border-radius: ($height / 2);
      content: '';
    }

    &-gap-bottom::before {
      bottom: -@transfer-item-draggable-height-gap;
      background-color: @transfer-item-draggable-color-bg-gap;
    }

    &-gap-top::before {
      top: -@transfer-item-draggable-height-gap;
      background-color: @transfer-item-draggable-color-bg-gap;
    }

    &-dragging {
      color: @transfer-item-draggable-color_dragging !important;
      background-color: @transfer-item-draggable-color-bg_dragging !important;
    }

    &-dragged {
      animation: ~'@{prefix}-transfer-drag-item-blink' 0.4s;
      animation-timing-function: @transition-timing-function-linear;
    }
  }

  &-operations {
    padding: 0 @transfer-operation-padding-horizontal;

    .@{prefix}-btn {
      display: block;

      &:last-child {
        margin-top: @transfer-operation-gap-buttons;
      }
    }

    &-words {
      .@{prefix}-btn {
        width: 100%;
        padding: 0 12px;
        text-align: left;
      }
    }
  }

  &-simple {
    .@{transfer-prefix-cls}-view-source {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .@{transfer-prefix-cls}-view-target {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &-disabled {
    .@{transfer-prefix-cls}-view-header {
      color: @transfer-item-color_disabled;
    }
  }
}

@keyframes ~ '@{prefix}-transfer-drag-item-blink' {
  0% {
    background-color: @transfer-item-draggable-color_blink;
  }

  100% {
    background-color: transparent;
  }
}