material-toggle - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/material-toggle.js

@@ -27,3 +27,3 @@ 'use strict';
 
-            this.createShadowRoot().innerHTML = '\n            <style>\n                :host{\n                }\n                ::content input{\n                    position: relative;\n                    display: inline-block;\n                    border: 0;\n                    width: 10px;\n                    height: 10px;\n                    margin: 10px 40px 10px 3px;\n                }\n                ::content input:before {\n                    content: "";\n                    position: absolute;\n                    display: block;\n                    left: -3px;\n                    top: -3px;\n                    height: 16px;\n                    width: 44px;\n                    background: white;\n                    background-image: linear-gradient(var(--material-checkbox-bg-color, rgb(206,212,218)), var(--material-checkbox-bg-color, rgb(206,212,218)));\n                    border-radius: 100px;\n                    transition: all 0.3s ease;\n                }\n                ::content input:after {\n                    left: 20px;\n                    position: absolute;\n                    left: -5px;\n                    top: -8px;\n                    display: block;\n                    width: 26px;\n                    height: 26px;\n                    border-radius: 100px;\n                    background: var(--material-checkbox-knob-color, rgb(255,255,255));\n                    box-shadow: var(--material-checkbox-shadow, 0 .2rem .5rem rgba(0,0,0,.15));\n                    content: \'\';\n                    transition: all 0.3s ease;\n                }\n                ::content input:active:after {\n                    transform: scale(1.15, 0.85);\n                }\n                ::content input:checked:before {\n                    background-image: linear-gradient(var(--material-checkbox-highlight-color, rgba(54,79,199,0.5)), var(--material-checkbox-highlight-color, rgba(54,79,199,0.5)));\n                }\n                ::content input:checked:after {\n                    left: 20px;\n                    background: var(--material-checkbox-highlight-color, rgb(54,79,199));\n                }\n                ::content input:disabled:before{\n                    background: var(--material-checkbox-disabled-bg-color, rgb(241,243,245));\n                    pointer-events: none;\n                }\n                ::content input:disabled:after {\n                    background: var(--material-checkbox-disabled-knob-color, rgb(206,212,218));\n                    box-shadow: var(--material-checkbox-disabled-shadow, 0 .2rem .5rem rgba(0,0,0,.1));\n                }\n            </style>\n            <div class="material-toggle__checkbox">\n                <content></content>\n            </div>\n        ';
+            this.createShadowRoot().innerHTML = '\n            <style>\n                :host{\n                }\n                ::content input{\n                    position: relative;\n                    display: inline-block;\n                    border: 0;\n                    margin: 10px 35px 10px 3px;\n                }\n                ::content input:before {\n                    content: "";\n                    position: absolute;\n                    display: block;\n                    left: -3px;\n                    top: -3px;\n                    height: 16px;\n                    width: 44px;\n                    background: white;\n                    background-image: linear-gradient(var(--material-checkbox-bg-color, rgb(206,212,218)), var(--material-checkbox-bg-color, rgb(206,212,218)));\n                    border-radius: 100px;\n                    transition: all 0.3s ease;\n                }\n                ::content input:after {\n                    left: 20px;\n                    position: absolute;\n                    left: -5px;\n                    top: -8px;\n                    display: block;\n                    width: 26px;\n                    height: 26px;\n                    border-radius: 100px;\n                    background: var(--material-checkbox-knob-color, rgb(255,255,255));\n                    box-shadow: var(--material-checkbox-shadow, 0 .2rem .5rem rgba(0,0,0,.15));\n                    content: \'\';\n                    transition: all 0.3s ease;\n                }\n                ::content input:active:after {\n                    transform: scale(1.15, 0.85);\n                }\n                ::content input:checked:before {\n                    background-image: linear-gradient(var(--material-checkbox-highlight-color, rgba(54,79,199,0.5)), var(--material-checkbox-highlight-color, rgba(54,79,199,0.5)));\n                }\n                ::content input:checked:after {\n                    left: 20px;\n                    background: var(--material-checkbox-highlight-color, rgb(54,79,199));\n                }\n                ::content input:disabled:before{\n                    background: var(--material-checkbox-disabled-bg-color, rgb(241,243,245));\n                    pointer-events: none;\n                }\n                ::content input:disabled:after {\n                    background: var(--material-checkbox-disabled-knob-color, rgb(206,212,218));\n                    box-shadow: var(--material-checkbox-disabled-shadow, 0 .2rem .5rem rgba(0,0,0,.1));\n                }\n            </style>\n            <content></content>\n        ';
             this.$input = this.querySelector('input');
@@ -81,2 +81,5 @@ // shim shadowDOM styling
                 this.$input.setAttribute(attrName, val);
+                if (attrName === 'id') {
+                    this.removeAttribute('id');
+                }
             }
@@ -83,0 +86,0 @@ }

package.json

 {
   "name": "material-toggle",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Material Design toggle web component. No framework, vanilla js",
@@ -5,0 +5,0 @@ "main": "dist/material-toggle.js",

src/material-toggle.js

@@ -22,5 +22,3 @@ 'use strict';
                     border: 0;
-                    width: 10px;
-                    height: 10px;
-                    margin: 10px 40px 10px 3px;
+                    margin: 10px 35px 10px 3px;
                 }
@@ -73,5 +71,3 @@ ::content input:before {
             </style>
-            <div class="material-toggle__checkbox">
-                <content></content>
-            </div>
+            <content></content>
         `;
@@ -103,2 +99,5 @@ this.$input = this.querySelector('input');
             this.$input.setAttribute(attrName,val);
+            if(attrName === 'id'){
+                this.removeAttribute('id');
+            }
         }
@@ -105,0 +104,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

894332

Lines of code

17601

increased by0.01%

No dependency changes