vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev 

* 'dev' of github.com:soyjavi/react-toolbox:
  fix (#943): prevent navdrawer toggle when clicking on it
old
Javi Velasco 2016-11-22 09:47:39 +01:00
parent 9a1b7d54f3 c72df43971
commit bc69486cb9
3 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/layout/NavDrawer.js
View File

@ -16,12 +16,11 @@ const NavDrawer = ({ active, children, className, onOverlayClick, permanentAt, p
}); });
return ( return (
<div data-react-toolbox='nav-drawer' className={rootClasses} onClick={onOverlayClick}> <div data-react-toolbox='nav-drawer' className={rootClasses}>
<div data-react-toolbox='nav-drawer-scrim' className={theme.scrim}> <div data-react-toolbox='nav-drawer-scrim' className={theme.scrim} onClick={onOverlayClick} />
<aside data-react-toolbox='nav-drawer-content' className={drawerClasses}> <aside data-react-toolbox='nav-drawer-content' className={drawerClasses}>
{children} {children}
</aside> </aside>
</div>
</div> </div>
); );
}; };

10
components/layout/_mixins.scss
View File

@ -1,11 +1,9 @@
@mixin open() { @mixin open() {
transition-delay: $animation-delay; transition-delay: $animation-delay;
& > .scrim { .drawerContent {
& > .drawerContent { pointer-events: all;
pointer-events: all; transition-delay: $animation-delay;
transition-delay: $animation-delay; transform: translateX(0);
transform: translateX(0);
}
} }
} }

4
components/layout/theme.scss
View File

@ -29,7 +29,7 @@
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: $z-index-highest; z-index: $z-index-higher;
width: 0; width: 0;
height: 100%; height: 100%;
background-color: rgba($drawer-overlay-color, 0); background-color: rgba($drawer-overlay-color, 0);
@ -38,6 +38,8 @@
.drawerContent { .drawerContent {
@include shadow-2dp(); @include shadow-2dp();
position: absolute;
z-index: $z-index-highest;
display: flex; display: flex;
width: $navigation-drawer-mobile-width; width: $navigation-drawer-mobile-width;
max-width: $navigation-drawer-max-mobile-width; max-width: $navigation-drawer-max-mobile-width;