-
Notifications
You must be signed in to change notification settings - Fork 5
/
Dialog.js
57 lines (51 loc) · 1.3 KB
/
Dialog.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/** @jsx React.DOM */
var React = require('react/addons');
var Shadow = require('./Shadow');
require('./css')('\
.dialog {\
z-index: 100;\
background: white;\
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\
position: absolute;\
top: 0;\
margin: 10px;\
padding: 10px;\
opacity: 0;\
-webkit-transform: scale(0.9) translateY(200%);\
transform: scale(0.9) translateY(200%);\
}\
\
.dialog.open {\
opacity: 1;\
-webkit-transform: none;\
transform: none;\
}\
\
.dialog-content {\
display: -webkit-flex;\
display: flex;\
-webkit-flex-direction: column;\
flex-direction: column;\
-webkit-align-items: center;\
align-items: center;\
}\
');
var Dialog = React.createClass({displayName: 'Dialog',
render: function() {
var open = this.props.open || false;
var dialogClass = React.addons.classSet({
dialog: true,
open: open
});
return (
React.createElement("div", {className: dialogClass},
React.createElement(Shadow, null),
React.createElement("div", {className: "dialog-content"},
this.props.children
)
)
);
},
});
module.exports = Dialog;