src/scss/table.scss - master - eb/js-excel

@import "variables";
@import "mixins";

.excel__table {
  position: absolute;
  left: 0;
  right: 0;
  top: $header-height + $toolbar-height + $formula-height;
  overflow-x: auto;
  padding-bottom: 2px;
  .row {
    display: flex;
    flex-direction: row;
    min-height: 20px;
    height: $row-height;
  }
  .row-info {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: $info-cell-width;
    height: 100%;
    border: 1px solid $border-color;
    background: #f8f9fa;
    border-top: none;
    position: relative;
  }
  .row-data {
    display: flex;
  }
  .column {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    min-width: 40px;
    width: $cell-width;
    border: 1px solid $border-color;
    border-top: 0;
    border-left: 0;
    height: 100%;
    position: relative;
  }
  .cell {
    min-width: 40px;
    padding: 5px;
    width: $cell-width;
    height: 100%;
    border: 1px solid #e2e3e3;
    border-top: 0;
    border-left: 0;
    color: #111;
    white-space: nowrap;
    outline: none;
    &.selected {
      border: none;
      outline: 2px solid #3c74ff;
      z-index: 2;
    }
  }
  .col-resize,
  .row-resize {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: $primary-color;
    opacity: 0;
    z-index: 1000;
    &:hover {
      opacity: 1 !important;
    }
  }
  .col-resize {
    top: 0;
    width: 4px;
    &:hover {
      cursor: col-resize;
    }
  }
  .row-resize {
    left: 0;
    height: 4px;
    &:hover {
      cursor: row-resize;
    }
  }
}