refactor (MatCalendarHeader): style custom header

Author: Tobias Schweizer

src/demo-app/datepicker/custom-header.html

@@ -1,7 +1,7 @@
-<div>
-  <button (click)="previousClicked('year')">&lt;&lt;</button>
-  <button (click)="previousClicked('month')">&lt;</button>
-  {{periodLabel}}
-  <button (click)="nextClicked('month')">&gt;</button>
-  <button (click)="nextClicked('year')">&gt;&gt;</button>
+<div class="custom-header">
+  <button mat-icon-button (click)="previousClicked('year')">&lt;&lt;</button>
+  <button mat-icon-button (click)="previousClicked('month')">&lt;</button>
+    <span class="custom-header-label">{{periodLabel}}</span>
+  <button mat-icon-button (click)="nextClicked('month')">&gt;</button>
+  <button mat-icon-button (click)="nextClicked('year')">&gt;&gt;</button>
 </div>

src/demo-app/datepicker/custom-header.scss

@@ -0,0 +1,10 @@
+.custom-header {
+  padding: 1.5em;
+  display: flex;
+}
+
+.custom-header-label {
+  flex: 1;
+  text-align: center;
+}
+

src/demo-app/datepicker/datepicker-demo.ts

@@ -51,7 +51,7 @@ export class DatepickerDemo {
   moduleId: module.id,
   selector: 'custom-header',
   templateUrl: 'custom-header.html',
-  styleUrls: [],
+  styleUrls: ['custom-header.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomHeader<D> {