Merge pull request #501 from mmrtnz/css-resets

Refactored css into js for reset less files

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

@@ -227,50 +227,41 @@ var TextFieldsPage = React.createClass({
 
           <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/color-palette.less

@@ -22,6 +22,8 @@
     padding-top: 16px;
     padding-bottom: 16px;
     display: block;
+    padding: 0;
+    margin: 0;
   }
 
 

docs/src/less/component-info.less

@@ -1,7 +1,13 @@
 .component-info {
 
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
   .mui-font-style-subhead-1;
   width: 100%;
+  * { box-sizing: border-box; }
 
   td {
     padding: 16px 0;

docs/src/less/main.less

@@ -44,6 +44,10 @@ html {
   font-family: @contentFontFamily;
 }
 
+body, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
 /* App Specific Styles */
 
 .logo {
@@ -85,6 +89,7 @@ html {
   .example-block,
   .code-block {
     padding: @desktop-gutter;
+    margin: 0;
   }
 
   .code-block {

docs/src/less/pages/components/switches.less

@@ -11,6 +11,7 @@
     float: left;
     width: 100%;
     padding: 0 50px;
+    box-sizing: border-box;
   }
 
   @media @device-medium {

docs/src/less/pages/page-with-nav.less

@@ -6,6 +6,7 @@
   }
 
   .page-with-nav-content {
+    box-sizing: border-box;
     padding: @desktop-gutter;
     max-width: (@desktop-keyline-increment * 14);
   }

src/js/app-bar.jsx

@@ -45,7 +45,7 @@ var AppBar = React.createClass({
       float: 'left',
       paddingTop: 0,
       letterSpacing: 0,
-      marginBottom: 12,
+      margin: '0px 0px 12px 0px',
       fontSize: '24px',
       fontWeight: Typography.fontWeightNormal,
       color: CustomVariables.appBarTextColor,

src/js/checkbox.jsx

@@ -68,14 +68,8 @@ var Checkbox = React.createClass({
     }
 
     if (this.props.disabled) {
-      checkStyles = this.mergeStyles(checkStyles, {
-          opacity: 0.3,
-          fill: CustomVariables.disabledColor,
-        });
-      boxStyles = this.mergeStyles(boxStyles, {
-          opacity: 0.3,
-          fill: CustomVariables.disabledColor,
-        });
+      checkStyles.fill = CustomVariables.disabledColor;
+      boxStyles.fill = CustomVariables.disabledColor;
     }
 
     if (this.state.switched && this.props.disabled) boxStyles.opacity = 0;

src/js/date-picker/calendar.jsx

@@ -75,7 +75,8 @@ var Calendar = React.createClass({
         lineHeight: '12px',
         opacity: '0.5',
         height: '12px',
-        fontWeight: '500'
+        fontWeight: '500',
+        margin: 0
       },
 
       weekTitleDay: {

src/js/date-picker/date-display.jsx

@@ -72,6 +72,7 @@ var DateDisplay = React.createClass({
         height: isLandscape ? this.props.weekCount * 40 + 36 + 'px' : '150px',
         padding: '16px 0',
         transition: Transitions.easeOut(),
+        boxSizing: 'border-box',
       },
 
       date: {
@@ -85,13 +86,14 @@ var DateDisplay = React.createClass({
         height: '32px',
         backgroundColor: CustomVariables.datePickerSelectColor,
         borderRadius: isLandscape ? '2px 0 0 0' : '2px 2px 0 0',
-        paddingTop: '9px'
+        paddingTop: '9px',
+        boxSizing: 'border-box',
       },
 
       dow: {
         fontSize: '13px',
         lineHeight: '13px',
-        height: '13px',
+        height: '100%',
         color: CustomVariables.datePickerSelectTextColor
       },
 
@@ -117,7 +119,7 @@ var DateDisplay = React.createClass({
 
       year: {
         position: 'absolute',
-        margin: isLandscape ? '0px' : '1px',
+        margin: '0px',
         fontSize: isLandscape ? '26px' : '22px',
         lineHeight: isLandscape ? '26px' : '22px',
         height: isLandscape ? '26px' : '22px',

src/js/date-picker/date-picker-dialog.jsx

@@ -35,31 +35,37 @@ var DatePickerDialog = React.createClass({
       style,
       ...other
     } = this.props;
-
+
+    var styles = {
+      root: {
+        fontSize: '14px',
+        color: CustomVariables.datePickerCalendarTextColor
+      },
+
+      dialogContents: {
+        width: this.props.mode === 'landscape' ? '560px' : '280px'
+      },
+
+      actions: {
+        marginRight: 8,
+      }
+    };
+
     var actions = [
       <FlatButton
         key={0}
         label="Cancel"
         secondary={true}
+        style={styles.actions}
         onTouchTap={this._handleCancelTouchTap} />,
       <FlatButton
         key={1}
         label="OK"
         secondary={true}
+        style={styles.actions}
         onTouchTap={this._handleOKTouchTap} />
     ];
 
-    var styles = {
-      root: {
-        fontSize: '14px',
-        color: CustomVariables.datePickerCalendarTextColor
-      },
-
-      dialogContents: {
-        width: this.props.mode === 'landscape' ? '560px' : '280px'
-      }
-    };
-
     return (
       <DialogWindow {...other}
         ref="dialogWindow"

src/js/date-picker/day-button.jsx

@@ -54,9 +54,10 @@ var DayButton = React.createClass({
       styles.label.color = CustomVariables.datePickerSelectTextColor;
       styles.select.opacity = 1;
       styles.select.transform = 'scale(1)';
-      if (DateTime.isEqualDate(this.props.date, new Date())) {
-        styles.root.color = CustomVariables.datePickerColor;
-      }
+    }
+
+    if (DateTime.isEqualDate(this.props.date, new Date()) && !this.props.selected) {
+        styles.label.color = CustomVariables.datePickerColor;
     }
 
     return this.props.date ? (

src/js/dialog.jsx

@@ -12,14 +12,13 @@ var Dialog = React.createClass({
   },
 
   /** Styles */
-  title: function() {
+  _title: function() {
     var gutter = CustomVariables.spacing.desktopGutter + 'px ';
     return {
       padding: gutter + gutter + '0 ' + gutter,
-      marginBottom: 0,
     }
   },
-  content: function() {
+  _content: function() {
     return {
       padding: CustomVariables.spacing.desktopGutter,
     }
@@ -36,7 +35,7 @@ var Dialog = React.createClass({
       // If the title is a string, wrap in an h3 tag.
       // If not, just use it as a node.
       title = toString.call(this.props.title) === '[object String]' ?
-        <h3 style={this.title()}>{this.props.title}</h3> :
+        <h3 style={this._title()}>{this.props.title}</h3> :
         this.props.title;
     }
 
@@ -49,7 +48,7 @@ var Dialog = React.createClass({
 
         {title}
 
-        <div ref="dialogContent" style={this.content()}>
+        <div ref="dialogContent" style={this._content()}>
           {this.props.children}
         </div>
 

src/js/enhanced-button.jsx

@@ -38,14 +38,31 @@ var EnhancedButton = React.createClass({
     };
   },
 
+
+  // Remove inner padding and border in Firefox 4+.
+  componentDidMount: function() {
+    if (!EnhancedButton.hasStyleBeenInjected) {
+      var style = document.createElement("style");
+      style.innerHTML = 'button::-moz-focus-inner,' +
+                        'input::-moz-focus-inner {' +
+                        ' border: 0;' +
+                        ' padding: 0;' +
+                        ' }';
+      document.body.appendChild(style);
+      EnhancedButton.hasStyleBeenInjected = true;
+    }
+  }, 
+
   /** Styles */
   _main: function() {
     var style = {
       border: 10,
       background: 'none',
       boxSizing: 'border-box',
+      font: 'inherit',
       fontFamily: CustomVariables.contentFontFamily,
-      // -webkit-tap-highlight-color: rgba(0, 0, 0, 0),
+      WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+      WebkitApperance: 'button'
     };
 
     if (this.props.linkButton) {
@@ -56,6 +73,9 @@ var EnhancedButton = React.createClass({
       }, style);
     }
 
+    if (this.props.disabled) style.cursor = 'default';
+
+
     return this.mergeAndPrefix(style);
   },
 
@@ -119,6 +139,7 @@ var EnhancedButton = React.createClass({
         {buttonChildren}
       </a>
     ) : (
+
       <button {...other} {...buttonProps}>
         {buttonChildren}
       </button>
@@ -183,4 +204,6 @@ var EnhancedButton = React.createClass({
 
 });
 
+EnhancedButton.hasStyleBeenInjected = false;
+
 module.exports = EnhancedButton;

src/js/enhanced-switch.jsx

@@ -60,7 +60,7 @@ var EnhancedSwitch = React.createClass({
     if (!this.props.switched || 
         this.props.switched == undefined ||
         inputNode.checked != this.props.switched) this.props.onParentShouldUpdate(inputNode.checked);
-  
+
     this.setState({parentWidth: this.getEvenWidth()});
   },
 
@@ -105,15 +105,17 @@ var EnhancedSwitch = React.createClass({
     } = this.props;
 
     var switchWidth = 60 - CustomVariables.spacing.desktopGutterLess;
-    var labelWidth = this.state.parentWidth - switchWidth - 30;
+    var labelWidth = this.state.parentWidth - 60;
+
     var styles = this.mergeStyles({
         position: 'relative',
         cursor: this.props.disabled ? 'default' : 'pointer',
         overflow: 'visible',
         display: 'table',
         height: 'auto',
-        width: '100%'
+        width: '100%',
     });
+
     var inputStyles = {
         position: 'absolute',
         cursor: this.props.disabled ? 'default' : 'pointer',
@@ -122,8 +124,11 @@ var EnhancedSwitch = React.createClass({
         width: '100%',
         height: '100%',
         zIndex: 2,
-        left: 0
+        left: 0,
+        boxSizing: 'border-box', 
+        padding: 0,
     };
+
     var wrapStyles = this.mergeStyles({
         transition: Transitions.easeOut(),
         float: 'left',
@@ -135,6 +140,7 @@ var EnhancedSwitch = React.createClass({
         marginLeft: (this.props.labelPosition == 'left') ? 
           CustomVariables.spacing.desktopGutterLess : 0
     }, this.props.iconStyle);
+
     var labelStyles = {
         float: 'left',
         position: 'relative',
@@ -143,6 +149,11 @@ var EnhancedSwitch = React.createClass({
         lineHeight: '24px'
     }
 
+    if (this.props.thumbStyle) {
+      wrapStyles.marginLeft /= 2;
+      wrapStyles.marginRight /= 2;
+    }
+
     var inputId = this.props.id || this.getDomId();
 
     var labelElement = this.props.label ? (