/**
 * 组成页面的单元模块
 */

// 表单页面的操作栏
.operate-box{
  @extend .flex-up-down;
  @extend .common-font;
  height: 32px;

  // 用于清除其默认的左距
  .ml-0{
    margin-left: 0!important;
  }

  .ml-auto-important{
    margin-left: auto!important;
  }

  // 通用btn样式
  .unit-btn{
    @extend .custom-btn;
    border: none;
    border-radius: 2px;
    height: 32px;
    color: #fff;
    background-color: #3da2ff;
  }

  // 刷新按钮
  .refresh {
    @extend .unit-btn;
    width: 46px;
  }

  // 新建按钮
  .create {
    @extend .unit-btn;
    margin-left: 8px;
    width: 67px;
  }

  // 绿色的新建按钮
  .green-create{
    @extend .unit-btn;
    margin-left: 8px;
    width: 122px;
    background-color: #13ce66;
  }

  // 删除按钮
  .delete{
    @extend .unit-btn;
    margin-left: 8px;
    width: 67px;
    background-color: #fc3e42;
  }

  .export{
    @extend .unit-btn;
    margin-left: 8px;
    width: 77px;
    border: 1px solid #9cdcaf;
    color: #72db92;
    background-color: #f3fff1;
  }

  // 菜单按钮
  .menu {
    @extend .unit-btn;
    margin-left: auto;
    width: 48px;
  }

  // 搜索按钮
  .search {
    @extend .unit-btn;
    margin-left: 8px;
    width: 40px;
  }

  // block是用来提示的,无点击功能
  .block{
    @extend .common-font;
    margin-left: 8px;
    padding: 0 12px;
    height: 32px;
    border-radius: 2px;
    line-height: 32px;
  }

  .primary-block{
    @extend .block;
    border: 1px solid #d1eaff;
    color: #3da2ff;
    background-color: #e8f4ff;
  }

  .success-block{
    @extend .block;
    border: 1px solid #d0f5e0;
    color: #6ac863;
    background-color: #e7faf0;
  }

  .danger-block{
    @extend .block;
    border: 1px solid #ffdbdc;
    color: #fc4448;
    background-color: #ffeded;
  }

  // --------以下是对element框架的改造--------

  // 按钮
  .el-button{
    padding: 0 8px;
    margin-left: 8px;
    height: 32px;
  }

  // input框
  .el-input__inner{
    height: 32px;
  }

}

// 表格操作项
.operate-table-box{
  @extend .flex-box;

  .icon-box {
    @extend .flex-box;
    @extend .size-35;
    margin: 0 7px;
    border-radius: 50%;
    cursor: pointer;

    .i-size {
      font-size: 21px;
    }

    .svg-size{
      width: 18px;
      height: 18px;
    }

  }

  $type-list: primary, success, danger;

  @each $type in $type-list{

    .#{$type}{
      @extend .#{$type}-color;
      &:hover{
        @extend .white-color;
        @extend .#{$type}-bg;
      }
    }

  }

}

// dialog内部
.slot-box{

  .el-tabs__nav-wrap{
    padding-left: 33px;
    color: #dd1100;
    background-color: #f8f8f8;

    .el-tabs__item{
      color: #999;
    }
    .is-active{
      color: #2593fc;
    }

    &::after{
      background-color: #f8f8f8;
    }

  }

  .el-tabs__header{
    margin-bottom: 0;
  }

}

// 改变form-item的内部样式
.small-mb-form{
  .el-form-item {
    margin-bottom: 10px;
  }

  &.item-340{
    width: 340px;
  }

  &.item-center{
    margin-left: auto;
    margin-right: auto;
  }

}


