quasar/src/components/table/table.ios.styl at v0.15 · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
.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
    position relative
    padding 0 !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
  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
    position relative

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

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

  .q-radial-ripple
    margin-bottom -100%

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

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

/*
 * 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