File tree Expand file tree Collapse file tree 1 file changed +39
-39
lines changed
Expand file tree Collapse file tree 1 file changed +39
-39
lines changed Original file line number Diff line number Diff line change @@ -115,6 +115,45 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
115115 background : mat-color ($warn );
116116 }
117117 }
118+
119+ .mat-badge {
120+ position : relative ;
121+ }
122+
123+ .mat-badge-hidden {
124+ .mat-badge-content {
125+ display : none ;
126+ }
127+ }
128+
129+ .mat-badge-content {
130+ position : absolute ;
131+ text-align : center ;
132+ display : inline-block ;
133+ border-radius : 50% ;
134+ transition : all 0.2 ease-in-out ;
135+ transform : scale (0.6 );
136+ overflow : hidden ;
137+ white-space : nowrap ;
138+ text-overflow : ellipsis ;
139+ pointer-events : none ;
140+ }
141+
142+ // The active class is added after the element is added
143+ // so it can animate scale to default
144+ .mat-badge-content.mat-badge-active {
145+ transform : scale (1 );
146+ }
147+
148+ .mat-badge-small {
149+ @include _mat-badge-size ($mat-badge-small-size );
150+ }
151+ .mat-badge-medium {
152+ @include _mat-badge-size ($mat-badge-default-size );
153+ }
154+ .mat-badge-large {
155+ @include _mat-badge-size ($mat-badge-large-size );
156+ }
118157}
119158
120159@mixin mat-badge-typography ($config ) {
@@ -132,42 +171,3 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
132171 font-size : $mat-badge-font-size * 2 ;
133172 }
134173}
135-
136- .mat-badge {
137- position : relative ;
138- }
139-
140- .mat-badge-hidden {
141- .mat-badge-content {
142- display : none ;
143- }
144- }
145-
146- .mat-badge-content {
147- position : absolute ;
148- text-align : center ;
149- display : inline-block ;
150- border-radius : 50% ;
151- transition : all 0.2 ease-in-out ;
152- transform : scale (0.6 );
153- overflow : hidden ;
154- white-space : nowrap ;
155- text-overflow : ellipsis ;
156- pointer-events : none ;
157- }
158-
159- // The active class is added after the element is added
160- // so it can animate scale to default
161- .mat-badge-content.mat-badge-active {
162- transform : scale (1 );
163- }
164-
165- .mat-badge-small {
166- @include _mat-badge-size ($mat-badge-small-size );
167- }
168- .mat-badge-medium {
169- @include _mat-badge-size ($mat-badge-default-size );
170- }
171- .mat-badge-large {
172- @include _mat-badge-size ($mat-badge-large-size );
173- }
You can’t perform that action at this time.
0 commit comments