From ab28eb911aa4d527d58b9cd2811c1e7bf11d10ce Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Wed, 2 Aug 2017 17:30:03 -0700
Subject: [PATCH 1/5] Add initial styles to stepper based on Material
 guidelines

---
 src/demo-app/stepper/stepper-demo.html  | 110 ++++++++++++++++++++++++
 src/lib/core/theming/_all-theme.scss    |   2 +
 src/lib/stepper/_stepper-theme.scss     |  35 ++++++++
 src/lib/stepper/stepper-horizontal.html |  44 +++++-----
 src/lib/stepper/stepper-horizontal.ts   |   2 +-
 src/lib/stepper/stepper-vertical.html   |  18 ++--
 src/lib/stepper/stepper-vertical.ts     |   2 +-
 src/lib/stepper/stepper.scss            | 108 ++++++++++++++++++++++-
 src/lib/stepper/stepper.ts              |   2 +-
 src/lib/table/cell.ts                   |   8 +-
 src/lib/table/row.ts                    |   8 +-
 11 files changed, 302 insertions(+), 37 deletions(-)
 create mode 100644 src/lib/stepper/_stepper-theme.scss

diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 89d64a58574f..e1205208640e 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/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">
diff --git a/src/lib/core/theming/_all-theme.scss b/src/lib/core/theming/_all-theme.scss
index a7c7c80161ef..2facfdbf855d 100644
--- a/src/lib/core/theming/_all-theme.scss
+++ b/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);
diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
new file mode 100644
index 000000000000..914ff1d34496
--- /dev/null
+++ b/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');
+  }
+}
diff --git a/src/lib/stepper/stepper-horizontal.html b/src/lib/stepper/stepper-horizontal.html
index e69836b862f1..5937fd04551b 100644
--- a/src/lib/stepper/stepper-horizontal.html
+++ b/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">
diff --git a/src/lib/stepper/stepper-horizontal.ts b/src/lib/stepper/stepper-horizontal.ts
index 80f23ad348c2..1609d6a9c7df 100644
--- a/src/lib/stepper/stepper-horizontal.ts
+++ b/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',
diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 993ea0cdb04d..763f6dfb7ba3 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/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>
diff --git a/src/lib/stepper/stepper-vertical.ts b/src/lib/stepper/stepper-vertical.ts
index 25ae4c2de376..52fc6038a44b 100644
--- a/src/lib/stepper/stepper-vertical.ts
+++ b/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',
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 239fda3fb58d..6d2e6328c1c7 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,7 +1,107 @@
-.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: 0;
+  min-width: 160px;
+}
+
+.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;
+  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;
+  }
 }
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index 29923d7857ee..f76c63bdd6c0 100644
--- a/src/lib/stepper/stepper.ts
+++ b/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>. */
diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts
index 2ae636c97d50..3578ab6ccb7c 100644
--- a/src/lib/table/cell.ts
+++ b/src/lib/table/cell.ts
@@ -7,7 +7,13 @@
  */
 
 import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
-import {CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table';
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef
+} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdCellDef = CdkCellDef;
diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts
index 9d9beff84fea..913a861a2eb6 100644
--- a/src/lib/table/row.ts
+++ b/src/lib/table/row.ts
@@ -7,7 +7,13 @@
  */
 
 import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
-import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkHeaderRowDef} from '@angular/cdk/table';
+import {
+  CdkHeaderRow,
+  CdkRow,
+  CDK_ROW_TEMPLATE,
+  CdkRowDef,
+  CdkHeaderRowDef
+} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdHeaderRowDef = CdkHeaderRowDef;

From 398123b56b059018c9766e49d457458122759f96 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Thu, 3 Aug 2017 14:18:57 -0700
Subject: [PATCH 2/5] Fix flex-shrink and min-width

---
 src/lib/stepper/stepper.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 6d2e6328c1c7..585645275224 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -11,8 +11,8 @@ $mat-stepper-circle-size: 24px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex-shrink: 0;
