Refactored css into js for textfields

docs/src/app/components/pages/components/text-fields.jsx

@@ -20,6 +20,12 @@ var TextFieldsPage = React.createClass({
     };
   },
 
+  _textfieldStyle: function() {
+    return {
+      marginTop: 24,
+    };
+  },
+
   render: function() {
 
     var code =
@@ -176,77 +182,95 @@ var TextFieldsPage = React.createClass({
         componentInfo={componentInfo}>
 
         <div className="text-field-example">
-          <div className="text-field-example-group text-field-example-single-line">
+          <div className="text-field-example-group">
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               defaultValue="Default Value" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               value={this.state.propValue}
               onChange={this._handleInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               valueLink={this.linkState('valueLinkValue')} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text (MultiLine)"
               multiLine={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.errorText}
               onChange={this._handleErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.error2Text}
               onChange={this._handleError2InputChange}
               defaultValue="abc" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               defaultValue="Disabled With Value" /><br/>
           </div>
 
           <div className="text-field-example-group">
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               defaultValue="Default Value"
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text"
               value={this.state.floatingPropValue}
               onChange={this._handleFloatingInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               floatingLabelText="Floating Label Text"
               valueLink={this.linkState('floatingValueLinkValue')} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text (MultiLine)"
               floatingLabelText="Floating Label Text"
               multiLine={true} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.floatingErrorText}
               floatingLabelText="Floating Label Text"
               onChange={this._handleFloatingErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Hint Text"
               errorText={this.state.floatingError2Text}
               defaultValue="abc"
               floatingLabelText="Floating Label Text"
               onChange={this._handleFloating2ErrorInputChange} /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               floatingLabelText="Floating Label Text" /><br/>
             <TextField
+              style={this._textfieldStyle()}
               hintText="Disabled Hint Text"
               disabled={true}
               defaultValue="Disabled With Value"

docs/src/less/pages/components/text-fields.less

@@ -12,9 +12,4 @@
     }
   }
 
-  .text-field-example-single-line {
-    .mui-text-field {
-      margin-top: 24px;
-    }
-  }
 }

src/js/before-after-wrapper.jsx

@@ -57,12 +57,6 @@ var BeforeAfterWrapper = React.createClass({
   },
 
   /** Styles */
-  _main: function() {
-    return this.mergeAndPrefix({
-      width: '100%',
-      height: '100%',
-    });
-  },
 
   render: function() {
 
@@ -78,16 +72,18 @@ var BeforeAfterWrapper = React.createClass({
     var beforeElement, afterElement;
 
     if (this.props.beforeStyle) beforeElement = 
-      React.createElement(this.props.beforeElementType, 
-                          {style: AutoPrefix.all(this.props.beforeStyle), key: "::before"});
+      React.createElement(beforeElementType, 
+                          {style: AutoPrefix.all(beforeStyle), key: "::before"}, beforeStyle.content);
     if (this.props.afterStyle) afterElement = 
-      React.createElement(this.props.afterElementType, 
-                          {style: AutoPrefix.all(this.props.afterStyle), key: "::after"});
+      React.createElement(afterElementType, 
+                          {style: AutoPrefix.all(afterStyle), key: "::after"}, afterStyle.content);
 
     var children = [beforeElement, this.props.children, afterElement];
 
+    console.log("BAW props", this.props);
+
     var props = other;
-    props.style = this._main();
+    props.style = this.props.style;
 
     return React.createElement(this.props.elementType, props, children);
   }

src/js/enhanced-textarea.jsx

@@ -9,6 +9,7 @@ var EnhancedTextarea = React.createClass({
   propTypes: {
     onChange: React.PropTypes.func,
     onHeightChange: React.PropTypes.func,
+    textareaStyle: React.PropTypes.object,
     rows: React.PropTypes.number
   },
 
@@ -35,16 +36,17 @@ var EnhancedTextarea = React.createClass({
       onHeightChange,
       rows,
       style,
+      textareaStyle,
       valueLink,
       ...other,
     } = this.props;
 
-    var inputStyles = {
+    var inputStyles = this.mergeAndPrefix({
       height: this.state.height + 'px',
       width: '100%',
       resize: 'none',
       overflow: 'hidden'
-    };
+    }, textareaStyle);
 
     var shadowStyles = {
       position: 'absolute',

src/js/styles/variables/custom-variables.js

@@ -15,8 +15,7 @@ var customVariables = new (function() {
   this.borderColor = Colors.grey300;
 
   // Disabled Colors
-  this.disabledColor = Theme.textColor;
-  this.disabledOpacity = 0.3; // fadeout 30%
+  this.disabledColor = ColorManipulator.fade(Theme.textColor, 0.3);
 
   // Component Colors
   this.canvasColor = Colors.white;