Skip to content

Commit f77ca7f

Browse files
BenOsodracBenOsodrac
committed
add support for number and icons with vertical prop
1 parent c37eaab commit f77ca7f

File tree

4 files changed

+217
-8
lines changed

4 files changed

+217
-8
lines changed

‎core/src/components/avatar/avatar.ionic.scss‎

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
height: globals.$ion-scale-1000;
154154
}
155155

156-
// Avatar Empty Badge (hint)
156+
// Avatar Badge Empty (hint)
157157
// --------------------------------------------------
158158

159159
:host ::slotted(ion-badge.badge-vertical-top:empty) {
@@ -169,7 +169,62 @@
169169
}
170170

171171
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
172-
transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
172+
transform: translate(globals.$ion-scale-100, globals.$ion-scale-100);
173+
}
174+
175+
// Avatar Badge Bottom (hint)
176+
// --------------------------------------------------
177+
178+
:host ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
179+
transform: translate(50%, 50%);
180+
}
181+
182+
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
183+
@include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
184+
185+
transform: translate(100%, 100%);
186+
}
187+
188+
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
189+
@include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null);
190+
}
191+
192+
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)),
193+
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)),
194+
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
195+
@include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
196+
}
197+
198+
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom[vertical]:not(:empty)) {
199+
@include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null);
200+
}
201+
202+
// Avatar Badge Top (hint)
203+
// --------------------------------------------------
204+
205+
:host ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
206+
transform: translate(50%, -50%);
207+
}
208+
209+
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
210+
@include globals.position(globals.$ion-scale-050, 0, null, null);
211+
}
212+
213+
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
214+
@include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null);
215+
}
216+
217+
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)),
218+
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
219+
@include globals.position(globals.$ion-scale-150, 0, null, null);
220+
}
221+
222+
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
223+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
224+
}
225+
226+
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top[vertical]:not(:empty)) {
227+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
173228
}
174229

175230
// Avatar Disabled

‎core/src/components/badge/badge.common.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,18 @@
4848
color: #{color.current-color(contrast)};
4949
}
5050

51-
// Badge Empty (hint)
51+
// Badge (hint)
5252
// --------------------------------------------------
5353

5454
:host([vertical]:not(.in-tab-button)) {
5555
@include position(null, 0, null, null);
5656
position: absolute;
5757
}
5858

59-
:host(:not(.in-tab-button):empty.badge-vertical-top) {
59+
:host(:not(.in-tab-button)[vertical].badge-vertical-top) {
6060
top: 0;
6161
}
6262

63-
:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
63+
:host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
6464
bottom: 0;
6565
}

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -146,14 +146,21 @@
146146
height: globals.$ion-scale-1000;
147147
}
148148

149-
// Badge Empty
149+
// Badge Vertical Prop
150150
// --------------------------------------------------
151151

152152
:host(:empty) {
153153
--padding-start: 0;
154154
--padding-end: 0;
155155
}
156156

157+
:host([vertical]:not(:empty)) {
158+
--padding-start: #{globals.$ion-scale-100};
159+
--padding-end: #{globals.$ion-scale-100};
160+
--padding-top: #{globals.$ion-scale-100};
161+
--padding-bottom: #{globals.$ion-scale-100};
162+
}
163+
157164
// Badge Sizes Empty
158165
// --------------------------------------------------
159166

@@ -175,18 +182,35 @@
175182
height: globals.$ion-scale-400;
176183
}
177184

185+
// Badge Sizes Not Empty With Vertical Prop
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+
178196
// Badge Inside Tab Button
179197
// --------------------------------------------------
180198

181199
:host([vertical].in-tab-button) {
182200
position: relative;
183201
}
184202

