mattborn/.gitignore

## .gitignore
node_modules

## Animal.js
'use strict';

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Primitives = require('Primitives');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Animal = _react2.default.createClass({
  displayName: 'Animal',
  render: function render() {
    var parentIsHovered = _radium2.default.getState(this.state, 'parent', ':hover');
    var styles = {
      color: 'blanchedalmond',

      ':hover': {
        color: '#fff'
      }
    };
    return _react2.default.createElement(
      'div',
      { key: 'parent', style: styles },
      _react2.default.createElement(_Primitives.Pseudo, { style: parentIsHovered ? { top: 0, left: 7 } : {} }),
      _react2.default.createElement(_Primitives.Dog, { style: parentIsHovered ? { margin: 0 } : {} }),
      _react2.default.createElement(_Primitives.Cat, { parentIsHovered: parentIsHovered }),
      _react2.default.createElement(_Primitives.Chair, { style: parentIsHovered ? { padding: 0 } : {} })
    );
  }
});

module.exports = (0, _radium2.default)(Animal);

## Animal.jsx
import Radium from 'radium';
import React from 'react';

import { Cat, Chair, Dog, Pseudo } from 'Primitives';

const Animal = React.createClass({

  render () {
    const parentIsHovered = Radium.getState(this.state, 'parent', ':hover');
    const styles = {
      color: 'blanchedalmond',

      ':hover': {
        color: '#fff',
      },
    };
    return (
      <div key="parent" style={styles}>
        <Pseudo style={parentIsHovered ? {top: 0, left: 7} : {}} />
        <Dog style={parentIsHovered ? {margin: 0} : {}} />
        <Cat parentIsHovered={parentIsHovered} />
        <Chair style={parentIsHovered ? {padding: 0} : {}} />
      </div>
    );
  },

});

module.exports = Radium(Animal);

## index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Inline Style Examples</title>
    <style>
    body {
      background: #222;
      margin: 0;
    }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://jspm.io/system@0.19.js"></script>
    <script>
      System.config({
        baseURL: '.',
        transpiler: 'babel',
        babelOptions: {
          optional: [
            'runtime'
          ],
          blacklist: []
        },
        map: {
          'radium': 'npm:radium@0.16.5',
          'react': 'npm:react@0.14.7',
          'react-dom': 'npm:react-dom@0.14.7',
        },
        paths: {
          '*': '*.js'
        }
      });
      System.import('Main');
    </script>
  </body>
</html>

## Main.js
'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _Animal = require('Animal');

var _Animal2 = _interopRequireDefault(_Animal);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _reactDom.render)(_react2.default.createElement(_Animal2.default, null), document.getElementById('root'));

## Main.jsx
import React from 'react';
import { render } from 'react-dom';

import Animal from 'Animal';

render(
  <Animal />,
  document.getElementById('root')
);

## package.json
{
  "name": "inline-style-examples",
  "description": "Personal code experiment.",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "compile": "babel --extensions \".jsx\" . --presets es2015,react --watch --out-dir .",
    "start": "live-server"
  },
  "devDependencies": {
    "babel-cli": "latest",
    "babel-preset-es2015": "latest",
    "babel-preset-react": "latest",
    "live-server": "latest"
  }
}

## Primitives.js
'use strict';

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Cat = _react2.default.createClass({
  displayName: 'Cat',

  propTypes: {
    parentIsHovered: _react.PropTypes.bool
  },

  render: function render() {
    var parentIsHovered = this.props.parentIsHovered;

    var styles = {
      color: parentIsHovered ? '#fff' : 'blanchedalmond'
    };
    return _react2.default.createElement(
      'div',
      { style: styles },
      'Cat is ',
      parentIsHovered || 'not',
      ' white'
    );
  }
});

var Chair = _react2.default.createClass({
  displayName: 'Chair',
  render: function render() {
    return _react2.default.createElement(
      'div',
      { style: this.props.style },
      'Chair'
    );
  }
});

var Dog = _react2.default.createClass({
  displayName: 'Dog',
  render: function render() {
    var styles = {};
    return _react2.default.createElement(
      'div',
      { style: this.props.style },
      'Dog'
    );
  }
});

var Pseudo = _react2.default.createClass({
  displayName: 'Pseudo',
  render: function render() {
    var styles = {};
    return _react2.default.createElement(
      'div',
      { style: this.props.style },
      'Pseudo'
    );
  }
});

module.exports = {
  Cat: (0, _radium2.default)(Cat),
  Chair: (0, _radium2.default)(Chair),
  Dog: (0, _radium2.default)(Dog),
  Pseudo: (0, _radium2.default)(Pseudo)
};

## Primitives.jsx
import Radium from 'radium';
import React, { PropTypes } from 'react';

const Cat = React.createClass({

  propTypes: {
    parentIsHovered: PropTypes.bool,
  },

  render () {
    const { parentIsHovered } = this.props;
    const styles = {
      color: (parentIsHovered) ? '#fff' : 'blanchedalmond',
    };
    return (
      <div style={styles}>Cat is {parentIsHovered || 'not'} white</div>
    );
  },

});

