diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index a37227748ff..5fe8380f1cd 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -153,23 +153,77 @@
height: globals.$ion-scale-1000;
}
-// Avatar Empty Badge (hint)
+// Avatar Badge Empty (hint)
// --------------------------------------------------
:host ::slotted(ion-badge.badge-vertical-top:empty) {
- transform: translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1));
+ @include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1)));
}
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
- transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1));
+ @include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1)));
}
:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
- transform: translate(0, globals.$ion-scale-100);
+ @include globals.transform(translate(0, globals.$ion-scale-100));
}
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
- transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
+ @include globals.transform(translate(globals.$ion-scale-100, globals.$ion-scale-100));
+}
+
+// Avatar Badge Bottom (hint)
+// --------------------------------------------------
+
+:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.transform(translate(50%, 50%));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
+ @include globals.transform(translate(100%, 100%));
+}
+
+:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null);
+}
+
+:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
+:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
+:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
+}
+
+:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null);
+}
+
+// Avatar Badge Top (hint)
+// --------------------------------------------------
+
+:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.transform(translate(50%, -50%));
+}
+
+:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.position(globals.$ion-scale-050, 0, null, null);
+}
+
+:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null);
+}
+
+:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
+:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.position(globals.$ion-scale-150, 0, null, null);
+}
+
+:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
+}
+
+:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
}
// Avatar Disabled
diff --git a/core/src/components/avatar/avatar.md.scss b/core/src/components/avatar/avatar.md.scss
index 91d365c7a58..cfcd2520280 100644
--- a/core/src/components/avatar/avatar.md.scss
+++ b/core/src/components/avatar/avatar.md.scss
@@ -1,3 +1,4 @@
+@use "../../themes/native/native.globals.md" as globals;
@import "./avatar.common";
@import "./avatar.md.vars";
@@ -15,9 +16,17 @@
// --------------------------------------------------
::slotted(ion-badge.badge-vertical-top:empty) {
- transform: translate(-50%, 50%);
+ @include globals.transform(translate(-50%, 50%));
}
::slotted(ion-badge.badge-vertical-bottom:empty) {
- transform: translateX(-100%);
+ @include globals.transform(translateX(-100%));
+}
+
+:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
+ @include globals.transform(translate(0, 100%));
+}
+
+:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
+ @include globals.transform(translate(0, -100%));
}
diff --git a/core/src/components/badge/badge.common.scss b/core/src/components/badge/badge.common.scss
index 47dfa9d0d08..b751d670dd1 100644
--- a/core/src/components/badge/badge.common.scss
+++ b/core/src/components/badge/badge.common.scss
@@ -48,7 +48,7 @@
color: #{color.current-color(contrast)};
}
-// Badge Empty (hint)
+// Badge (hint)
// --------------------------------------------------
:host([vertical]:not(.in-tab-button)) {
@@ -56,10 +56,10 @@
position: absolute;
}
-:host(:not(.in-tab-button):empty.badge-vertical-top) {
+:host(:not(.in-tab-button)[vertical].badge-vertical-top) {
top: 0;
}
-:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
+:host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
bottom: 0;
}
diff --git a/core/src/components/badge/badge.ionic.scss b/core/src/components/badge/badge.ionic.scss
index b8f1504d83d..efa7690fefe 100644
--- a/core/src/components/badge/badge.ionic.scss
+++ b/core/src/components/badge/badge.ionic.scss
@@ -146,7 +146,7 @@
height: globals.$ion-scale-1000;
}
-// Badge Empty
+// Badge (hint)
// --------------------------------------------------
:host(:empty) {
@@ -154,7 +154,14 @@
--padding-end: 0;
}
-// Badge Sizes Empty
+:host([vertical]:not(:empty)) {
+ --padding-start: #{globals.$ion-scale-100};
+ --padding-end: #{globals.$ion-scale-100};
+ --padding-top: #{globals.$ion-scale-100};
+ --padding-bottom: #{globals.$ion-scale-100};
+}
+
+// Badge (hint) Sizes
// --------------------------------------------------
/* sm */
@@ -182,8 +189,9 @@
position: relative;
}
-// Badge Icon when Inside Tab Button
-:host([vertical].in-tab-button) ::slotted(ion-icon) {
+// Icon Inside Badge Hint
+// --------------------------------------------------
+:host([vertical]) ::slotted(ion-icon) {
@include globals.position(50%, null, null, 50%);
position: absolute;
diff --git a/core/src/components/badge/badge.native.scss b/core/src/components/badge/badge.native.scss
index e0538cf63af..f2422de7ddb 100644
--- a/core/src/components/badge/badge.native.scss
+++ b/core/src/components/badge/badge.native.scss
@@ -1,6 +1,6 @@
@import "../../themes/native/native.globals.md";
@import "./badge.common";
-@import "./badge.common.vars";
+@import "./badge.native.vars";
// Badge
// --------------------------------------------------
@@ -13,6 +13,7 @@
}
// TODO(ROU-10747): Review size styles when sizes are defined for native themes.
+:host([vertical]:not(.in-tab-button)),
:host(:empty) {
--padding-start: 0;
--padding-end: 0;
@@ -23,4 +24,8 @@
width: $badge-min-width;
height: $badge-min-width;
+
+ font-size: $badge-hint-font-size;
+
+ line-height: 10px;
}
diff --git a/core/src/components/badge/badge.native.vars.scss b/core/src/components/badge/badge.native.vars.scss
new file mode 100644
index 00000000000..76cdfed047f
--- /dev/null
+++ b/core/src/components/badge/badge.native.vars.scss
@@ -0,0 +1,10 @@
+@import "../../themes/functions.font";
+
+// Badge
+// --------------------------------------------------
+
+/// @prop - Font size of the badge hint
+$badge-hint-baseline-font-size: 8px;
+
+/// @prop - Font size of the badge hint
+$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png
index a20aa73400a..5d962d25b98 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png
index aaafbd16897..be3a2b6c0fb 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png
index 2670789ba98..ee42c239a1a 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png
index 9e9e9179dab..7fc5d28f8af 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png
index 20bad41c2a5..7b669f1f0c6 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png
index f7ce7b61852..9fc851229eb 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png
index 4c1228dc074..6a19e33950c 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png
index 177ed499938..38e4f7fe1d5 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png
index 87d3cc7adc1..a7d3b2637a1 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png
index e5d1bb184e5..41a730bfaba 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png
index 13ae67e41e2..75e8f1fb034 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-empty-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png
index f2bee3c0ba7..50eb4307d5f 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png
index 2c805e55881..7269fc2dbaa 100644
Binary files a/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-tab-button-icon-bottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html
index cafcdf170e6..064da263eb3 100644
--- a/core/src/components/badge/test/hint/index.html
+++ b/core/src/components/badge/test/hint/index.html
@@ -104,6 +104,136 @@
+
+
+
+ 
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+ 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+