diff --git a/core/src/components/badge/test/hint/index.html b/core/src/components/badge/test/hint/index.html index fba0d6e73f..0a2ce00d08 100644 --- a/core/src/components/badge/test/hint/index.html +++ b/core/src/components/badge/test/hint/index.html @@ -366,6 +366,38 @@ + + + Inside Tab Button - Only Icon + + +
+ + + + + + + + + + + + + + + + 999 + + + + + + + +
+
+ Inside Button - Top Placement diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss index d3751e5862..e04b75d9c1 100644 --- a/core/src/components/tab-button/tab-button.ionic.scss +++ b/core/src/components/tab-button/tab-button.ionic.scss @@ -7,6 +7,11 @@ :host { --focus-ring-color: #{globals.$ion-border-focus-default}; --focus-ring-width: #{globals.$ion-border-radius-025}; + --padding-top: #{globals.$ion-space-100}; + --padding-end: #{globals.$ion-space-400}; + --padding-bottom: #{globals.$ion-space-100}; + --padding-start: #{globals.$ion-space-400}; + @include globals.typography(globals.$ion-body-action-xs); @@ -48,6 +53,7 @@ .button-native { min-width: globals.$ion-scale-1200; + min-height: globals.$ion-scale-1200; overflow: visible; @@ -108,10 +114,6 @@ @include globals.position(-2px); } -:host ::slotted(ion-badge.badge-vertical-top:empty) { - @include globals.position(calc(globals.$ion-scale-100 * -1)); -} - :host ::slotted(ion-badge.badge-vertical-bottom) { @include globals.position(calc(50% - globals.$ion-scale-200)); }