-  min-width: 160px;
+  flex-shrink: 1;
+  min-width: 50px;
 }
 
 .mat-stepper-index {
@@ -60,6 +60,7 @@ $mat-stepper-circle-size: 24px;
   margin-top: 36px;
   width: 5%;
   flex-grow: 1;
+  flex-shrink: 1;
   margin-left: 8px;
   margin-right: 8px;
 }

From 95c81b06f0e854a79b0a76e40e9e529e93ad7e66 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Thu, 3 Aug 2017 17:03:17 -0700
Subject: [PATCH 3/5] Changes made based on review

---
 src/lib/stepper/_stepper-theme.scss | 12 +++++-
 src/lib/stepper/stepper.scss        | 60 +++++++++++++++++------------
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/lib/stepper/_stepper-theme.scss b/src/lib/stepper/_stepper-theme.scss
index 914ff1d34496..a55c82c7abbf 100644
--- a/src/lib/stepper/_stepper-theme.scss
+++ b/src/lib/stepper/_stepper-theme.scss
@@ -14,7 +14,7 @@
     }
 
     .mat-stepper-index {
-      background: mat-color($primary);
+      background-color: mat-color($primary);
       color: mat-color($primary, default-contrast);
     }
 
@@ -30,6 +30,14 @@
   }
 
   .mat-stepper-horizontal, .mat-stepper-vertical {
-    background: mat-color($background, 'card');
+    background-color: mat-color($background, card);
+  }
+
+  .vertical-content-container {
+    border-left-color: mat-color($foreground, divider);
+  }
+
+  .connector-line {
+    border-top-color: mat-color($foreground, divider);
   }
 }
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 585645275224..fb56f94406ec 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,9 +1,21 @@
-$mat-stepper-header-height: 72px;
+$mat-horizontal-stepper-header-height: 72px;
+$mat-vertical-stepper-header-height: 24px;
 $mat-stepper-circle-size: 24px;
