@import '../dao-color.scss';

$panel-height: 390px; 
$item-list-height: 360px;

.dao-editable-list {
  display: flex;
  border: 1px solid $white-dark;
  .left-pane {
    flex: none;
    width: 25%;
    border-right: 1px solid $white-dark;
    .item-list {
      width: 100%;
      height: $item-list-height;
      border-radius: 0;
      background: linear-gradient(generate-color($blue, -3) 50%, $white 50%);
      background-attachment: local;
      background-size: 100% 60px;
      border-bottom: 1px solid $white-dark;
      overflow-y: auto;
      li {
        cursor: pointer;
        height: $panel-height - $item-list-height;
        line-height: 30px;
        text-indent: 10px;
        &.active {
          background: $blue;
          color: white;
        }
      }
    }
    .operator-container {
      height: 30px;
      display: flex;
      background-color: $white;
      .opt {
        flex: none;
        width: 30px;
        border-right: 1px solid $white-dark;
        position: relative;
        cursor: pointer;
        &:before, &:after {
          content: '';
          position: absolute;
          width: 16px;
          border-top: 2px solid $black-light;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        &.add:after {
          transform: translate(-50%, -50%) rotate(90deg);
        }
        &.disabled, &[disabled] {
          cursor: not-allowed;
          &:before, &:after {
            border-top: 2px solid $grey-light;
          }
        }
      }
    }
  }
  .right-pane {
    height: $panel-height; 
    overflow: auto;
    flex: auto;
    // 为了能够在 ff28 下实现 border-box, 这里嵌套一层 div
    & > div {
     padding: 0 20px 15px;
    }
  }
}