@import '~assets/main.styl';

#app .el-table {
  border();
  margin-top: 10px;
}

// 表格斑马样式
#app .no-border-table .el-table__row.striped-even {
  background: #FAFDFF;
}

#app .no-border-table .el-table__row.striped-odd {
  background: #FFF;
}

// 分页样式
#app .el-pagination .el-pager .number {
  background: transparent;
}

// 分页高亮样式
#app .el-pagination .el-pager .number.active {
  background: btn-color;
  border-radius: 100%;
}

// 表格悬浮样式
#app .no-border-table .el-table__row.striped:hover td {
  background: #F4F8FB !important;
}

// 重置弹窗body padding
#app .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}

// tree一级图标修改
#app .tree-content .el-tree-node__expand-icon {
  font-size: 24px;
  color: btn-color;
}

// tree 二级图标修改
#app .tree-content div[tabindex='0'] .el-tree-node__expand-icon.is-leaf {
  &::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    font-size: 12px;
    background: btn-color;
    border-radius: 100%;
  }
}

#app .tree-content div[tabindex='-1'] .el-tree-node__expand-icon.is-leaf {
  &::before {
    background: transparent;
    color: transparent;
  }
}

// 确认弹窗
.confirm-box {
  padding: 32px !important;
  border-bottom: 24px !important;

  .el-message-box__header {
    display: none;
  }

  .title {
    color: #212121;
    margin-bottom: 12px;
    font-size: 16px;
    flex-x(flex-start);

    .icon {
      font-size: 24px;
      margin-right: 16px;
      color: #FAAD14;
    }
  }

  .text {
    font-size: 14px;
    color: #595959;
    margin-bottom: 24px;
    text-indent: 40px;
  }

  .cancel-btn {
    width: 65px !important;
  }

  .confirm-btn {
    background: btn-color !important;
    border-color: btn-color !important;
    width: 65px !important;
    color: white;
  }
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: btn-color;
  border-color: btn-color;
}

.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: btn-color;
}

.el-checkbox__input.is-checked+.el-checkbox__label {
  color: btn-color;
}

.el-checkbox__inner:hover {
  border-color: btn-color;
}

.el-select-dropdown, .el-time-range-picker, .el-message-box__wrapper {
  z-index: 20000 !important;
}

.el-loading-mask{
  z-index: 10001 !important;  
}

// 弹窗
.dialog-title {
  font-size: 16px;
  color: #262626;
  padding-bottom: 15px;
  border-bottom: 1px solid #E6E6E6;
}

.dialog-footer {
  padding-top: 10px;
  border-top: 1px solid #E6E6E6;

  .btn {
    width: 65px;
    height: 32px;
  }

  // 弹窗取消按钮
  .cancel-btn {
    cancel-btn();
    margin-right: 8px;
    padding: 0;
  }

  .confirm-btn {
    confirm-btn();
    padding: 0;
  }
}
// 过滤
.filter-box {
  flex-x();

  .filter {
    flex-x(flex-start, center);
    flex-wrap: wrap !important;

    .filter-item {
      flex-x(flex-start, center);
      margin: 5px 40px 5px 0;

      .label {
        white-space: nowrap;
        color: gray3;
        font-size: 14px;
        margin-right: 5px;
      }

      .input {
      }
    }
  }

  .btn-box {
    flex-x();
    margin-right: 40px;
    flex-wrap: nowrap;

    .search {
      width: 65px;
      height: 32px;
      confirm-btn();
      margin-right: 8px;
    }

    .reset {
      width: 65px;
      height: 32px;
      cancel-btn();
    }
  }
}

// 添加图片
.addImg {
  position: relative;

  .tips {
    margin-bottom: 8px;
    text-indent: 5px;
  }

  .icon {
    width: 128px;
    height: 128px;
    flex-y();
    text-align: center;
    background-color: #F6F6F6;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px dashed #D9D9D9;

    p {
      color: red;
      font-size: 14px;
      text-align: center;
      color: gray3;

      &.tip {
        font-size: 12px;
        color: gray9;
        margin-top: 10px;
      }
    }
  }

  .img-box {
    position: relative;
    display: inline-block;
  }

  input {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
  }

  img {
    width: auto;
    height: 128px;
    background: #f5f5f5;
    display: block;
  }
}

.table-manage-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 24px 32px;
      border-radius: 2px;

      // 按钮
      .btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        confirm-btn();
        font-size: 14px;
        margin: 16px 0;
      }

      // 表格按钮
      .table-btn {
        // width: 65px;
        height: 24px;
        line-height: 24px;
        color: gray3;
        font-size: 12px;
        margin-right: 8px;
        cancel-btn();
        padding: 0 8px;
      }
      .filter-item{
        margin-right 12px;
      }
      .select, .input {
        width: 125px;
      }
      .date-input{
        width :225px;
      }
      .btn-box{
        margin 0
      }
      .table{
        margin-top 24px !important;
      }
    }
  }
}
// 按钮
.primary {
      padding: 0 15px;
      box-sizing:border-box;
      height: 32px;
      confirm-btn();
      margin-right: 8px;
    }