@internetarchive/ia-menu-slider - npm Package Compare versions

Comparing version 0.1.9-alpha3 to 0.1.9-alpha4

package.json

 {
   "name": "@internetarchive/ia-menu-slider",
-  "version": "0.1.9-alpha3",
+  "version": "0.1.9-alpha4",
   "description": "Menu slider used in ia-topnav",
@@ -5,0 +5,0 @@ "author": "ia-menu-slider",

src/ia-menu-slider.js

@@ -67,3 +67,3 @@ import { nothing } from 'lit-html';
     const animate = this.animateMenuOpen ? 'animate' : '';
-    const state = this.open ? 'open' : 'closed';
+    const state = this.open ? 'open' : '';
     return `${animate} ${state}`;
@@ -73,3 +73,3 @@ }
   get selectedMenuClass() {
-    return this.selectedMenu ? 'open' : 'closed';
+    return this.selectedMenu ? 'open' : '';
   }
@@ -76,0 +76,0 @@

src/styles/menu-slider.js

@@ -5,2 +5,3 @@ import { css } from 'lit-element';
 const sliderWidth = css`var(--menuWidth, 320px)`;
+const transitionTiming = css`var(--animationTiming, 200ms)`;
 
@@ -28,3 +29,3 @@ export default css`
     transform: translateX(calc(${sliderWidth} * -1));
-    transition: transform var(--animationTiming) ease-out;
+    transition: transform ${transitionTiming} ease-out;
   }
@@ -42,2 +43,6 @@ .menu:before {
 
+  .menu > button.close {
+    right: 0.7rem;
+  }
+
   button {
@@ -49,3 +54,3 @@ outline: none;
   header {
-    margin: .2rem 0 .5rem 0;
+    margin: 0 0 .5rem 0;
   }
@@ -100,3 +105,3 @@
     transform: translateX(calc(${sliderWidth} * -1));
-    transition: transform var(--animationTiming) ease-out;
+    transition: transform ${transitionTiming} ease-out;
     background: var(--activeButtonBg);
@@ -103,0 +108,0 @@ border-right: .2rem solid;

No alert changes

Improved metrics

Total package byte prevSize

68148

increased by0.13%

Lines of code

759

increased by0.53%

No dependency changes