fix(expansion-panel): set up typography styles (#5739)

* Sets up the typography for the expansion panel module.
* Starts using the appropriate typography styles from the config and fixes the panel not having a defined font family.
* Fixes the panel content inheriting its font size from the body.
This commit is contained in:
Kristiyan Kostadinov
2017-07-15 01:38:22 +02:00
committed by Jeremy Elbourn
parent 5d5ce83882
commit e21b64cb5d
3 changed files with 17 additions and 2 deletions
@@ -8,6 +8,7 @@
@import '../../table/table-theme';
@import '../../datepicker/datepicker-theme';
@import '../../dialog/dialog-theme';
@import '../../expansion/expansion-theme';
@import '../../grid-list/grid-list-theme';
@import '../../icon/icon-theme';
@import '../../input/input-theme';
@@ -45,6 +46,7 @@
@include mat-table-typography($config);
@include mat-datepicker-typography($config);
@include mat-dialog-typography($config);
@include mat-expansion-panel-typography($config);
@include mat-grid-list-typography($config);
@include mat-icon-typography($config);
@include mat-input-typography($config);
+15
View File
@@ -1,5 +1,6 @@
@import '../core/theming/palette';
@import '../core/theming/theming';
@import '../core/typography/typography-utils';
@mixin mat-expansion-panel-theme($theme) {
$background: map-get($theme, background);
@@ -31,3 +32,17 @@
color: mat-color($foreground, secondary-text);
}
}
@mixin mat-expansion-panel-typography($config) {
.mat-expansion-panel-header {
font: {
family: mat-font-family($config);
size: mat-font-size($config, subheading-1);
weight: mat-font-weight($config, subheading-1);
}
}
.mat-expansion-panel-content {
@include mat-typography-level-to-styles($config, body-1);
}
}
@@ -35,14 +35,12 @@ $mat-expansion-panel-header-height-expanded: 64px;
.mat-expansion-panel-header-title {
display: flex;
flex-grow: 1;
font-size: 15px;
margin-right: 16px;
}
.mat-expansion-panel-header-description {
display: flex;
flex-grow: 2;
font-size: 15px;
margin-right: 16px;
}