choerodon-ui/pro/es/transfer/style/index.less

An enterprise-class UI design language and React-based implementation

@import '../../../../es/style/themes/default';
@import '../../../../es/style/mixins/index';
@import '../../../../es/select/style/mixin';
@import '../../text-field/style/mixin';

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

.@{transfer-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  width: @transfer-width;
  height: @transfer-height;
  vertical-align: middle;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;

  &-focused {
    .active;
  }

  &:last-child {
    margin-left: 0.08rem;
  }

  &-wrapper {
    display: inline-block;
    white-space: nowrap;
  }

  &-sortable {
    .@{transfer-prefix-cls}-operation {
      margin-right: 0.08rem;
    }
  }

  &-disabled & {
    background: @transfer-disabled-bg;
  }

  &-with-footer {
    padding-bottom: @transfer-footer-height;
  }

  &-search {
    padding: 0 @control-padding-horizontal-sm;
    &-action {
      position: absolute;
      top: 0.04rem;
      right: 0.04rem;
      bottom: 0.04rem;
      width: 0.28rem;
      color: @disabled-color;
      line-height: @input-height-base;
      text-align: center;
      .@{iconfont-css-prefix} {
        color: @disabled-color;
        transition: all @animation-duration-slow;
        &:hover {
          color: @text-color-secondary;
        }
      }
      span& {
        pointer-events: none;
      }
    }
  }

  &-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: @transfer-header-height;
    padding: @transfer-header-padding;
    overflow: hidden;
    color: @text-color;
    background: @component-background;
    border-bottom: @transfer-header-border-bottom;
    border-radius: @border-radius-base @border-radius-base 0 0;

    &-title {
      position: absolute;
      right: 0.12rem;
      font-weight: @transfer-header-title-font-weight;
      font-size: @transfer-header-title-font-size;
    }
  }

  &-body {
    position: relative;
    height: 100%;
    font-size: @font-size-base;

    &-search-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: @transfer-search-wrapper-padding;
    }

    .@{c7n-pro-prefix}-input-wrapper {
      width: 100%;
    }
  }

  &-body-with-search {
    padding-top: @transfer-body-with-search-padding-top;
  }

  &-with-header &-body {
    height: calc(100% - @transfer-header-height);
    margin-top: @transfer-header-height;
  }

  &-content {
    height: 100%;
    margin: 0;
    padding: @transfer-content-padding;
    overflow: auto;
    list-style: none;
    outline: none;

    &-wrapper {
      height: 100%;
    }

    .dropdown-menu-item;
  }

  &-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: @transfer-footer-height;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  &-current{
    background-color: @transfer-selected-bg;
  }

  &-operation,
  &-sort {
    display: inline-block;
    margin-left: 0.08rem;
    vertical-align: middle;

    .@{c7n-pro-prefix}-btn {
      display: block;
      min-width: @transfer-btn-height;
      height: @transfer-btn-height;
      margin-bottom: 0.08rem;
      padding: 0;
      border-radius: @transfer-btn-border-radius;

      + .@{c7n-pro-prefix}-btn {
        margin-left: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }

      .icon {
        margin: 0;
        font-size: 0.16rem;
      }
    }
  }
  &-operation-custom-left-active,
  &-operation-custom-right-active,
  &-sort-custom-up-active,
  &-sort-custom-down-active {
    cursor: pointer;
  }
  &-operation-custom-left-disable,
  &-operation-custom-right-disable,
  &-sort-custom-up-disable,
  &-sort-custom-down-disable {
    cursor: no-drop;
  }

  &-item-delete{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  &-item-icon{
    color:@disabled-color;
    &:hover{
      color: @text-color-secondary;
    }
  }
}