euvl · euvl · Feb 24, 2019 · Dec 18, 2018
diff --git a/README.md b/README.md
@@ -76,6 +76,7 @@ Vue.component('ToggleButton', ToggleButton)
 | switchColor     | [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 |
 | fontSize        | Number            | undefined  | Font size |


diff --git a/demo/src/App.vue b/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

diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
diff --git a/src/Button.vue b/src/Button.vue
@@ -35,7 +35,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)
@@ -101,6 +100,10 @@ export default {
      type: Number,
      default: 50
    },
+    margin: {
+      type: Number,
+      default: 3
+    },
    fontSize: {
      type: Number
    }
@@ -124,19 +127,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
@@ -263,12 +266,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;
@@ -316,7 +317,6 @@ $margin: 3px;
      top: 0;
      left: 0;

-      transform: translate3d($margin, $margin, 0);
      border-radius: 100%;
      background-color: #fff;
      z-index: 2;