blexar/src/stylus/elements/table.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.table
  overflow: hidden
  width: 100%
  border: $border solid $black
  border-spacing: 0
  border-collapse: separate
  border-radius: $borderRadius
  color: $black
  text-align: $dir-start
  @extends $normal

  &:not(:last-child)
    margin-bottom: $margin

  th, td
    &:not(:last-child)
      border-{$dir-end}: $border solid $black

      +mobile()
        border-right: 0

    +mobile()
      display: block
      width: 100%

  thead
    background-color: $white

    th
      border-bottom: $border solid $black
      padding: ($padding * 2) $padding
      font-weight: bold

      +mobile()
        border-bottom: 0

  tfoot
    background-color: $white

    th
      border-top: $border solid $black
      padding: $padding

  tr
    +mobile()
      display: block
      border-top: $border solid $black

  td
    padding: $padding
    border-top: $border solid $black
    background-color: $white

    +mobile()
      border: 0

  &-wrapper
    position: relative
    display: table
    overflow-x: auto
    margin: $margin auto
    padding: $padding
    border: $border solid $white
    border-radius: $borderRadius
    background-color: $white
    width: 100%

  &-sort
    float: right
    padding: 0
    outline: 0
    background: none
    border: none

    &.is-active
      fill: $primary
      stroke: $primary

    &.is-desc
      transform: scaleY(-1)

  &.is-striped
    tr:nth-child(2n)
      td
        background-color: $alight

  &.is-relaxed
    border: 0

    th, td
      border-{$dir-end}: 0

  &.is-center
    text-align: center

  &.is-top tbody
    vertical-align: top

  &.is-bottom tbody
    vertical-align: bottom

  &.is-middle tbody
    vertical-align: middle

  &.is-small td
    padding: ($padding * 0.5) $padding

  &.is-large td
    padding: ($padding * 2) $padding