diff --git a/components/_globals.scss b/components/_globals.scss index 5ae5fce7..8dbaf123 100644 --- a/components/_globals.scss +++ b/components/_globals.scss @@ -3,8 +3,6 @@ $color-divider: $palette-grey-200 !default; $color-background: $color-white !default; $color-text: $palette-grey-900 !default; $color-text-secondary: $palette-grey-600 !default; -$color-overlay: $color-black !default; -$color-overlay-opacity: 0.5 !default; $color-primary: $palette-indigo-500 !default; $color-primary-dark: $palette-indigo-700 !default; diff --git a/components/drawer/_config.scss b/components/drawer/_config.scss index 5a164bac..22012504 100644 --- a/components/drawer/_config.scss +++ b/components/drawer/_config.scss @@ -1,5 +1,4 @@ $drawer-background-color: $palette-grey-50 !default; $drawer-border-color: $palette-grey-300 !default; -$drawer-overlay-color: $color-overlay; $drawer-text-color: $palette-grey-800 !default; $drawer-width: 24 * $unit; diff --git a/components/overlay/Overlay.jsx b/components/overlay/Overlay.jsx index 09c9cf12..d00bef8e 100644 --- a/components/overlay/Overlay.jsx +++ b/components/overlay/Overlay.jsx @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import ClassNames from 'classnames'; import style from './style'; class Overlay extends React.Component { @@ -7,12 +8,12 @@ class Overlay extends React.Component { active: React.PropTypes.bool, children: React.PropTypes.node, className: React.PropTypes.string, - onClick: React.PropTypes.func, - opacity: React.PropTypes.number + invisible: React.PropTypes.bool, + onClick: React.PropTypes.func }; static defaultProps = { - opacity: 0.5 + invisible: false }; componentDidMount () { @@ -33,22 +34,14 @@ class Overlay extends React.Component { } handleRender () { - let className = style.root; - const overlayStyle = {}; - - if (this.props.active) { - className += ` ${style.active}`; - overlayStyle.opacity = this.props.opacity; - } - if (this.props.className) className += ` ${className}`; + const className = ClassNames(style.root, { + [style.active]: this.props.active, + [style.invisible]: this.props.invisible + }, this.props.className); ReactDOM.render(
-
+
{this.props.children}
, this.node); diff --git a/components/overlay/_config.scss b/components/overlay/_config.scss index fd75dac5..ccba4d3c 100644 --- a/components/overlay/_config.scss +++ b/components/overlay/_config.scss @@ -1 +1,2 @@ $overlay-color: $color-black !default; +$overlay-opacity: .6 !default; diff --git a/components/overlay/style.scss b/components/overlay/style.scss index 59e940af..60395fb7 100644 --- a/components/overlay/style.scss +++ b/components/overlay/style.scss @@ -14,6 +14,9 @@ align-items: center; justify-content: center; pointer-events: none; + &.invisible > *:not(.overlay) { + pointer-events: all; + } } .overlay { @@ -31,4 +34,7 @@ .active { pointer-events: all; + > .overlay { + opacity: $overlay-opacity; + } } diff --git a/components/snackbar/Snackbar.jsx b/components/snackbar/Snackbar.jsx index 1b9536d9..a7d727db 100644 --- a/components/snackbar/Snackbar.jsx +++ b/components/snackbar/Snackbar.jsx @@ -33,7 +33,7 @@ class Snackbar extends React.Component { }, this.props.className); return ( - +
{icon ? : null} {label} diff --git a/package.json b/package.json index dd901fab..17a49e87 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-toolbox", - "version": "0.13.3", + "version": "0.13.4", "homepage": "http://www.react-toolbox.com", "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.", "author": "React Toolbox Team (http://github.com/react-toolbox)",