diff --git a/src/badge.jsx b/src/badge.jsx index 6ee5af1bb50767..77a68c83f63a23 100644 --- a/src/badge.jsx +++ b/src/badge.jsx @@ -38,69 +38,60 @@ export default React.createClass({ muiTheme: newMuiTheme, }); }, - _getBackgroundColor() { - return this.props.backgroundColor + getThemeBadge() { + return this.state.muiTheme.badge; + }, + getTheme() { + return this.state.muiTheme.raisedButton; + }, + getStyles() { + const backgroundColor = this.props.backgroundColor ? this.props.backgroundColor : this.props.primary ? this.getTheme().primaryColor : this.props.secondary ? this.getTheme().secondaryColor : this.getTheme().color; - }, - _getLabelColor() { - return this.props.labelColor + + const labelColor = this.props.labelColor ? this.props.labelColor : this.props.primary ? this.getTheme().primaryTextColor : this.props.secondary ? this.getTheme().secondaryTextColor : this.getTheme().textColor; - }, - getThemeBadge() { - return this.state.muiTheme.badge; - }, - getTheme() { - return this.state.muiTheme.raisedButton; - }, - getStyles() { + const style = { root: { backgroundColor: 'none', position: 'relative', display: 'inline-block', - marginRight: '20px', + marginRight: '20', }, badge: { - display: '-webkit-box; display: -webkit-flex; display: flex', + display: 'flex', WebkitBoxOrient: 'horizontal', WebkitBoxDirection: 'normal', - WebkitFlexDirection: 'row', - msFlexDirection: 'row', flexDirection: 'row', - WebkitFlexWrap: 'wrap', - msFlexWrap: 'wrap', flexWrap: 'wrap', WebkitBoxPack: 'center', - WebkitJustifyContent: 'center', msFlexPack: 'center', justifyContent: 'center', - WebkitAlignContent: 'center', msFlexLinePack: 'center', alignContent: 'center', WebkitBoxAlign: 'center', - WebkitAlignItems: 'center', msFlexAlign: 'center', alignItems: 'center', position: 'absolute', - top: '-11px', - right: '-24px', + top: '-11', + right: '-24', fontWeight: Typography.fontWeightMedium, - fontSize: '12px', - width: '22px', - height: '22px', + fontSize: '12', + width: '22', + height: '22', borderRadius: '50%', - backgroundColor: this._getBackgroundColor(), - color: this._getLabelColor(), + backgroundColor: backgroundColor, + color: labelColor, }, }; for (let item in (this.props.style || {})) {