Skip to content

Commit 760d71a

Browse files
committed
fixed size usage and css
1 parent 96bd044 commit 760d71a

File tree

2 files changed

+23
-37
lines changed

2 files changed

+23
-37
lines changed

core/src/components/badge/badge.ionic.scss

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -182,17 +182,6 @@
182182
height: globals.$ion-scale-400;
183183
}
184184

185-
// Badge (hint)
186-
// --------------------------------------------------
187-
188-
:host(.badge-small[vertical]:not(:empty)),
189-
:host(.badge-medium[vertical]:not(:empty)),
190-
:host(.badge-large[vertical]:not(:empty)) {
191-
@include globals.typography(globals.$ion-body-sm-medium);
192-
min-width: globals.$ion-scale-400;
193-
height: globals.$ion-scale-400;
194-
}
195-
196185
// Badge Inside Tab Button
197186
// --------------------------------------------------
198187

@@ -207,8 +196,5 @@
207196

208197
position: absolute;
209198

210-
width: globals.$ion-scale-300;
211-
height: globals.$ion-scale-300;
212-
213199
transform: translate(-50%, -50%);
214200
}

core/src/components/badge/test/hint/index.html

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -108,90 +108,90 @@
108108
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
109109
<ion-avatar size="xxsmall">
110110
<img src="/src/components/avatar/test/avatar.svg" />
111-
<ion-badge color="danger" size="small" vertical="top">1</ion-badge>
111+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
112112
</ion-avatar>
113113
<ion-avatar size="xsmall">
114114
<img src="/src/components/avatar/test/avatar.svg" />
115-
<ion-badge color="danger" size="small" vertical="top">1</ion-badge>
115+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
116116
</ion-avatar>
117117
<ion-avatar size="small">
118118
<img src="/src/components/avatar/test/avatar.svg" />
119-
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
119+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
120120
</ion-avatar>
121121
<ion-avatar size="medium">
122122
<img src="/src/components/avatar/test/avatar.svg" />
123-
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
123+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
124124
</ion-avatar>
125125
<ion-avatar size="large">
126126
<img src="/src/components/avatar/test/avatar.svg" />
127-
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
127+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
128128
</ion-avatar>
129129
<ion-avatar size="xlarge">
130130
<img src="/src/components/avatar/test/avatar.svg" />
131-
<ion-badge color="danger" size="large" vertical="top">1</ion-badge>
131+
<ion-badge color="danger" size="xxsmall" vertical="top">1</ion-badge>
132132
</ion-avatar>
133133
</div>
134134
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
135135
<ion-avatar size="xxsmall">
136136
<img src="/src/components/avatar/test/avatar.svg" />
137-
<ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
137+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
138138
</ion-avatar>
139139
<ion-avatar size="xsmall">
140140
<img src="/src/components/avatar/test/avatar.svg" />
141-
<ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
141+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
142142
</ion-avatar>
143143
<ion-avatar size="small">
144144
<img src="/src/components/avatar/test/avatar.svg" />
145-
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
145+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
146146
</ion-avatar>
147147
<ion-avatar size="medium">
148148
<img src="/src/components/avatar/test/avatar.svg" />
149-
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
149+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
150150
</ion-avatar>
151151
<ion-avatar size="large">
152152
<img src="/src/components/avatar/test/avatar.svg" />
153-
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
153+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
154154
</ion-avatar>
155155
<ion-avatar size="xlarge">
156156
<img src="/src/components/avatar/test/avatar.svg" />
157-
<ion-badge color="danger" size="large" vertical="bottom">1</ion-badge>
157+
<ion-badge color="danger" size="xxsmall" vertical="bottom">1</ion-badge>
158158
</ion-avatar>
159159
</div>
160160

161161
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
162162
<ion-avatar size="xxsmall">
163163
<img src="/src/components/avatar/test/avatar.svg" />
164-
<ion-badge color="danger" size="small" vertical="top">
164+
<ion-badge color="danger" size="xxsmall" vertical="top">
165165
<ion-icon icon="star"></ion-icon>
166166
</ion-badge>
167167
</ion-avatar>
168168
<ion-avatar size="xsmall">
169169
<img src="/src/components/avatar/test/avatar.svg" />
170-
<ion-badge color="danger" size="small" vertical="top">
170+
<ion-badge color="danger" size="xxsmall" vertical="top">
171171
<ion-icon icon="star"></ion-icon>
172172
</ion-badge>
173173
</ion-avatar>
174174
<ion-avatar size="small">
175175
<img src="/src/components/avatar/test/avatar.svg" />
176-
<ion-badge color="danger" size="medium" vertical="top">
176+
<ion-badge color="danger" size="xxsmall" vertical="top">
177177
<ion-icon icon="star"></ion-icon>
178178
</ion-badge>
179179
</ion-avatar>
180180
<ion-avatar size="medium">
181181
<img src="/src/components/avatar/test/avatar.svg" />
182-
<ion-badge color="danger" size="medium" vertical="top">
182+
<ion-badge color="danger" size="xxsmall" vertical="top">
183183
<ion-icon icon="star"></ion-icon>
184184
</ion-badge>
185185
</ion-avatar>
186186
<ion-avatar size="large">
187187
<img src="/src/components/avatar/test/avatar.svg" />
188-
<ion-badge color="danger" size="medium" vertical="top">
188+
<ion-badge color="danger" size="xxsmall" vertical="top">
189189
<ion-icon icon="star"></ion-icon>
190190
</ion-badge>
191191
</ion-avatar>
192192
<ion-avatar size="xlarge">
193193
<img src="/src/components/avatar/test/avatar.svg" />
194-
<ion-badge color="danger" size="large" vertical="top">
194+
<ion-badge color="danger" size="xxsmall" vertical="top">
195195
<ion-icon icon="star"></ion-icon>
196196
</ion-badge>
197197
</ion-avatar>
@@ -205,31 +205,31 @@
205205
</ion-avatar>
206206
<ion-avatar size="xsmall">
207207
<img src="/src/components/avatar/test/avatar.svg" />
208-
<ion-badge color="danger" size="small" vertical="bottom">
208+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
209209
<ion-icon icon="star"></ion-icon>
210210
</ion-badge>
211211
</ion-avatar>
212212
<ion-avatar size="small">
213213
<img src="/src/components/avatar/test/avatar.svg" />
214-
<ion-badge color="danger" size="medium" vertical="bottom">
214+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
215215
<ion-icon icon="star"></ion-icon>
216216
</ion-badge>
217217
</ion-avatar>
218218
<ion-avatar size="medium">
219219
<img src="/src/components/avatar/test/avatar.svg" />
220-
<ion-badge color="danger" size="medium" vertical="bottom">
220+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
221221
<ion-icon icon="star"></ion-icon>
222222
</ion-badge>
223223
</ion-avatar>
224224
<ion-avatar size="large">
225225
<img src="/src/components/avatar/test/avatar.svg" />
226-
<ion-badge color="danger" size="medium" vertical="bottom">
226+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
227227
<ion-icon icon="star"></ion-icon>
228228
</ion-badge>
229229
</ion-avatar>
230230
<ion-avatar size="xlarge">
231231
<img src="/src/components/avatar/test/avatar.svg" />
232-
<ion-badge color="danger" size="large" vertical="bottom">
232+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
233233
<ion-icon icon="star"></ion-icon>
234234
</ion-badge>
235235
</ion-avatar>

0 commit comments

Comments
 (0)