quasar/src/css-components/html-table/html-table.mat.styl at v0.13 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
$table-stripe-color          ?= rgba(0, 0, 0, .07)
$table-highlight-color       ?= rgba(0, 0, 0, .14)
$table-border                ?= 1px solid rgba(0, 0, 0, .12)

table.q-table
  border-spacing 0
  empty-cells show

  thead
    text-align left
    vertical-align bottom
    font-weight 700

  th, td
    &:first-child
      border-left-width 0

    margin 0
    overflow visible
    padding .5rem .7rem

  &.compact
    th, td
      padding .1rem .3rem
  &.loose
    th, td
      padding 1rem

  &.bordered, &.cell-delimiter:not(.responsive):not(.flipped)
    border $table-border

  &:not(.responsive):not(.flipped)
    &.horizontal-delimiter, &.cell-delimiter
      th, td
        border-bottom $table-border

    &.vertical-delimiter, &.cell-delimiter
      th, td
        border-left $table-border
        &:last-child
          border-right $table-border

  &.striped-odd, &.striped
    tbody tr:nth-child(odd)
      background $table-stripe-color
  &.striped-even
    tbody tr:nth-child(even)
      background $table-stripe-color

  &.flipped
    display flex
    overflow hidden
    background none

    thead
      display flex
      flex-shrink 0
      min-width min-content

    tbody
      display flex
      position relative
      overflow-x auto
      overflow-y hidden

    tr
      display flex
      flex-direction column
      min-width min-content
      flex-shrink 0

    td, th
      display block

    td
      background-image none !important
      border-left 0

    th:not(:last-child),
    td:not(:last-child)
      border-bottom 0

    &.horizontal-delimiter, &.cell-delimiter
      tr
        border-left $table-border
        border-right $table-border

    &.vertical-delimiter, &.cell-delimiter
      th, td
        border-top $table-border
        &:last-child
          border-bottom $table-border

  @media (max-width $layout-small-max)
    &.responsive:not(.flipped)
      thead
        display none
      tr, td
        display block
      tr
        position relative
      td:before
        content attr(data-th)
        display block
        text-align left
        font-weight bold

      &.horizontal-delimiter
        tr:not(:last-child)
          border-bottom $table-border

      &.cell-delimiter
        tr
          border $table-border

      &.vertical-delimiter, &.cell-delimiter
        th, td
          border-left $table-border
          border-right $table-border

body.desktop table.q-table.highlight tbody tr
  transition all .28s ease-in
  &:hover
    background $table-highlight-color