mburger-css - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

bin/webcomponent-affix.txt

 	</style>
 
-	<span></span>
-	<span></span>
-	<span></span>`;
+	<b></b>
+	<b></b>
+	<b></b>
+	<span><slot></slot></span>`;
 
@@ -28,4 +29,4 @@ customElements.define( 'm-burger',
 			if ( name == 'menu' ) {
-				this.menu = ( this.hasAttribute( 'menu' ) )
-					? document.getElementById( this.getAttribute( 'menu' ) )
+				this.menu = ( newValue )
+					? document.getElementById( newValue )
 					: null;
@@ -32,0 +33,0 @@ }

composer.json

 {
 	"name"			: "mburger-css",
-	"version"		: "1.1.0",
+	"version"		: "1.2.0",
 	"authors"		: "Fred Heusschen <[e-mail]>",
@@ -5,0 +5,0 @@ "license"		: "CC-BY-4.0",

dist/mburger.js

 export const mBurger = document.createElement( 'template' );
 mBurger.innerHTML = `
 	<style>
-:host{--mb-bar-width:60%;--mb-bar-height:4px;--mb-bar-spacing:10px;--mb-cross-timeout:0.4s;width:60px;height:60px;background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;padding:0;margin:0;vertical-align:middle;appearance:none;cursor:pointer}:host span{display:block;position:absolute;left:calc((100% - var(--mb-bar-width))/ 2);width:var(--mb-bar-width);height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}:host span:nth-of-type(1){bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease}:host span:nth-of-type(2){top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease}:host span:nth-of-type(3){top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease}:host-context(.mm-wrapper_opened) span:nth-of-type(1){bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)}:host-context(.mm-wrapper_opened) span:nth-of-type(2){opacity:0}:host-context(.mm-wrapper_opened) span:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)}:host([fx=collapse]) span:nth-of-type(1){transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s}:host([fx=collapse]) span:nth-of-type(2){transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s}:host([fx=collapse]) span:nth-of-type(3){transition:top .2s ease,transform .2s ease}:host-context(.mm-wrapper_opened):host([fx=collapse]) span:nth-of-type(1){bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-cross-timeout) + .1s),calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}:host-context(.mm-wrapper_opened):host([fx=collapse]) span:nth-of-type(2){top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host-context(.mm-wrapper_opened):host([fx=collapse]) span:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}:host([fx=spin]) span:nth-of-type(1){transition-delay:.2s,0s}:host([fx=spin]) span:nth-of-type(2){transition-duration:0s;transition-delay:.2s}:host([fx=spin]) span:nth-of-type(3){transition-delay:.2s,0s}:host-context(.mm-wrapper_opened):host([fx=spin]) span:nth-of-type(1){transform:rotate(135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host-context(.mm-wrapper_opened):host([fx=spin]) span:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=spin]) span:nth-of-type(3){transform:rotate(225deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host([fx=squeeze]) span:nth-of-type(1){transition-delay:.1s,0s}:host([fx=squeeze]) span:nth-of-type(2){transition-delay:.1s}:host([fx=squeeze]) span:nth-of-type(3){transition-delay:.1s,0s}:host-context(.mm-wrapper_opened):host([fx=squeeze]) span:nth-of-type(1){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}:host-context(.mm-wrapper_opened):host([fx=squeeze]) span:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=squeeze]) span:nth-of-type(3){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}:host([fx=tornado]) span:nth-of-type(1){transition:bottom .2s ease,transform .2s ease;transition-delay:.2s}:host([fx=tornado]) span:nth-of-type(2){transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s}:host([fx=tornado]) span:nth-of-type(3){transition:top .2s ease,transform .2s ease;transition-delay:0s}:host-context(.mm-wrapper_opened):host([fx=tornado]) span:nth-of-type(1){transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=tornado]) span:nth-of-type(2){opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + .4s),calc(var(--mb-cross-timeout) + .1s)}:host-context(.mm-wrapper_opened):host([fx=tornado]) span:nth-of-type(3){transform:rotate(-225deg);transition-delay:calc(var(--mb-cross-timeout) + .2s)}
+:host{--mb-button-size:60px;--mb-bar-width:0.6;--mb-bar-height:4px;--mb-bar-spacing:10px;--mb-cross-timeout:0.4s;background:0 0;border:none;border-radius:0;color:inherit;display:inline-block;position:relative;box-sizing:border-box;height:var(--mb-button-size);padding:0 0 0 var(--mb-button-size);margin:0;line-height:var(--mb-button-size);vertical-align:middle;appearance:none;outline:0;cursor:pointer}:host b{display:block;position:absolute;left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));width:calc(var(--mb-button-size) * var(--mb-bar-width));height:var(--mb-bar-height);border-radius:calc(var(--mb-bar-height)/ 2);background:currentColor;color:inherit;opacity:1}:host b:nth-of-type(1){bottom:calc(50% + var(--mb-bar-spacing));transition:bottom .2s ease,transform .2s ease}:host b:nth-of-type(2){top:calc(50% - (var(--mb-bar-height)/ 2));transition:opacity .2s ease}:host b:nth-of-type(3){top:calc(50% + var(--mb-bar-spacing));transition:top .2s ease,transform .2s ease}:host span:not(:empty){padding-right:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2))}:host-context(.mm-wrapper_opened) b:nth-of-type(1){bottom:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(45deg)}:host-context(.mm-wrapper_opened) b:nth-of-type(2){opacity:0}:host-context(.mm-wrapper_opened) b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg)}:host([fx=collapse]) b:nth-of-type(1){transition:bottom .2s ease,margin .2s ease,transform .2s ease;transition-delay:.2s,0s,0s}:host([fx=collapse]) b:nth-of-type(2){transition:top .2s ease,opacity 0s ease;transition-delay:.3s,.3s}:host([fx=collapse]) b:nth-of-type(3){transition:top .2s ease,transform .2s ease}:host-context(.mm-wrapper_opened):host([fx=collapse]) b:nth-of-type(1){bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));transform:rotate(45deg);transition-delay:calc(var(--mb-cross-timeout) + .1s),calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}:host-context(.mm-wrapper_opened):host([fx=collapse]) b:nth-of-type(2){top:calc(50% + var(--mb-bar-spacing));opacity:0;transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host-context(.mm-wrapper_opened):host([fx=collapse]) b:nth-of-type(3){top:calc(50% - (var(--mb-bar-height)/ 2));transform:rotate(-45deg);transition-delay:calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)}:host([fx=spin]) b:nth-of-type(1){transition-delay:.2s,0s}:host([fx=spin]) b:nth-of-type(2){transition-duration:0s;transition-delay:.2s}:host([fx=spin]) b:nth-of-type(3){transition-delay:.2s,0s}:host-context(.mm-wrapper_opened):host([fx=spin]) b:nth-of-type(1){transform:rotate(135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host-context(.mm-wrapper_opened):host([fx=spin]) b:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=spin]) b:nth-of-type(3){transform:rotate(225deg);transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)}:host([fx=squeeze]) b:nth-of-type(1){transition-delay:.1s,0s}:host([fx=squeeze]) b:nth-of-type(2){transition-delay:.1s}:host([fx=squeeze]) b:nth-of-type(3){transition-delay:.1s,0s}:host-context(.mm-wrapper_opened):host([fx=squeeze]) b:nth-of-type(1){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}:host-context(.mm-wrapper_opened):host([fx=squeeze]) b:nth-of-type(2){transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=squeeze]) b:nth-of-type(3){transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)}:host([fx=tornado]) b:nth-of-type(1){transition:bottom .2s ease,transform .2s ease;transition-delay:.2s}:host([fx=tornado]) b:nth-of-type(2){transition:opacity 0s ease,transform .2s ease;transition-delay:.1s,.1s}:host([fx=tornado]) b:nth-of-type(3){transition:top .2s ease,transform .2s ease;transition-delay:0s}:host-context(.mm-wrapper_opened):host([fx=tornado]) b:nth-of-type(1){transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + 0s)}:host-context(.mm-wrapper_opened):host([fx=tornado]) b:nth-of-type(2){opacity:0;transform:rotate(-135deg);transition-delay:calc(var(--mb-cross-timeout) + .4s),calc(var(--mb-cross-timeout) + .1s)}:host-context(.mm-wrapper_opened):host([fx=tornado]) b:nth-of-type(3){transform:rotate(-225deg);transition-delay:calc(var(--mb-cross-timeout) + .2s)}
 	</style>
 
-	<span></span>
-	<span></span>
-	<span></span>`;
+	<b></b>
+	<b></b>
+	<b></b>
+	<span><slot></slot></span>`;
 
@@ -32,4 +33,4 @@ customElements.define( 'm-burger',
 			if ( name == 'menu' ) {
-				this.menu = ( this.hasAttribute( 'menu' ) )
-					? document.getElementById( this.getAttribute( 'menu' ) )
+				this.menu = ( newValue )
+					? document.getElementById( newValue )
 					: null;
@@ -36,0 +37,0 @@ }

package.json

 {
 	"name": "mburger-css",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"main": "dist/mburger.css",
@@ -5,0 +5,0 @@ "author": "Fred Heusschen <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

34860

6.18%

Lines of code

241

16.99%

No dependency changes