Merge pull request #379 from conversionxl/pawel/feat/marketing-nav-on…

…e-bar
conversionxl · Dec 21, 2023 · 1fd574d · 1fd574d
2 parents 8947c36 + de15c18
commit 1fd574d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 14 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
@@ -8,3 +8,7 @@
 :host(.wide) {
   width: 100%;
 }
+
+:host-context(.menu-item-cta) {
+  --lumo-button-size: var(--lumo-size-s);
+}
diff --git a/packages/cxl-ui/scss/cxl-marketing-nav.scss b/packages/cxl-ui/scss/cxl-marketing-nav.scss
@@ -72,20 +72,9 @@
     }
 
     /* stylelint-disable-next-line selector-no-qualifying-type */
-    &#menu-global-items {
-      background-color: var(--lumo-shade);
-
-      /* stylelint-disable-next-line selector-no-qualifying-type */
-      ::part(menu-bar-button),
-      ::slotted(.menu-item) {
-        color: var(--lumo-tint);
-      }
-    }
-
-    /* stylelint-disable-next-line selector-no-qualifying-type */
-    &#menu-primary-items {
+    &#menu-global-items, &#menu-primary-items {
       background-color: var(--lumo-base-color);
-      border-bottom: 1px solid var(--lumo-shade-10pct);
+      border-bottom: 1px solid var(--lumo-shade-5pct);
     }
 
     .vaadin-context-menu-item--dropdown-icon {

diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -45,6 +45,8 @@ export class CXLMarketingNavElement extends LitElement {
 
   @property({ type: Boolean, attribute: 'minimal' }) minimal = false;
 
+  @property({ type: String, attribute: 'logo-bar' }) logoBar = 'global';
+
   @property({ type: Object })
   get contextMenuItems() {
     return this._contextMenuItems;
@@ -151,7 +153,7 @@ export class CXLMarketingNavElement extends LitElement {
         return html`
           <nav id="menu-${name}-items" ?minimal=${this.minimal} ?wide=${this.wide}>
             <div class="container">
-              ${'global' === name || !this.wide
+              ${this.logoBar === name || !this.wide
                 ? html`
                     <vaadin-menu-bar-button class="cxl-logo" theme="tertiary cxl-marketing-nav">
                       <a href=${this.homeUrl || 'https://cxl.com'}>