quasar/src/components/chip/chip.mat.styl at v0.16 · 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
.q-chip
  min-height $chip-height
  padding $chip-padding-horizontal $chip-padding-vertical
  font-size $chip-font-size
  border $chip-border
  border-radius $chip-border-radius
  vertical-align middle
  color $chip-color
  background $chip-background

  &:focus .q-chip-close
    opacity .8

  .q-icon
    font-size $chip-icon-size
    line-height 1

.q-chip-main
  line-height initial

.q-chip-side
  border-radius 50%
  height $chip-height
  width $chip-height
  min-width $chip-height
  overflow hidden

  img
    width 100%
    height 100%

.q-chip-left
  margin-left -12px
  margin-right 8px
.q-chip-right
  margin-left 2px
  margin-right -12px

.q-chip-square
  border-radius 2px

.q-chip-floating
  position absolute
  top -.3em
  right -.3em
  pointer-events none

.q-chip-tag
  position relative
  padding-left 1.7rem
  &:after
    content ''
    position absolute
    top 50%
    left .5rem
    margin-top -.25rem
    background white
    width .5rem
    height .5rem
    box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
    border-radius 50%

.q-chip-pointing
  position relative
  &:before
    content ''
    z-index -1
    background inherit
    width 16px
    height 16px
    position absolute
.q-chip-pointing-up
  margin-top .8rem
  &:before
    top 0
    left 50%
    transform translateX(-50%) translateY(-22%) rotate(45deg)
.q-chip-pointing-down
  margin-bottom .8rem
  &:before
    right auto
    top 100%
    left 50%
    transform translateX(-50%) translateY(-78%) rotate(45deg)
.q-chip-pointing-right
  margin-right .8rem
  &:before
    top 50%
    right 2px
    bottom auto
    left auto
    transform translateX(33%) translateY(-50%) rotate(45deg)
.q-chip-pointing-left
  margin-left .8rem
  &:before
    top 50%
    left 2px
    bottom auto
    right auto
    transform translateX(-33%) translateY(-50%) rotate(45deg)

.q-chip-detail
  background rgba(0, 0, 0, .1)
  opacity .8
  padding 0 5px
  border-radius inherit
  border-top-right-radius 0
  border-bottom-right-radius 0

.q-chip-small
  min-height $chip-small-height

  .q-chip-main
    padding 4px 0
    line-height initial

  .q-chip-side
    height $chip-small-height
    width $chip-small-height
    min-width $chip-small-height

  .q-chip-icon
    font-size $chip-small-icon-size

.q-chip-dense
  min-height 1px
  padding 0 3px
  font-size 12px

  &.q-chip-tag
    padding-left 1.3rem
  &.q-chip-pointing:before
    width 9px
    height 9px

  .q-chip-main
    padding 1px
  .q-chip-side
    height 18px
    width 18px
    min-width 16px
    font-size 14px
  .q-chip-left
    margin-left -3px
    margin-right 2px
  .q-chip-right
    margin-left 2px
    margin-right -2px
  .q-icon
    font-size 16px