diff --git a/src/lib/sidenav/_sidenav-theme.scss b/src/lib/sidenav/_sidenav-theme.scss index 380604bb0aec..f005c4609da9 100644 --- a/src/lib/sidenav/_sidenav-theme.scss +++ b/src/lib/sidenav/_sidenav-theme.scss @@ -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; @@ -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; } diff --git a/src/lib/sidenav/drawer.scss b/src/lib/sidenav/drawer.scss index 65c50e1dc9e4..25f248c053bc 100644 --- a/src/lib/sidenav/drawer.scss +++ b/src/lib/sidenav/drawer.scss @@ -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); } }