From b1c0879272c8e79057c73286737dd0bb4207d1c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Fri, 24 Nov 2017 11:58:15 +0100
Subject: [PATCH] Add cssColors option to deactivate automatic color styling

Closes #36
---
 README.md         | 3 ++-
 dist/index.js     | 7 ++++++-
 dist/ssr.index.js | 7 ++++++-
 src/Button.vue    | 7 ++++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 3a150a0..b7abd61 100644
--- a/README.md
+++ b/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 |
diff --git a/dist/index.js b/dist/index.js
index 7208c40..405602a 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -141,6 +141,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 var constants = {
   colorChecked: '#75C791',
   colorUnchecked: '#bfcbd9',
+  cssColors: false,
   labelChecked: 'on',
   labelUnchecked: 'off',
   width: 50,
@@ -181,6 +182,10 @@ var px = function px(v) {
         return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
       }
     },
+    cssColors: {
+      type: Boolean,
+      default: false
+    },
     labels: {
       type: [Boolean, Object],
       default: false,
@@ -212,7 +217,7 @@ var px = function px(v) {
       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))
       };
     },
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index 1566d77..bd910a9 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -141,6 +141,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
 var constants = {
   colorChecked: '#75C791',
   colorUnchecked: '#bfcbd9',
+  cssColors: false,
   labelChecked: 'on',
   labelUnchecked: 'off',
   width: 50,
@@ -181,6 +182,10 @@ var px = function px(v) {
         return (typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object' ? value.checked || value.unchecked : typeof value === 'string';
       }
     },
+    cssColors: {
+      type: Boolean,
+      default: false
+    },
     labels: {
       type: [Boolean, Object],
       default: false,
@@ -212,7 +217,7 @@ var px = function px(v) {
       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))
       };
     },
diff --git a/src/Button.vue b/src/Button.vue
index 134a157..0b6585c 100644
--- a/src/Button.vue
+++ b/src/Button.vue
@@ -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))
       }
     },