giga-grid/styles/GigaGridLayout.styl

Massively performant, multi-layered React.js table widget Written in TypeScript

@import "Util.styl"

div.giga-grid
  position relative
  margin 0
  font-family Roboto, sans-serif

  span.giga-grid-button
    padding 5px
    cursor pointer
    hover-transition()

  div.giga-grid-header-container
    font-size 11px
    height 20px

  // Hack to turn off frozen scrollbars for IE
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
    div.giga-grid-left-headers-container
      overflow-x auto !important

  div.giga-grid-left-headers-container, div.giga-grid-right-data-container
    float left
    overflow hidden

  div.giga-grid-body-viewport
    overflow hidden
    display inline-block // this allow the viewport to be as wide as the canva
    max-width 100%

  div.giga-grid-right-data-container
    overflow-x auto
    overflow-y scroll

  div.giga-grid-header-container
    max-width 100%
    white-space nowrap
    overflow hidden

  div.table-header
    box-sizing border-box
    padding 2px 5px
    min-width 10px
    display inline-block

  div.left-static-headers
    display inline-block
    overflow-x hidden

  div.right-scrolling-headers
    display inline-block
    overflow hidden

  div.table-header:last-child, div.content:last-child
    padding-right 10px

  div.table-header:first-child, div.content:first-child
    padding-left 10px

  div.table-header:first-of-type
    padding-right 20px!important // Need room for gear icon

  tr th
    font-weight normal

  tr th.column-group
    text-align center

  tr td
    white-space: nowrap

  tr td i:hover
    cursor pointer

  thead tr:hover
    cursor pointer

  .text-align-right
    text-align right

  .text-align-left
    text-align left

  div.content-container
    display inline-block

  div.giga-grid-row
    white-space nowrap

  span.group-by-cell
    white-space nowrap

  .content-container
    box-sizing border-box
    padding 4px 5px
    height 100%