185-
// Badge Icon when Inside Tab Button
186-
:host([vertical].in-tab-button) ::slotted(ion-icon) {
203+
// Icon Inside Badge Hint
204+
// --------------------------------------------------
205+
:host([vertical]) ::slotted(ion-icon) {
187206
@include globals.position(50%, null, null, 50%);
188207

189208
position: absolute;
190209

191210
transform: translate(-50%, -50%);
192211
}
212+
213+
:host([vertical]) ::slotted(ion-icon) {
214+
width: globals.$ion-scale-300;
215+
height: globals.$ion-scale-300;
216+
}

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

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,136 @@
104104
<ion-badge color="danger" size="large" vertical="bottom"></ion-badge>
105105
</ion-avatar>
106106
</div>
107+
108+
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
109+
<ion-avatar size="xxsmall">
110+
<img src="/src/components/avatar/test/avatar.svg" />
111+
<ion-badge color="danger" size="small" vertical="top">1</ion-badge>
112+
</ion-avatar>
113+
<ion-avatar size="xsmall">
114+
<img src="/src/components/avatar/test/avatar.svg" />
115+
<ion-badge color="danger" size="small" vertical="top">1</ion-badge>
116+
</ion-avatar>
117+
<ion-avatar size="small">
118+
<img src="/src/components/avatar/test/avatar.svg" />
119+
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
120+
</ion-avatar>
121+
<ion-avatar size="medium">
122+
<img src="/src/components/avatar/test/avatar.svg" />
123+
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
124+
</ion-avatar>
125+
<ion-avatar size="large">
126+
<img src="/src/components/avatar/test/avatar.svg" />
127+
<ion-badge color="danger" size="medium" vertical="top">1</ion-badge>
128+
</ion-avatar>
129+
<ion-avatar size="xlarge">
130+
<img src="/src/components/avatar/test/avatar.svg" />
131+
<ion-badge color="danger" size="large" vertical="top">1</ion-badge>
132+
</ion-avatar>
133+
</div>
134+
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
135+
<ion-avatar size="xxsmall">
136+
<img src="/src/components/avatar/test/avatar.svg" />
137+
<ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
138+
</ion-avatar>
139+
<ion-avatar size="xsmall">
140+
<img src="/src/components/avatar/test/avatar.svg" />
141+
<ion-badge color="danger" size="small" vertical="bottom">1</ion-badge>
142+
</ion-avatar>
143+
<ion-avatar size="small">
144+
<img src="/src/components/avatar/test/avatar.svg" />
145+
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
146+
</ion-avatar>
147+
<ion-avatar size="medium">
148+
<img src="/src/components/avatar/test/avatar.svg" />
149+
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
150+
</ion-avatar>
151+
<ion-avatar size="large">
152+
<img src="/src/components/avatar/test/avatar.svg" />
153+
<ion-badge color="danger" size="medium" vertical="bottom">1</ion-badge>
154+
</ion-avatar>
155+
<ion-avatar size="xlarge">
156+
<img src="/src/components/avatar/test/avatar.svg" />
157+
<ion-badge color="danger" size="large" vertical="bottom">1</ion-badge>
158+
</ion-avatar>
159+
</div>
160+
161+
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
162+
<ion-avatar size="xxsmall">
163+
<img src="/src/components/avatar/test/avatar.svg" />
164+
<ion-badge color="danger" size="small" vertical="top">
165+
<ion-icon icon="star"></ion-icon>
166+
</ion-badge>
167+
</ion-avatar>
168+
<ion-avatar size="xsmall">
169+
<img src="/src/components/avatar/test/avatar.svg" />
170+
<ion-badge color="danger" size="small" vertical="top">
171+
<ion-icon icon="star"></ion-icon>
172+
</ion-badge>
173+
</ion-avatar>
174+
<ion-avatar size="small">
175+
<img src="/src/components/avatar/test/avatar.svg" />
176+
<ion-badge color="danger" size="medium" vertical="top">
177+
<ion-icon icon="star"></ion-icon>
178+
</ion-badge>
179+
</ion-avatar>
180+
<ion-avatar size="medium">
181+
<img src="/src/components/avatar/test/avatar.svg" />
182+
<ion-badge color="danger" size="medium" vertical="top">
183+
<ion-icon icon="star"></ion-icon>
184+
</ion-badge>
185+
</ion-avatar>
186+
<ion-avatar size="large">
187+
<img src="/src/components/avatar/test/avatar.svg" />
188+
<ion-badge color="danger" size="medium" vertical="top">
189+
<ion-icon icon="star"></ion-icon>
190+
</ion-badge>
191+
</ion-avatar>
192+
<ion-avatar size="xlarge">
193+
<img src="/src/components/avatar/test/avatar.svg" />
194+
<ion-badge color="danger" size="large" vertical="top">
195+
<ion-icon icon="star"></ion-icon>
196+
</ion-badge>
197+
</ion-avatar>
198+
</div>
199+
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
200+
<ion-avatar size="xxsmall">
201+
<img src="/src/components/avatar/test/avatar.svg" />
202+
<ion-badge color="danger" size="xxsmall" vertical="bottom">
203+
<ion-icon icon="star"></ion-icon>
204+
</ion-badge>
205+
</ion-avatar>
206+
<ion-avatar size="xsmall">
207+
<img src="/src/components/avatar/test/avatar.svg" />
208+
<ion-badge color="danger" size="small" vertical="bottom">
209+
<ion-icon icon="star"></ion-icon>
210+
</ion-badge>
211+
</ion-avatar>
212+
<ion-avatar size="small">
213+
<img src="/src/components/avatar/test/avatar.svg" />
214+
<ion-badge color="danger" size="medium" vertical="bottom">
215+
<ion-icon icon="star"></ion-icon>
216+
</ion-badge>
217+
</ion-avatar>
218+
<ion-avatar size="medium">
219+
<img src="/src/components/avatar/test/avatar.svg" />
220+
<ion-badge color="danger" size="medium" vertical="bottom">
221+
<ion-icon icon="star"></ion-icon>
222+
</ion-badge>
223+
</ion-avatar>
224+
<ion-avatar size="large">
225+
<img src="/src/components/avatar/test/avatar.svg" />
226+
<ion-badge color="danger" size="medium" vertical="bottom">
227+
<ion-icon icon="star"></ion-icon>
228+
</ion-badge>
229+
</ion-avatar>
230+
<ion-avatar size="xlarge">
231+
<img src="/src/components/avatar/test/avatar.svg" />
232+
<ion-badge color="danger" size="large" vertical="bottom">
233+
<ion-icon icon="star"></ion-icon>
234+
</ion-badge>
235+
</ion-avatar>
236+
</div>
107237
</ion-list>
108238

109239
<ion-list id="tab-button">

0 commit comments

Comments
 (0)