Improve checkbox styles

components/checkbox/index.jsx

@@ -53,14 +53,16 @@ export default React.createClass({
   },
 
   render () {
-    let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
-    let checkboxClassName = style[this.state.checked ? 'checked' : 'check'];
-    if (this.props.className) labelClassName += ` ${this.props.className}`;
+    let fieldClassName = style.field;
+    let checkboxClassName = style.check;
+    if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
+    if (this.props.className) fieldClassName += ` ${this.props.className}`;
+    if (this.state.checked) checkboxClassName += ` ${style.checked}`;
 
     return (
       <label
         data-react-toolbox='checkbox'
-        className={labelClassName}
+        className={fieldClassName}
         onClick={this.handleClick}
       >
         <input

components/checkbox/style.scss

@@ -1,4 +1,5 @@
 @import "../variables";
+
 $checkbox-total-height: 1.8 * $unit;
 $checkbox-size: 1.8 * $unit;
 $checkbox-transition-duration: .2s;
@@ -34,8 +35,8 @@ $checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   overflow: hidden;
   opacity: 0;
 
-  &:focus:not(&:active) {
-    + .check:before {
+  &:focus:not(&:active) + .check {
+    &:before {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -50,7 +51,7 @@ $checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
       border-radius: 50%;
     }
 
-    + .checked:before {
+    &.checked:before {
       background-color: $checked-focus-color;
     }
   }
@@ -63,15 +64,15 @@ $checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   height: $checkbox-size;
   vertical-align: top;
   cursor: pointer;
-  border: 2px solid $checkbox-text-color;
+  border-color: $checkbox-text-color;
+  border-style: solid;
+  border-width: 2px;
   border-radius: 2px;
   transition-timing-function: $animation-curve-default;
   transition-duration: $checkbox-transition-duration;
   transition-property: background-color;
-}
 
-.checked {
-  @extend .check;
+  &.checked {
     background-color: $checkbox-color;
     border-color: $checkbox-color;
 
@@ -91,6 +92,7 @@ $checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
       transform: rotate(45deg);
       animation: checkmark-expand 140ms ease-out forwards;
     }
+  }
 }
 
 .ripple {
@@ -100,22 +102,20 @@ $checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
 }
 
 .disabled {
-  @extend .field;
-
-  .text {
+  > .text {
     color: $checkbox-disabled-color;
   }
 
-  .check {
+  > .check {
     cursor: auto;
     border-color: $checkbox-disabled-color;
-  }
 
-  .checked {
+    &.checked {
       cursor: auto;
       background-color: $checkbox-disabled-color;
       border-color: transparent;
     }
+  }
 }
 
 @keyframes checkmark-expand {