@import "./mixins/index";
@import "~vxe-table/styles/modules.scss";
@import "~vxe-table-plugin-element/dist/style.css";
@import "../vxe-table-pro/vxe-table-pro.scss";

html, body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  color: #000;
}

.x-draggable, .x-resizable {
  overflow: hidden;
}

.x-draggable__handle {
  cursor: move;
}

.user-select-none {
  user-select: none;
  overflow: hidden !important;

  iframe {
    pointer-events: none;
  }
}

@include scroll-bar;

// 一般page-container页面的样式
.common-page-container.x-page-container {
  box-sizing: border-box;
  padding: 10px;

  .x-page-container-header {
    box-sizing: border-box;
    min-height: 32px;
    border-bottom: 1px solid #eee;
  }

  .x-page-container-sub {
    padding: 4px 0 0 0;
  }

  .x-page-container-main {
    .vxe-icon--edit-outline {
      display: none !important;
      width: 0px;
      height: 0px;
    }
  }

  /*由于有浮动元素，父元素需要clearfix*/
  .x-page-container-footer {
    box-sizing: border-box;
    text-align: right;
    padding: 4px 0 0 0;

    &:after {
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }

    .page-footer-remark {
      margin-top: 3px;
      float: left;
    }

    .el-pagination {
      display: inline-block;
      margin-left: 5px;
    }

    .page-footer-total {
      margin-left: 5px;
    }
  }
}

.toolbar-page-container .x-page-container-header {
  position: relative;

  .page-header-toolbar {
    position: absolute;
    top: 0px;
    right: 0px;
    /*和x-button-group保持相同的高度*/
    height: 28px;
  }
}

.x-header-page-container .x-page-container-header {
  min-height: 33px;
}

.page-container-wrapper {
  width: 100%;
  height: 100%;
}

/*表单间距统一是4px*/
/*.el-form-item--mini.el-form-item {
  margin-bottom: 4px;
}*/

/*dialog居中*/
.center-dialog > .el-dialog {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
}

/*固定dialog title的高度，对于某些dialog不使用标题可用，避免dialog的关闭按钮在没有标题的情况下下移*/
.fixed-height-dialog-title {
  .el-dialog__title {
    display: block;
    height: 24px;
  }
}

/*统一修改dialog的padding属性，使界面更紧凑*/
.el-dialog {
  .el-dialog__headerbtn {
    top: $--dialog-padding-primary - 5px;
    right: $--dialog-padding-primary - 5px;
    padding: 5px;
  }

  .el-dialog__header {
    padding-bottom: 0;
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .el-dialog__body {
    padding: $--dialog-padding-primary;
  }
}

/*el-tabs的没有size属性，因此统一使用28px的高度*/
.el-tabs--card > .el-tabs__header .el-tabs__item {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}

.el-tabs .el-tabs__header {
  margin-bottom: 4px !important;
}

.flex-tabs.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-tabs__content {
    flex: 1 0 0;
  }

  .el-tab-pane {
    height: 100%;
  }
}

/*vxe-table表头的升序，降序和筛选按钮的颜色*/
.vxe-table {
  &.vxe-table--render-default {
    color: #000;
  }

  /*排序*/
  .vxe-sort--asc-btn,
  .vxe-sort--desc-btn {
    color: $vxe-table-column-icon-border-color;

    &.sort--active {
      color: $table-header-icon-active;
    }
  }
}

/*修复使用Microsoft YaHei等字体时，增加图标导致按钮高度增加1px的问题，如果是Arial字体则不存在这个问题，因为Arial的实际渲染高度是14px，Microsoft YaHei是16px*/
.el-button > i {
  vertical-align: top;
}

.more-operation {
  background-color: #C0C4CC;
  color: #ffffff;
  text-align: center;
  width: 16px;
  height: 16px;
  line-height: 16px !important;
  font-size: 12px;
  border-radius: 3px;

  &:hover {
    cursor: pointer;
  }
}

.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {
  border-color: #F56C6C !important;
}

.fake-edit-cell-ellipsis > .vxe-cell {
  overflow: auto;
  white-space: nowrap;

  &::-webkit-scrollbar {
    display: none;
  }
}

.fake-edit-content {
  user-select: text;
  outline: none;
}

/**
假的可编辑单元格，如果不是tooltip或ellipsis,会有padding:6px，因此需要加上这个class来让单元格进入编辑模式时保持一致
 */
.vxe-table--render-default.vxe-editable .vxe-body--column.col--actived.fake-edit-cell-not-ellipsis {
  padding: 6px 0;
}

.table-operate-item {
  margin-left: 15px;
  color: #43A1FF;
  font-size: 12px;

  &:first-child {
    margin-left: 0px;
  }

  &:hover {
    cursor: pointer;
  }
}

.table-operate-item-error {
  color: #F56C6C;
}

.el-dropdown > .table-operate-item {
  margin-left: 15px;
}

.el-dropdown-menu__item > .table-operate-item {
  padding: 0px 20px;
}

.filter-search-list {
  min-width: 195px;
  margin: 10px;
}

/*vxe-table升级3.4.0后表头垂直居中样式变了，源码中以下代码被注释了，这里加回来*/
.vxe-header--column .vxe-cell--edit-icon,
.vxe-header--column .vxe-cell--required-icon,
.vxe-header--column .vxe-cell--title,
.vxe-header--column .vxe-cell-help-icon {
  vertical-align: middle;
}

.required-cell {
  background-color: $required-color;
}

.disabled-cell {
  background-color: #E1E7F1;
}

/**
使单元格的checkbox和column.type = checkbox生成的checkbox样式接近
 */
.x-table .vxe-cell > .cell-checkbox {
  margin-bottom: 5px;
  .vxe-checkbox--icon {
    border: 1px solid #dcdfe6;
  }
  &>input:checked+.vxe-checkbox--icon {
    border: 2px solid #0068c8;
    background-color: #0068c8;
  }
}

.cell-attachment {
  .vxe-cell {
    text-align: center;
  }
  .cell-attachment-text {
    text-align: center;
    color: $primary-color;
    cursor: pointer;
  }
}

.vxe-table--context-menu-wrapper {
  z-index: 4000 !important;
}

.vxe-select--panel {
  z-index: 2000 !important;
}

.table-header-sort-number {
  padding: 0 0 0 5px;
}