Skip to content

Instantly share code, notes, and snippets.

@totty90
Created February 23, 2015 17:17
Show Gist options
  • Save totty90/2693cc8ab82b47e7bbfd to your computer and use it in GitHub Desktop.
Save totty90/2693cc8ab82b47e7bbfd to your computer and use it in GitHub Desktop.
SmartCSS with react
var React = require('react');
var Colors = require('client/ui/Colors');
var SmartCSS = require('SmartCSS');
var ProgressBar = require('client/ui/generic/ProgressBar');
var Icon = require('client/ui/icons/Icon');
var tinycolor = require('tinycolor');
var utils = require('utils');
var css = new SmartCSS();
css.setClass('root', {
width : '100%',
height : '60px',
borderBottom : '1px solid ' + Colors.c.greyLight,
position : 'relative',
padding : '10px',
overflow : 'hidden',
background : Colors.c.white,
transition : 'all 0.35s',
boxShadow : '0 0 0 0 rgba(255, 255, 255, 0.7)',
})
css.setClass('rootHover', {
cursor : 'pointer',
minHeight : '60px',
height : 'auto',
animation : 'pulse-box-shadow 0.5s cubic-bezier(0.66, 0, 0, 1)',
})
css.setClass('header', {
height : '17px',
pointerEvents : 'none',
})
css.setClass('title', {
fontSize : '15px',
fontWeight : 'bold',
pointerEvents : 'none',
paddingBottom : '5px',
transition : 'all 1s',
transform : 'translate(0, 0)',
position : 'absolute',
})
css.setClass('titleHover', {
transform : 'translate(10px, 0)',
letterSpacing : '0.5px',
})
css.setClass('tag', {
fontSize : '12px',
pointerEvents : 'none',
paddingBottom : '5px',
position : 'absolute',
right : '11px',
color : Colors.c.greyLight,
})
css.setClass('description', {
pointerEvents : 'none',
lineHeight : '17px',
textOverflow : 'ellipsis',
overflow : 'hidden',
whiteSpace : 'nowrap',
transition : 'all 1s',
color : Colors.c.grey,
})
css.setClass('descriptionHover', {
whiteSpace : 'initial',
color : Colors.c.black,
})
css.setClass('progressBar', {
marginTop : '1px',
marginBottom : '4px',
})
css.setClass('icon', {
marginTop : '-30px',
paddingTop : '16px',
marginRight : '20px',
})
css.setClass('iconHover', {
// marginRight : '35px',
})
css.setClass('effect', {
position : 'absolute',
transition : 'all 0.5s',
width : '100%',
height : '100%',
background : tinycolor(Colors.key).setAlpha(0.1).toRgbString(),
top : 0,
left : 0,
transform : 'translate(-100%, 0)',
opacity : 0.25,
filter: 'blur(5px)',
'-webkit-filter': 'blur(5px)'
})
css.setClass('effectHover', {
transform : 'translate(100%, 0)',
opacity : 1,
})
module.exports = React.createClass({
getDefaultProps: function(){
return {
hasProgressBar : true,
hasImage : true,
}
},
getInitialState: function(){
return {
hover: false
}
},
componentWillMount: function(){
},
componentDidMount: function(){
},
componentWillUnmount: function(){
},
componentDidUpdate: function(){
},
__onMouseOver: function(){
this.setState({hover: true});
},
__onMouseOut: function(){
this.setState({hover: false});
},
render: function(){
var mission = this.props.mission;
return React.DOM.div({
className : css.getClasses({
root : true,
rootHover : this.state.hover,
}),
onMouseOver : this.__onMouseOver,
onMouseOut : this.__onMouseOut,
},
React.DOM.div({
className : css.getClasses({
effect : true,
effectHover : this.state.hover,
}),
}),
React.DOM.p({
className : css.getClasses({
header : true,
}),
},
new Icon({
hover : this.state.hover,
className : css.getClasses({
icon : true,
iconHover : this.state.hover,
}),
// @todo: use color vars;
color : mission.isDone() ? 'rgb(38, 215, 0)' : 'black',
isCheck : mission.isDone(),
isNone : !mission.isDone(),
}),
React.DOM.span({
className: css.getClasses({
title : true,
titleHover : this.state.hover,
})
}, mission.getTitle()),
React.DOM.span({
className: css.getClasses({
tag : true,
tagHover : this.state.hover,
})
},
(mission.getTimesDone() > 1 ?
' (x' + mission.getTimesDone() + ')'
:
' (' + utils.formatNumber(mission.getProgress(), {isPercent: true}) + ')'
)
)
),
new ProgressBar({
per : mission.getProgress(),
hover : this.state.hover,
className : css.getClass('progressBar')
// m : mission,
}),
React.DOM.p({
className: css.getClasses({
description : true,
descriptionHover : this.state.hover,
})
}, mission.getDescription())
)
}
});
module.exports.classes = css.getClassesAsMap();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment