diff --git a/.eslintrc b/.eslintrc index 783985f791a3b9..29ea8d84548469 100644 --- a/.eslintrc +++ b/.eslintrc @@ -24,7 +24,7 @@ rules: eol-last: 2 indent: [2, 2, {SwitchCase: 1}] jsx-quotes: [2, prefer-double] - key-spacing: 0 # Wishlist, one day + key-spacing: 2 max-len: [2, 120, 4] new-cap: [0, {capIsNew: true, newIsCap: true}] # Wishlist, one day no-unused-expressions: 2 diff --git a/docs/src/app/components/AppBar/ExampleIconMenu.jsx b/docs/src/app/components/AppBar/ExampleIconMenu.jsx index 121d7c61bce2d5..33b670ccc4e4a9 100644 --- a/docs/src/app/components/AppBar/ExampleIconMenu.jsx +++ b/docs/src/app/components/AppBar/ExampleIconMenu.jsx @@ -17,8 +17,8 @@ const AppBarExampleIconMenu = React.createClass({ iconButtonElement={ } - targetOrigin={{horizontal:'right', vertical:'top'}} - anchorOrigin={{horizontal:'right', vertical:'top'}} + targetOrigin={{horizontal: 'right', vertical: 'top'}} + anchorOrigin={{horizontal: 'right', vertical: 'top'}} > diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/code-example/code-example.jsx index cbf24fdedb2956..824b4576a491a1 100644 --- a/docs/src/app/components/code-example/code-example.jsx +++ b/docs/src/app/components/code-example/code-example.jsx @@ -17,13 +17,13 @@ const DefaultRawTheme = Styles.LightRawTheme; const CodeExample = React.createClass({ - propTypes : { + propTypes: { children: React.PropTypes.node, code: React.PropTypes.string.isRequired, layoutSideBySide: React.PropTypes.bool, }, - contextTypes : { + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx index 1a4d715f67c31f..9359f8ebfd9c03 100644 --- a/docs/src/app/components/component-info.jsx +++ b/docs/src/app/components/component-info.jsx @@ -100,7 +100,7 @@ const ComponentInfo = React.createClass({ position: 'inherit', paddingRight: desktopGutter + 'px', }, - descWhenMedium :{ + descWhenMedium: { paddingTop: '16px', }, tdWhenLarge: { @@ -109,7 +109,7 @@ const ComponentInfo = React.createClass({ nameWhenLarge: { minWidth: '128px', }, - descWhenLarge :{ + descWhenLarge: { paddingTop: '32px', }, descWhenLastChild: { diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx index 478b4e88756589..185733effd4af0 100644 --- a/docs/src/app/components/master.jsx +++ b/docs/src/app/components/master.jsx @@ -35,7 +35,7 @@ const Master = React.createClass({ location: React.PropTypes.object, }, - childContextTypes : { + childContextTypes: { muiTheme: React.PropTypes.object, }, @@ -171,12 +171,11 @@ const Master = React.createClass({ }, tabs: { width: 425, - bottom:0, + bottom: 0, }, tab: { height: 64, }, - }; let materialIcon = this.state.tabIndex !== '0' ? ( diff --git a/docs/src/app/components/mobile-tear-sheet.jsx b/docs/src/app/components/mobile-tear-sheet.jsx index 5ae9dbe4478530..d1d475d5c45279 100644 --- a/docs/src/app/components/mobile-tear-sheet.jsx +++ b/docs/src/app/components/mobile-tear-sheet.jsx @@ -6,7 +6,7 @@ const {StylePropable} = Mixins; const MobileTearSheet = React.createClass({ mixins: [StylePropable], - contextTypes : { + contextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/docs/src/app/components/pages/components/auto-complete.jsx b/docs/src/app/components/pages/components/auto-complete.jsx index 0bf9f1ac97b10e..b3bb40480dae8f 100644 --- a/docs/src/app/components/pages/components/auto-complete.jsx +++ b/docs/src/app/components/pages/components/auto-complete.jsx @@ -62,11 +62,11 @@ class AutoCompletePage extends React.Component { dataSource={[ { text: 'text-value1', - value:(), + value: (), }, { text: 'text-value2', - value:(), + value: (), }, ]} onNewRequest={(t, index) => { console.log('request:' + index); }} /> diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx index 843d0de889bb4a..1b527326e0acef 100644 --- a/docs/src/app/components/pages/components/cards.jsx +++ b/docs/src/app/components/pages/components/cards.jsx @@ -117,7 +117,7 @@ export default class CardPage extends React.Component { A}/> + avatar={A}/> Menu with various open directions

