- { this.props.title ?
{this.props.title}
: null }
- { this.props.children }
+
+
+
+ { this.props.title ?
{this.props.title}
: null }
+
+ { this.props.children }
+
{ this.props.actions.length > 0 ? : null }
diff --git a/components/dialog/style.scss b/components/dialog/style.scss
new file mode 100644
index 00000000..ee3bd380
--- /dev/null
+++ b/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;
+}
diff --git a/components/dialog/style.styl b/components/dialog/style.styl
deleted file mode 100644
index eb26141c..00000000
--- a/components/dialog/style.styl
+++ /dev/null
@@ -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
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 6fd3f6d3..5de46d58 100644
--- a/spec/components/dialog.jsx
+++ b/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({
Dialog
lorem ipsum...
-