Skip to content

Commit 36f4eaf

Browse files
jelbourntinayuangao
authored andcommitted
fix(badge): move styles into the theme mixin (#9999)
The badge styles were defined _outside_ the mixin, meaning they were being included any time the file was imported.
1 parent d871667 commit 36f4eaf

File tree

1 file changed

+39
-39
lines changed

1 file changed

+39
-39
lines changed

src/lib/badge/_badge-theme.scss

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff 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-
}

0 commit comments

Comments
 (0)