$border-color: #e6e6e6; // 边框颜色
$border-style: 1px solid $border-color;//边框样式
$header-color: #f2f2f2; //表头底色
$toolbar-color: #f8f8f9; //toolbar底色
$table-row-height: 38;
$grid-padding: 20;
$table-row-height-px: #{$table-row-height}px; //行高
$font-size: 14px; //字号
$body-color: #666; // 表格内容颜色
/*table*/
.s-table {
  color: #000;
  font-size: $font-size;
  &:before {
    border-top: $border-style;
  }
  &:after {
    border-bottom: $border-style;
  }
  .s-table--border-line {
   &:before{
     border-left: $border-style;
   }
    &:after {
      border-right: $border-style;
    }
  }
  &.border--default,&.border--full,&.border--outer {
    .s-table--header-wrapper {
      background-color: $header-color;
    }
  }
  &.border--full,&.border--outer {
    .s-table--header-wrapper {
      .s-table--header-border-line {
        border-bottom: $border-style;
      }
    }
    .s-table--fixed-left-wrapper {
      border-right: $border-style;
    }
    .s-table--footer-wrapper {
      border-top: $border-style;
    }
    .s-body--column, .s-header--column, .s-footer--column{
      background-image: linear-gradient($border-color, $border-color), linear-gradient($border-color, $border-color);
      background-repeat: no-repeat;
      background-size: 1px 100%, 100% 1px;
      background-position: right top, right bottom;
    }
  }
  th {
    font-weight: 400;
    position: relative;
  }
  td {
    position: relative;
    &.col--action {
      .s-cell {
        padding: 0;
      }
      .s-button--dropdown {
        width: 100%;
        .s-button {
          width: 100%;
          border: none;
          background: none;
        }
      }
    }
  }
  .s-header--column {
    //&.is--sortable {
    //  .s-cell--title{
    //    &:after {
    //      position: absolute;
    //      cursor: pointer;
    //      top: 1px;
    //      right: 28px;
    //      bottom: 1px;
    //      left: 1px;
    //      //z-index: 0;
    //      transition: all .3s;
    //      content: "";
    //    }
    //    &:hover {
    //      &:after {
    //        background-color: #d0cece;
    //      }
    //    }
    //  }
    //  .s-cell--sort:hover+.s-cell--title:after{
    //    background-color: #d0cece;
    //  }
    //}
    &.col--ellipsis {
      height: $table-row-height-px;
      &.col--checkbox>.s-cell .s-cell--title{
        width: 100%;
      }
    }
    .s-cell .s-cell--title {
      //z-index: 1;
    }
  }
  &--body-wrapper {
    color: $body-color;
  }
  .s-body--column {
    &.col--ellipsis {
      height: $table-row-height-px;
    }
  }
  .s-footer--column {
    height: $table-row-height-px;
    &:not(.col--ellipsis) {
      padding: 7px 0;
    }
    &.col--ellipsis {
      height: $table-row-height-px;
    }
  }
  .s-table-grid-down {
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 100%;
    line-height: $table-row-height-px;
    border-style: solid;
    border-color: #e8eaec;
    border-width: 0 1px 1px 1px;
    text-align: center;
    background-color: #fff;
    color: #999;
    cursor: pointer;
  }
  .s-table--loading {
    border-top: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
  }
  //排序
  .s-cell--sort {
    .s-sort--asc-btn,.s-sort--desc-btn {
      color: #9da0a7;
    }
  }
  // 复选框
  .s-cell--checkbox .s-checkbox--icon:before {
    border: 2px solid #9da0a7;
  }
  .s-action-icon {
    cursor: pointer;
  }
}
.s-table--action-wrapper {
  z-index: 19891017;
  position: absolute;
  display: none;
  .s-table--action-main  {
    position: relative;
  }
}
.col--action {
  .s-button--dropdown-arrow {
    display: none;
  }
}
// 单元格补全
.s-table-complete-outline > * {
  position: relative;
}
.s-table--complete-wrapper {
  z-index: 19891017;
  position: absolute;
  display: none;
  .s-table--complete {
    position: relative;
    .s-table--complete-main {
      box-shadow: 0 1px 6px rgba(0,0,0,.12);
      overflow-y: auto;
      background-color: #fff;
      color: $body-color;
      line-height: 37px;
      padding: 0 10px;
      font-size: $font-size;
      max-height: 150px;
      max-width: 500px;
      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    }
    .s-icon--close {
      position: absolute;
      right: -10px;
      top: -10px;
      width: 20px;
      height: 20px;
      padding: 3px;
      cursor: pointer;
      background-color: $body-color;
      border-radius: 50%;
      color: #fff;
      &:before, &:after {
        margin-left: 2px;
        margin-bottom: 2px;
      }
    }
  }
}
//可编辑
.s-table.s-editable .s-body--column{
  height: $table-row-height-px;
  &.col--actived .s-cell {
    padding: 0;
    width: inherit!important;
    .s-default-input {
      height: #{$table-row-height - 1}px;
      line-height: #{$table-row-height - 1}px;
      border-radius: initial;
      padding: 0 9px;
      box-shadow: 0 1px 20px rgba(0, 0, 0, .15);
    }
    .s-input {
      height: $table-row-height-px;
      line-height: #{$table-row-height - 1}px;
      &.type--date {
        height: #{$table-row-height - 1}px;
      }
      .s-input--inner {
        padding-left: 9px;
        border-radius: initial;
      }
    }
    .el-input__inner {
      height: #{$table-row-height - 1}px;
      line-height: #{$table-row-height - 1}px;
      border-radius: initial;
      padding: 0 9px;
    }
    .el-autocomplete {
      width: 100%;
    }
    .el-input-number__decrease,.el-input-number__increase {
      border-radius: initial;
      height: #{$table-row-height - 3}px;
    }
    .el-switch,.el-rate {
      padding-left: 10px;
    }
  }
}
.s-table--filter-wrapper {
  transition: all .3s;
}
// 筛选相关
.s-cell--filter {
  //position: absolute;
  //top: 0;
  //right: 1px;
  //width: 28px;
  //height: 100%;
  //font-size: $font-size;
  //text-align: center;
  //cursor: pointer;
  //transition: all .3s;
  //background-color: #e8e8e8;
  //&:hover {
  //  background-color: #d0cece;
  //  &>.s-filter--btn {
  //    color: #606266;
  //  }
  //}
  .s-filter--btn {
    //position: absolute;
    color: #737373;
    //top: 50%;
    //left: 50%;
    //margin-top: -5px;
    //margin-left: -6px;
  }
}
// grid相关
.s-grid {
  transition: padding-left .3s, padding-right .3s;
  //padding: #{$grid-padding + $table-row-height}px #{$grid-padding}px;
  &.is--maximize {
    padding: #{$grid-padding + $table-row-height}px #{$grid-padding}px;
  }
  .s-toolbar {
    background-color: $toolbar-color;
    min-height: $table-row-height-px;
    height: $table-row-height-px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .s-button--wrapper {
      height: 36px;
      overflow: auto;
      white-space: nowrap;
      padding-left: 20px;
      &::-webkit-scrollbar {
        width: 2px;
        height: 2px;
      }
    }
    .s-icon--zoomin {
      background-color: $toolbar-color;
    }
    .s-icon--zoomout:after {
      background-color: $toolbar-color;
    }
    .el-form {
      display: inline-block;
    }
  }
  .s-pager {
    height: #{$table-row-height + 10}px;
    padding-left: #{$grid-padding}px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border: none;
    .s-pager--jump-prev,
    .s-pager--prev-btn,
    .s-pager--next-btn,
    .s-pager--jump-next,
    .s-pager--num-btn {
      border-radius: 1em !important;
      border: none;
    }
  }
}
.s-button--dropdown-wrapper>.s-button.s-table-action-button {
  text-align: left;
  &:focus {
    box-shadow: none;
  }
}