Merge pull request #37 from lehni/feature/deactivate-color-styling

Allow deactivation of automatic color styling

Author: euvl

README.md

@@ -41,7 +41,8 @@ Use:
 | sync      | Boolean           | false       | If set to `true`, will be watching changes in `value` property and overwrite the current state of the button whenever `value` prop. changes |
 | speed     | Number            | 300        | Transition time for the animation   |
 | disabled  | Boolean           | false      | Button does not react on mouse events |
-| color     | [String, Object]  | `#75C791`  | if `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
+| color     | [String, Object]  | `#75C791`  | If `String` - color of the button when checked <br>If `Object` - colors for the button when checked/uncheked <br>Example: `{checked: '#00FF00', unchecked: '#FF0000'}`  |
+| cssColors | Boolean           | false      | If `true` - deactivates the setting of colors through inline styles in favor of using CSS styling |
 | labels    | [Boolean, Object] | false      | If `Boolean` - shows/hides default labels ("on" and "off") <br>If `Object` - sets custom labels for both states. <br>Example: `{checked: 'Foo', unchecked: 'Bar'}`   |
 | width     | Number            | 50         | Width of the button, default is 50 |
 | height    | Number            | 22         | Height of the button, default is 22 |

dist/index.js

@@ -27,6 +27,7 @@
 const constants = {
   colorChecked: '#75C791',
   colorUnchecked: '#bfcbd9',
+  cssColors: false,
   labelChecked: 'on',
   labelUnchecked: 'off',
   width: 50,
@@ -67,6 +68,10 @@ export default {
           : typeof value === 'string'
       }
     },
+    cssColors: {
+      type: Boolean,
+      default: false
+    },
     labels: {
       type: [Boolean, Object],
       default: false,
@@ -100,7 +105,7 @@ export default {
       return {
         width: px(this.width),
         height: px(this.height),
-        backgroundColor: this.colorCurrent,
+        backgroundColor: this.cssColors ? null : this.colorCurrent,
         borderRadius: px(Math.round(this.height / 2))
       }
     },