vui-design/src/style/components/cascade-transfer.less

A high quality UI Toolkit based on Vue.js

@vui-cascade-transfer: ~"@{vui}-cascade-transfer";

.@{vui-cascade-transfer} {
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  box-sizing:border-box;
  color:@cascade-transfer-font-color;
  font-size:@cascade-transfer-font-size;
  line-height:@cascade-transfer-line-height;

  &-source {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    width:@cascade-transfer-panel-width;
    border:1px solid @cascade-transfer-panel-border-color;
    border-radius:@cascade-transfer-panel-border-radius;

    &-header {
      display:flex;
      align-items:center;
      box-sizing:border-box;
      border-bottom:1px solid @cascade-transfer-panel-header-border-color;
      background-color:@cascade-transfer-panel-header-background-color;
      padding:@cascade-transfer-panel-header-padding;

     &-checkbox {
        display:block;
        box-sizing:border-box;
        margin-right:@cascade-transfer-panel-header-checkbox-margin-right;

        label {
          display:block;
        }
      }

      &-title {
        flex:1;
        display:block;
        box-sizing:border-box;
        .writeEllipsis;
      }
    }

    &-search {
      display:block;
      box-sizing:border-box;
      border-bottom:1px solid @cascade-transfer-panel-search-border-color;
      padding:@cascade-transfer-panel-search-padding;
    }

    &-body {
      flex:auto;
      display:block;
      box-sizing:border-box;
      height:@cascade-transfer-panel-body-height;
      overflow:auto;
    }
  }

  &-source-list {
    display:flex;
    flex-direction:row;
    box-sizing:border-box;
    min-width:@cascade-transfer-panel-width * 2 - 1px;
  }
  &-source-list &-source {
    border-radius:0;
  }
  &-source-list &-source:first-child {
    border-top-left-radius:@cascade-transfer-panel-border-radius;
    border-bottom-left-radius:@cascade-transfer-panel-border-radius;
  }
  &-source-list &-source:last-child {
    border-top-left-radius:@cascade-transfer-panel-border-radius;
    border-bottom-left-radius:@cascade-transfer-panel-border-radius;
  }
  &-source-list &-source + &-source {
    margin-left:-1px;
  }

  &-menu {
    flex:auto;
    display:block;
    box-sizing:border-box;
    padding:@cascade-transfer-panel-body-menu-padding;

    &-item {
      cursor:pointer;
      display:flex;
      flex-flow:row nowrap;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      height:@cascade-transfer-panel-body-menu-item-height;
      padding:@cascade-transfer-panel-body-menu-item-padding;
      transition:all @transition-duration @transition-timing-function;

      &-checkbox {
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin-right:@cascade-transfer-panel-body-menu-item-checkbox-margin-right;
      }

      &-label {
        flex:1;
        display:block;
        box-sizing:border-box;

        .writeEllipsis;
      }

      &-arrow {
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin-left:@cascade-transfer-panel-body-menu-item-arrow-margin-left;
        color:@cascade-transfer-panel-body-menu-item-arrow-color;
        font-size:@cascade-transfer-panel-body-menu-item-arrow-size;
        transform:scale(0.85);
      }

      &:hover {
        background-color:@cascade-transfer-panel-body-menu-item-hover-background-color;
      }

      &-expanded {
        color:@cascade-transfer-panel-body-menu-item-expanded-font-color;

        &:hover {
          color:@cascade-transfer-panel-body-menu-item-expanded-font-color;
        }
      }

      &-checked {
        color:@cascade-transfer-panel-body-menu-item-checked-font-color;

        &:hover {
          color:@cascade-transfer-panel-body-menu-item-checked-font-color;
        }
      }

      &-disabled {
        background-color:@cascade-transfer-panel-body-menu-item-disabled-background-color;

        &:hover {
          background-color:@cascade-transfer-panel-body-menu-item-disabled-hover-background-color;
        }
      }
    }
  }

  &-target {
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    box-sizing:border-box;
    width:@cascade-transfer-panel-width;
    border:1px solid @cascade-transfer-panel-border-color;
    border-radius:@cascade-transfer-panel-border-radius;
    margin-left:@margin-md;

    &-header {
      display:flex;
      align-items:center;
      box-sizing:border-box;
      border-bottom:1px solid @cascade-transfer-panel-header-border-color;
      background-color:@cascade-transfer-panel-header-background-color;
      padding:@cascade-transfer-panel-header-padding;

      &-title {
        flex:1;
        display:block;
        box-sizing:border-box;
        .writeEllipsis;
      }

      &-extra {
        display:block;
        box-sizing:border-box;
        margin-left:@cascade-transfer-panel-header-extra-margin-left;
      }
    }

    &-search {
      display:block;
      box-sizing:border-box;
      border-bottom:1px solid @cascade-transfer-panel-search-border-color;
      padding:@cascade-transfer-panel-search-padding;
    }

    &-body {
      flex:auto;
      display:block;
      box-sizing:border-box;
      height:@cascade-transfer-panel-body-height;
      overflow:auto;
    }
  }

  &-choice {
    flex:auto;
    display:block;
    box-sizing:border-box;
    padding:6px 6px;

    &-item {
      display:flex;
      flex-flow:row nowrap;
      justify-content:flex-start;
      align-items:center;
      box-sizing:border-box;
      border-radius:@cascade-transfer-panel-body-menu-item-border-radius;
      background-color:#fafafa;
      height:@cascade-transfer-panel-body-menu-item-height;
      padding:@cascade-transfer-panel-body-menu-item-padding;

      &-label {
        flex:1;
        display:block;
        box-sizing:border-box;

        .writeEllipsis;
      }

      &-btn-deselect {
        cursor:pointer;
        display:flex;
        justify-content:center;
        align-items:center;
        box-sizing:border-box;
        margin-left:8px;
        color:rgba(0,0,0,0.25);
        font-size:12px;
        transform:scale(0.85);
        transition:all @transition-duration @transition-timing-function;

        &:hover {
          color:rgba(0,0,0,0.45);
        }
      }

      &-disabled {
        cursor:not-allowed;
        background-color:@cascade-transfer-panel-body-menu-item-disabled-background-color;

        &:hover {
          background-color:@cascade-transfer-panel-body-menu-item-disabled-hover-background-color;
        }
      }
    }

    &-item + &-item {
      margin-top:6px;
    }
  }

  &-empty {
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    height:100%;
  }
}