File tree 1 file changed +39
-39
lines changed
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;
115
115
background : mat-color ($warn );
116
116
}
117
117
}
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
+ }
118
157
}
119
158
120
159
@mixin mat-badge-typography ($config ) {
@@ -132,42 +171,3 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
132
171
font-size : $mat-badge-font-size * 2 ;
133
172
}
134
173
}
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