Skip to content

Commit

Permalink
feat(sidenav): align with 2018 material design spec (#12569)
Browse files Browse the repository at this point in the history
Aligns the sidenav with the latest Material design spec. The component was largely in-line already, so these changes only add a border in `side` mode.
  • Loading branch information
crisbeto authored and jelbourn committed Aug 27, 2018
1 parent 5278f72 commit 1f88bd7
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 5 deletions.
28 changes: 24 additions & 4 deletions src/lib/sidenav/_sidenav-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
// We use invert() here to have the darken the background color expected to be used. If the
// background is light, we use a dark backdrop. If the background is dark,
// we use a light backdrop.
$drawer-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
$drawer-background-color: mat-color($background, dialog) !default;
$drawer-container-background-color: mat-color($background, background) !default;
$drawer-push-background-color: mat-color($background, dialog) !default;
$drawer-backdrop-color: invert(mat-color($background, card, 0.6));
$drawer-background-color: mat-color($background, dialog);
$drawer-container-background-color: mat-color($background, background);
$drawer-push-background-color: mat-color($background, dialog);
$drawer-side-border: solid 1px mat-color($foreground, divider);

.mat-drawer-container {
background-color: $drawer-container-background-color;
Expand All @@ -31,6 +32,25 @@
}
}

.mat-drawer-side {
border-right: $drawer-side-border;

&.mat-drawer-end {
border-left: $drawer-side-border;
border-right: none;
}
}

[dir='rtl'] .mat-drawer-side {
border-left: $drawer-side-border;
border-right: none;

&.mat-drawer-end {
border-left: none;
border-right: $drawer-side-border;
}
}

.mat-drawer-backdrop.mat-drawer-shown {
background-color: $drawer-backdrop-color;
}
Expand Down
2 changes: 1 addition & 1 deletion src/lib/sidenav/drawer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ $mat-drawer-over-drawer-z-index: 4;

&:not(.mat-drawer-side) {
// The elevation of z-16 is noted in the design specifications.
// See https://material.io/guidelines/patterns/navigation-drawer.html#
// See https://material.io/design/components/navigation-drawer.html
@include mat-elevation(16);
}
}
Expand Down

0 comments on commit 1f88bd7

Please sign in to comment.