diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
index 914cd41e..83ce1489 100644
--- a/components/drawer/index.jsx
+++ b/components/drawer/index.jsx
@@ -1,18 +1,20 @@
import React from 'react';
+import Overlay from '../overlay';
import style from './style';
const Drawer = (props) => {
- let className = `${style.drawer} ${style[props.type]}`;
+ let className = `${style.root} ${style[props.type]}`;
if (props.active) className += ` ${style.active}`;
if (props.className) className += ` ${props.className}`;
return (
-
+
+
+
);
};
diff --git a/components/drawer/style.scss b/components/drawer/style.scss
index 7e5e2f80..590e4d26 100644
--- a/components/drawer/style.scss
+++ b/components/drawer/style.scss
@@ -1,59 +1,7 @@
@import "../base";
@import "./config";
-.drawer {
- position: fixed;
- top: 0;
- right: 0;
- left: 0;
- z-index: $z-index-high;
- width: 100vw;
- height: 100vh;
- pointer-events: none;
-}
-
-.active {
- pointer-events: all;
- > .content {
- transition-delay: $animation-delay;
- transform: translateX(0);
- }
- > .overlay {
- opacity: $color-overlay-opacity;
- }
-}
-
-.left {
- > .content {
- left: 0;
- border-right: 1px solid $drawer-border-color;
- }
- &:not(.active) > .content {
- transform: translateX(- 100%);
- }
-}
-
-.right {
- > .content {
- right: 0;
- border-left: 1px solid $drawer-border-color;
- }
- &:not(.active) > .content {
- transform: translateX(100%);
- }
-}
-
-.overlay {
- width: 100%;
- height: 100%;
- background-color: $drawer-overlay-color;
- opacity: 0;
- transition-timing-function: $animation-curve-default;
- transition-duration: $animation-duration;
- transition-property: opacity;
-}
-
-.content {
+.root {
@include shadow-2dp();
position: absolute;
top: 0;
@@ -62,6 +10,7 @@
height: 100%;
overflow-y: scroll;
color: $drawer-text-color;
+ pointer-events: none;
background-color: $drawer-background-color;
transition-delay: 0s;
transition-timing-function: $animation-curve-default;
@@ -69,4 +18,23 @@
transition-property: transform;
transform-style: preserve-3d;
will-change: transform;
+ &.active {
+ pointer-events: all;
+ transition-delay: $animation-delay;
+ transform: translateX(0);
+ }
+ &.right {
+ right: 0;
+ border-left: 1px solid $drawer-border-color;
+ &:not(.active) {
+ transform: translateX(100%);
+ }
+ }
+ &.left {
+ left: 0;
+ border-right: 1px solid $drawer-border-color;
+ &:not(.active) {
+ transform: translateX(- 100%);
+ }
+ }
}