+$mat-stepper-label-min-width: 50px;
+$mat-stepper-container-padding: 24px;
+$mat-horizontal-stepper-index-margin-right: 8px;
+$mat-horizontal-stepper-index-martin-top: 24px;
+$mat-vertical-stepper-index-margin-right: 12px;
+$mat-vertical-stepper-content-padding-bottom: 48px;
+$mat-vertical-stepper-content-padding-top: 16px;
+$mat-vertical-content-container-padding: 8px;
+$mat-connector-line-width: 1px;
+$mat-connector-line-margin: 8px;
+$mat-connector-line-margin-top: 36px;
 
 :host {
   display: block;
-  padding-left: 24px;
+  padding-left: $mat-stepper-container-padding;
 }
 
 .mat-stepper-label {
@@ -12,7 +24,7 @@ $mat-stepper-circle-size: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
   flex-shrink: 1;
-  min-width: 50px;
+  min-width: $mat-stepper-label-min-width;
 }
 
 .mat-stepper-index {
@@ -26,19 +38,19 @@ $mat-stepper-circle-size: 24px;
 .mat-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
-  padding-right: 24px;
+  padding-right: $mat-stepper-container-padding;
 }
 
 .mat-horizontal-stepper-header {
   display: inline-flex;
-  line-height: $mat-stepper-header-height;
+  line-height: $mat-horizontal-stepper-header-height;
   flex-grow: 0;
   flex-shrink: 1;
   overflow: hidden;
 
   .mat-stepper-index {
-    margin-right: 8px;
-    margin-top: 24px;
+    margin-right: $mat-horizontal-stepper-index-margin-right;
+    margin-top: $mat-horizontal-stepper-index-martin-top;
     display: inline-block;
     flex-shrink: 0;
   }
@@ -46,27 +58,26 @@ $mat-stepper-circle-size: 24px;
 
 .mat-vertical-stepper-header {
   display: inline-flex;
-  line-height: 24px;
+  line-height: $mat-vertical-stepper-header-height;
 
   .mat-stepper-index {
-    margin-right: 12px;
+    margin-right: $mat-vertical-stepper-index-margin-right;
   }
 }
 
 .connector-line {
-  border: 0;
-  height: 1px;
-  border-top: 1px solid #bdbdbd;
-  margin-top: 36px;
+  border-top-width: $mat-connector-line-width;
+  border-top-style: solid;
+  margin-top: $mat-connector-line-margin-top;
   width: 5%;
   flex-grow: 1;
   flex-shrink: 1;
-  margin-left: 8px;
-  margin-right: 8px;
+  margin-left: $mat-connector-line-margin;
+  margin-right: $mat-connector-line-margin;
 }
 
 .mat-horizontal-stepper-content {
-  padding-right: 24px;
+  padding-right: $mat-stepper-container-padding;
 
   &[aria-expanded='false'] {
     display: none;
@@ -75,23 +86,22 @@ $mat-stepper-circle-size: 24px;
 
 .vertical-content-container {
   content: '';
-  border-left: 1px solid #bdbdbd;
-  top: 0;
-  bottom: 0;
-  margin: 8px 0 8px 12px;
-  padding: 8px 0;
+  border-left-width: $mat-connector-line-width;
+  border-left-style: solid;
+  margin: $mat-connector-line-margin 0 $mat-connector-line-margin 12px;
+  padding: $mat-vertical-content-container-padding 0;
 }
 
 .mat-vertical-stepper-content {
-  margin-left: 24px;
+  padding-left: $mat-stepper-container-padding;
 
   &[aria-expanded='false'] {
     display: none;
   }
 
   &[aria-expanded='true'] {
-    padding-bottom: 48px;
-    padding-top: 16px;
+    padding-bottom: $mat-vertical-stepper-content-padding-bottom;
+    padding-top: $mat-vertical-stepper-content-padding-top;
   }
 }
 
@@ -103,6 +113,6 @@ $mat-stepper-circle-size: 24px;
   }
 
   &:first-child {
-    padding-top: 24px;
+    padding-top: $mat-stepper-container-padding;
   }
 }

From 06762a91f34c68b4ef3934e3d1df2d015ef7b63b Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Fri, 4 Aug 2017 11:40:10 -0700
Subject: [PATCH 4/5] Fix alignment

---
 src/lib/stepper/stepper-vertical.html |  1 -
 src/lib/stepper/stepper.scss          | 63 ++++++++++++---------------
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/src/lib/stepper/stepper-vertical.html b/src/lib/stepper/stepper-vertical.html
index 763f6dfb7ba3..dfc87e4a4eb4 100644
--- a/src/lib/stepper/stepper-vertical.html
+++ b/src/lib/stepper/stepper-vertical.html
@@ -20,7 +20,6 @@
 
   </div>
   <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)"
diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index fb56f94406ec..5fc12f26199e 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,83 +1,76 @@
 $mat-horizontal-stepper-header-height: 72px;
-$mat-vertical-stepper-header-height: 24px;
-$mat-stepper-circle-size: 24px;
+$mat-label-header-height: 24px;
 $mat-stepper-label-min-width: 50px;
-$mat-stepper-container-padding: 24px;
-$mat-horizontal-stepper-index-margin-right: 8px;
-$mat-horizontal-stepper-index-martin-top: 24px;
-$mat-vertical-stepper-index-margin-right: 12px;
-$mat-vertical-stepper-content-padding-bottom: 48px;
-$mat-vertical-stepper-content-padding-top: 16px;
+$mat-stepper-side-gap: 24px;
+$mat-vertical-stepper-content-margin-right: 12px;
+$mat-vertical-stepper-content-padding: 16px 0 32px 0;
 $mat-vertical-content-container-padding: 8px;
 $mat-connector-line-width: 1px;
