element-ui/packages/theme-default/src/transfer.css

A Component Library for Vue.js.

@charset "UTF-8";
@import "./common/var.css";
@import "./input.css";
@import "./button.css";
@import "./checkbox.css";
@import "./checkbox-group.css";

@component-namespace el {
  @b transfer {
    font-size: var(--font-size-base);

    @e buttons {
      display: inline-block;
      vertical-align: middle;
      padding: 0 10px;

      .el-button {
        display: block;
        margin: 0 auto;
        padding: 8px 12px;

        &:first-child {
          margin-bottom: 6px;
        }
      }

      .el-button [class*="el-icon-"] + span {
        margin-left: 0;
      }
    }
  }

  @b transfer-panel {
    border: 1px solid var(--transfer-border-color);
    background: var(--color-white);
    box-shadow: var(--transfer-box-shadow);
    display: inline-block;
    vertical-align: middle;
    width: var(--transfer-panel-width);
    box-sizing: border-box;
    position: relative;

    @e body {
      padding-bottom: var(--transfer-panel-footer-height);
      height: var(--transfer-panel-body-height);
    }

    @e list {
      margin: 0;
      padding: 6px 0;
      list-style: none;
      height: var(--transfer-panel-body-height);
      overflow: auto;
      box-sizing: border-box;

      @when filterable {
        height: calc(var(--transfer-panel-body-height) - var(--transfer-filter-height) - 10px);
      }
    }

    @e item {
      height: var(--transfer-item-height);
      line-height: var(--transfer-item-height);
      padding-left: 20px;
      display: block;

      & + .el-transfer-panel__item {
        margin-left: 0;
      }

      &.el-checkbox {
        color: var(--color-extra-light-black);
      }

      &:hover {
        background: var(--transfer-item-hover-background);
      }

      .el-checkbox__label {
        width: 100%;
        @utils-ellipsis;
        display: block;
        box-sizing: border-box;
        padding-left: 28px;
      }

      .el-checkbox__input {
        position: absolute;
        top: 9px;
      }
    }

    @e filter {
      margin-top: 10px;
      text-align: center;
      padding: 0 10px;
      width: 100%;
      box-sizing: border-box;

      .el-input__inner {
        height: var(--transfer-filter-height);
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
      }

      .el-input__icon {
        right: 10px;
      }

      .el-icon-circle-close {
        cursor: pointer;
      }
    }

    .el-transfer-panel__header {
      height: var(--transfer-panel-header-height);
      line-height: var(--transfer-panel-header-height);
      background: var(--transfer-panel-header-background);
      margin: 0;
      padding-left: 20px;
      border-bottom: 1px solid var(--transfer-border-color);
      box-sizing: border-box;
      color: var(--color-base-black);
    }

    .el-transfer-panel__footer {
      height: var(--transfer-panel-footer-height);
      background: var(--color-white);
      margin: 0;
      padding: 0;
      border-top: 1px solid var(--transfer-border-color);
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: var(--index-normal);
      @utils-vertical-center;

      .el-checkbox {
        padding-left: 20px;
        color: var(--color-base-silver);
      }
    }

    .el-transfer-panel__empty {
      margin: 0;
      height: var(--transfer-item-height);
      line-height: var(--transfer-item-height);
      padding: 6px 20px 0;
      color: var(--color-base-silver);
    }

    .el-checkbox__label {
      padding-left: 14px;
    }

    .el-checkbox__inner {
      size: 14px;
      border-radius: 3px;
      &::after {
        height: 6px;
        width: 3px;
        left: 4px;
      }
    }
  }
}