const Chair = React.createClass({

  render () {
    return (
      <div style={this.props.style}>Chair</div>
    );
  },

});

const Dog = React.createClass({

  render () {
    const styles = {};
    return (
      <div style={this.props.style}>Dog</div>
    );
  },

});

const Pseudo = React.createClass({

  render () {
    const styles = {};
    return (
      <div style={this.props.style}>Pseudo</div>
    );
  },

});

module.exports = {
  Cat: Radium(Cat),
  Chair: Radium(Chair),
  Dog: Radium(Dog),
  Pseudo: Radium(Pseudo),
};
	'use strict';

	var _radium = require('radium');

	var _radium2 = _interopRequireDefault(_radium);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

	var _Primitives = require('Primitives');

	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

	var Animal = _react2.default.createClass({
	displayName: 'Animal',
	render: function render() {
	var parentIsHovered = _radium2.default.getState(this.state, 'parent', ':hover');
	var styles = {
	color: 'blanchedalmond',

	':hover': {
	color: '#fff'
	}
	};
	return _react2.default.createElement(
	'div',
	{ key: 'parent', style: styles },
	_react2.default.createElement(_Primitives.Pseudo, { style: parentIsHovered ? { top: 0, left: 7 } : {} }),
	_react2.default.createElement(_Primitives.Dog, { style: parentIsHovered ? { margin: 0 } : {} }),
	_react2.default.createElement(_Primitives.Cat, { parentIsHovered: parentIsHovered }),
	_react2.default.createElement(_Primitives.Chair, { style: parentIsHovered ? { padding: 0 } : {} })
	);
	}
	});

	module.exports = (0, _radium2.default)(Animal);
	import Radium from 'radium';
	import React from 'react';

	import { Cat, Chair, Dog, Pseudo } from 'Primitives';

	const Animal = React.createClass({

	render () {
	const parentIsHovered = Radium.getState(this.state, 'parent', ':hover');
	const styles = {
	color: 'blanchedalmond',

	':hover': {
	color: '#fff',
	},
	};
	return (
	<div key="parent" style={styles}>
	<Pseudo style={parentIsHovered ? {top: 0, left: 7} : {}} />
	<Dog style={parentIsHovered ? {margin: 0} : {}} />
	<Cat parentIsHovered={parentIsHovered} />
	<Chair style={parentIsHovered ? {padding: 0} : {}} />
	</div>
	);
	},

	});

	module.exports = Radium(Animal);
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Inline Style Examples</title>
	<style>
	body {
	background: #222;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<div id="root"></div>
	<script src="https://jspm.io/system@0.19.js"></script>
	<script>
	System.config({
	baseURL: '.',
	transpiler: 'babel',
	babelOptions: {
	optional: [
	'runtime'
	],
	blacklist: []
	},
	map: {
	'radium': 'npm:radium@0.16.5',
	'react': 'npm:react@0.14.7',
	'react-dom': 'npm:react-dom@0.14.7',
	},
	paths: {
	'': '.js'
	}
	});
	System.import('Main');
	</script>
	</body>
	</html>
	import React from 'react';
	import { render } from 'react-dom';

	import Animal from 'Animal';

	render(
	<Animal />,
	document.getElementById('root')
	);
	{
	"name": "inline-style-examples",
	"description": "Personal code experiment.",
	"private": true,
	"version": "0.0.0",
	"scripts": {
	"compile": "babel --extensions \".jsx\" . --presets es2015,react --watch --out-dir .",
	"start": "live-server"
	},
	"devDependencies": {
	"babel-cli": "latest",
	"babel-preset-es2015": "latest",
	"babel-preset-react": "latest",
	"live-server": "latest"
	}
	}
	import Radium from 'radium';
	import React, { PropTypes } from 'react';

	const Cat = React.createClass({

	propTypes: {
	parentIsHovered: PropTypes.bool,
	},

	render () {
	const { parentIsHovered } = this.props;
	const styles = {
	color: (parentIsHovered) ? '#fff' : 'blanchedalmond',
	};
	return (
	<div style={styles}>Cat is {parentIsHovered \|\| 'not'} white</div>
	);
	},

	});

	const Chair = React.createClass({

	render () {
	return (
	<div style={this.props.style}>Chair</div>
	);
	},

	});

	const Dog = React.createClass({

	render () {
	const styles = {};
	return (
	<div style={this.props.style}>Dog</div>
	);
	},

	});

	const Pseudo = React.createClass({

	render () {
	const styles = {};
	return (
	<div style={this.props.style}>Pseudo</div>
	);
	},

	});

	module.exports = {
	Cat: Radium(Cat),
	Chair: Radium(Chair),
	Dog: Radium(Dog),
	Pseudo: Radium(Pseudo),
	};