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(