vuetify/src/stylus/components/_tables.styl

Vue.js 2 Semantic Component Framework

@import '../bootstrap'
@import '../theme'

/* Theme */
table($material)
  background-color: $material.cards
  color: $material.text.primary

  thead
    tr
      &:first-child
        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

    th
      color: rgba($material.text-color, $material.secondary-text-percent)

  tbody
    tr
      &:not(:last-child)
        border-bottom: 1px solid rgba($material.fg-color, $material.divider-percent)

      &[active]
        background: $material.table.active

      &:hover:not(.datatable__expand-row)
        background: $material.table.hover

  tfoot
    tr
      border-top: 1px solid rgba($material.fg-color, $material.divider-percent)

theme(table, "table")

.table
  &__overflow
    width: 100%
    overflow-x: auto
    overflow-y: hidden

table.table
  border-radius: 2px
  border-collapse: collapse
  border-spacing: 0
  width: 100%
  max-width: 100%

  thead, tbody
    td, th
      &:not(:nth-child(1)), &:first-child
        padding: 0 24px

  thead
    tr
      height: 56px

    th
      font-weight: 500
      font-size: 12px
      transition: .3s $transition.swing
      white-space: nowrap
      user-select: none

      &.sortable
        pointer-events: auto

      > div
        width: 100%

  tbody
    tr
      transition: background $primary-transition
      will-change: background

    td, th
      height: 48px

    td
      font-weight: 400
      font-size: 13px

  .input-group--selection-controls
    padding: 0

    .input-group__details
      display: none

    &.checkbox
      .icon
        left: 50%
        transform: translateX(-50%)

      .input-group--selection-controls__ripple
        left: 50%
        transform: translate(-50%, -50%)

  tfoot
    tr
      height: 48px
      td
        padding: 0 24px