@vaadin/vaadin-lumo-styles - npm Package Compare versions

Comparing version 1.0.0-pre.2 to 1.0.0-pre.3

mixins/menu-overlay.js

@@ -1,3 +0,3 @@
-import '../color.js';
 import '../spacing.js';
+import '../style.js';
 import './overlay.js';
@@ -7,11 +7,19 @@ const $_documentContainer = document.createElement('div');
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-menu-overlay">
+$_documentContainer.innerHTML = `<dom-module id="lumo-menu-overlay-core">
   <template>
-    <style include="lumo-overlay">
+    <style>
+      :host([opening]),
+      :host([closing]) {
+        animation: 0.14s lumo-overlay-dummy-animation;
+      }
+
       [part="overlay"] {
-        animation: 0.2s vaadin-menu-overlay-enter;
         will-change: opacity, transform;
       }
 
-      @keyframes vaadin-menu-overlay-enter {
+      :host([opening]) [part="overlay"] {
+        animation: 0.1s lumo-menu-overlay-enter ease-out both;
+      }
+
+      @keyframes lumo-menu-overlay-enter {
         0% {
@@ -23,58 +31,76 @@ opacity: 0;
 
-      /* Small viewport styles */
-
-      :host([phone][phone]) {
-        /* Remove padding around the viewport */
-        padding: 0;
+      :host([closing]) [part="overlay"] {
+        animation: 0.1s lumo-menu-overlay-exit both;
       }
 
-      :host([phone]) [part="overlay"] {
-        animation: 0.15s vaadin-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1);
-        border-radius: 0;
-        box-shadow: 0 6px 56px 0 var(--lumo-shade-80pct);
-        overflow: visible;
-        padding: 0;
-        position: relative;
+      @keyframes lumo-menu-overlay-exit {
+        100% {
+          opacity: 0;
+        }
       }
+    </style>
+  </template>
+</dom-module><dom-module id="lumo-menu-overlay">
+  <template>
+    <style include="lumo-overlay lumo-menu-overlay-core">
+      /* Small viewport (bottom sheet) styles */
+      /* Use direct media queries instead of the state attributes (\`[phone]\` and \`[fullscreen]\`) provided by the elements */
+      @media (max-width: 420px), (max-height: 420px) {
+        :host {
+          top: 0 !important;
+          right: 0 !important;
+          bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+          left: 0 !important;
+          align-items: stretch !important;
+          justify-content: flex-end !important;
+        }
 
-      @keyframes vaadin-mobile-menu-overlay-enter {
-        0% {
-          transform: translateY(150%);
+        [part="overlay"] {
+          max-height: 50vh;
+          width: 100vw;
+          border-radius: 0;
+          box-shadow: var(--lumo-box-shadow-xl);
         }
-      }
 
-      @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
-        /* Gradient fade-out at the top and bottom edges */
-        :host([phone]) [part="overlay"]::after {
-          content: "";
-          pointer-events: none;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          background-color: inherit;
-          background-image: inherit;
-          --_lumo-menu-overlay-mask-image: linear-gradient(#000, transparent 40px, transparent calc(100% - 40px), #000);
-          -webkit-mask-image: var(--_lumo-menu-overlay-mask-image);
+        /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+        [part="content"] {
+          padding: 30px var(--lumo-space-m);
+          max-height: inherit;
+          box-sizing: border-box;
+          -webkit-overflow-scrolling: touch;
+          overflow: auto;
+          -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+          mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
         }
+
+        [part="backdrop"] {
+          display: block;
+        }
+
+        /* Animations */
+
+        :host([opening]) [part="overlay"] {
+          animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1) both;
+        }
+
+        :host([closing]),
+        :host([closing]) [part="backdrop"] {
+          animation-delay: 0.14s;
+        }
+
+        :host([closing]) [part="overlay"] {
+          animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.550, .055, .675, .19) both;
+        }
       }
 
-      /*
-        TODO: CSS custom property in \`mask-image\` causes crash in Edge
-        see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15415089/
-      */
-      @-moz-document url-prefix() {
-        :host([phone]) [part="overlay"]::after {
-          mask-image: var(--_lumo-menu-overlay-mask-image);
+      @keyframes lumo-mobile-menu-overlay-enter {
+        0% {
+          transform: translateY(150%);
         }
       }
 
-      /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-      :host([phone][phone]) [part="content"] {
-        max-height: 50vh;
-        padding: 30px var(--lumo-space-m);
-        box-sizing: border-box;
-        -webkit-overflow-scrolling: touch;
-        overflow: auto;
+      @keyframes lumo-mobile-menu-overlay-exit {
+        100% {
+          transform: translateY(150%);
+        }
       }
@@ -86,1 +112,4 @@ </style>
 document.head.appendChild($_documentContainer);
+
+/* Split as a separate module because combo box can only use the "fullscreen" styles */
+;

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "1.0.0-pre.2",
+  "version": "1.0.0-pre.3",
   "main": "lumo.js",
@@ -17,0 +17,0 @@ "author": "Vaadin Ltd",

version.js

 class Lumo extends HTMLElement {
   static get version() {
-    return '1.0.0-pre.2';
+    return '1.0.0-pre.3';
   }
@@ -5,0 +5,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

105233

increased by0.64%

Lines of code

827

increased by2.73%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes