quasar-framework/src/components/table/table.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

.q-table-container
  border-radius $table-border-radius
  box-shadow $table-box-shadow
  position relative
  &.fullscreen
    background-color inherit

.q-table-top
  min-height 64px
  padding 8px 24px
  &:before
    content ''
    position absolute
    pointer-events none
    top 0
    right 0
    bottom 0
    left 0
    opacity .2
    transition $table-transition
  .q-table-control
    min-height 36px
    padding 8px 0
    flex-wrap wrap
.q-table-title
  font-size 20px
  letter-spacing 0.005em
  font-weight 400
.q-table-separator
  min-width 8px !important
.q-table-nodata .q-icon
  font-size 200%
  padding-right 15px

.q-table-progress
  height 0 !important
  td
    padding 0 !important
    border-bottom 1px solid transparent !important
  .q-progress
    position absolute
    height 2px
    bottom 0

.q-table-middle
  max-width 100%

.q-table-bottom
  min-height 48px
  padding 4px 14px 4px 24px
  &, .q-if
    font-size 12px
  .q-table-control
    min-height 24px

.q-table-control
  display flex
  align-items center

.q-table-sort-icon
  transition $table-transition
  will-change opacity, transform
  opacity 0
  font-size 120%
.q-table-sort-icon-left,
.q-table-sort-icon-center
  margin-left 4px
.q-table-sort-icon-right
  margin-right 4px

.q-table
  width 100%
  max-width 100%
  border-collapse collapse
  border-spacing 0

  thead tr
    height 56px

  th
    font-weight 500
    font-size 12px
    transition $table-transition
    user-select none
    &.sortable
      cursor pointer
      &:hover .q-table-sort-icon
        opacity .5
    &.sorted .q-table-sort-icon
      opacity 1 !important
    &.sort-desc .q-table-sort-icon
      transform rotate(180deg)

  tbody tr
    transition $table-transition
    will-change background

  th, td
    white-space nowrap
    padding 7px 24px

  thead, td, th
    border-style solid
    border-width 0

  tbody td
    height 48px
    font-weight 400
    font-size 13px

.q-table-col-auto-width
  width 1px

.q-table-bottom-item
  margin-right 24px

.q-table-grid
  box-shadow none
  .q-table-bottom
    border-top 0
  .q-table
    height 2px
    thead
      border 0

/*
 * Separators
 */
.q-table-horizontal-separator
  thead, tbody td
    border-width 0 0 1px 0

.q-table-vertical-separator
  thead
    border-width 0 0 1px 0
  td
    border-width 0 0 0 1px
  td:first-child
    border-left 0

.q-table-cell-separator
  td
    border-width 1px
  td:first-child
    border-left 0
  td:last-child
    border-right 0

/*
 * dense size
 */

table-dense()
  .q-table-top
    min-height 48px
  .q-table-top, .q-table-bottom
    padding-left 8px
    padding-right 8px
  .q-table-bottom
    min-height 42px

  .q-table-sort-icon
    font-size 110%
  .q-table
    th, td
      padding 4px 8px
    thead tr
      height 40px
    tbody td
      height 28px

  .q-table-bottom-item
    margin-right 8px

.q-table-dense
  table-dense()

@media (max-width $breakpoint-sm-max)
  table-dense()

/*
 * On light background
 */
.q-table-bottom // @stylint ignore
  color $table-header-color
  border-top 1px solid $table-border-color

.q-table // @stylint ignore
  color $table-color
  thead, tr, th, td
    border-color $table-border-color
  th
    color $table-header-color
    &.sortable:hover, &.sorted
      color $table-color
  tbody tr
    &.selected
      background $table-selected-background
    &:hover
      background $table-hover-background

/*
 * On dark background
 */
.q-table-dark
  color $table-dark-color

  .q-table-bottom, .q-table-top
    color $table-dark-header-color
    border-top 1px solid $table-dark-border-color

  thead, tr, th, td
    border-color $table-dark-border-color
  th
    color $table-dark-header-color
    &.sortable:hover, &.sorted
      color $table-dark-color
  tbody tr
    &.selected
      background $table-dark-selected-background
    &:hover
      background $table-dark-hover-background