$drag-color: #32a252;
$primary-background-color: #ecf5ff;

.lab-design {
  background-color: #f0f2f5;
  height: 100%;
  width: 100%;

  .lab-design-header{
    margin-bottom: 2px;
    .lab-design-top {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      .lab-top-left {
        width: calc(100% - 300px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .lab-top-right {
        width: 300px;
        text-align: right;
      }
    }
  }
  .el-container {
    height: 100%;
  }
  // 设计区域
  .lab-design-main {
    margin: 0 1px;
    overflow: hidden;
    padding: 0 1px;

    .el-card__body, .el-main {
      padding: 2px;
    }

    .lab-form {
      background-color: #ffff;
      padding: 6px;
    }

    .lab-tab {
      &-pane {
        padding: 6px;
      }
    }
    .lab-table {
      margin: 1px 0;
      &-drag {
        &:after{
          content: "拖动组件到此处放入表格";
        }
      }
    }

    // 可拖动元素
    .drag-element {
      /*position: relative;
      margin: 1px 0;
      // 当前元素的后置伪节点，用来遮掩内部节点，让鼠标的拖动样式展现
      &:after{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: block;
        content: "";
      }*/
      &:hover{
        color: $drag-color;
        border: 1px dashed $drag-color;
        cursor: move;
      }
    }
    // 当前选择元素
    .active {
      outline: 1px solid $drag-color!important;
      cursor: move;
    }
    // 拖动中样式
    .ghost{
      background: $drag-color;
      border: 2px solid $drag-color;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: '';
      overflow: hidden;
      padding: 0;
    }
  }

  .lab-design-header, .lab-design-aside {
    background-color: #ffff;
  }
  .lab-design-aside {
    height: 100%;
    padding: 0 8px;
    .el-tabs, .el-tabs__content, .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
    .el-tabs__header{
      margin-bottom: 0;
    }
    .lab-design-aside-content {
      overflow-y: auto;
      overflow-x: hidden;
      height: calc(100% - 50px);
    }
  }
  // 左侧样式
  .lab-design-left {
    width: 100%;
    height: 100%;

    .widget-cate{
      padding: 8px 12px;
      font-size: 13px;
    }

    ul{
      position: relative;
      overflow: hidden;
      padding: 0 0 10px;
      margin: 0;
    }

    .lab-design-view {
      white-space: nowrap;
      margin: 1%;
      color: #333;
      border: 1px solid #F4F6FC;

      &:hover{
        color: $drag-color;
        border: 1px dashed $drag-color;
        cursor: move;
      }
    }
    .lab-design-item{
      font-size: 12px;
      display: block;
      width: 47%;
      line-height: 26px;
      position: relative;
      float: left;
      left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      color: #333;
      border: 1px solid #F4F6FC;

      &:hover{
        color: $drag-color;
        border: 1px dashed $drag-color;
      }

      &>a{
        display: block;
        cursor: move;
        background: #F4F6FC;
        border: 1px solid #F4F6FC;

        .icon{
          margin-right: 6px;
          margin-left: 8px;
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
        }

        span{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    // 组件树样式
    .element-tree {
      &-node {
        margin: 2px 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 18px;
        padding-right: 8px;
        &:hover{
          cursor: pointer;
          background: #f0f2f5;
        }
        &-active {
          background: #f0f2f5;
        }
      }
    }
  }
  // 右侧样式
  .lab-design-right {
    padding: 0 6px;
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 6px!important;
    }
    .el-divider--horizontal {
      margin: 18px 0;
    }
    ul {
      list-style: none;
      padding: 4px;
      margin-bottom: 0;
      max-height: 300px;
      overflow-y: auto;
    }
    .ghost{
      background: #e70f0f;
      border: 2px solid #e70f0f;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: '';
      overflow: hidden;
      padding: 0;
    }

    .el-tabs__content {
      //height: calc(100vh - 100px)!important;
    }
  }
}