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

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)),
   ]),

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;