Skip to content

Commit 8eef01e

Browse files
rstoenescurstoenescu
committed
fix(QChip): Icon size when of type small
1 parent d05f0aa commit 8eef01e

File tree

6 files changed

+207
-199
lines changed

6 files changed

+207
-199
lines changed

‎dev/components/components/chip.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<q-chip icon="alarm" icon-right="alarm" color="primary" closable>
3232
q-chip
3333
</q-chip>
34-
<q-chip icon="alarm" icon-right="alarm" color="primary" closable small>
34+
<q-chip icon="chat" icon-right="chat" color="primary" closable small>
3535
q-chip
3636
</q-chip>
3737
<q-chip color="secondary" class="shadow-1">10k</q-chip>
@@ -52,7 +52,7 @@
5252
<q-chip square icon="alarm" icon-right="alarm" color="primary" closable>
5353
q-chip
5454
</q-chip>
55-
<q-chip square icon="alarm" icon-right="alarm" color="primary" closable small>
55+
<q-chip square icon="chat" icon-right="chat" color="primary" closable small>
5656
q-chip
5757
</q-chip>
5858
<q-chip square color="secondary" class="shadow-1">10k</q-chip>

‎src/components/chip/QChip.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ export default {
2222
},
2323
computed: {
2424
classes () {
25-
const cls = [{
26-
tag: this.tag,
27-
square: this.square,
28-
floating: this.floating,
29-
pointing: this.pointing,
30-
small: this.small || this.floating
31-
}]
32-
this.pointing && cls.push(`pointing-${this.pointing}`)
25+
const cls = []
26+
27+
this.pointing && cls.push(`q-chip-pointing-${this.pointing}`)
28+
;['tag', 'square', 'floating', 'pointing', 'small'].forEach(prop => {
29+
this[prop] && cls.push(`q-chip-${prop}`)
30+
})
31+
3332
if (this.color) {
3433
cls.push(`bg-${this.color}`)
3534
!this.textColor && cls.push(`text-white`)
3635
}
3736
if (this.textColor) {
3837
cls.push(`text-${this.textColor}`)
3938
}
39+
4040
return cls
4141
}
4242
},
@@ -67,11 +67,11 @@ export default {
6767
}, [
6868
this.icon || this.avatar
6969
? h('div', {
70-
staticClass: 'q-chip-side chip-left row flex-center',
71-
'class': { 'chip-detail': this.detail }
70+
staticClass: 'q-chip-side q-chip-left row flex-center',
71+
'class': { 'q-chip-detail': this.detail }
7272
}, [
7373
this.icon
74-
? h(QIcon, { props: { name: this.icon } })
74+
? h(QIcon, { staticClass: 'q-chip-icon', props: { name: this.icon } })
7575
: (this.avatar ? h('img', { domProps: { src: this.avatar } }) : null)
7676
])
7777
: null,
@@ -83,12 +83,12 @@ export default {
8383
this.iconRight
8484
? h(QIcon, {
8585
props: { name: this.iconRight },
86-
'class': this.closable ? 'on-right' : 'q-chip-side chip-right'
86+
'class': this.closable ? 'on-right q-chip-icon' : 'q-chip-side q-chip-right'
8787
})
8888
: null,
8989

9090
this.closable
91-
? h('div', { staticClass: 'q-chip-side q-chip-close chip-right row flex-center' }, [
91+
? h('div', { staticClass: 'q-chip-side q-chip-close q-chip-right row flex-center' }, [
9292
h(QIcon, {
9393
props: { name: this.$q.icon.chip.close },
9494
staticClass: 'cursor-pointer',

‎src/components/chip/chip.ios.styl‎

Lines changed: 95 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -15,107 +15,110 @@
1515
font-size $chip-icon-size
1616
line-height 1
1717

18-
.q-chip-main
19-
line-height initial
18+
.q-chip-main
19+
line-height initial
2020

21-
.q-chip-side
22-
border-radius 50%
23-
height $chip-height
24-
width $chip-height
25-
min-width $chip-height
26-
overflow hidden
21+
.q-chip-side
22+
border-radius 50%
23+
height $chip-height
24+
width $chip-height
25+
min-width $chip-height
26+
overflow hidden
27+
28+
img
29+
width 100%
30+
height 100%
2731

28-
img
29-
width 100%
30-
height 100%
32+
.q-chip-left
33+
margin-left -12px
34+
margin-right 8px
35+
.q-chip-right
36+
margin-left 2px
37+
margin-right -12px
3138

32-
&.chip-left
33-
margin-left -12px
34-
margin-right 8px
35-
&.chip-right
36-
margin-left 2px
37-
margin-right -12px
39+
.q-chip-square
40+
border-radius 2px
3841

39-
&.square
40-
border-radius 2px
42+
.q-chip-floating
43+
position absolute
44+
top -.7rem
45+
left 100%
46+
margin 0 0 0 -1.5rem !important
47+
pointer-events none
4148

42-
&.floating
49+
.q-chip-tag
50+
position relative
51+
padding-left 1.7rem
52+
&:after
53+
content ''
4354
position absolute
44-
top -.7rem
45-
left 100%
46-
margin 0 0 0 -1.5rem !important
47-
pointer-events none
55+
top 50%
56+
left .5rem
57+
margin-top -.25rem
58+
background white
59+
width .5rem
60+
height .5rem
61+
box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
62+
border-radius 50%
4863

49-
&.tag
50-
position relative
51-
padding-left 1.7rem
52-
&:after
53-
content ''
54-
position absolute
55-
top 50%
56-
left .5rem
57-
margin-top -.25rem
58-
background white
59-
width .5rem
60-
height .5rem
61-
box-shadow 0 -1px 1px 0 rgba(0, 0, 0, .3)
62-
border-radius 50%
64+
.q-chip-pointing
65+
position relative
66+
&:before
67+
content ''
68+
z-index -1
69+
background inherit
70+
width 16px
71+
height 16px
72+
position absolute
73+
.q-chip-pointing-up
74+
margin-top .8rem
75+
&:before
76+
top 0
77+
left 50%
78+
transform translateX(-50%) translateY(-22%) rotate(45deg)
79+
.q-chip-pointing-down
80+
margin-bottom .8rem
81+
&:before
82+
right auto
83+
top 100%
84+
left 50%
85+
transform translateX(-50%) translateY(-78%) rotate(45deg)
86+
.q-chip-pointing-right
87+
margin-right .8rem
88+
&:before
89+
top 50%
90+
right 2px
91+
bottom auto
92+
left auto
93+
transform translateX(33%) translateY(-50%) rotate(45deg)
94+
.q-chip-pointing-left
95+
margin-left .8rem
96+
&:before
97+
top 50%
98+
left 2px
99+
bottom auto
100+
right auto
101+
transform translateX(-33%) translateY(-50%) rotate(45deg)
63102

64-
&.pointing
65-
position relative
66-
&:before
67-
content ''
68-
z-index -1
69-
background inherit
70-
width 16px
71-
height 16px
72-
position absolute
73-
&.pointing-up
74-
margin-top .8rem
75-
&:before
76-
top 0
77-
left 50%
78-
transform translateX(-50%) translateY(-22%) rotate(45deg)
79-
&.pointing-down
80-
margin-bottom .8rem
81-
&:before
82-
right auto
83-
top 100%
84-
left 50%
85-
transform translateX(-50%) translateY(-78%) rotate(45deg)
86-
&.pointing-right
87-
margin-right .8rem
88-
&:before
89-
top 50%
90-
right 2px
91-
bottom auto
92-
left auto
93-
transform translateX(33%) translateY(-50%) rotate(45deg)
94-
&.pointing-left
95-
margin-left .8rem
96-
&:before
97-
top 50%
98-
left 2px
99-
bottom auto
100-
right auto
101-
transform translateX(-33%) translateY(-50%) rotate(45deg)
103+
.q-chip-detail
104+
background rgba(0, 0, 0, .1)
105+
opacity .8
106+
padding 0 5px
107+
border-radius inherit
108+
border-top-right-radius 0
109+
border-bottom-right-radius 0
102110

103-
.chip-detail
104-
background rgba(0, 0, 0, .1)
105-
opacity .8
106-
padding 0 5px
107-
border-radius inherit
108-
border-top-right-radius 0
109-
border-bottom-right-radius 0
111+
.q-chip-small
112+
min-height $chip-small-height
110113

111-
&.small
112-
min-height $chip-small-height
114+
.q-chip-main
115+
padding 4px 0
116+
line-height initial
113117

114-
.q-chip-main
115-
padding 4px 0
116-
line-height initial
118+
.q-chip-side
119+
height $chip-small-height
120+
width $chip-small-height
121+
min-width $chip-small-height
117122

118-
.q-chip-side
119-
height $chip-small-height
120-
width $chip-small-height
121-
min-width $chip-small-height
123+
.q-chip-icon
124+
font-size $chip-small-icon-size

0 commit comments

Comments
 (0)