Refactored css into js for paper

docs/src/app/components/pages/components/paper.jsx

@@ -76,6 +76,13 @@ var PaperPage = React.createClass({
               'sometimes helpful to assign an className to the inner div ' +
               'for styling. This property is the className for the inner div.'
           },
+          {
+            name: 'innerStyle',
+            type: 'string',
+            header: 'optional',
+            desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
+                  'the inner div.' 
+          },
           {
             name: 'rounded',
             type: 'bool',
@@ -103,6 +110,13 @@ var PaperPage = React.createClass({
       }
     ];
 
+    var styles = {
+      height: 100,
+      width: 100,
+      margin: '0 auto',
+      marginBottom: 64,
+    };
+
     return (
       <ComponentDoc
         name="Paper"
@@ -111,57 +125,57 @@ var PaperPage = React.createClass({
 
         <div className="paper-examples">
           <div className="paper-examples-group">
-	    <Paper zDepth={1}>
-	      <p>zDepth=1</p>
-	    </Paper>
-	    <Paper zDepth={2}>
-	      <p>zDepth=2</p>
-	    </Paper>
-	    <Paper zDepth={3}>
-	      <p>zDepth=3</p>
-	    </Paper>
-	    <Paper zDepth={4}>
-	      <p>zDepth=4</p>
-	    </Paper>
-	    <Paper zDepth={5}>
-	      <p>zDepth=5</p>
-	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1}>
+      	      <p>zDepth=1</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2}>
+      	      <p>zDepth=2</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3}>
+      	      <p>zDepth=3</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4}>
+      	      <p>zDepth=4</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5}>
+      	      <p>zDepth=5</p>
+      	    </Paper>
           </div>
 
           <div className="paper-examples-group">
-	    <Paper zDepth={1} rounded={false}>
-	      <p>rounded=false</p>
-	    </Paper>
-	    <Paper zDepth={2} rounded={false}>
-	      <p>rounded=false</p>
-	    </Paper>
-	    <Paper zDepth={3} rounded={false}>
-	      <p>rounded=false</p>
-	    </Paper>
-	    <Paper zDepth={4} rounded={false}>
-	      <p>rounded=false</p>
-	    </Paper>
-	    <Paper zDepth={5} rounded={false}>
-	      <p>rounded=false</p>
-	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1} rounded={false}>
+      	      <p>rounded=false</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2} rounded={false}>
+      	      <p>rounded=false</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3} rounded={false}>
+      	      <p>rounded=false</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4} rounded={false}>
+      	      <p>rounded=false</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5} rounded={false}>
+      	      <p>rounded=false</p>
+      	    </Paper>
           </div>
 
           <div className="paper-examples-group">
-	    <Paper zDepth={1} circle={true}>
-	      <p>circle=true</p>
-	    </Paper>
-	    <Paper zDepth={2} circle={true}>
-	      <p>circle=true</p>
-	    </Paper>
-	    <Paper zDepth={3} circle={true}>
-	      <p>circle=true</p>
-	    </Paper>
-	    <Paper zDepth={4} circle={true}>
-	      <p>circle=true</p>
-	    </Paper>
-	    <Paper zDepth={5} circle={true}>
-	      <p>circle=true</p>
-	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={1} circle={true}>
+      	      <p>circle=true</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={2} circle={true}>
+      	      <p>circle=true</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={3} circle={true}>
+      	      <p>circle=true</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={4} circle={true}>
+      	      <p>circle=true</p>
+      	    </Paper>
+      	    <Paper style={styles} innerClassName="mui-paper-container" zDepth={5} circle={true}>
+      	      <p>circle=true</p>
+      	    </Paper>
           </div>
         </div>
 

src/js/enhanced-switch.jsx

