Skip to content

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

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 5 commits into from
Aug 6, 2017
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ab28eb9
Add initial styles to stepper based on Material guidelines
jwshinjwshin Aug 3, 2017
398123b
Fix flex-shrink and min-width
jwshinjwshin Aug 3, 2017
95c81b0
Changes made based on review
jwshinjwshin Aug 4, 2017
06762a9
Fix alignment
jwshinjwshin Aug 4, 2017
7bb7a54
Margin modifications
jwshinjwshin Aug 4, 2017
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
Prev Previous commit
Next Next commit
Changes made based on review
  • Loading branch information
@jwshinjwshin
jwshinjwshin committed Aug 4, 2017
commit 95c81b06f0e854a79b0a76e40e9e529e93ad7e66
12 changes: 10 additions & 2 deletions src/lib/stepper/_stepper-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}

.mat-stepper-index {
background: mat-color($primary);
background-color: mat-color($primary);
color: mat-color($primary, default-contrast);
}

Expand All @@ -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);
}
}
60 changes: 35 additions & 25 deletions src/lib/stepper/stepper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@
$mat-stepper-header-height: 72px;
$mat-horizontal-stepper-header-height: 72px;
$mat-vertical-stepper-header-height: 24px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are any of these values related to each other or conceptually the same thing? for example I see a lot of 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 {
Expand All @@ -12,7 +24,7 @@ $mat-stepper-circle-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this work now? if not leave a TODO to investigate

flex-shrink: 1;
min-width: 50px;
min-width: $mat-stepper-label-min-width;
}

.mat-stepper-index {
Expand All @@ -26,47 +38,46 @@ $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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can use shorthand for flex-grow and flex-shrink: flex: 0 1 auto

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flex: none

}
}

.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%;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scss var

flex-grow: 1;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flex: auto

flex-shrink: 1;
margin-left: 8px;
margin-right: 8px;
margin-left: $mat-connector-line-margin;
margin-right: $mat-connector-line-margin;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can use margin shorthand: margin: <top> <right> 0 <left>

}

.mat-horizontal-stepper-content {
padding-right: 24px;
padding-right: $mat-stepper-container-padding;

&[aria-expanded='false'] {
display: none;
Expand All @@ -75,23 +86,22 @@ $mat-stepper-circle-size: 24px;

.vertical-content-container {
content: '';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

scss var for 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;
}
}

Expand All @@ -103,6 +113,6 @@ $mat-stepper-circle-size: 24px;
}

&:first-child {
padding-top: 24px;
padding-top: $mat-stepper-container-padding;
}
}