@jecloud/ui/es/grid/style/vxe-table/table.less

JECloud UI库，基于ant-design-vue封装

@import './field-valid.less';

.vxe-primary-color {
  color: @vxe-primary-color;
}
.vxe-success-color {
  color: @vxe-success-color;
}
.vxe-info-color {
  color: @vxe-info-color;
}
.vxe-warning-color {
  color: @vxe-warning-color;
}
.vxe-danger-color {
  color: @vxe-danger-color;
}
.vxe-perfect-color {
  color: @vxe-table-header-background-color;
}
.vxe-loading {
  background-color: @vxe-loading-background-color;
  .vxe-loading--spinner:before,
  .vxe-loading--spinner:after{
    background-color: @vxe-primary-color;
  }
}

/*table*/
.vxe-table--render-default {
  font-size: @vxe-font-size;
  color: @vxe-table-font-color;
  font-family: @vxe-font-family;
  .vxe-table--body-wrapper {
    background-color: @vxe-table-body-background-color;
  }
  .vxe-table--footer-wrapper {
    background-color: @vxe-table-footer-background-color;
  }
  .vxe-body--row {
    &.row--stripe {
      background-color: @vxe-table-row-striped-background-color;
    }
    &.row--radio {
      background-color: @vxe-table-row-radio-checked-background-color;
    }
    &.row--checked {
      background-color: @vxe-table-row-checkbox-checked-background-color;
    }
    &.row--current {
      background-color: @vxe-table-row-current-background-color;
      .vxe-tree-cell{
        color:@primary-color;
      }
    }
    &.row--hover {
      background-color: @vxe-table-row-hover-background-color;
      &.row--stripe {
        background-color: @vxe-table-row-hover-striped-background-color;
      }
      &.row--radio {
        background-color: @vxe-table-row-hover-radio-checked-background-color;
      }
      &.row--checked {
        background-color: @vxe-table-row-hover-checkbox-checked-background-color;
      }
      &.row--current {
        background-color: @vxe-table-row-hover-current-background-color;
      }
    }
  }
  &.column--highlight {
    .vxe-header--column {
      .vxe-cell--title{
        cursor: default;
      }
      &:not(.col--seq) {
        &:hover {
          background-color: @vxe-table-column-hover-background-color;
        }
      }
    }
  }
  .vxe-header--column,
  .vxe-body--column,
  .vxe-footer--column {
    &.col--current {
      background-color: @vxe-table-column-current-background-color;
    }
  }
  
  /*边框*/
  .vxe-table--footer-wrapper {
    border-top: @vxe-table-border-width solid @vxe-table-border-color;
  }
  &.border--default,
  &.border--full,
  &.border--outer,
  &.border--vertical {
    .vxe-table--header-wrapper {
      background-color: @vxe-table-header-background-color;
    }
  }
  &.border--default,
  &.border--inner {
    .vxe-header--column,
    .vxe-body--column,
    .vxe-footer--column {
      background-image: linear-gradient(@vxe-table-border-color, @vxe-table-border-color);
      background-size: 100% @vxe-table-border-width;
    }
  }
  // 表格纵向线
  &.border--vertical {
    .vxe-body--column,
    .vxe-footer--column {
      background-image: linear-gradient(@vxe-table-border-color, @vxe-table-border-color);
      background-size:  @vxe-table-border-width 100%;
      background-repeat: no-repeat;
      background-position: 100% 100%;
    }
    .vxe-header--column{
      background-image: linear-gradient(@vxe-table-border-color, @vxe-table-border-color), linear-gradient(@vxe-table-border-color, @vxe-table-border-color);
      background-size: @vxe-table-border-width 100%, 100% @vxe-table-border-width;
      background-repeat: no-repeat;
      background-position: right top, right bottom;
    }
  }

  &.border--full {
    .vxe-header--column,
    .vxe-body--column,
    .vxe-footer--column {
      background-image: linear-gradient(@vxe-table-border-color, @vxe-table-border-color), linear-gradient(@vxe-table-border-color, @vxe-table-border-color);
      background-size: @vxe-table-border-width 100%, 100% @vxe-table-border-width;
    }
    .vxe-table--fixed-left-wrapper {
      // border-right: 1px solid @vxe-table-border-color;
      .vxe-body--column{
        border-right-color: @vxe-table-border-color;
      }
    }
  }
  &.border--default,
  &.border--full,
  &.border--outer,
  &.border--inner {
    .vxe-table--header-wrapper {
      .vxe-header--row {
        &:last-child {
          .vxe-header--gutter {
            background-image: linear-gradient(@vxe-table-border-color, @vxe-table-border-color);
            background-size: 100% @vxe-table-border-width;
          }
        }
      }
    }
  }
  &.border--inner,
  &.border--none {
    .vxe-table--header-wrapper {
      background-color: @vxe-table-body-background-color;
    }
  }




  
  .vxe-cell {
    padding-left: @vxe-table-cell-padding-left;
    padding-right: @vxe-table-cell-padding-right;
  }

  // 单元格占位符
  .vxe-cell--placeholder {
    color: @vxe-table-cell-placeholder-color;
  }

  .vxe-cell--tree-node{
    cursor: pointer;
    .je-tree-node-icon{
      .is--folder{
        color:#FFB04A;
      }
    }
    
    .vxe-cell--checkbox-icon,
    .je-tree-node-icon{
      margin-right: 6px;
      line-height: @vxe-table-row-line-height;
    }
  }
  // 单选框和复选框
  .vxe-cell--radio,
  .vxe-cell--checkbox {
    padding:0 !important;

    &.is--checked,
    &.is--indeterminate {
      color: @vxe-primary-color;
    }
    &.is--disabled {
      color: @vxe-disabled-color;
    }
    &-label{
      padding-left: 6px;
      color: @vxe-table-font-color;
      line-height: 1;
    }
  }
  .vxe-table--fixed-left-wrapper {
    &.scrolling--middle {
      box-shadow: @vxe-table-fixed-left-scrolling-box-shadow;
    }
  }
  .vxe-table--fixed-right-wrapper {
    &.scrolling--middle {
      box-shadow: @vxe-table-fixed-right-scrolling-box-shadow;
    }
  }

  /*列宽线*/
  .vxe-table--resizable-bar {
    &:before {
      background-color: @vxe-table-resizable-drag-line-color;
    }
  }

  /*边框线*/
  .vxe-table--border-line {
    border: @vxe-table-border-width solid @vxe-table-border-color;
  }

  .vxe-tree--line {
    border-style: @vxe-table-tree-node-line-style;
    border-color: @vxe-table-tree-node-line-color;
  }
  .vxe-tree--node-btn {
    color: lighten(@vxe-table-font-color, 20%);
    &:hover {
      color: @vxe-table-font-color;
    }
  }

  /*展开行*/
  .vxe-table--expanded {
    .vxe-table--expand-btn {
      color: lighten(@vxe-table-font-color, 20%);
      &:hover {
        color: @vxe-table-font-color;
      }
    }
  }
  .vxe-body--expanded-column {
    border-bottom: @vxe-table-border-width solid @vxe-table-border-color;
  }

  /* 表格尺寸 */
  &.size--large,
  &.vxe-editable.size--large{
    .XETableSize(@vxe-font-size-large,@vxe-table-row-height-large,@vxe-input-height-large,@vxe-checkbox-font-size-large);
  }
  &.size--middle,
  &.vxe-editable.size--middle{
    .XETableSize(@vxe-font-size-middle,@vxe-table-row-height-middle,@vxe-input-height-middle,@vxe-checkbox-font-size-middle);
  }
  &.size--small,
  &.vxe-editable.size--small{
    .XETableSize(@vxe-font-size-small,@vxe-table-row-height-small,@vxe-input-height-small,@vxe-checkbox-font-size-small);
  }
  &.size--mini,
  &.vxe-editable.size--mini{
    .XETableSize(@vxe-font-size-mini,@vxe-table-row-height-mini,@vxe-input-height-mini,@vxe-checkbox-font-size-mini);
    // 编辑字段，小尺寸
    .vxe-body--column.col--actived{
      .vxe-cell{
        .ant-input-affix-wrapper{
          padding:2px 11px;
        }
        .ant-select{
          &.ant-select-single{
            .ant-select-selector{
              height:28px;
              .ant-select-selection-search-input{
                height:26px;
              }
            }
          }
        }
        .ant-input-number{
          .ant-input-number-input{
            height:26px;
          }
        }
      }
    }
  }

  .vxe-body--column {
    &.col--selected {
      box-shadow: inset 0px 0px 0px 2px @vxe-primary-color;
    }
    .col--drag-btn{
      cursor: move;
    }
    &.col--dirty:before{
      z-index: 2;
    }
  }

  /*校验不通过*/
  .vxe-body--column {
    &.col--valid-error {
      .vxe-cell--valid {
        .vxe-cell--valid-msg {
          color: @vxe-table-validate-tooltip-error-color;
          background-color: @vxe-table-validate-tooltip-error-background-color;
        }
      }
      .vxe-default-input,
      .vxe-default-textarea,
      .vxe-default-select {
        border-color: @vxe-table-validate-error-color;
      }
      .vxe-input {
        > .vxe-input--inner {
          border-color: @vxe-table-validate-error-color;
        }
      }

    }
  }

  /*单元格编辑状态*/
  .vxe-body--row {
    &.row--new {
      & > .vxe-body--column {
        &:before {
          top: -@vxe-table-cell-dirty-width;
          left: -@vxe-table-cell-dirty-width;
          border-width: @vxe-table-cell-dirty-width;
          border-color: transparent @vxe-table-cell-dirty-insert-color transparent transparent;
        }
      }
    }
  }
  .vxe-body--column {
    &.col--dirty {
      &:before {
        top: -@vxe-table-cell-dirty-width;
        left: -@vxe-table-cell-dirty-width;
        border-width: @vxe-table-cell-dirty-width;
        border-color: transparent @vxe-table-cell-dirty-update-color transparent transparent;
      }
    }
  }

  /*可编辑*/
  &.vxe-editable {
    &.cell--highlight {
      .vxe-body--column {
        &.col--actived {
          box-shadow: inset 0px 0px 0px 2px @vxe-primary-color;
          &.col--valid-error {
            box-shadow: inset 0px 0px 0px 2px @vxe-table-validate-error-color;
          }
          .vxe-cell {
            .vxe-default-input {
              height: @vxe-table-row-line-height;
            }
            .vxe-textarea {
              height: @vxe-table-row-line-height - 1;
            }
          }
        }
      }
    }
    .vxe-body--column {
      &.col--actived {
        .vxe-cell {
          padding:0;
        }
      }
    }
  }

  
  .vxe-body--column {
    .is--draggable{
      cursor: move;
    }
  }

  /* 树形节点 */
  .col--tree-node{
    .vxe-tree-cell,
    .vxe-tree-cell .vxe-cell--checkbox{
      display: flex;
      align-items: center;
      flex:auto;
    }
    &.col--checkbox .vxe-tree-cell{
      display: block;
    }
    .je-tree-node-node,
    .je-tree-node-actions{
      flex:none;
    }
    .je-tree-node-actions{
      &>*{
        margin:0 2px;
      }
      &>*:first-child{
        margin-left:0;
      }
      &>*:last-child{
        margin-right:0;
      }
      .actions{
        visibility: hidden;
        width: 10px;
        text-align: center;
        cursor: pointer;
        &:hover{
          color:@primary-color;
          font-weight: 600;
        }
      }
    }
    
    .je-tree-node-content{
      flex:auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .je-tree-node-badge{
      font-size: 12px;
      background-color: @border-color-base;
      padding: 2px 6px;
      border-radius: 6px;
      line-height: 1;
    }
    
    .vxe-tree--node-btn{
      font-size:18px;
      line-height: 14px;
      &.vxe-icon--refresh{
        font-size: 14px;
      }
    }
  }
  .vxe-body--row.row--hover{
    .je-tree-node-actions{
      .actions{
        visibility: visible;
      }
    }
  }
  .vxe-body--column {
    &.col--valid-error {
      .vxe-cell--valid {
        .vxe-cell--valid-msg {
          background-color:@gold-1;
          color:@error-color;
          line-height: 20px;
          font-size: 12px;
          box-shadow: 2px 2px 4px @border-color-base;
          &::before{
            content: '';
            width:6px;
            height:6px;
            margin-right:6px;
            border-radius: 100%;
            background-color: @error-color;
            display: inline-block;
          }
        }
      }
      .vxe-cell{
        .form-control-validation(@error-color; @error-color; @form-error-input-bg; @error-color-hover; @error-color-outline);
      }
    }
  }
}


.vxe-table--tooltip-wrapper.vxe-table--valid-error{
  background-color:@gold-1;
  color:@error-color;
  line-height: 20px;
  font-size: 12px;
  .vxe-table--tooltip-content{
    display: flex;
    align-items: center;
    &::before{
      content: '';
      width:6px;
      height:6px;
      margin-right:6px;
      border-radius: 100%;
      background-color: @error-color;
      display: inline-block;
    }
  }
  .vxe-table--tooltip-arrow{
    border-top-color:@gold-1 !important;
    &::before{
      border-top-color:@gold-1 !important;
    }
  }
} 
// 提示
.vxe-table--tooltip-wrapper{
  position: fixed;
}