diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..72950f03 --- /dev/null +++ b/css/common.css @@ -0,0 +1,3 @@ +div.error { + color: red; +} diff --git a/css/molecules/ProgressBar.css b/css/molecules/ProgressBar.css new file mode 100644 index 00000000..4fb64692 --- /dev/null +++ b/css/molecules/ProgressBar.css @@ -0,0 +1,12 @@ +.mx_ProgressBar { + height: 5px; + border-radius: 5px; + border: 1px solid black; + margin-bottom: 10px; +} + +.mx_ProgressBar_fill { + height: 100%; + background-color: #666; + transition: width 0.1s ease; +} diff --git a/css/templates/Login.css b/css/templates/Login.css new file mode 100644 index 00000000..10c28d7c --- /dev/null +++ b/css/templates/Login.css @@ -0,0 +1,11 @@ +.mx_Login { + width: 600px; + height: 350px; + margin-left: auto; + margin-right: auto; + padding: 10px; + text-align: center; + background-color: #eee; + border: 1px solid black; +} + diff --git a/example/index.html b/example/index.html index 4cd1fb71..c6de4d5f 100644 --- a/example/index.html +++ b/example/index.html @@ -7,5 +7,6 @@
+ diff --git a/src/molecules/ProgressBar.js b/src/molecules/ProgressBar.js new file mode 100644 index 00000000..030a0401 --- /dev/null +++ b/src/molecules/ProgressBar.js @@ -0,0 +1,19 @@ +var React = require('react'); + +module.exports = React.createClass({ + propTypes: { + value: React.PropTypes.number, + max: React.PropTypes.number + }, + + render: function() { + // Would use an HTML5 progress tag but if that doesn't animate if you + // use the HTML attributes rather than styles + var progressStyle = { + width: ((this.props.value / this.props.max) * 100)+"%" + }; + return ( +
+ ); + } +});