feat(stepper): Add initial styles to stepper based on Material guidelines

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

@@ -1,3 +1,113 @@
+<h2>Vertical Stepper Demo</h2>
+<md-vertical-stepper>
+  <md-step>
+    <ng-template mdStepLabel>Fill out your name</ng-template>
+    <md-input-container>
+      <input mdInput placeholder="First Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Last Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your phone number</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Phone number">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your address</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Address">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>Confirm your information</ng-template>
+    Everything seems correct.
+    <div>
+      <button md-button>Done</button>
+    </div>
+  </md-step>
+</md-vertical-stepper>
+
+<h2>Horizontal Stepper Demo</h2>
+<md-horizontal-stepper>
+  <md-step>
+    <ng-template mdStepLabel>Fill out your name</ng-template>
+    <md-input-container>
+      <input mdInput placeholder="First Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Last Name">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your phone number</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Phone number">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>
+      <div>Fill out your address</div>
+    </ng-template>
+    <md-input-container>
+      <input mdInput placeholder="Address">
+      <md-error>This field is required</md-error>
+    </md-input-container>
+    <div>
+      <button md-button mdStepperPrevious type="button">Back</button>
+      <button md-button mdStepperNext type="button">Next</button>
+    </div>
+  </md-step>
+
+  <md-step>
+    <ng-template mdStepLabel>Confirm your information</ng-template>
+    Everything seems correct.
+    <div>
+      <button md-button>Done</button>
+    </div>
+  </md-step>
+</md-horizontal-stepper>
+
 <h2>Horizontal Stepper Demo</h2>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps" [label]="step.label">

src/lib/core/theming/_all-theme.scss

@@ -23,6 +23,7 @@
 @import '../../sidenav/sidenav-theme';
 @import '../../slide-toggle/slide-toggle-theme';
 @import '../../slider/slider-theme';
+@import '../../stepper/stepper-theme';
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
@@ -55,6 +56,7 @@
   @include mat-sidenav-theme($theme);
   @include mat-slide-toggle-theme($theme);
   @include mat-slider-theme($theme);
+  @include mat-stepper-theme($theme);
   @include mat-tabs-theme($theme);
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);

src/lib/stepper/_stepper-theme.scss

@@ -0,0 +1,35 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/_typography-utils.scss';
+
+@mixin mat-stepper-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+
+  .mat-horizontal-stepper-header, .mat-vertical-stepper-header {
+
+    .mat-stepper-label {
+      color: mat-color($foreground, text);
+    }
+
+    .mat-stepper-index {
+      background: mat-color($primary);
+      color: mat-color($primary, default-contrast);
+    }
+
+    &[aria-selected='false'] {
+      .mat-stepper-label {
+        color: mat-color($foreground, disabled-text);
+      }
+
+      .mat-stepper-index {
+        background-color: mat-color($foreground, disabled-text);
+      }
+    }
+  }
+
+  .mat-stepper-horizontal, .mat-stepper-vertical {
+    background: mat-color($background, 'card');
+  }
+}

src/lib/stepper/stepper-horizontal.html

@@ -1,28 +1,32 @@
-<div #stepHeader *ngFor="let step of _steps; let i = index; let isLast = last"
-     class="mat-stepper-header" role="tab"
-     [id]="_getStepLabelId(i)"
-     [attr.aria-controls]="_getStepContentId(i)"
-     [attr.aria-selected]="selectedIndex == i"
-     [tabIndex]="_focusIndex == i ? 0 : -1"
-     (click)="step.select()"
-     (keydown)="_onKeydown($event)">
-  <div class="mat-stepper-index">
-    {{i + 1}}
-  </div>
+<div class="mat-horizontal-stepper-header-container">
+  <ng-container *ngFor="let step of _steps; let i = index; let isLast = last">
+    <div #stepHeader class="mat-horizontal-stepper-header"
+         role="tab"
+         [id]="_getStepLabelId(i)"
+         [attr.aria-controls]="_getStepContentId(i)"
+         [attr.aria-selected]="selectedIndex == i"
+         [tabIndex]="_focusIndex == i ? 0 : -1"
+         (click)="step.select()"
+         (keydown)="_onKeydown($event)">
+      <div class="mat-stepper-index">
+        {{i + 1}}
+      </div>
 
-  <div class="mat-stepper-label">
-    <!-- If there is a label template, use it. -->
-    <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
-    </ng-container>
-    <!-- It there is no label template, fall back to the text label. -->
-    <div *ngIf="!step.stepLabel">{{step.label}}</div>
-  </div>
+      <div class="mat-stepper-label">
+        <!-- If there is a label template, use it. -->
+        <ng-container *ngIf="step.stepLabel" [ngTemplateOutlet]="step.stepLabel.template">
+        </ng-container>
+        <!-- It there is no label template, fall back to the text label. -->
+        <div *ngIf="!step.stepLabel">{{step.label}}</div>
+      </div>
+    </div>
 
-  <div *ngIf="!isLast" class="connector-line"></div>
+    <div *ngIf="!isLast" class="connector-line"></div>
+  </ng-container>
 </div>
 
 <div *ngFor="let step of _steps; let i = index"
