vue-mk
diff --git a/‎README.md
Lines changed: 1 addition & 1 deletion b/‎README.md
Lines changed: 1 addition & 1 deletion
diff --git a/‎dist/index.js
Lines changed: 14 additions & 14 deletions b/‎dist/index.js
Lines changed: 14 additions & 14 deletions
diff --git a/‎dist/ssr.index.js
Lines changed: 14 additions & 14 deletions b/‎dist/ssr.index.js
Lines changed: 14 additions & 14 deletions
diff --git a/‎src/Button.vue
Lines changed: 19 additions & 19 deletions b/‎src/Button.vue
Lines changed: 19 additions & 19 deletions
@@ -48,7 +48,7 @@ Use:
 | 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'}`   |
-| buttonColor     | [String, Object]            | `#BFCBD9`         | If `String` - color of the switch when checked <br>If `Object` - colors for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: '#EF1E02'}`   |
+| buttonBackground     | [String, Object]            | `#BFCBD9`         | If `String` - color or background property of the switch when checked <br>If `Object` - colors or background property for the switch when checked/uncheked <br>Example: `{checked: '#25EF02', unchecked: 'linear-gradient(red, yellow)'}`   |
 | width     | Number            | 50         | Width of the button, default is 50 |
 | height    | Number            | 22         | Height of the button, default is 22 |
 
 
@@ -33,7 +33,7 @@ const constants = {
   width: 50,
   height: 22,
   margin: 3,
-  buttonColor: '#fff'
+  buttonBackground: '#fff'
 }
 
 const contains = (object, title) => {
@@ -69,7 +69,7 @@ export default {
           : typeof value === 'string'
       }
     },
-    buttonColor: {
+    buttonBackground: {
       type: [String, Object],
       validator (value) {
         return typeof value === 'object'
@@ -135,7 +135,7 @@ export default {
         transform: this.toggled
           ? `translate3d(${this.distance}, 3px, 0px)`
           : null,
-        backgroundColor: this.buttonColor ? this.buttonColorCurrent : undefined
+        background: this.buttonBackground ? this.buttonBackgroundCurrent : undefined
       }
     },
 
@@ -183,32 +183,32 @@ export default {
         : constants.labelUnchecked
     },
 
-    buttonColorChecked () {
-      let { buttonColor } = this
+    buttonBackgroundChecked () {
+      let { buttonBackground } = this
 
-      return contains(buttonColor, 'checked')
-        ? buttonColor.checked
-        : constants.buttonColor
+      return contains(buttonBackground, 'checked')
+        ? buttonBackground.checked
+        : constants.buttonBackground
     },
 
-    buttonColorUnchecked () {
-      let { buttonColor } = this
+    buttonBackgroundUnchecked () {
+      let { buttonBackground } = this
 
-      return contains(buttonColor, 'unchecked')
-        ? buttonColor.unchecked
-        : constants.buttonColor
+      return contains(buttonBackground, 'unchecked')
+        ? buttonBackground.unchecked
+        : constants.buttonBackground
     },
 
-    buttonColorCurrent () {
-      let { buttonColor } = this
+    buttonBackgroundCurrent () {
+      let { buttonBackground } = this
 
-      if (typeof buttonColor !== 'object') {
-        return buttonColor || constants.buttonColor
+      if (typeof buttonBackground !== 'object') {
+        return buttonBackground || constants.buttonBackground
       }
 
       return this.toggled
-        ? this.buttonColorChecked
-        : this.buttonColorUnchecked
+        ? this.buttonBackgroundChecked
+        : this.buttonBackgroundUnchecked
     }
 
   },