SmartCSS with react

mission.js

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();