@@ -216,7 +216,7 @@ var EnhancedSwitch = React.createClass({
       ) : (
         <div style={wrapStyles}>
           <div style={this.props.trackStyle}/>
-          <Paper style={this.props.thumbStyle} zDepth={1}> {ripples} </Paper>
+          <Paper style={this.props.thumbStyle} zDepth={1} circle={true}> {ripples} </Paper>
         </div>      
     );
 

src/js/menu/menu.jsx

@@ -180,22 +180,27 @@ var Menu = React.createClass({
   },
 
   // Main Style
-  _paperContainer: function() {
-    var styles = {
-      paddingTop: CustomVariables.spacing.desktopGutterMini,
-      paddingBottom: CustomVariables.spacing.desktopGutterMini,
+  _main: function() {
+    return this.mergeAndPrefix({
       backgroundColor: CustomVariables.menuBackgroundColor,
       transition: Transitions.easeOut(null, 'height'),
-    };
+    });
+  },
+
+  _innerPaper: function() {
+    var style = {
+      paddingTop: CustomVariables.spacing.desktopGutterMini,
+      paddingBottom: CustomVariables.spacing.desktopGutterMini,
+    }
 
     if (this.props.hideable) {
-     this.mergeStyles(styles, {
+     this.mergeStyles(style, {
       overflow: 'hidden',
       padding: 0,
       });
     }
 
-    return this.mergeAndPrefix(styles);
+    return style;
   },
 
   _subheader: function() {
@@ -206,11 +211,11 @@ var Menu = React.createClass({
   },
 
   render: function() {
-    var styles = this._paperContainer();
+    var styles = this._main();
     if (this.props.hideable) styles = this.mergeStyles(styles, this._hideable());
 
     return (
-      <Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles}>
+      <Paper ref="paperContainer" zDepth={this.props.zDepth} style={styles} innerStyle={this._innerPaper()}>
         {this._getChildren()}
       </Paper>
     );

src/js/paper.jsx

@@ -1,16 +1,17 @@
 var React = require('react');
-var Classable = require('./mixins/classable');
+var StylePropable = require('./mixins/style-propable');
 
 var Paper = React.createClass({
 
-  mixins: [Classable],
+  mixins: [StylePropable],
 
   propTypes: {
     circle: React.PropTypes.bool,
+    className: React.PropTypes.string,
     innerClassName: React.PropTypes.string,
     innerStyle: React.PropTypes.object,
     rounded: React.PropTypes.bool,
-    zDepth: React.PropTypes.oneOf([0,1,2,3,4,5])
+    zDepth: React.PropTypes.oneOf([0,1,2,3,4,5]),
   },
 
   getDefaultProps: function() {
@@ -21,29 +22,47 @@ var Paper = React.createClass({
     };
   },
 
+  /** Styles */
+  _main: function() {
+    return this.mergeAndPrefix({
+      boxShadow: this.getZDepthShadows(this.props.zDepth).boxShadow,
+      borderRadius: this.props.circle ? '50%' : 
+                    this.props.rounded ? '2px' :
+                    '0px',
+    });
+  },
+
+  _inner: function() {
+    var style = {
+      width: '100%', 
+      height: '100%',
+      boxShadow: this.getZDepthShadows(this.props.zDepth).bottomBoxShadow,
+      borderRadius: this.props.circle ? '50%' : 
+                    this.props.rounded ? '2px' :
+                    '0px',
+    };
+
+    if (this.props.innerStyle) {
+      style = this.mergeAndPrefix(style, this.props.innerStyle);
+    }
+
+    return style;
+  },
+
   render: function() {
     var {
       className,
-      circle,
       innerClassName,
+      style,
+      innerStyle,
+      circle,
       rounded,
       zDepth,
-      innerStyle,
-      ...other } = this.props,
-      classes = this.getClasses(
-        'mui-paper ' +
-        'mui-z-depth-' + this.props.zDepth, { 
-        'mui-rounded': this.props.rounded,
-        'mui-circle': this.props.circle
-      }),
-      insideClasses = 
-        this.props.innerClassName + ' ' +
-        'mui-paper-container ' +
-        'mui-z-depth-bottom';
+      ...other } = this.props;
 
     return (
-      <div {...other} className={classes}>
-        <div ref="innerContainer" className={insideClasses} style={innerStyle || {}}>
+      <div {...other} className={this.props.className} style={this._main()}>
+        <div ref="innerContainer" className={this.props.innerClassName} style={this._inner()}>
           {this.props.children}
         </div>
       </div>
@@ -52,6 +71,37 @@ var Paper = React.createClass({
 
   getInnerContainer: function() {
     return this.refs.innerContainer;
+  },
+
+  getZDepthShadows: function(zDepth) {
+    var shadows = [
+      {
+        boxShadow: '',
+        bottomBoxShadow: '',
+      },
+      {
+        boxShadow: '0 1px 4px rgba(0, 0, 0, 0.24)',
+        bottomBoxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
+      },
+      {
+        boxShadow: '0 3px 10px rgba(0, 0, 0, 0.23)',
+        bottomBoxShadow: '0 3px 10px rgba(0, 0, 0, 0.16)',
+      },
+      {
+        boxShadow: '0 6px 10px rgba(0, 0, 0, 0.23)',
+        bottomBoxShadow: '0 10px 30px rgba(0, 0, 0, 0.19)',
+      },
+      {
+        boxShadow: '0 10px 18px rgba(0, 0, 0, 0.22)',
+        bottomBoxShadow: '0 14px 45px rgba(0, 0, 0, 0.25)',
+      },
+      {
+        boxShadow: '0 15px 20px rgba(0, 0, 0, 0.22)',
+        bottomBoxShadow: '0 19px 60px rgba(0, 0, 0, 0.30)',
+      },
+    ];
+
+    return shadows[zDepth];
   }
 
 });

src/js/toggle.jsx

@@ -82,7 +82,7 @@ var Toggle = React.createClass({
     var toggleElement = (
       <div>
         <div style={trackStyles} />
-        <Paper style={thumbStyles} zDepth={1}/>
+        <Paper style={thumbStyles} circle={true} zDepth={1} />
       </div>
     );
 

src/less/components.less

@@ -1,5 +1,2 @@
 // Core CSS
 @import "core/core.less";
-
-// Components
-@import "components/components.less";