Added Container Progress component.

This commit is contained in:
Sean Li 2015-05-22 17:40:09 -07:00
Родитель 75229d6711
Коммит 2ccee4a505
3 изменённых файлов: 77 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,41 @@
var React = require('react');
/*
Usage: <ContainerProgress pBar1={20} pBar2={70} pBar3={100} pBar4={20} />
*/
var ContainerProgress = React.createClass({
render: function () {
var pBar1Style = {
height: this.props.pBar1 + '%'
};
var pBar2Style = {
height: this.props.pBar2 + '%'
};
var pBar3Style = {
height: this.props.pBar3 + '%'
};
var pBar4Style = {
height: this.props.pBar4 + '%'
};
return (
<div className="container-progress">
<div className="bar-1 bar-bg">
<div className="bar-1 bar-fg" style={pBar4Style}></div>
</div>
<div className="bar-2 bar-bg">
<div className="bar-2 bar-fg" style={pBar3Style}></div>
</div>
<div className="bar-3 bar-bg">
<div className="bar-3 bar-fg" style={pBar2Style}></div>
</div>
<div className="bar-4 bar-bg">
<div className="bar-4 bar-fg" style={pBar1Style}></div>
</div>
</div>
);
}
});
module.exports = ContainerProgress;

Просмотреть файл

@ -0,0 +1,35 @@
.container-progress {
width: 100px;
height: 100px;
border: 4px solid @brand-primary;
border-radius: 10px;
transform: rotate(180deg);
.bar-bg {
display: inline-block;
position: relative;
top: 22px;
background-color: @gray-lightest;
width: 4px;
height: 50px;
border-radius: 10px;
}
.bar-fg {
background-color: @brand-primary;
width: 4px;
height: 0px;
border-radius: 10px;
transition: 0.3 all;
}
.bar-1 {
left: 21px;
}
.bar-2 {
left: 32px;
}
.bar-3 {
left: 43px;
}
.bar-4 {
left: 54px;
}
}

Просмотреть файл

@ -16,6 +16,7 @@
@import "container-logs.less";
@import "container-settings.less";
@import "animation.less";
@import "container-progress.less";
html, body {
height: 100%;