fix(cxl-lumo-styles): simplify vaadin-overlay theme for nav mobile la…

…yout
conversionxl · Dec 19, 2023 · 7c95394 · 7c95394
1 parent e48d43a
commit 7c95394
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 28 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -35,10 +35,8 @@
   &::part(overlay),
   &::part(content) {
     /* Repeated as fallback for older browsers */
-    height: calc(100vh - 40px);
-    height: calc(100dvh - 40px);
-    max-height: calc(100vh - 40px);
-    max-height: calc(100dvh - 40px);
+    max-height: calc(100% - var(--cxl-marketing-nav-height));
+    max-height: calc(100dvh - var(--cxl-marketing-nav-height));
   }
 
   &::part(backdrop) {
@@ -50,42 +48,23 @@
       0 8px 24px -4px var(--lumo-shade-5pct);
   }
 
-  &::part(overlay),
-  &::part(content) {
-    height: initial;
-    max-height: initial;
-  }
-
   &::part(content) {
     padding: var(--lumo-space-s);
   }
 
+  /* It's necessary to define some properties again in a media query, because of vaadin-overlay hard coded styles at 420px*/
   @media (max-width: 568px), (max-height: 568px) {
     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;
 
-
     [part='overlay'] {
-      top: 0 !important;
-      right: 0 !important;
+      position: relative;
+      height: 100dvh;
+      max-height: calc(100dvh - var(--cxl-marketing-nav-height));
       bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-
-      /* Necessary to override hard-coded media query from vaadin-overlay style at 420px*/
-      align-items: stretch !important;
-      justify-content: flex-end !important;
-      height: calc(100vh - 40px) !important;
-      height: calc(100dvh - 40px) !important;
-      max-height: calc(100vh - 40px) !important;
-      max-height: calc(100dvh - 40px) !important;
-
-      border-top: 1px solid var(--lumo-shade-5pct);
-      border-radius: 0;
-      box-shadow: none;
+      width: 100%;
     }
 
     /* The content part scrolls instead of the overlay part, because of the gradient fade-out */

diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss
@@ -21,6 +21,7 @@
     justify-content: center;
     width: 100%;
     max-width: 100vw;
+    min-height: var(--cxl-marketing-nav-min-height, 44px);
     padding: 0 var(--lumo-space-m);
     overflow: hidden;