<Dialog> using SaSS

components/dialog/index.jsx

@@ -1,9 +1,12 @@
 /* global React */
 
-import style from './style';
+import { addons } from 'react/addons';
 import Navigation from '../navigation';
+import style from './style.scss';
 
 export default React.createClass({
+  mixins: [addons.PureRenderMixin],
+
   displayName: 'Dialog',
 
   propTypes: {
@@ -17,7 +20,7 @@ export default React.createClass({
   getDefaultProps () {
     return {
       actions: [],
-      className: 'normal'
+      type: 'normal'
     };
   },
 
@@ -26,16 +29,18 @@ export default React.createClass({
   },
 
   render () {
-    let rootClass = style.root;
+    let className = `${style.root} ${style[this.props.type]}`;
-    let containerClass = `${style.container} ${this.props.className}`;
+    if (this.state.active) className += ` ${style.active}`;
-    if (this.state.active) rootClass += ' active';
+    if (this.props.className) className += ` ${this.props.className}`;
-    if (this.props.type) containerClass += ` ${this.props.type}`;
 
     return (
-      <div data-react-toolbox='dialog' data-flex='vertical center' className={rootClass}>
+      <div data-react-toolbox='dialog' className={className}>
-        <div className={containerClass}>
+        <div className={style.overlay} />
-          { this.props.title ? <h1>{this.props.title}</h1> : null }
+        <div className={style.content}>
-          { this.props.children }
+          { this.props.title ? <h6>{this.props.title}</h6> : null }
+          <section>
+            { this.props.children }
+          </section>
           { this.props.actions.length > 0 ? <Navigation actions={this.props.actions}/> : null }
         </div>
       </div>

components/dialog/style.scss

@@ -0,0 +1,95 @@
+@import "../variables";
+@import "../mixins";
+$dialog-color-white: unquote("rgb(#{$color-white})") !default;
+$dialog-translateY: 4 * $unit;
+
+.root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  pointer-events: none;
+
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  > .content {
+    opacity: 0;
+    transform: translateY(-$dialog-translateY);
+  }
+}
+
+.active {
+  pointer-events: all;
+  .overlay {
+    opacity: $color-overlay-opacity;
+  }
+  .content {
+    opacity: 1;
+    transform: translateY(0%);
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $color-overlay;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
+}
+
+.content {
+  display: flex;
+  max-width: 96vw;
+  max-height: 96vh;
+  flex-direction: column;
+  background-color: $dialog-color-white;
+  border-radius: $border-radius;
+  box-shadow: $zdepth-shadow-5;
+  transition-delay: $animation-delay;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity, transform;
+  > h6 {
+    margin: $offset;
+  }
+  > *:not(section) {
+    flex-grow: 0;
+  }
+  > section {
+    margin: 0 $offset;
+    overflow-y: scroll;
+    color: $color-text-secondary;
+
+    flex-grow: 2;
+  }
+  > nav {
+    $offset: ($offset / 2);
+    margin: $offset;
+    text-align: right;
+    > * {
+      min-width: 0;
+      padding-right: $offset;
+      padding-left: $offset;
+    }
+  }
+}
+
+.small > .content {
+  width: 30vw;
+}
+.normal > .content {
+  width: 50vw;
+}
+.large > .content {
+  width: 96vw;
+}

components/dialog/style.styl

@@ -1,52 +0,0 @@
-@import '../constants'
-
-:local(.container)
-  margin                              : SPACE
-  padding                             : SPACE (SPACE * 1.5)
-  background-color                    : WHITE
-  border-radius                       : (SPACE / 5)
-  box-shadow                          : ZDEPTH_SHADOW_5
-  transition-property                 : opacity, transform
-  transition-duration                 : ANIMATION_DURATION
-  transition-timing-function          : ANIMATION_EASE
-  transition-delay                    : ANIMATION_DELAY
-  > h1
-    margin-bottom                     : SPACE
-  > nav
-    margin-top                        : SPACE
-    text-align                        : right
-    > .raised
-      margin-left                     : SPACE
-
-:local(.root)
-  z-index                             : 3
-  position                            : fixed
-  left                                : 0
-  top                                 : 0
-  width                               : 100vw
-  height                              : 100vh
-  background-color                    : rgba(0,0,0,0.5)
-  transition-property                 : opacity
-  transition-duration                 : (ANIMATION_DURATION / 2)
-  transition-timing-function          : ANIMATION_EASE
-
-  &:not(.active)
-    pointer-events                    : none
-    opacity                           : 0
-    transition-delay                  : (ANIMATION_DELAY * 2)
-    > :local(.container)
-      opacity                         : 0
-      transform                       : translateY(-(UNIT))
-  &.active
-    opacity                           : 1
-    > :local(.container)
-      opacity                         : 1
-      transform                       : translateY(0%)
-
-  // -- Overrides
-  :local(.container).small
-    width                             : 33vw
-  :local(.container).normal
-    width                             : 50vw
-  :local(.container).large
-    width                             : 96vw

spec/components/dialog.jsx

@@ -9,12 +9,13 @@ export default React.createClass({
   getInitialState () {
     return {
       actions: [{
-        label: 'Cancel', style: 'transparent', onClick: this.onClose
+        label: 'Close', type: 'flat', className:'primary', onClick: this.onClose
       }]
     };
   },
 
   onClose () {
+    console.log('a');
     this.refs.dialog.hide();
   },
 
@@ -28,7 +29,13 @@ export default React.createClass({
         <h2>Dialog</h2>
         <p>lorem ipsum...</p>
         <Button type='raised' label='Show Dialog' onClick={this.onShow} />
-        <Dialog ref='dialog' type='profile' title='Your profile' className='small' actions={this.state.actions}>
+
+        <Dialog
+          ref='dialog'
+          type='small'
+          title='Your profile'
+          actions={this.state.actions}
+        >
           <p>Welcome to your first Dialog</p>
         </Dialog>
       </section>