From 291beb32bb4e993fb996c8a3324033ed039663c2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?= Date: Thu, 28 Aug 2025 12:46:54 +0100 Subject: [PATCH] - update badge position; --- .../tab-button/tab-button.ionic.scss | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index 5e7914c212..2738832291 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -107,18 +107,23 @@ :host ::slotted(ion-badge) { @include globals.position(null, null, null, calc(50% + globals.$ion-scale-300)); + @include globals.transform(translate(-50%, -50%)); } :host ::slotted(ion-badge.badge-vertical-top) { - @include globals.position(-2px); + @include globals.position(globals.$ion-scale-150); +} + +:host ::slotted(ion-badge.badge-vertical-top:empty) { + @include globals.position(globals.$ion-scale-050, null, null, calc(50% + globals.$ion-scale-250)); } :host ::slotted(ion-badge.badge-vertical-bottom) { - @include globals.position(calc(50% - globals.$ion-scale-200)); + @include globals.position(calc(50% - (globals.$ion-scale-050))); } :host ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.position(calc(50% - globals.$ion-scale-100)); + @include globals.position(50%, null, null, calc(50% + globals.$ion-scale-250)); } :host ::slotted(ion-badge[vertical]:not(:empty)) { @@ -131,13 +136,17 @@ } :host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) { - @include globals.position(calc(50% - globals.$ion-scale-100)); -} - -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) { @include globals.position(calc(50% + globals.$ion-scale-100)); } -:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) { - @include globals.position(calc(50% + 14px)); +:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top:empty) { + @include globals.position(50%); +} + +:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) { + @include globals.position(calc(100% - globals.$ion-scale-100)); +} + +:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) { + @include globals.position(calc(100% - globals.$ion-scale-050), null, null, calc(50% + globals.$ion-scale-250)); }