Skip to content

fix(stepper): Fix host style not applied and clean up demo app #6592

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 22, 2017
Merged

fix(stepper): Fix host style not applied and clean up demo app #6592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 6 additions & 23 deletions src/demo-app/stepper/stepper-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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">
Expand Down
4 changes: 0 additions & 4 deletions src/lib/stepper/step-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
3 changes: 2 additions & 1 deletion src/lib/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down