+ anchorOrigin={{horizontal: 'right', vertical: 'top'}} + targetOrigin={{horizontal: 'right', vertical: 'top'}}> @@ -210,8 +210,8 @@ export default class IconMenus extends React.Component { + anchorOrigin={{horizontal: 'left', vertical: 'top'}} + targetOrigin={{horizontal: 'left', vertical: 'top'}}> @@ -221,8 +221,8 @@ export default class IconMenus extends React.Component { + anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} + targetOrigin={{horizontal: 'right', vertical: 'bottom'}}> @@ -232,8 +232,8 @@ export default class IconMenus extends React.Component { + anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} + targetOrigin={{horizontal: 'left', vertical: 'bottom'}}> @@ -327,8 +327,8 @@ export default class IconMenus extends React.Component { @@ -386,8 +386,8 @@ export default class IconMenus extends React.Component { @@ -445,8 +445,8 @@ export default class IconMenus extends React.Component { @@ -504,8 +504,8 @@ export default class IconMenus extends React.Component { diff --git a/docs/src/app/components/pages/components/lists.jsx b/docs/src/app/components/pages/components/lists.jsx index 35908ad1bb9f54..e88f27b62512c6 100644 --- a/docs/src/app/components/pages/components/lists.jsx +++ b/docs/src/app/components/pages/components/lists.jsx @@ -430,7 +430,7 @@ import ListItem from 'material-ui/lib/lists/list-item'; A} + style={{left: 8}}>A} rightAvatar={} />

Anchor Origin

-
+
Vertical @@ -123,7 +123,7 @@ let PopoverPage = React.createClass({
-
+
Horizontal @@ -132,11 +132,11 @@ let PopoverPage = React.createClass({
-
-
+
+

Target Origin

-
+
Vertical @@ -145,7 +145,7 @@ let PopoverPage = React.createClass({
-
+
Horizontal @@ -160,7 +160,7 @@ let PopoverPage = React.createClass({ anchorOrigin={this.state.anchorOrigin} targetOrigin={this.state.targetOrigin} onRequestClose={this.closePopover.bind(this, 'pop')} > -
+

Here is an arbitrary popover

Hi - here is some content

@@ -173,8 +173,8 @@ let PopoverPage = React.createClass({ show(key, e) { this.setState({ - activePopover:key, - anchorEl:e.currentTarget, + activePopover: key, + anchorEl: e.currentTarget, }); }, @@ -182,7 +182,7 @@ let PopoverPage = React.createClass({ if (this.state.activePopover !== key) return; this.setState({ - activePopover:'none', + activePopover: 'none', }); }, @@ -191,7 +191,7 @@ let PopoverPage = React.createClass({ anchorOrigin[positionElement] = position; this.setState({ - anchorOrigin:anchorOrigin, + anchorOrigin: anchorOrigin, }); }, @@ -200,7 +200,7 @@ let PopoverPage = React.createClass({ targetOrigin[positionElement] = position; this.setState({ - targetOrigin:targetOrigin, + targetOrigin: targetOrigin, }); }, diff --git a/docs/src/app/components/pages/components/select-fields.jsx b/docs/src/app/components/pages/components/select-fields.jsx index f223fe6e4f8fc8..15b59b7441c45d 100644 --- a/docs/src/app/components/pages/components/select-fields.jsx +++ b/docs/src/app/components/pages/components/select-fields.jsx @@ -196,11 +196,11 @@ const SelectFieldsPage = React.createClass({ {payload: '5', text: 'Weekly'}, ]; let arbitraryArrayMenuItems = [ - {id:1, name:'Never'}, - {id:2, name:'Every Night'}, - {id:3, name:'Weeknights'}, - {id:4, name:'Weekends'}, - {id:5, name:'Weekly'}, + {id: 1, name: 'Never'}, + {id: 2, name: 'Every Night'}, + {id: 3, name: 'Weeknights'}, + {id: 4, name: 'Weekends'}, + {id: 5, name: 'Weekly'}, ]; let menuItemsWithLabel = [ {payload: '1', text: 'Morning', period: '5 am - 12 pm'}, diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx index 1144b23c84fc36..7193d360e7b85d 100644 --- a/docs/src/app/components/pages/components/switches.jsx +++ b/docs/src/app/components/pages/components/switches.jsx @@ -481,17 +481,17 @@ export default class SwitchesPage extends React.Component { id="radioButtonId1" value="light" label="prepare for light speed" - style={{marginBottom:16}} /> + style={{marginBottom: 16}} /> + style={{marginBottom: 16}}/>
diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 7e171a55d8e87e..58f7dfb1fb18f8 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -264,7 +264,7 @@ The textarea also grows and shrinks according to the number of lines.`, style={styles.textfield} hintText="Custom Underline Color" value={this.state.propValue} - underlineStyle={{borderColor:Colors.green500}} + underlineStyle={{borderColor: Colors.green500}} onChange={this._handleInputChange} />

+ underlineDisabledStyle={{borderColor: Colors.purple500, borderBottom: 'solid 1px'}} />

this.setState({open:false})} + onEscKeyDown={() => this.setState({open: false})} onItemTouchTap={this._handleItemTouchTap} listStyle={this.mergeAndPrefix(styles.list, listStyle)} openDirection="bottom-left" @@ -176,7 +176,7 @@ const AutoComplete = React.createClass({ return (
{ setTimeout(() => { - this.setState({open:false}); + this.setState({open: false}); }, this.props.touchTapCloseDelay); this.props.onNewRequest(this.state.searchText); }} @@ -254,7 +254,7 @@ const AutoComplete = React.createClass({ _updateRequests(searchText) { this.setState({ - searchText:searchText, + searchText: searchText, open: true, }); @@ -266,7 +266,7 @@ const AutoComplete = React.createClass({ _handleItemTouchTap(e, child) { setTimeout(() => { - this.setState({open:false}); + this.setState({open: false}); }, this.props.touchTapCloseDelay); let dataSource = this.props.dataSource; @@ -293,13 +293,13 @@ const AutoComplete = React.createClass({ _handleKeyDown(e) { switch (e.keyCode) { case KeyCode.ESC: - this.setState({open:false}); + this.setState({open: false}); break; case KeyCode.DOWN: if (this.focusOnInput && this.state.open) { e.preventDefault(); this.focusOnInput = false; - this.setState({open:true}); + this.setState({open: true}); } break; default: diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx index b0b80df3c8bf03..6ef7ddbee4c9d6 100644 --- a/src/card/card-header.jsx +++ b/src/card/card-header.jsx @@ -102,7 +102,7 @@ const CardHeader = React.createClass({ let avatar = this.props.avatar; if (React.isValidElement(this.props.avatar)) { let avatarMergedStyle = this.mergeStyles(styles.avatar, avatar.props.style); - avatar = React.cloneElement(avatar, {style:avatarMergedStyle}); + avatar = React.cloneElement(avatar, {style: avatarMergedStyle}); } else if (avatar !== null) { avatar = ; diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx index 012043af6b0386..dcd2eb4aa8c557 100644 --- a/src/card/card-media.jsx +++ b/src/card/card-media.jsx @@ -80,7 +80,7 @@ const CardMedia = React.createClass({ verticalAlign: 'top', maxWidth: '100%', minWidth: '100%', - width:'100%', + width: '100%', }, }; }, diff --git a/src/drop-down-menu.jsx b/src/drop-down-menu.jsx index 731393e4ed12a2..8f69a679cba060 100644 --- a/src/drop-down-menu.jsx +++ b/src/drop-down-menu.jsx @@ -40,10 +40,10 @@ const DropDownMenu = React.createClass({ className: React.PropTypes.string, disabled: React.PropTypes.bool, displayMember: React.PropTypes.string, - iconStyle:React.PropTypes.object, + iconStyle: React.PropTypes.object, labelMember: React.PropTypes.string, - labelStyle:React.PropTypes.object, - maxHeight:React.PropTypes.number, + labelStyle: React.PropTypes.object, + maxHeight: React.PropTypes.number, menuItemStyle: React.PropTypes.object, menuItems: React.PropTypes.array.isRequired, menuStyle: React.PropTypes.object, @@ -51,7 +51,7 @@ const DropDownMenu = React.createClass({ openImmediately: React.PropTypes.bool, selectedIndex: React.PropTypes.number, style: React.PropTypes.object, - underlineStyle:React.PropTypes.object, + underlineStyle: React.PropTypes.object, value: React.PropTypes.any, valueLink: React.PropTypes.object, valueMember: React.PropTypes.string, @@ -114,7 +114,7 @@ const DropDownMenu = React.createClass({ cursor: disabled ? 'not-allowed' : 'pointer', position: 'relative', height: '100%', - width:'100%', + width: '100%', }, controlBg: { transition: Transitions.easeOut(), @@ -145,13 +145,13 @@ const DropDownMenu = React.createClass({ position: 'absolute', borderTop: 'solid 1px ' + accentColor, margin: '-1px ' + spacing.desktopGutter + 'px', - bottom:1, - left:0, - right:0, + bottom: 1, + left: 0, + right: 0, }, menu: { zIndex: zIndex + 1, - position:'relative', + position: 'relative', }, menuItem: { paddingRight: spacing.iconSize + @@ -235,7 +235,7 @@ const DropDownMenu = React.createClass({ ); if (this.state.anchorEl && !autoWidth) { - popoverStyle = {width:this.state.anchorEl.clientWidth}; + popoverStyle = {width: this.state.anchorEl.clientWidth}; } return ( @@ -257,7 +257,7 @@ const DropDownMenu = React.createClass({
{}, onRequestChange: () => {}, anchorOrigin: { - vertical:'top', - horizontal:'left', + vertical: 'top', + horizontal: 'left', }, targetOrigin: { - vertical:'top', - horizontal:'left', + vertical: 'top', + horizontal: 'left', }, touchTapCloseDelay: 200, }; @@ -144,7 +144,7 @@ const IconMenu = React.createClass({ }, menu: { - position:'relative', + position: 'relative', }, }; diff --git a/src/popover/popover-animation-from-top.jsx b/src/popover/popover-animation-from-top.jsx index 1428eaa4c40fec..58e611b15188ee 100644 --- a/src/popover/popover-animation-from-top.jsx +++ b/src/popover/popover-animation-from-top.jsx @@ -48,15 +48,15 @@ const PopoverAnimationFromTop = React.createClass({ }, componentDidMount() { - this.setState({open:true}); //eslint-disable-line react/no-did-mount-set-state + this.setState({open: true}); //eslint-disable-line react/no-did-mount-set-state }, componentWillReceiveProps(nextProps, nextContext) { let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ - open:nextProps.open, - muiTheme:newMuiTheme, + open: nextProps.open, + muiTheme: newMuiTheme, }); }, @@ -66,13 +66,13 @@ const PopoverAnimationFromTop = React.createClass({ return { base: { - opacity:0, - transform:'scaleY(0)', + opacity: 0, + transform: 'scaleY(0)', transformOrigin: `${horizontal} ${targetOrigin.vertical}`, position: 'fixed', zIndex: this.state.muiTheme.zIndex.popover, transition: Transitions.easeOut('450ms', ['transform', 'opacity']), - maxHeight:'100%', + maxHeight: '100%', }, }; @@ -82,7 +82,7 @@ const PopoverAnimationFromTop = React.createClass({ return { base: { opacity: 1, - transform:'scaleY(1)', + transform: 'scaleY(1)', }, }; }, diff --git a/src/popover/popover-default-animation.jsx b/src/popover/popover-default-animation.jsx index 7696c5c358eace..02b670c899618b 100644 --- a/src/popover/popover-default-animation.jsx +++ b/src/popover/popover-default-animation.jsx @@ -48,15 +48,15 @@ const PopoverDefaultAnimation = React.createClass({ }, componentDidMount() { - this.setState({open:true}); //eslint-disable-line react/no-did-mount-set-state + this.setState({open: true}); //eslint-disable-line react/no-did-mount-set-state }, componentWillReceiveProps(nextProps, nextContext) { let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme; this.setState({ - open:nextProps.open, - muiTheme:newMuiTheme, + open: nextProps.open, + muiTheme: newMuiTheme, }); }, @@ -67,26 +67,26 @@ const PopoverDefaultAnimation = React.createClass({ return { base: { - opacity:0, - transform:'scale(0, 0)', + opacity: 0, + transform: 'scale(0, 0)', transformOrigin: `${horizontal} ${targetOrigin.vertical}`, position: 'fixed', zIndex: this.state.muiTheme.zIndex.popover, transition: Transitions.easeOut('250ms', ['transform', 'opacity']), - maxHeight:'100%', + maxHeight: '100%', }, horizontal: { - maxHeight:'100%', - overflowY:'auto', - transform:'scaleX(0)', - opacity:0, + maxHeight: '100%', + overflowY: 'auto', + transform: 'scaleX(0)', + opacity: 0, transformOrigin: `${horizontal} ${targetOrigin.vertical}`, transition: Transitions.easeOut('250ms', ['transform', 'opacity']), }, vertical: { - opacity:0, - transform:'scaleY(0)', + opacity: 0, + transform: 'scaleY(0)', transformOrigin: `${horizontal} ${targetOrigin.vertical}`, transition: Transitions.easeOut('500ms', ['transform', 'opacity']), }, @@ -97,15 +97,15 @@ const PopoverDefaultAnimation = React.createClass({ return { base: { opacity: 1, - transform:'scale(1, 1)', + transform: 'scale(1, 1)', }, horizontal: { opacity: 1, - transform:'scaleX(1)', + transform: 'scaleX(1)', }, vertical: { opacity: 1, - transform:'scaleY(1)', + transform: 'scaleY(1)', }, }; }, diff --git a/src/popover/popover.jsx b/src/popover/popover.jsx index cd6d9ed2e23c06..5e1d945b807b4e 100644 --- a/src/popover/popover.jsx +++ b/src/popover/popover.jsx @@ -64,7 +64,7 @@ const Popover = React.createClass({ return { open: this.props.open, - closing:false, + closing: false, muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme), }; }, @@ -97,12 +97,12 @@ const Popover = React.createClass({ this.anchorEl = nextProps.anchorEl || this.props.anchorEl; this.setState({ open: true, - closing:false, + closing: false, muiTheme: newMuiTheme, }); } else { if (nextProps.animated) { - this.setState({closing:true}); + this.setState({closing: true}); this._timeout = setTimeout(() => { if (this.isMounted()) { this.setState({ diff --git a/src/raised-button.jsx b/src/raised-button.jsx index c67022eb957c34..2509288271c1f2 100644 --- a/src/raised-button.jsx +++ b/src/raised-button.jsx @@ -162,7 +162,7 @@ const RaisedButton = React.createClass({ userSelect: 'none', lineHeight: (this.props.style && this.props.style.height) ? this.props.style.height : this.getThemeButton().height + 'px', - color: this._getLabelColor(), + color: this._getLabelColor(), }, overlay: { transition: Transitions.easeOut(), diff --git a/src/styles/colors.js b/src/styles/colors.js index 2fb844622116c6..805b82181cd72d 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -1,293 +1,287 @@ -// To include this file in your project: -// import mui from 'mui'; -// let Colors = mui.Styles.Colors; - export default { + red50: '#ffebee', + red100: '#ffcdd2', + red200: '#ef9a9a', + red300: '#e57373', + red400: '#ef5350', + red500: '#f44336', + red600: '#e53935', + red700: '#d32f2f', + red800: '#c62828', + red900: '#b71c1c', + redA100: '#ff8a80', + redA200: '#ff5252', + redA400: '#ff1744', + redA700: '#d50000', - red50: '#ffebee', - red100: '#ffcdd2', - red200: '#ef9a9a', - red300: '#e57373', - red400: '#ef5350', - red500: '#f44336', - red600: '#e53935', - red700: '#d32f2f', - red800: '#c62828', - red900: '#b71c1c', - redA100: '#ff8a80', - redA200: '#ff5252', - redA400: '#ff1744', - redA700: '#d50000', - - pink50: '#fce4ec', - pink100: '#f8bbd0', - pink200: '#f48fb1', - pink300: '#f06292', - pink400: '#ec407a', - pink500: '#e91e63', - pink600: '#d81b60', - pink700: '#c2185b', - pink800: '#ad1457', - pink900: '#880e4f', + pink50: '#fce4ec', + pink100: '#f8bbd0', + pink200: '#f48fb1', + pink300: '#f06292', + pink400: '#ec407a', + pink500: '#e91e63', + pink600: '#d81b60', + pink700: '#c2185b', + pink800: '#ad1457', + pink900: '#880e4f', pinkA100: '#ff80ab', pinkA200: '#ff4081', pinkA400: '#f50057', pinkA700: '#c51162', - purple50: '#f3e5f5', - purple100: '#e1bee7', - purple200: '#ce93d8', - purple300: '#ba68c8', - purple400: '#ab47bc', - purple500: '#9c27b0', - purple600: '#8e24aa', - purple700: '#7b1fa2', - purple800: '#6a1b9a', - purple900: '#4a148c', + purple50: '#f3e5f5', + purple100: '#e1bee7', + purple200: '#ce93d8', + purple300: '#ba68c8', + purple400: '#ab47bc', + purple500: '#9c27b0', + purple600: '#8e24aa', + purple700: '#7b1fa2', + purple800: '#6a1b9a', + purple900: '#4a148c', purpleA100: '#ea80fc', purpleA200: '#e040fb', purpleA400: '#d500f9', purpleA700: '#aa00ff', - deepPurple50: '#ede7f6', - deepPurple100: '#d1c4e9', - deepPurple200: '#b39ddb', - deepPurple300: '#9575cd', - deepPurple400: '#7e57c2', - deepPurple500: '#673ab7', - deepPurple600: '#5e35b1', - deepPurple700: '#512da8', - deepPurple800: '#4527a0', - deepPurple900: '#311b92', - deepPurpleA100: '#b388ff', - deepPurpleA200: '#7c4dff', - deepPurpleA400: '#651fff', - deepPurpleA700: '#6200ea', + deepPurple50: '#ede7f6', + deepPurple100: '#d1c4e9', + deepPurple200: '#b39ddb', + deepPurple300: '#9575cd', + deepPurple400: '#7e57c2', + deepPurple500: '#673ab7', + deepPurple600: '#5e35b1', + deepPurple700: '#512da8', + deepPurple800: '#4527a0', + deepPurple900: '#311b92', + deepPurpleA100: '#b388ff', + deepPurpleA200: '#7c4dff', + deepPurpleA400: '#651fff', + deepPurpleA700: '#6200ea', - indigo50: '#e8eaf6', - indigo100: '#c5cae9', - indigo200: '#9fa8da', - indigo300: '#7986cb', - indigo400: '#5c6bc0', - indigo500: '#3f51b5', - indigo600: '#3949ab', - indigo700: '#303f9f', - indigo800: '#283593', - indigo900: '#1a237e', + indigo50: '#e8eaf6', + indigo100: '#c5cae9', + indigo200: '#9fa8da', + indigo300: '#7986cb', + indigo400: '#5c6bc0', + indigo500: '#3f51b5', + indigo600: '#3949ab', + indigo700: '#303f9f', + indigo800: '#283593', + indigo900: '#1a237e', indigoA100: '#8c9eff', indigoA200: '#536dfe', indigoA400: '#3d5afe', indigoA700: '#304ffe', - blue50: '#e3f2fd', - blue100: '#bbdefb', - blue200: '#90caf9', - blue300: '#64b5f6', - blue400: '#42a5f5', - blue500: '#2196f3', - blue600: '#1e88e5', - blue700: '#1976d2', - blue800: '#1565c0', - blue900: '#0d47a1', + blue50: '#e3f2fd', + blue100: '#bbdefb', + blue200: '#90caf9', + blue300: '#64b5f6', + blue400: '#42a5f5', + blue500: '#2196f3', + blue600: '#1e88e5', + blue700: '#1976d2', + blue800: '#1565c0', + blue900: '#0d47a1', blueA100: '#82b1ff', blueA200: '#448aff', blueA400: '#2979ff', blueA700: '#2962ff', - lightBlue50: '#e1f5fe', - lightBlue100: '#b3e5fc', - lightBlue200: '#81d4fa', - lightBlue300: '#4fc3f7', - lightBlue400: '#29b6f6', - lightBlue500: '#03a9f4', - lightBlue600: '#039be5', - lightBlue700: '#0288d1', - lightBlue800: '#0277bd', - lightBlue900: '#01579b', + lightBlue50: '#e1f5fe', + lightBlue100: '#b3e5fc', + lightBlue200: '#81d4fa', + lightBlue300: '#4fc3f7', + lightBlue400: '#29b6f6', + lightBlue500: '#03a9f4', + lightBlue600: '#039be5', + lightBlue700: '#0288d1', + lightBlue800: '#0277bd', + lightBlue900: '#01579b', lightBlueA100: '#80d8ff', lightBlueA200: '#40c4ff', lightBlueA400: '#00b0ff', lightBlueA700: '#0091ea', - cyan50: '#e0f7fa', - cyan100: '#b2ebf2', - cyan200: '#80deea', - cyan300: '#4dd0e1', - cyan400: '#26c6da', - cyan500: '#00bcd4', - cyan600: '#00acc1', - cyan700: '#0097a7', - cyan800: '#00838f', - cyan900: '#006064', + cyan50: '#e0f7fa', + cyan100: '#b2ebf2', + cyan200: '#80deea', + cyan300: '#4dd0e1', + cyan400: '#26c6da', + cyan500: '#00bcd4', + cyan600: '#00acc1', + cyan700: '#0097a7', + cyan800: '#00838f', + cyan900: '#006064', cyanA100: '#84ffff', cyanA200: '#18ffff', cyanA400: '#00e5ff', cyanA700: '#00b8d4', - teal50: '#e0f2f1', - teal100: '#b2dfdb', - teal200: '#80cbc4', - teal300: '#4db6ac', - teal400: '#26a69a', - teal500: '#009688', - teal600: '#00897b', - teal700: '#00796b', - teal800: '#00695c', - teal900: '#004d40', + teal50: '#e0f2f1', + teal100: '#b2dfdb', + teal200: '#80cbc4', + teal300: '#4db6ac', + teal400: '#26a69a', + teal500: '#009688', + teal600: '#00897b', + teal700: '#00796b', + teal800: '#00695c', + teal900: '#004d40', tealA100: '#a7ffeb', tealA200: '#64ffda', tealA400: '#1de9b6', tealA700: '#00bfa5', - green50: '#e8f5e9', - green100: '#c8e6c9', - green200: '#a5d6a7', - green300: '#81c784', - green400: '#66bb6a', - green500: '#4caf50', - green600: '#43a047', - green700: '#388e3c', - green800: '#2e7d32', - green900: '#1b5e20', - greenA100: '#b9f6ca', - greenA200: '#69f0ae', - greenA400: '#00e676', - greenA700: '#00c853', + green50: '#e8f5e9', + green100: '#c8e6c9', + green200: '#a5d6a7', + green300: '#81c784', + green400: '#66bb6a', + green500: '#4caf50', + green600: '#43a047', + green700: '#388e3c', + green800: '#2e7d32', + green900: '#1b5e20', + greenA100: '#b9f6ca', + greenA200: '#69f0ae', + greenA400: '#00e676', + greenA700: '#00c853', - lightGreen50: '#f1f8e9', - lightGreen100: '#dcedc8', - lightGreen200: '#c5e1a5', - lightGreen300: '#aed581', - lightGreen400: '#9ccc65', - lightGreen500: '#8bc34a', - lightGreen600: '#7cb342', - lightGreen700: '#689f38', - lightGreen800: '#558b2f', - lightGreen900: '#33691e', - lightGreenA100: '#ccff90', - lightGreenA200: '#b2ff59', - lightGreenA400: '#76ff03', - lightGreenA700: '#64dd17', + lightGreen50: '#f1f8e9', + lightGreen100: '#dcedc8', + lightGreen200: '#c5e1a5', + lightGreen300: '#aed581', + lightGreen400: '#9ccc65', + lightGreen500: '#8bc34a', + lightGreen600: '#7cb342', + lightGreen700: '#689f38', + lightGreen800: '#558b2f', + lightGreen900: '#33691e', + lightGreenA100: '#ccff90', + lightGreenA200: '#b2ff59', + lightGreenA400: '#76ff03', + lightGreenA700: '#64dd17', - lime50: '#f9fbe7', - lime100: '#f0f4c3', - lime200: '#e6ee9c', - lime300: '#dce775', - lime400: '#d4e157', - lime500: '#cddc39', - lime600: '#c0ca33', - lime700: '#afb42b', - lime800: '#9e9d24', - lime900: '#827717', + lime50: '#f9fbe7', + lime100: '#f0f4c3', + lime200: '#e6ee9c', + lime300: '#dce775', + lime400: '#d4e157', + lime500: '#cddc39', + lime600: '#c0ca33', + lime700: '#afb42b', + lime800: '#9e9d24', + lime900: '#827717', limeA100: '#f4ff81', limeA200: '#eeff41', limeA400: '#c6ff00', limeA700: '#aeea00', - yellow50: '#fffde7', - yellow100: '#fff9c4', - yellow200: '#fff59d', - yellow300: '#fff176', - yellow400: '#ffee58', - yellow500: '#ffeb3b', - yellow600: '#fdd835', - yellow700: '#fbc02d', - yellow800: '#f9a825', - yellow900: '#f57f17', + yellow50: '#fffde7', + yellow100: '#fff9c4', + yellow200: '#fff59d', + yellow300: '#fff176', + yellow400: '#ffee58', + yellow500: '#ffeb3b', + yellow600: '#fdd835', + yellow700: '#fbc02d', + yellow800: '#f9a825', + yellow900: '#f57f17', yellowA100: '#ffff8d', yellowA200: '#ffff00', yellowA400: '#ffea00', yellowA700: '#ffd600', - amber50: '#fff8e1', - amber100: '#ffecb3', - amber200: '#ffe082', - amber300: '#ffd54f', - amber400: '#ffca28', - amber500: '#ffc107', - amber600: '#ffb300', - amber700: '#ffa000', - amber800: '#ff8f00', - amber900: '#ff6f00', - amberA100: '#ffe57f', - amberA200: '#ffd740', - amberA400: '#ffc400', - amberA700: '#ffab00', + amber50: '#fff8e1', + amber100: '#ffecb3', + amber200: '#ffe082', + amber300: '#ffd54f', + amber400: '#ffca28', + amber500: '#ffc107', + amber600: '#ffb300', + amber700: '#ffa000', + amber800: '#ff8f00', + amber900: '#ff6f00', + amberA100: '#ffe57f', + amberA200: '#ffd740', + amberA400: '#ffc400', + amberA700: '#ffab00', - orange50: '#fff3e0', - orange100: '#ffe0b2', - orange200: '#ffcc80', - orange300: '#ffb74d', - orange400: '#ffa726', - orange500: '#ff9800', - orange600: '#fb8c00', - orange700: '#f57c00', - orange800: '#ef6c00', - orange900: '#e65100', + orange50: '#fff3e0', + orange100: '#ffe0b2', + orange200: '#ffcc80', + orange300: '#ffb74d', + orange400: '#ffa726', + orange500: '#ff9800', + orange600: '#fb8c00', + orange700: '#f57c00', + orange800: '#ef6c00', + orange900: '#e65100', orangeA100: '#ffd180', orangeA200: '#ffab40', orangeA400: '#ff9100', orangeA700: '#ff6d00', - deepOrange50: '#fbe9e7', - deepOrange100: '#ffccbc', - deepOrange200: '#ffab91', - deepOrange300: '#ff8a65', - deepOrange400: '#ff7043', - deepOrange500: '#ff5722', - deepOrange600: '#f4511e', - deepOrange700: '#e64a19', - deepOrange800: '#d84315', - deepOrange900: '#bf360c', - deepOrangeA100: '#ff9e80', - deepOrangeA200: '#ff6e40', - deepOrangeA400: '#ff3d00', - deepOrangeA700: '#dd2c00', - - brown50: '#efebe9', - brown100: '#d7ccc8', - brown200: '#bcaaa4', - brown300: '#a1887f', - brown400: '#8d6e63', - brown500: '#795548', - brown600: '#6d4c41', - brown700: '#5d4037', - brown800: '#4e342e', - brown900: '#3e2723', + deepOrange50: '#fbe9e7', + deepOrange100: '#ffccbc', + deepOrange200: '#ffab91', + deepOrange300: '#ff8a65', + deepOrange400: '#ff7043', + deepOrange500: '#ff5722', + deepOrange600: '#f4511e', + deepOrange700: '#e64a19', + deepOrange800: '#d84315', + deepOrange900: '#bf360c', + deepOrangeA100: '#ff9e80', + deepOrangeA200: '#ff6e40', + deepOrangeA400: '#ff3d00', + deepOrangeA700: '#dd2c00', - blueGrey50: '#eceff1', - blueGrey100: '#cfd8dc', - blueGrey200: '#b0bec5', - blueGrey300: '#90a4ae', - blueGrey400: '#78909c', - blueGrey500: '#607d8b', - blueGrey600: '#546e7a', - blueGrey700: '#455a64', - blueGrey800: '#37474f', - blueGrey900: '#263238', + brown50: '#efebe9', + brown100: '#d7ccc8', + brown200: '#bcaaa4', + brown300: '#a1887f', + brown400: '#8d6e63', + brown500: '#795548', + brown600: '#6d4c41', + brown700: '#5d4037', + brown800: '#4e342e', + brown900: '#3e2723', - grey50: '#fafafa', - grey100: '#f5f5f5', - grey200: '#eeeeee', - grey300: '#e0e0e0', - grey400: '#bdbdbd', - grey500: '#9e9e9e', - grey600: '#757575', - grey700: '#616161', - grey800: '#424242', - grey900: '#212121', + blueGrey50: '#eceff1', + blueGrey100: '#cfd8dc', + blueGrey200: '#b0bec5', + blueGrey300: '#90a4ae', + blueGrey400: '#78909c', + blueGrey500: '#607d8b', + blueGrey600: '#546e7a', + blueGrey700: '#455a64', + blueGrey800: '#37474f', + blueGrey900: '#263238', - black: '#000000', - white: '#ffffff', + grey50: '#fafafa', + grey100: '#f5f5f5', + grey200: '#eeeeee', + grey300: '#e0e0e0', + grey400: '#bdbdbd', + grey500: '#9e9e9e', + grey600: '#757575', + grey700: '#616161', + grey800: '#424242', + grey900: '#212121', - transparent: 'rgba(0, 0, 0, 0)', - fullBlack: 'rgba(0, 0, 0, 1)', - darkBlack: 'rgba(0, 0, 0, 0.87)', - lightBlack: 'rgba(0, 0, 0, 0.54)', - minBlack: 'rgba(0, 0, 0, 0.26)', - faintBlack: 'rgba(0, 0, 0, 0.12)', - fullWhite: 'rgba(255, 255, 255, 1)', - darkWhite: 'rgba(255, 255, 255, 0.87)', - lightWhite: 'rgba(255, 255, 255, 0.54)', + black: '#000000', + white: '#ffffff', + transparent: 'rgba(0, 0, 0, 0)', + fullBlack: 'rgba(0, 0, 0, 1)', + darkBlack: 'rgba(0, 0, 0, 0.87)', + lightBlack: 'rgba(0, 0, 0, 0.54)', + minBlack: 'rgba(0, 0, 0, 0.26)', + faintBlack: 'rgba(0, 0, 0, 0.12)', + fullWhite: 'rgba(255, 255, 255, 1)', + darkWhite: 'rgba(255, 255, 255, 0.87)', + lightWhite: 'rgba(255, 255, 255, 0.54)', }; diff --git a/src/styles/theme-decorator.js b/src/styles/theme-decorator.js index c8a96f35a34aff..dfa8b0e68aba22 100644 --- a/src/styles/theme-decorator.js +++ b/src/styles/theme-decorator.js @@ -6,7 +6,7 @@ export default (customTheme) => { return React.createClass({ - childContextTypes : { + childContextTypes: { muiTheme: React.PropTypes.object, }, diff --git a/src/styles/theme-manager.js b/src/styles/theme-manager.js index 486e015e8274c0..1706e33fc4a7c2 100644 --- a/src/styles/theme-manager.js +++ b/src/styles/theme-manager.js @@ -99,7 +99,7 @@ export default { backgroundColor: rawTheme.palette.canvasColor, }, radioButton: { - borderColor: rawTheme.palette.textColor, + borderColor: rawTheme.palette.textColor, backgroundColor: rawTheme.palette.alternateTextColor, checkedColor: rawTheme.palette.primary1Color, requiredColor: rawTheme.palette.primary1Color, diff --git a/src/table/table-header-column.jsx b/src/table/table-header-column.jsx index d69def5f9571ec..9e5dc5d11ba347 100644 --- a/src/table/table-header-column.jsx +++ b/src/table/table-header-column.jsx @@ -55,7 +55,7 @@ const TableHeaderColumn = React.createClass({ getStyles() { let theme = this.getTheme(); let styles = { - root: { + root: { fontWeight: 'normal', fontSize: 12, paddingLeft: theme.spacing, diff --git a/src/table/table-header.jsx b/src/table/table-header.jsx index b716a21c723e87..906d93c0ad9592 100644 --- a/src/table/table-header.jsx +++ b/src/table/table-header.jsx @@ -65,7 +65,7 @@ const TableHeader = React.createClass({ getStyles() { let styles = { - root: { + root: { borderBottom: '1px solid ' + this.getTheme().borderColor, }, }; diff --git a/src/time-picker/time-picker-dialog.jsx b/src/time-picker/time-picker-dialog.jsx index 770f559067d9ce..6ee9f79b24c5bd 100644 --- a/src/time-picker/time-picker-dialog.jsx +++ b/src/time-picker/time-picker-dialog.jsx @@ -77,7 +77,7 @@ const TimePickerDialog = React.createClass({ width: 280, }, body: { - padding:0, + padding: 0, }, }; diff --git a/src/utils/css-event.js b/src/utils/css-event.js index dd827801717110..69f2d01787b7d7 100644 --- a/src/utils/css-event.js +++ b/src/utils/css-event.js @@ -17,10 +17,10 @@ export default { //Returns the correct event name to use transitionEndEventName() { return this._testSupportedProps({ - 'transition':'transitionend', - 'OTransition':'otransitionend', - 'MozTransition':'transitionend', - 'WebkitTransition':'webkitTransitionEnd', + 'transition': 'transitionend', + 'OTransition': 'otransitionend', + 'MozTransition': 'transitionend', + 'WebkitTransition': 'webkitTransitionEnd', }); }, diff --git a/src/utils/prop-types.js b/src/utils/prop-types.js index b3d56992fe0fdb..ee847fa2183d23 100644 --- a/src/utils/prop-types.js +++ b/src/utils/prop-types.js @@ -12,13 +12,13 @@ export default { 'top-right', ]), - horizontal:horizontal, + horizontal: horizontal, - vertical:vertical, + vertical: vertical, origin: React.PropTypes.shape({ horizontal: horizontal, - vertical:vertical, + vertical: vertical, }), cornersAndCenter: React.PropTypes.oneOf([ diff --git a/test/theming-v12-spec.js b/test/theming-v12-spec.js index 771cf5f8e04283..a954e7bf59a528 100644 --- a/test/theming-v12-spec.js +++ b/test/theming-v12-spec.js @@ -126,7 +126,7 @@ describe('Theming', () => { const AppBarDarkUsingContext = React.createClass({ childContextTypes: { - muiTheme:React.PropTypes.object, + muiTheme: React.PropTypes.object, }, getChildContext() { @@ -143,7 +143,7 @@ const AppBarDarkUsingContext = React.createClass({ const AppBarDarkUsingContextWithOverride = React.createClass({ childContextTypes: { - muiTheme:React.PropTypes.object, + muiTheme: React.PropTypes.object, }, getInitialState() {