diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss index 167e1a2b48..82a5a945d7 100644 --- a/core/src/components/avatar/avatar.ionic.scss +++ b/core/src/components/avatar/avatar.ionic.scss @@ -96,19 +96,40 @@ :host(.avatar-xxsmall.avatar-soft), :host(.avatar-xsmall.avatar-soft), :host(.avatar-small.avatar-soft) { - --border-radius: #{globals.$ion-border-radius-100}; + --border-radius: #{globals.$ion-soft-2xs}; +} +:host(.avatar-medium.avatar-soft) { + --border-radius: #{globals.$ion-soft-xs}; +} +:host(.avatar-large.avatar-soft), +:host(.avatar-xlarge.avatar-soft) { + --border-radius: #{globals.$ion-soft-md}; } -:host(.avatar-soft) { - --border-radius: #{globals.$ion-border-radius-200}; +:host(.avatar-xxsmall.avatar-round), +:host(.avatar-xsmall.avatar-round), +:host(.avatar-small.avatar-round) { + --border-radius: #{globals.$ion-round-2xs}; +} +:host(.avatar-medium.avatar-round) { + --border-radius: #{globals.$ion-round-xs}; +} +:host(.avatar-large.avatar-round), +:host(.avatar-xlarge.avatar-round) { + --border-radius: #{globals.$ion-round-md}; } -:host(.avatar-round) { - --border-radius: #{globals.$ion-border-radius-full}; +:host(.avatar-xxsmall.avatar-rectangular), +:host(.avatar-xsmall.avatar-rectangular), +:host(.avatar-small.avatar-rectangular) { + --border-radius: #{globals.$ion-rectangular-2xs}; } - -:host(.avatar-rectangular) { - --border-radius: #{globals.$ion-border-radius-0}; +:host(.avatar-medium.avatar-rectangular) { + --border-radius: #{globals.$ion-rectangular-xs}; +} +:host(.avatar-large.avatar-rectangular), +:host(.avatar-xlarge.avatar-rectangular) { + --border-radius: #{globals.$ion-rectangular-md}; } // Avatar Icon @@ -224,5 +245,6 @@ // Avatar Disabled // -------------------------------------------------- :host(.avatar-disabled)::before { + @include globals.border-radius(var(--border-radius)); @include globals.disabled-state(); }