-     class="mat-stepper-content" role="tabpanel"
+     class="mat-horizontal-stepper-content" role="tabpanel"
      [id]="_getStepContentId(i)"
      [attr.aria-labelledby]="_getStepLabelId(i)"
      [attr.aria-expanded]="selectedIndex == i">

src/lib/stepper/stepper-horizontal.ts

@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
   moduleId: module.id,
   selector: 'md-horizontal-stepper, mat-horizontal-stepper',
   templateUrl: 'stepper-horizontal.html',
-  styleUrls: ['stepper.scss'],
+  styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-horizontal',

src/lib/stepper/stepper-vertical.html

@@ -1,5 +1,5 @@
-<div *ngFor="let step of _steps; let i = index; let isLast = last">
-  <div #stepHeader class="mat-stepper-header" role="tab"
+<div class="mat-step" *ngFor="let step of _steps; let i = index; let isLast = last">
+  <div #stepHeader class="mat-vertical-stepper-header" role="tab"
        [id]="_getStepLabelId(i)"
        [attr.aria-controls]="_getStepContentId(i)"
        [attr.aria-selected]="selectedIndex == i"
@@ -19,11 +19,13 @@
     </div>
 
   </div>
-  <div *ngIf="!isLast" class="connector-line"></div>
-  <div class="mat-stepper-content" role="tabpanel"
-       [id]="_getStepContentId(i)"
-       [attr.aria-labelledby]="_getStepLabelId(i)"
-       [attr.aria-expanded]="selectedIndex == i">
-    <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+  <div class="vertical-content-container">
+    <!--<div *ngIf="!isLast" class="vertical-connector-line"></div>-->
+    <div class="mat-vertical-stepper-content" role="tabpanel"
+         [id]="_getStepContentId(i)"
+         [attr.aria-labelledby]="_getStepLabelId(i)"
+         [attr.aria-expanded]="selectedIndex == i">
+      <ng-container [ngTemplateOutlet]="step.content"></ng-container>
+    </div>
   </div>
 </div>

src/lib/stepper/stepper-vertical.ts

@@ -13,7 +13,7 @@ import {MdStepper} from './stepper';
   moduleId: module.id,
   selector: 'md-vertical-stepper, mat-vertical-stepper',
   templateUrl: 'stepper-vertical.html',
-  styleUrls: ['stepper.scss'],
+  styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-vertical',

src/lib/stepper/stepper.scss

@@ -1,7 +1,108 @@
-.mat-stepper-content[aria-expanded='false'] {
-  display: none;
+$mat-stepper-header-height: 72px;
+$mat-stepper-circle-size: 24px;
+
+:host {
+  display: block;
+  padding-left: 24px;
+}
+
+.mat-stepper-label {
+  display: inline-flex;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 1;
+  min-width: 50px;
+}
+
+.mat-stepper-index {
+  border-radius: 50%;
+  height: $mat-stepper-circle-size;
+  width: $mat-stepper-circle-size;
+  text-align: center;
+  line-height: $mat-stepper-circle-size;
+}
+
+.mat-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  padding-right: 24px;
+}
+
+.mat-horizontal-stepper-header {
+  display: inline-flex;
+  line-height: $mat-stepper-header-height;
+  flex-grow: 0;
+  flex-shrink: 1;
+  overflow: hidden;
+
+  .mat-stepper-index {
+    margin-right: 8px;
+    margin-top: 24px;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+}
+
+.mat-vertical-stepper-header {
+  display: inline-flex;
+  line-height: 24px;
+
+  .mat-stepper-index {
+    margin-right: 12px;
+  }
 }
 
-.mat-stepper-index, .mat-stepper-label {
-  display: inline-block;
+.connector-line {
+  border: 0;
+  height: 1px;
+  border-top: 1px solid #bdbdbd;
+  margin-top: 36px;
+  width: 5%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.mat-horizontal-stepper-content {
+  padding-right: 24px;
+
+  &[aria-expanded='false'] {
+    display: none;
+  }
+}
+
+.vertical-content-container {
+  content: '';
+  border-left: 1px solid #bdbdbd;
+  top: 0;
+  bottom: 0;
+  margin: 8px 0 8px 12px;
+  padding: 8px 0;
+}
+
+.mat-vertical-stepper-content {
+  margin-left: 24px;
+
+  &[aria-expanded='false'] {
+    display: none;
+  }
+
+  &[aria-expanded='true'] {
+    padding-bottom: 48px;
+    padding-top: 16px;
+  }
+}
+
+.mat-step {
+  &:last-child {
+    .vertical-content-container {
+      border: none;
+    }
+  }
+
+  &:first-child {
+    padding-top: 24px;
+  }
 }

src/lib/stepper/stepper.ts

@@ -23,7 +23,7 @@ import {MdStepLabel} from './step-label';
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',
-  templateUrl: 'step.html',
+  templateUrl: 'step.html'
 })
 export class MdStep extends CdkStep {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */