feat(drawer): New sass mixin to set z-index (#3453)

material-components · Aug 28, 2018 · cf3084f · cf3084f
1 parent 5c01746
commit cf3084f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/packages/mdc-drawer/README.md b/packages/mdc-drawer/README.md
@@ -319,6 +319,7 @@ Mixin | Description
 `mdc-drawer-item-corner-radius($radius)` | Sets the corner border radius of the drawer list item.
 `mdc-drawer-activated-overlay-color($color)` | Sets the overlay color of the activated drawer list item.
 `mdc-drawer-scrim-fill-color($color)` | Sets the fill color of `mdc-drawer-scrim`.
+`mdc-drawer-z-index($value)` | Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
 
 ## Accessibility
 

diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
@@ -118,3 +118,7 @@
     @include mdc-theme-prop(background-color, $value);
   }
 }
+
+@mixin mdc-drawer-z-index($value) {
+  z-index: $value;
+}
diff --git a/packages/mdc-drawer/common.scss b/packages/mdc-drawer/common.scss
@@ -40,6 +40,7 @@
   @include mdc-drawer-item-activated-icon-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
   @include mdc-drawer-item-corner-radius(4px);
+  @include mdc-drawer-z-index($mdc-drawer-z-index);
 
   display: flex;
   flex-direction: column;
@@ -53,7 +54,6 @@
   border-right-width: 1px;
   border-right-style: solid;
   overflow: hidden;
-  z-index: $mdc-drawer-z-index;
 
   @include mdc-rtl {
     border-right-width: 0;