Fix host style and demo page (#6592)

Author: jwshinjwshin

src/demo-app/stepper/stepper-demo.html

@@ -64,7 +64,7 @@ <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 
   <md-step [stepControl]="emailFormGroup" optional>
     <form [formGroup]="emailFormGroup">
-      <ng-template mdStepLabel>Fill out your phone number</ng-template>
+      <ng-template mdStepLabel>Fill out your email address</ng-template>
       <md-form-field>
         <input mdInput placeholder="Email address" formControlName="emailCtrl">
         <md-error>The input is invalid</md-error>
@@ -139,10 +139,9 @@ <h3>Vertical Stepper Demo</h3>
   </md-step>
 </md-vertical-stepper>
 
-<h3>Horizontal Stepper Demo</h3>
+<h3>Horizontal Stepper Demo with Text Label</h3>
 <md-horizontal-stepper>
-  <md-step>
-    <ng-template mdStepLabel>Fill out your name</ng-template>
+  <md-step label="Fill out your name">
     <md-form-field>
       <input mdInput placeholder="First Name">
     </md-form-field>
@@ -155,8 +154,7 @@ <h3>Horizontal Stepper Demo</h3>
     </div>
   </md-step>
 
-  <md-step>
-    <ng-template mdStepLabel>Fill out your phone number</ng-template>
+  <md-step label="Fill out your phone number">
     <md-form-field>
       <input mdInput placeholder="Phone number">
     </md-form-field>
@@ -166,8 +164,7 @@ <h3>Horizontal Stepper Demo</h3>
     </div>
   </md-step>
 
-  <md-step>
-    <ng-template mdStepLabel>Fill out your address</ng-template>
+  <md-step label="Fill out your address">
     <md-form-field>
       <input mdInput placeholder="Address">
     </md-form-field>
@@ -177,28 +174,14 @@ <h3>Horizontal Stepper Demo</h3>
     </div>
   </md-step>
 
-  <md-step>
-    <ng-template mdStepLabel>Confirm your information</ng-template>
+  <md-step label="Confirm your information">
     Everything seems correct.
     <div>
       <button md-button>Done</button>
     </div>
   </md-step>
 </md-horizontal-stepper>
 
-<h3>Horizontal Stepper Demo</h3>
-<md-horizontal-stepper>
-  <md-step *ngFor="let step of steps" [label]="step.label">
-    <md-form-field>
-      <input mdInput placeholder="Answer" [(ngModel)]="step.content">
-    </md-form-field>
-    <div>
-      <button md-button mdStepperPrevious>Back</button>
-      <button md-button mdStepperNext>Next</button>
-    </div>
-  </md-step>
-</md-horizontal-stepper>
-
 <h3>Horizontal Stepper Demo with Templated Label</h3>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps">

src/lib/stepper/step-header.scss

@@ -6,10 +6,6 @@ $mat-stepper-line-gap: 8px !default;
 $mat-step-optional-font-size: 12px;
 $mat-step-header-icon-size: 16px !default;
 
-:host {
-  display: flex;
-}
-
 .mat-step-optional {
   font-size: $mat-step-optional-font-size;
 }

src/lib/stepper/stepper.scss

@@ -7,7 +7,8 @@ $mat-vertical-stepper-content-margin: 36px !default;
 $mat-stepper-line-width: 1px !default;
 $mat-stepper-line-gap: 8px !default;
 
-:host {
+.mat-stepper-vertical,
+.mat-stepper-horizontal {
   display: block;
 }