Skip to content

Commit

Permalink
Merge pull request #341 from conversionxl/raphael/feat/navigation/upd…
Browse files Browse the repository at this point in the history
…ate-component
  • Loading branch information
pawelkmpt authored Dec 15, 2023
2 parents dbf0501 + c1784bb commit 72e94f0
Show file tree
Hide file tree
Showing 24 changed files with 1,203 additions and 1,266 deletions.
2 changes: 1 addition & 1 deletion packages/cxl-lumo-styles/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@conversionxl/cxl-lumo-styles",
"version": "1.15.0",
"version": "1.15.1",
"author": "CXL <[email protected]>",
"license": "SEE LICENSE IN LICENSE.md",
"main": "src/index.js",
Expand Down
78 changes: 59 additions & 19 deletions packages/cxl-lumo-styles/scss/themes/vaadin-context-menu-item.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
@use "../mq";

: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"].vaadin-menu-item.has-link) {
cursor: pointer !important;
}

:host([theme~="cxl-marketing-nav"].section-header) {
font-weight: 600;
color: var(--lumo-body-text-color);
Expand All @@ -23,25 +36,6 @@
}
}

: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-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
display: none;
}
}

:host([theme~="cxl-marketing-nav"]) [part="checkmark"][aria-hidden="true"] {
display: none;
}

::slotted(a) {
// Increase link click surface.
display: block;
Expand All @@ -53,3 +47,49 @@
::slotted(a:hover) {
color: var(--lumo-primary-color) !important; /* stylelint-disable-line declaration-no-important */
}

:host {
::slotted(.vaadin-context-menu-item--description) {
margin-top: var(--lumo-space-s);
font-family: var(--lumo-font-family);
font-size: var(--lumo-font-size-s);
font-weight: 400;
color: var(--lumo-secondary-text-color);
}

::slotted(.vaadin-context-menu-item--label) {
margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
}

[part="checkmark"] {
display: none !important;

&::before {
content: unset !important;
}
}
}

:host(.vaadin-context-menu-parent-item) {

::slotted(.vaadin-context-menu-item--dropdown-icon) {
visibility: hidden;
}

&::after {
margin-right: unset !important;
}
}

@media (min-width: 568px) and (min-height: 568px) {
:host([theme~="cxl-marketing-nav"].vaadin-menu-item.back-button-menu-item) {
display: none;
}

/* Mobile layout loses cxl-marketing-nav theme, so we need to match theme="menu-bar-item" */
:host([theme~="menu-bar-item"]) {
::slotted(.vaadin-context-menu-item--icon) {
display: none;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,41 @@
}

:host([theme~="cxl-marketing-nav"].vaadin-menu-list-box) {
padding: var(--lumo-space-m) 0;

@media (min-width: 568px) {
padding: 0;
}

[part="items"] ::slotted(.vaadin-menu-item) {
padding-right: var(--lumo-space-m);
padding-left: var(--lumo-space-m);
}

[part="items"] ::slotted(.section-header.vaadin-menu-item:not(.section-header):hover:not([disabled])) {
[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 */
background-color: revert-layer;
}

[part='items'] ::slotted(.vaadin-menu-item.section-header:hover) {
[part="items"] ::slotted(.vaadin-menu-item.section-header:hover) {
background-color: unset;
}

}

@media screen and (min-width: 768px) and (min-height: 768px) {
:host([theme~="cxl-marketing-nav"]) {
display: block;
width: var(--cxl-vaadin-context-menu-item-max-width);
padding: 0 var(--lumo-space-s);
:host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
border-radius: 0;

&::part(checkmark) ::before {
content: unset;
}
}

:host([theme~="cxl-marketing-nav"]) [part="items"] ::slotted(.vaadin-menu-item) {
border-radius: 0;
@media (max-width: 568px) {
:host([theme~="cxl-marketing-nav"]) [part="items"] {

::slotted(.global-menu-item) {
background-color: var(--cxl-color-light-gray);
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@

@keyframes cxl-lumo-mobile-menu-overlay-enter {
0% {
transform: translateX(150%);
}
}

@keyframes cxl-lumo-mobile-menu-overlay-exit {
100% {
transform: translateX(150%);
}
}

@media (max-width: 568px), (max-height: 568px) {

/* Animations */

:host([opening]) [part='overlay'] {
animation: 0.2s cxl-lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

:host([closing]),
:host([closing]) [part='backdrop'] {
animation-delay: 0.14s;
}

:host([closing]) [part='overlay'] {
animation: 0.14s 0.14s cxl-lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}
}
21 changes: 21 additions & 0 deletions packages/cxl-lumo-styles/scss/themes/vaadin-dialog-overlay.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
:host([theme~="cxl-marketing-nav-search"]) {
left: 0;
right: 0;

[part="content"] {
padding: var(--lumo-space-l);
}

@media (min-width: 568px) {
top: calc(2 * var(--cxl-marketing-nav-height));
bottom: unset;

[part="backdrop"] {
opacity: 0;
}

[part="content"] {
padding: var(--lumo-space-l);
}
}
}
31 changes: 31 additions & 0 deletions packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar-button.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
:host {
position: relative;

::after {
content: "";
position: absolute;
bottom: 0;
height: 1;
width: var(--lumo-size-s);
left: 50%;
transform: translateX(-50%) scale(0);
transform-origin: 50% 100%;
opacity: 0;
transition: 0.14s transform cubic-bezier(0.12, 0.32, 0.54, 1);
will-change: transform, opacity;
}
}

:host([active]:not([part="overflow-button"])) {
position: relative;

::after {
content: "";
transform: translateX(-50%) scale(1);
border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0;
border: 1px solid var(--lumo-primary-color);
box-shadow: 0px -1px 3px 0px rgba(214, 31, 44, 0.05);
opacity: 1;
transition: 0.14s opacity ease-in, 0.3s transform cubic-bezier(0.12, 0.32, 0.54, 1,5);
}
}
57 changes: 57 additions & 0 deletions packages/cxl-lumo-styles/scss/themes/vaadin-menu-bar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
:host([theme~="cxl-marketing-nav"]) {

[part="container"] {

.menu-item-split-nav {
/* stylelint-disable-next-line declaration-no-important */
margin-left: auto !important;

~ .menu-item-split-nav {
margin-left: revert !important;
}
}

[part="overflow-button"] {

vaadin-icon {
&.vaadin-menu-bar-button--icon {
display: none;
}
}

@media (max-width: 568px) {
display: block;

::before {
content: none;
}

vaadin-icon {
height: var(--lumo-icon-size-s);

&.vaadin-menu-bar-button--icon {
display: block;

&.close-icon {
display: none;
}
}

svg {
fill: var(--lumo-shade);
}
}

&[expanded] {
vaadin-icon.close-icon {
display: block;
}

vaadin-icon.menu-icon {
display: none;
}
}
}
}
}
}
Loading

0 comments on commit 72e94f0

Please sign in to comment.