Styling cleanup v1.0.16

niels-bosman · niels-bosman · commit 5912dd6869ce · 2021-05-03T00:14:57.000+02:00
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ export default {
 | activeColor   | `String`  | `#9FD6AE` | ❌        | The color that is displayed when the toggler is active.                                            |
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
 | disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
-| fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
+| fontSize      | `String`  | `16px`      | ❌        | Sets the font size of the text next to the toggle                                                  |
 | fontWeight    | `Boolean` | `normal`  | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-toggle-component",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "main": "dist/vue-toggle-component.common.js",
   "files": [
     "dist/*"
diff --git a/src/components/VueToggle.vue b/src/components/VueToggle.vue
@@ -1,8 +1,8 @@
 <template>
   <section
     :class="{
-      'is-dark': darkTheme,
-      'is-disabled': disabled,
+      'm-toggle--is-dark': darkTheme,
+      'm-toggle--is-disabled': disabled,
     }"
     class="m-toggle"
   >
@@ -91,11 +91,11 @@ export default {
   &__label {
     user-select: none;
 
-    .is-disabled & {
+    #{$self}--is-disabled & {
       cursor: not-allowed;
     }
 
-    .is-dark & {
+    #{$self}--is-dark & {
       color: white;
     }
   }
@@ -138,12 +138,12 @@ export default {
       will-change: left;
     }
 
-    .is-disabled & {
+    #{$self}--is-disabled & {
       cursor: not-allowed;
       opacity: 50%;
     }
 
-    .is-dark & {
+    #{$self}--is-dark & {
       background: #374151;
     }
   }
diff --git a/vue-toggle-component/.yarn/releases/yarn-berry.cjs b/vue-toggle-component/.yarn/releases/yarn-berry.cjs
diff --git a/vue-toggle-component/.yarnrc.yml b/vue-toggle-component/.yarnrc.yml
@@ -0,0 +1 @@
+yarnPath: ".yarn/releases/yarn-berry.cjs"
diff --git a/vue-toggle-component/README.md b/vue-toggle-component/README.md
@@ -53,7 +53,7 @@ export default {
 | activeColor   | `String`  | `#9FD6AE` | ❌        | The color that is displayed when the toggler is active.                                            |
 | darkTheme     | `Boolean` | `false`   | ❌        | Set's dark mode to active. (note that this will not change the background like in the preview GIF) |
 | disabled      | `Number`  | `false`   | ❌        | Disables the toggler.                                                                              |
-| fontSize      | `String`  | `16`      | ❌        | Sets the font size of the text next to the toggle                                                  |
+| fontSize      | `String`  | `16px`      | ❌        | Sets the font size of the text next to the toggle                                                  |
 | fontWeight    | `Boolean` | `normal`  | ❌        | Sets the font weight of the text next to the toggle.                                               |
 | toggled       | `Boolean` | `true`    | ❌        | Sets the default value for the toggler.                                                            |
 
diff --git a/vue-toggle-component/dist/vue-toggle-component.esm.js b/vue-toggle-component/dist/vue-toggle-component.esm.js
@@ -59,13 +59,13 @@ var script = {
   }
 };
 
-const _withId = /*#__PURE__*/withScopeId("data-v-576222af");
+const _withId = /*#__PURE__*/withScopeId("data-v-5330e797");
 
 const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
   return openBlock(), createBlock("section", {
     class: [{
-      'is-dark': $props.darkTheme,
-      'is-disabled': $props.disabled
+      'm-toggle--is-dark': $props.darkTheme,
+      'm-toggle--is-disabled': $props.disabled
     }, "m-toggle"]
   }, [withDirectives(createVNode("input", {
     id: $options.id,
@@ -123,11 +123,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.m-toggle[data-v-576222af] {\n  align-items: center;\n  display: flex;\n  margin: 0 -5px;\n}\n.m-toggle > *[data-v-576222af] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.m-toggle__label[data-v-576222af] {\n  user-select: none;\n}\n.is-disabled .m-toggle__label[data-v-576222af] {\n  cursor: not-allowed;\n}\n.is-dark .m-toggle__label[data-v-576222af] {\n  color: white;\n}\n.m-toggle__input[data-v-576222af] {\n  display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-576222af]:after {\n  left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-576222af] {\n  background: #F0F0F0;\n  border-radius: 2em;\n  box-sizing: border-box;\n  height: 2em;\n  outline: 0;\n  overflow: hidden;\n  padding: 2px;\n  transition: background-color 0.4s ease;\n  width: 4em;\n  will-change: background-color;\n}\n.m-toggle__content[data-v-576222af]:after {\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n  content: '';\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: calc(50% - 2px);\n  will-change: left;\n}\n.is-disabled .m-toggle__content[data-v-576222af] {\n  cursor: not-allowed;\n  opacity: 50%;\n}\n.is-dark .m-toggle__content[data-v-576222af] {\n  background: #374151;\n}\n\n";
+var css_248z = "\n.m-toggle[data-v-5330e797] {\n  align-items: center;\n  display: flex;\n  margin: 0 -5px;\n}\n.m-toggle > *[data-v-5330e797] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.m-toggle__label[data-v-5330e797] {\n  user-select: none;\n}\n.m-toggle--is-disabled .m-toggle__label[data-v-5330e797] {\n  cursor: not-allowed;\n}\n.m-toggle--is-dark .m-toggle__label[data-v-5330e797] {\n  color: white;\n}\n.m-toggle__input[data-v-5330e797] {\n  display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-5330e797]:after {\n  left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-5330e797] {\n  background: #F0F0F0;\n  border-radius: 2em;\n  box-sizing: border-box;\n  height: 2em;\n  outline: 0;\n  overflow: hidden;\n  padding: 2px;\n  transition: background-color 0.4s ease;\n  width: 4em;\n  will-change: background-color;\n}\n.m-toggle__content[data-v-5330e797]:after {\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n  content: '';\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: calc(50% - 2px);\n  will-change: left;\n}\n.m-toggle--is-disabled .m-toggle__content[data-v-5330e797] {\n  cursor: not-allowed;\n  opacity: 50%;\n}\n.m-toggle--is-dark .m-toggle__content[data-v-5330e797] {\n  background: #374151;\n}\n\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-576222af";
+script.__scopeId = "data-v-5330e797";
 
 // Import vue component
 // IIFE injects install function into component, allowing component
diff --git a/vue-toggle-component/dist/vue-toggle-component.min.js b/vue-toggle-component/dist/vue-toggle-component.min.js
diff --git a/vue-toggle-component/dist/vue-toggle-component.ssr.js b/vue-toggle-component/dist/vue-toggle-component.ssr.js
@@ -108,13 +108,13 @@ function _nonIterableRest() {
       return this.name.replace(/ /g, '').toLowerCase();
     }
   }
-};var _withId = /*#__PURE__*/vue.withScopeId("data-v-576222af");
+};var _withId = /*#__PURE__*/vue.withScopeId("data-v-5330e797");
 
 var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock("section", {
     class: [{
-      'is-dark': $props.darkTheme,
-      'is-disabled': $props.disabled
+      'm-toggle--is-dark': $props.darkTheme,
+      'm-toggle--is-disabled': $props.disabled
     }, "m-toggle"]
   }, [vue.withDirectives(vue.createVNode("input", {
     id: $options.id,
@@ -172,9 +172,9 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
   } else {
     style.appendChild(document.createTextNode(css));
   }
-}var css_248z = "\n.m-toggle[data-v-576222af] {\n  align-items: center;\n  display: flex;\n  margin: 0 -5px;\n}\n.m-toggle > *[data-v-576222af] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.m-toggle__label[data-v-576222af] {\n  user-select: none;\n}\n.is-disabled .m-toggle__label[data-v-576222af] {\n  cursor: not-allowed;\n}\n.is-dark .m-toggle__label[data-v-576222af] {\n  color: white;\n}\n.m-toggle__input[data-v-576222af] {\n  display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-576222af]:after {\n  left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-576222af] {\n  background: #F0F0F0;\n  border-radius: 2em;\n  box-sizing: border-box;\n  height: 2em;\n  outline: 0;\n  overflow: hidden;\n  padding: 2px;\n  transition: background-color 0.4s ease;\n  width: 4em;\n  will-change: background-color;\n}\n.m-toggle__content[data-v-576222af]:after {\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n  content: '';\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: calc(50% - 2px);\n  will-change: left;\n}\n.is-disabled .m-toggle__content[data-v-576222af] {\n  cursor: not-allowed;\n  opacity: 50%;\n}\n.is-dark .m-toggle__content[data-v-576222af] {\n  background: #374151;\n}\n\n";
+}var css_248z = "\n.m-toggle[data-v-5330e797] {\n  align-items: center;\n  display: flex;\n  margin: 0 -5px;\n}\n.m-toggle > *[data-v-5330e797] {\n  cursor: pointer;\n  margin: 0 5px;\n}\n.m-toggle__label[data-v-5330e797] {\n  user-select: none;\n}\n.m-toggle--is-disabled .m-toggle__label[data-v-5330e797] {\n  cursor: not-allowed;\n}\n.m-toggle--is-dark .m-toggle__label[data-v-5330e797] {\n  color: white;\n}\n.m-toggle__input[data-v-5330e797] {\n  display: none;\n}\n.m-toggle__input:checked + .m-toggle__content[data-v-5330e797]:after {\n  left: calc(50% + 2px);\n}\n.m-toggle__content[data-v-5330e797] {\n  background: #F0F0F0;\n  border-radius: 2em;\n  box-sizing: border-box;\n  height: 2em;\n  outline: 0;\n  overflow: hidden;\n  padding: 2px;\n  transition: background-color 0.4s ease;\n  width: 4em;\n  will-change: background-color;\n}\n.m-toggle__content[data-v-5330e797]:after {\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);\n  content: '';\n  display: block;\n  height: 100%;\n  left: 0;\n  position: relative;\n  transition: left 0.2s ease;\n  width: calc(50% - 2px);\n  will-change: left;\n}\n.m-toggle--is-disabled .m-toggle__content[data-v-5330e797] {\n  cursor: not-allowed;\n  opacity: 50%;\n}\n.m-toggle--is-dark .m-toggle__content[data-v-5330e797] {\n  background: #374151;\n}\n\n";
 styleInject(css_248z);script.render = render;
-script.__scopeId = "data-v-576222af";// Import vue component
+script.__scopeId = "data-v-5330e797";// Import vue component
 // IIFE injects install function into component, allowing component
 // to be registered via Vue.use() as well as Vue.component(),
 
diff --git a/vue-toggle-component/package.json b/vue-toggle-component/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-toggle-component",
-  "version": "1.0.15",
+  "version": "1.0.16",
 
   "main": "dist/vue-toggle-component.ssr.js",
   "browser": "dist/vue-toggle-component.esm.js",
diff --git a/vue-toggle-component/src/vue-toggle-component.vue b/vue-toggle-component/src/vue-toggle-component.vue

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-toggle-component",`
`3`		`- "version": "1.0.15",`
	`3`	`+ "version": "1.0.16",`
`4`	`4`	`"main": "dist/vue-toggle-component.common.js",`
`5`	`5`	`"files": [`
`6`	`6`	`"dist/*"`
Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`<template>`
`2`	`2`	`<section`
`3`	`3`	`:class="{`
`4`		`- 'is-dark': darkTheme,`
`5`		`- 'is-disabled': disabled,`
	`4`	`+ 'm-toggle--is-dark': darkTheme,`
	`5`	`+ 'm-toggle--is-disabled': disabled,`
`6`	`6`	`}"`
`7`	`7`	`class="m-toggle"`
`8`	`8`	`>`
`@@ -91,11 +91,11 @@ export default {`
`91`	`91`	`&__label {`
`92`	`92`	`user-select: none;`
`93`	`93`
`94`		`- .is-disabled & {`
	`94`	`+ #{$self}--is-disabled & {`
`95`	`95`	`cursor: not-allowed;`
`96`	`96`	`}`
`97`	`97`
`98`		`- .is-dark & {`
	`98`	`+ #{$self}--is-dark & {`
`99`	`99`	`color: white;`
`100`	`100`	`}`
`101`	`101`	`}`
`@@ -138,12 +138,12 @@ export default {`
`138`	`138`	`will-change: left;`
`139`	`139`	`}`
`140`	`140`
`141`		`- .is-disabled & {`
	`141`	`+ #{$self}--is-disabled & {`
`142`	`142`	`cursor: not-allowed;`
`143`	`143`	`opacity: 50%;`
`144`	`144`	`}`
`145`	`145`
`146`		`- .is-dark & {`
	`146`	`+ #{$self}--is-dark & {`
`147`	`147`	`background: #374151;`
`148`	`148`	`}`
`149`	`149`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+yarnPath: ".yarn/releases/yarn-berry.cjs"`