quasar/src/components/list/list.ios.styl at v0.14 · 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
.q-item-stamp
  font-size $item-stamp-font-size
  line-height $item-stamp-font-size
  white-space nowrap
  margin .3rem 0

.q-item-side-right
  text-align right
  color $item-secondary-color
  display flex
  flex-direction column
  align-items flex-end

.q-item-side
  color $item-primary-color
  min-width $item-primary-size
.q-item-avatar, .q-item-avatar img
  width $item-primary-size
  height $item-primary-size
  border-radius 50%

.q-item-letter, .q-item-icon
  font-size $item-icon-size
.q-item-icon-inverted
  border-radius 50%
  font-size $item-inverted-icon-size
  color white
  background $primary
  padding 9px

.q-item-main
  flex 1 1 auto
  min-width 0
.q-item-main-inset
  margin-left ($item-gutter + $item-primary-size)

.q-item-label > span
  color $item-content-secondary-text-color
.q-item-sublabel
  color $item-content-secondary-text-color
  font-size 90%
  margin-top .2rem
  > span
    font-weight 500

.q-item-section + .q-item-section
  margin-left $item-gutter

.q-item
  position relative
  display flex
  align-items center
  font-size $item-font-size
  text-align left

  padding ($item-padding / 2) $item-padding
  min-height $item-min-height

  &.active, &.router-link-active, &:focus
    background $item-active-color

  &:focus
    outline 0

.q-item-image
  min-width $item-image-size
  max-width $item-image-size
  max-height $item-image-size

.q-list-multiline > .q-item, .q-item-multiline
  align-items flex-start

.q-list-link > .q-item, .q-item-link
  cursor pointer

.q-list-highlight > .q-item, .q-item-highlight,
.q-list-link > .q-item, .q-item-link
  &:hover
    background $item-highlight-color

.q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator
  border-top 1px solid $item-separator-color
.q-list-inset-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-inset-separator
  &:after
    content ''
    position absolute
    top 0
    right 0
    left ($item-padding + $item-gutter + $item-primary-size)
    height 1px
    background $item-separator-color

.q-list-dense > .q-item, .q-item-dense
  padding round($item-padding * $item-dense-factor) $item-padding
  min-height round($item-min-height * $item-dense-factor)
.q-list-sparse > .q-item, .q-item-sparse
  padding ($item-padding * $item-sparse-factor) $item-padding
  min-height ($item-min-height * $item-sparse-factor)

.q-list-striped > .q-item:nth-child(even)
  background-color $item-stripe-color
.q-list-striped-odd > .q-item:nth-child(odd)
  background-color $item-stripe-color

.q-list
  border 1px solid $item-separator-color
  padding ($item-padding / 2) 0

  & + .q-list
    margin-top 32px

.q-item-separator-component
  margin ($item-padding / 2) 0
  height 1px
  border 0
  background-color $item-separator-color
  &:last-child
    display none
  & + .q-list-header
    margin-top (- $item-padding / 2)
.q-item-separator-inset-component
  margin-left ($item-padding + $item-gutter + $item-primary-size)

.q-list-header
  color $item-label-color
  font-size 14px
  font-weight 500
  line-height 48px
  padding-left $item-padding
.q-list-header-inset
  padding-left ($item-padding + $item-gutter + $item-primary-size)