-$mat-connector-line-margin: 8px;
-$mat-connector-line-margin-top: 36px;
+$mat-connector-line-gap: 8px;
+$mat-horizontal-connector-line-size: 5%;
 
 :host {
   display: block;
-  padding-left: $mat-stepper-container-padding;
+  padding-left: $mat-stepper-side-gap;
 }
 
 .mat-stepper-label {
   display: inline-flex;
   white-space: nowrap;
   overflow: hidden;
+  // TODO(jwshin): text-overflow does not work as expected.
   text-overflow: ellipsis;
-  flex-shrink: 1;
   min-width: $mat-stepper-label-min-width;
 }
 
 .mat-stepper-index {
   border-radius: 50%;
-  height: $mat-stepper-circle-size;
-  width: $mat-stepper-circle-size;
+  height: $mat-label-header-height;
+  width: $mat-label-header-height;
   text-align: center;
-  line-height: $mat-stepper-circle-size;
+  line-height: $mat-label-header-height;
 }
 
 .mat-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
-  padding-right: $mat-stepper-container-padding;
+  padding-right: $mat-stepper-side-gap;
+  align-items: center;
 }
 
 .mat-horizontal-stepper-header {
   display: inline-flex;
   line-height: $mat-horizontal-stepper-header-height;
-  flex-grow: 0;
-  flex-shrink: 1;
   overflow: hidden;
+  align-items: center;
 
   .mat-stepper-index {
-    margin-right: $mat-horizontal-stepper-index-margin-right;
-    margin-top: $mat-horizontal-stepper-index-martin-top;
+    margin-right: $mat-connector-line-gap;
     display: inline-block;
-    flex-shrink: 0;
+    flex: none;
   }
 }
 
 .mat-vertical-stepper-header {
   display: inline-flex;
-  line-height: $mat-vertical-stepper-header-height;
+  align-items: center;
 
   .mat-stepper-index {
-    margin-right: $mat-vertical-stepper-index-margin-right;
+    margin-right: $mat-vertical-stepper-content-margin-right;
   }
 }
 
 .connector-line {
   border-top-width: $mat-connector-line-width;
   border-top-style: solid;
-  margin-top: $mat-connector-line-margin-top;
-  width: 5%;
-  flex-grow: 1;
-  flex-shrink: 1;
-  margin-left: $mat-connector-line-margin;
-  margin-right: $mat-connector-line-margin;
+  width: $mat-horizontal-connector-line-size;
+  flex: auto;
+  margin: 0 $mat-connector-line-gap;
+  height: 0;
 }
 
 .mat-horizontal-stepper-content {
-  padding-right: $mat-stepper-container-padding;
+  padding-right: $mat-stepper-side-gap;
 
   &[aria-expanded='false'] {
     display: none;
@@ -85,23 +78,21 @@ $mat-connector-line-margin-top: 36px;
 }
 
 .vertical-content-container {
-  content: '';
   border-left-width: $mat-connector-line-width;
   border-left-style: solid;
-  margin: $mat-connector-line-margin 0 $mat-connector-line-margin 12px;
+  margin: $mat-connector-line-gap 0 $mat-connector-line-gap $mat-vertical-stepper-content-margin-right;
   padding: $mat-vertical-content-container-padding 0;
 }
 
 .mat-vertical-stepper-content {
-  padding-left: $mat-stepper-container-padding;
+  padding-left: $mat-stepper-side-gap;
 
   &[aria-expanded='false'] {
     display: none;
   }
 
   &[aria-expanded='true'] {
-    padding-bottom: $mat-vertical-stepper-content-padding-bottom;
-    padding-top: $mat-vertical-stepper-content-padding-top;
+    padding: $mat-vertical-stepper-content-padding;
   }
 }
 
@@ -113,6 +104,6 @@ $mat-connector-line-margin-top: 36px;
   }
 
   &:first-child {
-    padding-top: $mat-stepper-container-padding;
+    padding-top: $mat-stepper-side-gap;
   }
 }

