refactor(cxl-ui): replace cxl-marketing-nav component files, remove o…

…bsolete styles
conversionxl · Oct 16, 2023 · 0a341ca · 0a341ca
1 parent d176b8b
commit 0a341ca
Show file tree

Hide file tree

Showing 13 changed files with 259 additions and 1,365 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
@@ -1,6 +1,13 @@
 @use "../mq";
 
-:host([theme~="cxl-navigation"].section-header) {
+:host([theme~="cxl-marketing-nav"]) {
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  ::slotted(h6) {
+    margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+:host([theme~="cxl-marketing-nav"].section-header) {
   font-weight: 600;
   color: var(--lumo-body-text-color);
   text-transform: uppercase;
@@ -10,40 +17,27 @@
   }
 }
 
-:host([theme~="cxl-navigation"].has-description) {
+:host([theme~="cxl-marketing-nav"].has-description) {
   [part="content"] ::slotted(.vaadin-context-menu-item--description) {
     font-weight: 400;
   }
 }
 
-:host([theme~="cxl-navigation"]:not(.section-header):hover),
-:host([theme~="cxl-navigation"]:not(.section-header)[expanded]) {
+:host([theme~="cxl-marketing-nav"]:not(.section-header):hover),
+:host([theme~="cxl-marketing-nav"]:not(.section-header)[expanded]) {
   color: var(--lumo-primary-color);
 
   &::after {
     color: var(--lumo-primary-color);
   }
 }
 
-:host([theme~="cxl-marketing-nav"].vaadin-menu-item.vaadin-context-menu-parent-item) {
-  padding-block: 0;
-
-  &::after {
-    margin-right: 0;
-    font-size: var(--lumo-icon-size);
-  }
-}
-
 @media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-navigation"].vaadin-menu-item.back-button-menu-item) {
+  :host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
     display: none;
   }
 }
 
-:host([theme~="cxl-maerketing-nav"]) [part="checkmark"][aria-hidden="true"] {
-  display: none;
-}
-
 ::slotted(a) {
   // Increase link click surface.
   display: block;
@@ -56,11 +50,6 @@
   color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */
 }
 
-/* stylelint-disable-next-line selector-no-qualifying-type */
-::slotted(h5.cxl-navigation-item) {
-  margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
-}
-
 :host {
   ::slotted(.vaadin-context-menu-item--description) {
     margin-top: var(--lumo-space-s);

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-list-box.scss
@@ -13,7 +13,7 @@
   }
 }
 
-:host([theme~="cxl-navigation"].vaadin-menu-list-box) {
+:host([theme~="cxl-marketing-nav"].vaadin-menu-list-box) {
   [part="items"]
     ::slotted(.section-header.vaadin-menu-item:not(.section-header):hover:not([disabled])) {
     /* revert default vaadin-context-menu-list-box hovering style, without losing other styles styles applied */
@@ -25,14 +25,6 @@
   }
 }
 
-@media screen and (min-width: 768px) and (min-height: 768px) {
-  :host([theme~="cxl-markting-nav"]) {
-    display: block;
-    width: var(--cxl-vaadin-context-menu-item-max-width);
-    padding: 0 var(--lumo-space-s);
-  }
-}
-
-:host([theme~="cxl-navigation"]) [part="items"] ::slotted(.vaadin-menu-item) {
+:host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
   border-radius: 0;
 }
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss
@@ -1,20 +1,5 @@
 @use "../mq";
 
-// Perfectly align modal in the center of the screen.
-:host([theme~="cxl-marketing-nav"][phone]) [part="overlay"] {
-  top: 0;
-  bottom: 0;
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-// Reduce visual noise below overlay.
-:host([theme~="cxl-marketing-nav"]) [part="backdrop"] {
-  $vaadin-overlay-shade-pct: 20;
-
-  background-color: var(--lumo-shade-#{$vaadin-overlay-shade-pct * 3.5}#{"pct"});
-}
-
 // Theme: cxl-course-dialog
 :host([theme="cxl-course-dialog"]) {
   [part="backdrop"] {
@@ -45,42 +30,7 @@
   }
 }
 
-:host([theme~="cxl-marketing-nav"]) [part="content"] {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-@media (min-width: 768px), (min-height: 768px) {
-  :host([theme~="cxl-marketing-nav"]) {
-    position: relative;
-    top: 0 !important; /* stylelint-disable-line declaration-no-important */
-    right: 0;
-    bottom: 0;
-    left: 0 !important; /* stylelint-disable-line declaration-no-important */
-    align-items: unset !important; /* stylelint-disable-line declaration-no-important */
-    justify-content: unset !important; /* stylelint-disable-line declaration-no-important */
-    width: 376px;
-    margin: 0;
-    overflow: auto;
-    visibility: hidden;
-    opacity: 0; // hide while in the body, to avoid flickering render, show after being moved to the overlays-wrapper element
-    transition: opacity 0.1s;
-  }
-
-  :host([theme~="cxl-marketing-nav"]) [part="content"] {
-    padding: 0;
-  }
-
-  :host([theme~="cxl-marketing-nav"]) [part="overlay"] {
-    box-shadow: none;
-  }
-
-  :host([theme~="cxl-marketing-nav"]) [part="backdrop"] {
-    display: none;
-  }
-}
-
-:host([theme~="cxl-navigation"]) {
+:host([theme~="cxl-marketing-nav"]) {
   &::part(overlay),
   &::part(content) {
     height: calc(100vh - 40px);

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss
@@ -1,12 +1,3 @@
-:host([theme~="cxl-marketing-nav"]) ::slotted(a[href]:hover) {
-  // text-decoration: underline !important; /* stylelint-disable-line declaration-no-important */
-  color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */
-}
-
-:host([theme~="cxl-marketing-nav"][hidden]) {
-  visibility: hidden;
-}
-
 :host([theme~="cxl-featured-course-slider"]) {
   width: 100%;
   min-width: 100%;

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss
@@ -1,106 +1,11 @@
 @use "../mixins";
 @use "../mq";
 
-// Collapse margins.
-:host([orientation="vertical"][theme~="cxl-marketing-nav"]) {
-  display: flex;
-  flex-direction: column;
-}
-
-/**
- * Wrap.
- */
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) {
-  justify-content: center;
-
-  [part="forward-button"],
-  [part="back-button"] {
-    color: var(--lumo-primary-color);
-  }
-
-  // Allow scrolling and snap to tabs one by one
-  [part="tabs"] {
-    @include mixins.wrap();
-
-    padding: 0;
-    margin: 0;
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    scroll-snap-type: x mandatory;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-
-    ::slotted(*) {
-      scroll-snap-align: start;
-      scroll-snap-stop: always;
-    }
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  ::slotted(vaadin-tab:first-of-type) {
-    margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
-
-    @media #{mq.$small} {
-      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-xs));
-      scroll-margin-inline-start: calc(var(--lumo-space-xl) + var(--lumo-space-l));
-    }
-  }
-}
-
-// Override `justify-content: center`.
-// @todo upstream `forward-button` has `right: 0`, but nothing for this. Bug?
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) [part="back-button"] {
-  left: 0;
-}
-
 /**
  * Unify orientations side margins and padding
  */
 $vaadin-tab-horizontal-padding: 0.75rem;
 
-// Reduce spacing between tabs. Vertical is noop, upstream padding already matches our wrap.
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item) {
-  padding-right: $vaadin-tab-horizontal-padding;
-  padding-left: $vaadin-tab-horizontal-padding;
-}
-
-// Match container wrap.
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item:first-child) {
-  padding-left: 0;
-}
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item:last-child) {
-  padding-right: 0;
-}
-
-/**
- * User configurable menu item display for [non-]wide states.
- */
-/* stylelint-disable-next-line selector-class-pattern */
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item-not-wide) {
-  display: none;
-}
-
-/* stylelint-disable-next-line selector-class-pattern */
-:host([orientation="vertical"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item-wide) {
-  display: none;
-}
-
-// Split navigation pattern.
-:host([orientation="horizontal"][theme~="cxl-marketing-nav"]) ::slotted(.menu-item-split-nav) {
-  margin-left: auto;
-}
-
-// Search menu item.
-:host([theme~="cxl-marketing-nav"]#menu-shadow-items) ::slotted(.menu-item-search) {
-  margin-right: auto;
-  margin-left: auto;
-}
-
 // Dashboard notifications
 :host([theme~="cxl-dashboard-notification"]) [part="tabs"] {
   margin: 0;