diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss index bcc0ebf8ce..7e9a22b45e 100644 --- a/src/components/badge/badge.ios.scss +++ b/src/components/badge/badge.ios.scss @@ -16,7 +16,8 @@ $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background .badge-ios { - border-radius: $badge-ios-border-radius; + @include border-radius($badge-ios-border-radius); + color: $badge-ios-text-color; background-color: $badge-ios-background-color; } diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss index 0b849111c0..49bb3d5eee 100644 --- a/src/components/badge/badge.md.scss +++ b/src/components/badge/badge.md.scss @@ -16,7 +16,8 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro .badge-md { - border-radius: $badge-md-border-radius; + @include border-radius($badge-md-border-radius); + color: $badge-md-text-color; background-color: $badge-md-background-color; } diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 12dc374b2d..323cb4a6fe 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -12,9 +12,10 @@ $badge-font-weight: bold !default; ion-badge { - display: inline-block; + @include padding(3px, 8px); + @include text-align(center); - padding: 3px 8px; + display: inline-block; min-width: 10px; @@ -22,17 +23,16 @@ ion-badge { font-weight: $badge-font-weight; line-height: 1; - text-align: center; white-space: nowrap; vertical-align: baseline; contain: content; } -ion-badge.upgraded { +ion-badge.hydrated { visibility: inherit; } ion-badge:empty { display: none; -} \ No newline at end of file +} diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index 8ea824c876..77e77c7823 100644 --- a/src/components/badge/badge.wp.scss +++ b/src/components/badge/badge.wp.scss @@ -16,7 +16,8 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro .badge-wp { - border-radius: $badge-wp-border-radius; + @include border-radius($badge-wp-border-radius); + color: $badge-wp-text-color; background-color: $badge-wp-background-color; }