From 7bb7a5400a11550dbe48bcb498419db797f3ffaa Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Fri, 4 Aug 2017 15:56:09 -0700
Subject: [PATCH 5/5] Margin modifications

---
 src/lib/stepper/stepper.scss | 42 ++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/lib/stepper/stepper.scss b/src/lib/stepper/stepper.scss
index 5fc12f26199e..7e2cd497af27 100644
--- a/src/lib/stepper/stepper.scss
+++ b/src/lib/stepper/stepper.scss
@@ -1,17 +1,18 @@
-$mat-horizontal-stepper-header-height: 72px;
-$mat-label-header-height: 24px;
-$mat-stepper-label-min-width: 50px;
-$mat-stepper-side-gap: 24px;
-$mat-vertical-stepper-content-margin-right: 12px;
-$mat-vertical-stepper-content-padding: 16px 0 32px 0;
-$mat-vertical-content-container-padding: 8px;
-$mat-connector-line-width: 1px;
-$mat-connector-line-gap: 8px;
-$mat-horizontal-connector-line-size: 5%;
+$mat-horizontal-stepper-header-height: 72px !default;
+$mat-label-header-height: 24px !default;
+$mat-stepper-label-min-width: 50px !default;
+$mat-stepper-side-gap: 24px !default;
+$mat-vertical-stepper-content-margin: 12px !default;
+$mat-vertical-stepper-content-padding: 16px 0 32px $mat-stepper-side-gap !default;
+$mat-vertical-content-container-padding: 8px !default;
+$mat-connector-line-width: 1px !default;
+$mat-connector-line-gap: 8px !default;
+$mat-horizontal-connector-line-size: 5% !default;
+$mat-vertical-stepper-margin-top: $mat-stepper-side-gap - $mat-connector-line-gap !default;
 
 :host {
   display: block;
-  padding-left: $mat-stepper-side-gap;
+  padding: 0 $mat-stepper-side-gap $mat-stepper-side-gap $mat-stepper-side-gap;
 }
 
 .mat-stepper-label {
@@ -34,7 +35,6 @@ $mat-horizontal-connector-line-size: 5%;
 .mat-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
-  padding-right: $mat-stepper-side-gap;
   align-items: center;
 }
 
@@ -52,11 +52,12 @@ $mat-horizontal-connector-line-size: 5%;
 }
 
 .mat-vertical-stepper-header {
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  margin: $mat-connector-line-gap 0;
 
   .mat-stepper-index {
-    margin-right: $mat-vertical-stepper-content-margin-right;
+    margin-right: $mat-vertical-stepper-content-margin;
   }
 }
 
@@ -69,18 +70,14 @@ $mat-horizontal-connector-line-size: 5%;
   height: 0;
 }
 
-.mat-horizontal-stepper-content {
-  padding-right: $mat-stepper-side-gap;
-
-  &[aria-expanded='false'] {
+.mat-horizontal-stepper-content[aria-expanded='false'] {
     display: none;
-  }
 }
 
 .vertical-content-container {
   border-left-width: $mat-connector-line-width;
   border-left-style: solid;
-  margin: $mat-connector-line-gap 0 $mat-connector-line-gap $mat-vertical-stepper-content-margin-right;
+  margin-left: $mat-vertical-stepper-content-margin;
   padding: $mat-vertical-content-container-padding 0;
 }
 
@@ -97,6 +94,8 @@ $mat-horizontal-connector-line-size: 5%;
 }
 
 .mat-step {
+  margin-top: $mat-connector-line-gap;
+
   &:last-child {
     .vertical-content-container {
       border: none;
@@ -104,6 +103,7 @@ $mat-horizontal-connector-line-size: 5%;
   }
 
   &:first-child {
-    padding-top: $mat-stepper-side-gap;
+    margin-top: 0;
+    padding-top: $mat-vertical-stepper-margin-top;
   }
 }