Skip to content

Commit

Permalink
fix(badge): move styles into the theme mixin (#9999)
Browse files Browse the repository at this point in the history
The badge styles were defined _outside_ the mixin, meaning they were being included any time the file was imported.
  • Loading branch information
jelbourn authored Feb 20, 2018
1 parent 6276efc commit 00a6c90
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions src/lib/badge/_badge-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,45 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
background: mat-color($warn);
}
}

.mat-badge {
position: relative;
}

.mat-badge-hidden {
.mat-badge-content {
display: none;
}
}

.mat-badge-content {
position: absolute;
text-align: center;
display: inline-block;
border-radius: 50%;
transition: all 0.2 ease-in-out;
transform: scale(0.6);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
}

// 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);
}

.mat-badge-small {
@include _mat-badge-size($mat-badge-small-size);
}
.mat-badge-medium {
@include _mat-badge-size($mat-badge-default-size);
}
.mat-badge-large {
@include _mat-badge-size($mat-badge-large-size);
}
}

@mixin mat-badge-typography($config) {
Expand All @@ -132,42 +171,3 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
font-size: $mat-badge-font-size * 2;
}
}

.mat-badge {
position: relative;
}

.mat-badge-hidden {
.mat-badge-content {
display: none;
}
}

.mat-badge-content {
position: absolute;
text-align: center;
display: inline-block;
border-radius: 50%;
transition: all 0.2 ease-in-out;
transform: scale(0.6);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
}

// 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);
}

.mat-badge-small {
@include _mat-badge-size($mat-badge-small-size);
}
.mat-badge-medium {
@include _mat-badge-size($mat-badge-default-size);
}
.mat-badge-large {
@include _mat-badge-size($mat-badge-large-size);
}

0 comments on commit 00a6c90

Please sign in to comment.