Add margin prop (#99)

README.md

@@ -76,6 +76,7 @@ Vue.component('ToggleButton', ToggleButton)
 | switch-color     | [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 |
 | height          | Number            | 22         | Height of the button |
+| margin          | Number            | 3          | Space between the switch and background border |
 | name            | String            | undefined  | Name to attach to the generated input field |
 | font-size        | Number            | undefined  | Font size |
 

demo/src/App.vue

@@ -43,7 +43,7 @@
           :disabled="true"/>
 
         <toggle-button :value="true"
-          :labels="{checked: 'Button', unchecked: 'Collor'}"
+          :labels="{checked: 'Button', unchecked: 'Color'}"
           :color="{checked: '#7DCE94', unchecked: '#82C7EB'}"
           :width="80"
           :switchColor="{checked: 'linear-gradient(red, yellow)', unchecked: '#F2C00B'}"/>
@@ -63,6 +63,11 @@
           </template>
         </toggle-button>
 
+        <toggle-button
+          :value="true"
+          :width="80"
+          :labels="{checked: 'Custom', unchecked: 'Margin'}"
+          :margin="7"/>
       </div>
       <div style="padding-top: 20px;">
         <toggle-button

src/Button.vue

@@ -36,7 +36,6 @@ const DEFAULT_COLOR_UNCHECKED = '#bfcbd9'
 const DEFAULT_LABEL_CHECKED = 'on'
 const DEFAULT_LABEL_UNCHECKED = 'off'
 const DEFAULT_SWITCH_COLOR = '#fff'
-const MARGIN = 3
 
 const contains = (object, title) => 
   typeof object === 'object' && object.hasOwnProperty(title)
@@ -102,6 +101,10 @@ export default {
       type: Number,
       default: 50
     },
+    margin: {
+      type: Number,
+      default: 3
+    },
     fontSize: {
       type: Number
     }
@@ -125,19 +128,19 @@ export default {
     },
 
     buttonRadius () {
-      return this.height - MARGIN * 2;
+      return this.height - this.margin * 2;
     },
 
     distance () {
-      return px(this.width - this.height + MARGIN)
+      return px(this.width - this.height + this.margin)
     },
 
     buttonStyle () {
       const transition = `transform ${this.speed}ms`
 
       const transform = this.toggled
-        ? `translate3d(${this.distance}, 3px, 0px)`
-        : null
+        ? `translate3d(${this.distance}, ${px(this.margin)}, 0px)`
+        : `translate3d(${px(this.margin)}, ${px(this.margin)}, 0px)`
 
       const background = this.switchColor
         ? this.switchColorCurrent
@@ -264,12 +267,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$margin: 3px;
 
 .vue-js-switch {
   display: inline-block;
   position: relative;
-  overflow: hidden;
   vertical-align: middle;
   user-select: none;
   font-size: 10px;
@@ -317,7 +318,6 @@ $margin: 3px;
       top: 0;
       left: 0;
 
-      transform: translate3d($margin, $margin, 0);
       border-radius: 100%;
       background-color: #fff;
       z-index: 2;