quasar-framework
Version:
Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS
77 lines (70 loc) • 1.63 kB
text/stylus
$table-font-size ?= .8rem
$table-highlight-color ?= #f2f2f2
$table-color ?= $grey-8
table.quasar-table
position relative
border 0
border-collapse collapse
font-size $table-font-size
background-color white
color $table-color
&.bordered, &.cell-delimiter
border 1px solid rgba(0, 0, 0, .12)
&.cell-delimiter
th, td
border-right 1px solid rgba(0, 0, 0, .12)
&.row-delimiter, &.cell-delimiter
tr
border-bottom $table-border
th, td
border-bottom 1px solid rgba(0, 0, 0, .12)
&.striped
tbody tr
&:nth-child(odd)
background $table-highlight-color
td
border-radius 0
th
border-bottom 2px solid rgba(0, 0, 0, .12)
thead
th
padding 12px 18px
position relative
vertical-align bottom
text-overflow ellipsis
font-weight 700
line-height 24px
letter-spacing 0
height 48px
font-size 12px
color rgba(0, 0, 0, .54)
text-align left
&:first-of-type
padding-left 24px
&:last-of-type
padding-right 24px
tbody
tr
position relative
height 48px
td
position relative
height 48px
padding 12px 18px
vertical-align middle
text-align left
&:first-of-type
padding-left 24px
&:last-of-type
padding-right 24px
&.compact
th
padding-left 5px
padding-right 5px
td
padding 5px
body.desktop table.quasar-table.highlight
tbody tr, th
transition all .28s ease-in
&:hover
background darken($table-highlight-color, 5%) !important