Skip to content

Commit 4006dc7

Browse files
committed
fix(expansion-panel): arrow not centered vertically and incorrect title font weight
* Fixes the arrow in the expansion panel header not being quite centered, due to it being based on a rotated CSS triangle. These changes switch to use an SVG which is much easier to reason about. * Uses the correct font weight for the panel header's title.
1 parent 89ea485 commit 4006dc7

File tree

3 files changed

+14
-15
lines changed

3 files changed

+14
-15
lines changed

src/lib/expansion/_expansion-theme.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
}
3131

3232
.mat-expansion-panel-header-description,
33-
.mat-expansion-indicator::after {
33+
.mat-expansion-indicator {
3434
color: mat-color($foreground, secondary-text);
3535
}
3636

@@ -56,4 +56,8 @@
5656
.mat-expansion-panel-content {
5757
@include mat-typography-level-to-styles($config, body-1);
5858
}
59+
60+
.mat-expansion-panel-header-title {
61+
font-weight: mat-font-weight($config, title);
62+
}
5963
}

src/lib/expansion/expansion-panel-header.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
<ng-content select="mat-panel-description"></ng-content>
44
<ng-content></ng-content>
55
</span>
6-
<span [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
7-
class="mat-expansion-indicator"></span>
6+
7+
<svg [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
8+
class="mat-expansion-indicator" viewBox="0 0 24 24">
9+
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
10+
</svg>

src/lib/expansion/expansion-panel-header.scss

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
.mat-expansion-panel-header {
32
display: flex;
43
flex-direction: row;
@@ -43,16 +42,9 @@
4342
flex-grow: 2;
4443
}
4544

46-
/**
47-
* Creates the expansion indicator arrow. Done using ::after rather than having
48-
* additional nodes in the template.
49-
*/
50-
.mat-expansion-indicator::after {
51-
border-style: solid;
52-
border-width: 0 2px 2px 0;
53-
content: '';
45+
.mat-expansion-indicator {
5446
display: inline-block;
55-
padding: 3px;
56-
transform: rotate(45deg);
57-
vertical-align: middle;
47+
width: 24px;
48+
height: 24px;
49+
fill: currentColor;
5850
}

0 commit comments

Comments
 (0)