feat(cxl-lumo-styles): vaadin-context-menu-item[theme="cxl-context-me…

…nu-section-header"]
conversionxl · Mar 7, 2024 · 9df1b7f · 9df1b7f
1 parent 6f63f36
commit 9df1b7f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss
@@ -63,7 +63,7 @@
 
   [part="checkmark"] {
     display: none !important;
-  
+
     &::before {
       content: unset !important;
     }
@@ -93,3 +93,9 @@
     }
   }
 }
+
+:host([theme~="cxl-context-menu-section-header"]) {
+  font-size: var(--lumo-font-size-s);
+  font-weight: 700;
+  text-transform: uppercase;
+}
diff --git a/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js b/packages/storybook/cxl-ui/cxl-app-layout/layout=2c-r.stories.js
@@ -370,8 +370,18 @@ export const CXLAppLayout2cr = () => {
                 lesson</vaadin-context-menu-item
               >
               <hr />
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-context-menu-section-header"
+              >Minidegrees</vaadin-context-menu-item
+              >
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+              ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Growth</vaadin-context-menu-item
+              >
+              <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
+              ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Digital Psychology & Persuation</vaadin-context-menu-item
+              >
+              <hr />
               <vaadin-context-menu-item class="vaadin-menu-item" theme="cxl-marketing-nav"
-                >Go to course</vaadin-context-menu-item
+                ><vaadin-icon icon="lumo:arrow-left"></vaadin-icon> Go to course</vaadin-context-menu-item
               >
             </vaadin-context-menu-list-box>
           </template>