Migrate progressbar to sass
parent
5167b355ae
commit
83cf581367
|
@ -1,7 +1,7 @@
|
||||||
/* global React */
|
/* global React */
|
||||||
|
|
||||||
import { addons } from 'react/addons';
|
import { addons } from 'react/addons';
|
||||||
import css from './style';
|
import style from './style';
|
||||||
import prefixer from '../utils/prefixer';
|
import prefixer from '../utils/prefixer';
|
||||||
|
|
||||||
export default React.createClass({
|
export default React.createClass({
|
||||||
|
@ -45,8 +45,8 @@ export default React.createClass({
|
||||||
|
|
||||||
renderCircular () {
|
renderCircular () {
|
||||||
return (
|
return (
|
||||||
<svg className={css.circle}>
|
<svg className={style.circle}>
|
||||||
<circle className={css.circlePath} style={this.circularStyle()} cx='30' cy='30' r='25' />
|
<circle className={style.path} style={this.circularStyle()} cx='30' cy='30' r='25' />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -66,17 +66,17 @@ export default React.createClass({
|
||||||
const {buffer, value} = this.linearStyle();
|
const {buffer, value} = this.linearStyle();
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<span ref='buffer' data-ref='buffer' className={css.bufferBar} style={buffer}></span>
|
<span ref='buffer' data-ref='buffer' className={style.buffer} style={buffer}></span>
|
||||||
<span ref='value' data-ref='value' className={css.valueBar} style={value}></span>
|
<span ref='value' data-ref='value' className={style.value} style={value}></span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
let className = this.props.type === 'linear' ? css.linearBar : css.circularBar;
|
let className = this.props.type === 'linear' ? style.linear : style.circular;
|
||||||
|
if (this.props.mode) className += ` ${style[this.props.mode]}`;
|
||||||
|
if (this.props.multicolor) className += ` ${style.multicolor}`;
|
||||||
if (this.props.className) className += ` ${this.props.className}`;
|
if (this.props.className) className += ` ${this.props.className}`;
|
||||||
if (this.props.mode) className += ` ${this.props.mode}`;
|
|
||||||
if (this.props.multicolor) className += ` multicolor`;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -0,0 +1,143 @@
|
||||||
|
@import "../variables";
|
||||||
|
|
||||||
|
$progress-height: .5 * $unit;
|
||||||
|
$progress-main-color: unquote("rgb(#{$color-primary})") !default;
|
||||||
|
$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
|
||||||
|
$circle-wrapper-width: 60;
|
||||||
|
$circle-radius: 25;
|
||||||
|
$scale-ratio: $circle-radius / 20;
|
||||||
|
|
||||||
|
.linear {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
height: $progress-height;
|
||||||
|
overflow: hidden;
|
||||||
|
background: $color-divider;
|
||||||
|
|
||||||
|
&.indeterminate .value {
|
||||||
|
transform-origin: center center;
|
||||||
|
animation: linear-indeterminate-bar 1s linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.value, .buffer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
transition-timing-function: $animation-curve-default;
|
||||||
|
transition-duration: $animation-duration;
|
||||||
|
transform: scaleX(0);
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
background-color: $progress-main-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buffer {
|
||||||
|
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
||||||
|
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.circular {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: $circle-wrapper-width * 1px;
|
||||||
|
height: $circle-wrapper-width * 1px;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
|
||||||
|
&.indeterminate {
|
||||||
|
.circle {
|
||||||
|
animation: circular-indeterminate-bar-rotate 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path {
|
||||||
|
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
|
||||||
|
stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.multicolor .path {
|
||||||
|
animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
|
||||||
|
colors (1.5s * 4) ease-in-out infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.path {
|
||||||
|
transition: stroke-dasharray $animation-duration $animation-curve-default;
|
||||||
|
stroke-dasharray: 0, $scale-ratio * 200;
|
||||||
|
stroke-dashoffset: 0;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-miterlimit: 20;
|
||||||
|
stroke-width: 4;
|
||||||
|
stroke: $progress-main-color;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes linear-indeterminate-bar {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%) scaleX(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translate(-0%) scaleX(.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(50%) scaleX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-indeterminate-bar-rotate {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes circular-indeterminate-bar-dash {
|
||||||
|
0% {
|
||||||
|
stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
|
||||||
|
stroke-dashoffset: $scale-ratio * 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
|
||||||
|
stroke-dashoffset: $scale-ratio * -35;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dasharray: $scale-ratio * 89, $scale-ratio * 200;
|
||||||
|
stroke-dashoffset: $scale-ratio * -124;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colors {
|
||||||
|
0% {
|
||||||
|
stroke: #4285f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
stroke: #de3e35;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
stroke: #f7c223;
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
stroke: #1b9a59;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke: #4285f4;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,105 +0,0 @@
|
||||||
@import '../constants'
|
|
||||||
|
|
||||||
CIRCLE_WRAPPER_WIDTH = 60 // You need to change cx and cy in markup too
|
|
||||||
CIRCLE_RADIUS = 25 // You need to change r in the markup too
|
|
||||||
SCALE_RATIO = CIRCLE_RADIUS/20
|
|
||||||
|
|
||||||
// -- Linear progress bar
|
|
||||||
:local(.linearBar)
|
|
||||||
display : inline-block
|
|
||||||
position : relative
|
|
||||||
height : PROGRESS_BAR_HEIGHT
|
|
||||||
width : 100%
|
|
||||||
background : darken(BACKGROUND, 7.5%)
|
|
||||||
overflow : hidden
|
|
||||||
|
|
||||||
:local(.valueBar), :local(.bufferBar)
|
|
||||||
position : absolute
|
|
||||||
bottom : 0
|
|
||||||
left : 0
|
|
||||||
right : 0
|
|
||||||
top : 0
|
|
||||||
transform : scaleX(0)
|
|
||||||
transform-origin : left center
|
|
||||||
transition-duration : ANIMATION_DURATION
|
|
||||||
transition-timing-function : ANIMATION_EASE
|
|
||||||
|
|
||||||
:local(.valueBar)
|
|
||||||
background-color : ACCENT
|
|
||||||
|
|
||||||
:local(.bufferBar)
|
|
||||||
background-color : alpha(ACCENT, 15%)
|
|
||||||
|
|
||||||
:local(.linearBar).indeterminate :local(.valueBar)
|
|
||||||
transform-origin : center center
|
|
||||||
animation : linear-indeterminate-bar 1s linear infinite
|
|
||||||
|
|
||||||
// -- Circular progress bar
|
|
||||||
:local(.circularBar)
|
|
||||||
display : inline-block
|
|
||||||
position : relative
|
|
||||||
height : CIRCLE_WRAPPER_WIDTH * 1px
|
|
||||||
width : CIRCLE_WRAPPER_WIDTH * 1px
|
|
||||||
transform : rotate(-90deg)
|
|
||||||
|
|
||||||
:local(.circle)
|
|
||||||
height : 100%
|
|
||||||
width : 100%
|
|
||||||
|
|
||||||
:local(.circlePath)
|
|
||||||
stroke-dasharray : 0, SCALE_RATIO * 200
|
|
||||||
stroke-dashoffset : 0
|
|
||||||
stroke-linecap : round
|
|
||||||
stroke-miterlimit : 20
|
|
||||||
stroke-width : 4
|
|
||||||
stroke : ACCENT
|
|
||||||
fill : none
|
|
||||||
transition : stroke-dasharray ANIMATION_DURATION ANIMATION_EASE
|
|
||||||
|
|
||||||
:local(.circularBar).indeterminate
|
|
||||||
:local(.circle)
|
|
||||||
animation : circular-indeterminate-bar-rotate 2s linear infinite
|
|
||||||
|
|
||||||
:local(.circlePath)
|
|
||||||
stroke-dasharray : SCALE_RATIO * 1, SCALE_RATIO * 200
|
|
||||||
stroke-dashoffset : 0
|
|
||||||
animation : circular-indeterminate-bar-dash 1.5s ease-in-out infinite
|
|
||||||
|
|
||||||
&.multicolor :local(.circlePath)
|
|
||||||
animation : circular-indeterminate-bar-dash 1.5s ease-in-out infinite, colors (1.5s*4) ease-in-out infinite
|
|
||||||
|
|
||||||
// -- Animations
|
|
||||||
@keyframes linear-indeterminate-bar
|
|
||||||
0%
|
|
||||||
transform : translate(-50%) scaleX(0)
|
|
||||||
50%
|
|
||||||
transform : translate(-0%) scaleX(0.3)
|
|
||||||
100%
|
|
||||||
transform : translate(50%) scaleX(0)
|
|
||||||
|
|
||||||
@keyframes circular-indeterminate-bar-rotate
|
|
||||||
100%
|
|
||||||
transform : rotate(360deg)
|
|
||||||
|
|
||||||
@keyframes circular-indeterminate-bar-dash
|
|
||||||
0%
|
|
||||||
stroke-dasharray : SCALE_RATIO * 1, SCALE_RATIO * 200
|
|
||||||
stroke-dashoffset : SCALE_RATIO * 0
|
|
||||||
50%
|
|
||||||
stroke-dasharray : SCALE_RATIO * 89, SCALE_RATIO * 200
|
|
||||||
stroke-dashoffset : SCALE_RATIO * -35
|
|
||||||
100%
|
|
||||||
stroke-dasharray : SCALE_RATIO * 89, SCALE_RATIO * 200
|
|
||||||
stroke-dashoffset : SCALE_RATIO * -124
|
|
||||||
|
|
||||||
@keyframes colors
|
|
||||||
0%
|
|
||||||
stroke: #4285F4
|
|
||||||
25%
|
|
||||||
stroke: #DE3E35
|
|
||||||
50%
|
|
||||||
stroke: #F7C223
|
|
||||||
75%
|
|
||||||
stroke: #1B9A59
|
|
||||||
100%
|
|
||||||
stroke: #4285F4
|
|
|
@ -43,14 +43,13 @@ export default React.createClass({
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<h2>Progress bars</h2>
|
<h5>Progress bars</h5>
|
||||||
|
<p style={{margin: '10px auto'}}>Determinate</p>
|
||||||
<p>Determinate</p>
|
<ProgressBar mode='determinate' value={this.state.progress} buffer={this.state.buffer}/>
|
||||||
<ProgressBar mode="determinate" value={this.state.progress} buffer={this.state.buffer}/>
|
<p style={{margin: '10px auto'}}>Indeterminate...</p>
|
||||||
<p>Indeterminate...</p>
|
<ProgressBar mode='indeterminate'/>
|
||||||
<ProgressBar mode="indeterminate"/>
|
<p style={{margin: '10px auto'}}>Circular</p>
|
||||||
<p>Circular</p>
|
<ProgressBar type='circular' mode='indeterminate'/>
|
||||||
<ProgressBar type="circular" mode="indeterminate"/>
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,12 +7,12 @@ import Checkbox from './components/checkbox';
|
||||||
import Dialog from './components/dialog';
|
import Dialog from './components/dialog';
|
||||||
import Drawer from './components/drawer';
|
import Drawer from './components/drawer';
|
||||||
import Input from './components/input';
|
import Input from './components/input';
|
||||||
|
import Progress from './components/progress';
|
||||||
import RadioGroup from './components/radio_group';
|
import RadioGroup from './components/radio_group';
|
||||||
import Switch from './components/switch';
|
import Switch from './components/switch';
|
||||||
// import Dropdown from './components/dropdown';
|
// import Dropdown from './components/dropdown';
|
||||||
// import FontIcon from './components/font_icon';
|
// import FontIcon from './components/font_icon';
|
||||||
// import Form from './components/form';
|
// import Form from './components/form';
|
||||||
// import Progress from './components/progress';
|
|
||||||
// import Slider from './components/slider';
|
// import Slider from './components/slider';
|
||||||
// import Pickers from './components/pickers';
|
// import Pickers from './components/pickers';
|
||||||
// import Tabs from './components/tabs';
|
// import Tabs from './components/tabs';
|
||||||
|
@ -31,6 +31,7 @@ const Test = React.createClass({
|
||||||
<Dialog />
|
<Dialog />
|
||||||
<Drawer />
|
<Drawer />
|
||||||
<Input />
|
<Input />
|
||||||
|
<Progress />
|
||||||
<RadioGroup />
|
<RadioGroup />
|
||||||
<Switch />
|
<Switch />
|
||||||
</app>
|
</app>
|
||||||
|
|
Loading…
Reference in New Issue