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;
}
}