From daf61dab2cf40ca88d17d7d110f60dedd6d5b05a Mon Sep 17 00:00:00 2001 From: crisbeto Date: Thu, 15 Mar 2018 06:34:01 -0400 Subject: [PATCH] fix(badge): invalid style declaration and too broad transition * Fixes the badge transition not working due to the `transition` declaration being invalid (no units on the duration). * Fixes the badge animating all properties rather than only the `transform`. * Avoids blurry text in IE. --- src/lib/badge/_badge-theme.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/lib/badge/_badge-theme.scss b/src/lib/badge/_badge-theme.scss index 98158972550c..7e3787b6805f 100644 --- a/src/lib/badge/_badge-theme.scss +++ b/src/lib/badge/_badge-theme.scss @@ -131,7 +131,7 @@ $mat-badge-large-size: $mat-badge-default-size + 6; text-align: center; display: inline-block; border-radius: 50%; - transition: all 0.2 ease-in-out; + transition: transform 200ms ease-in-out; transform: scale(0.6); overflow: hidden; white-space: nowrap; @@ -142,7 +142,8 @@ $mat-badge-large-size: $mat-badge-default-size + 6; // The active class is added after the element is added // so it can animate scale to default .mat-badge-content.mat-badge-active { - transform: scale(1); + // Scale to `none` instead of `1` to avoid blurry text in some browsers. + transform: none; } .mat-badge-small {