fix(expansion): define default expansion header heights via css.

angular · Jan 12, 2018 · 8ee9436 · 8ee9436
1 parent af44b9d
commit 8ee9436
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts
@@ -35,12 +35,12 @@ export const matExpansionAnimations: {
     state('collapsed', style({
       height: '{{collapsedHeight}}',
     }), {
-      params: {collapsedHeight: '48px'},
+      params: {collapsedHeight: '*'},
     }),
     state('expanded', style({
       height: '{{expandedHeight}}'
     }), {
-      params: {expandedHeight: '64px'}
+      params: {expandedHeight: '*'}
     }),
     transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
   ]),

diff --git a/src/lib/expansion/expansion-panel-header.scss b/src/lib/expansion/expansion-panel-header.scss
@@ -2,9 +2,14 @@
 .mat-expansion-panel-header {
   display: flex;
   flex-direction: row;
+  height: 48px;
   align-items: center;
   padding: 0 24px;
 
+  &.mat-expanded {
+    height: 64px;
+  }
+
   &:focus,
   &:hover {
     outline: none;