diff --git a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss index e2e51ea473af5d94c3774e3c4ca3e81c9708c987..ff3c95e094b175f8d5c3faca17b0ec54c3d73dd3 100644 --- a/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss +++ b/src/components/hy-main-content-wrapper/hy-main-content-wrapper.scss @@ -17,7 +17,7 @@ padding: 0 2rem; } - // Large desktop Layout >1441px + // Large desktop Layout >1600px @include breakpoint($xlarge) { max-width: 1216px; padding: 0; @@ -38,9 +38,9 @@ padding: 0 2rem; } - // Large desktop Layout >1441px + // Large desktop Layout >1200px @include breakpoint($extrawide) { - max-width: 1440px; + max-width: 1216px; padding: 0; } } diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss index 0bd5d48a43a7e2cddf3cf8a220953b97712301cb..2fb1abc89b30c41bbdaaca472cd91b672208d0ce 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss @@ -19,14 +19,20 @@ padding: 0; width: 100%; + li { + //width: min-content; + //min-width: min-content; + //max-width: max-content; + //width: 100%; + } + // First level menu items .desktop-menu-link { background-color: transparent; - //border: none; + border: none; color: var(--brand-main-nearly-black); cursor: pointer; font-family: var(--main-font-family); - border: 1px solid red; @include breakpoint($extrawide) { @include font-size(14px, 14px); @@ -65,7 +71,10 @@ } &__label { - border: 1px solid blue; + width: min-content; + @include breakpoint($xlarge) { + width: 100%; + } } hy-icon { @@ -115,7 +124,7 @@ &--is-active { background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%); - box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.2); + box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset; display: flex; flex-direction: row; opacity: 1; @@ -151,6 +160,7 @@ &__desktop-menu { display: flex; margin-bottom: -8px; + margin-top: 6px; &__menu-items { //@todo check max-with in Specs @@ -291,7 +301,7 @@ left: 0; // override in js list-style: none; min-width: 350px; - margin: 0 4px; + margin: 6px 4px 0 4px; max-width: 400px; padding: 0 48px; top: 0; diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx index 657a118d9f33cee01de7c20b23038ffaf15ffa08..2eecceed992a50800d7d551063132b2429244151 100644 --- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx +++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx @@ -50,6 +50,22 @@ export class HyDesktopMenuLinks { this.dataDesktopLinksWatcher(this.dataDesktopLinks); } + /* + @Listen('resize', {target: 'window'}) + resizeEventListener(event) { + if (!event) return; + + const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0]; + if (breadcrumbsElement) { + if (breadcrumbsWidth + 64 >= document.body.scrollWidth) { + this.adjustBreadcrumbsMenuVisibility(true); + } else { + this.adjustBreadcrumbsMenuVisibility(false); + } + } + } + */ + showBackdropShadow(state = 'close', top = 0) { let hyHeader = this.el.closest('.hy-site-header') as HTMLElement; let hyBackdropDiv = hyHeader.children[0] as HTMLElement;