From 770ea6ae2220c555a4791b69aca2a2dba70785a4 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Wed, 18 Nov 2020 00:51:02 +0200
Subject: [PATCH] top menu, styles
---
.../navigation/menu-item/menu-item.scss | 76 +++++++++++++++----
.../navigation/menu-item/menu-item.tsx | 4 +-
.../menu-level-container.tsx | 3 +-
.../hy-desktop-menu-links.scss | 38 +++++++---
.../hy-desktop-menu-links.tsx | 11 +--
.../hy-desktop-menu-panel.tsx | 9 +++
6 files changed, 104 insertions(+), 37 deletions(-)
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 1545d46f..9eb74567 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -2,6 +2,7 @@
display: block;
visibility: visible;
}
+
:host(.hy-menu-item--desktop:not(.hy-menu-item--is-active)) {
display: none;
visibility: hidden;
@@ -49,29 +50,74 @@
:host(.hy-menu-item--desktop[depth='1']) {
a {
- @include font-size(18px, 18px); //@todo check font size
- border: 1px solid orange;
- background-color: var(--grayscale-background-box);
- margin-bottom: 8px; //@todo check margin
- padding-left: 32px;
- padding-right: 32px;
- text-transform: none;
+ @include breakpoint($extrawide) {
+ @include font-size(24px, 32px);
+ background-color: var(--grayscale-background-box);
+ letter-spacing: -0.75px;
+ margin-bottom: 4px;
+ padding-left: 32px;
+ padding-right: 32px;
+ padding-top: 5px;
+ position: relative;
+ text-transform: none;
+ }
+ @include breakpoint($fullhd) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.81px;
+ margin-bottom: 6px;
+ padding-top: 19px;
+ }
.hy-menu-item__label {
border: none;
+ margin-left: 14px;
+ }
+
+ span.hy-menu-item__heading__icon {
+ position: absolute;
+ top: 12px;
+ left: -6px;
+
+ @include breakpoint($fullhd) {
+ top: 27px;
+ }
+
+ svg {
+ background-color: var(--brand-main-light);
+ fill: var(--grayscale-white);
+ padding: 8px;
+ }
}
- }
- a:before {
}
}
:host(.hy-menu-item--desktop[depth='2']) {
a {
- @include font-size(14px, 14px); //@todo check font size
- padding-left: 32px;
- padding-right: 32px;
- text-transform: none;
- }
- a:before {
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 22px);
+ letter-spacing: -0.47px;
+ padding-left: 24px;
+ padding-right: 24px;
+ text-transform: none;
+ }
+
+ @include breakpoint($fullhd) {
+ @include font-size(18px, 22px);
+ letter-spacing: -0.56px;
+ }
+
+ .hy-menu-item__label {
+ border: none;
+ margin-left: 12px;
+ }
+
+ span.hy-menu-item__heading__icon {
+ svg {
+ fill: var(--brand-main-light);
+ @include breakpoint($extrawide) {
+ padding: 1px 0;
+ }
+ }
+ }
}
}
diff --git a/src/components/navigation/menu-item/menu-item.tsx b/src/components/navigation/menu-item/menu-item.tsx
index da5b2dbb..50cf3dae 100644
--- a/src/components/navigation/menu-item/menu-item.tsx
+++ b/src/components/navigation/menu-item/menu-item.tsx
@@ -167,12 +167,12 @@ export class MenuItem {
>
{this.depth == 1 && (
<span class="hy-menu-item__heading__icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={20} />
+ <hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
)}
{this.depth == 2 && (
<span class="hy-menu-item__heading__icon">
- <hy-icon icon={'hy-icon-caret-right'} size={10} />
+ <hy-icon icon={'hy-icon-caret-right'} size={12} />
</span>
)}
<span class={'hy-menu-item__label'}>{this.label}</span>
diff --git a/src/components/navigation/menu-level-container/menu-level-container.tsx b/src/components/navigation/menu-level-container/menu-level-container.tsx
index 3c339e3a..ec25ffff 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -127,10 +127,9 @@ export class MenuLevelContainer {
switch (this.menuType) {
case MenuType.desktop:
classAttributes = [...classAttributes, 'hy-menu-level-container--desktop'];
- //menu-type="sidenav"
return (
- <Host class={classAttributes.join(' ')} menu-type="desktop">
+ <Host class={classAttributes.join(' ')}>
<slot />
</Host>
);
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 8877644e..ecb1cabc 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
@@ -14,27 +14,45 @@
cursor: pointer;
font-family: var(--main-font-family);
- @include breakpoint($medium) {
- @include font-size(14px, 14px);
- @include font-weight($bold);
- border-top: 0 none;
- padding: 10px 15px;
- text-transform: uppercase;
- }
-
@include breakpoint($extrawide) {
@include font-size(15px, 16px);
+ @include font-weight($bold);
+
+ border-top: 0 none;
padding: 10px 8px;
+ text-transform: uppercase;
}
- @include breakpoint($overwide) {
+ @include breakpoint($fullhd) {
@include font-size(18px, 16px);
+ letter-spacing: -0.5px;
padding: 10px;
}
+ &__heading__icon {
+ display: none;
+ }
+
&--is-active {
background-color: var(--grayscale-background-box);
- padding: 52px 10px;
+ padding: 35px 10px;
+ position: relative;
+
+ .desktop-menu-link__heading__icon {
+ bottom: 14px;
+ display: block;
+ left: 0;
+ position: absolute;
+ width: 100%;
+
+ hy-icon {
+ justify-content: center;
+ transform: rotateX(180deg);
+ svg {
+ padding: 4px 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 3dd11eae..a3861267 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
@@ -61,6 +61,7 @@ export class HyDesktopMenuLinks {
event.stopPropagation();
}
+ //Show desktop menu panel
handleMenuDesktopHover(id) {
let desktopMenuItems = this.el.shadowRoot.querySelectorAll('.desktop-menu-link');
desktopMenuItems.forEach((item) => {
@@ -79,16 +80,11 @@ export class HyDesktopMenuLinks {
//@todo show proper subtree on panel based on given menu-link-id
// Hide all menu-item that have other menu-link-id attribute value.
- let menuItems = document.querySelectorAll('hy-site-header hy-menu-item[depth="1"]');
+ let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('hy-menu-item--is-active');
});
- let menuItemsLevel2 = document.querySelectorAll('hy-site-header hy-menu-item[depth="2"]');
- menuItemsLevel2.forEach((item) => {
- (item as HTMLElement).classList.remove('hy-menu-item--is-active');
- });
-
let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
(menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
@@ -112,7 +108,6 @@ export class HyDesktopMenuLinks {
let firstLevelLinksList = [];
for (let i = 0; i < links.length; i++) {
- //let className = 'desktop-menu-link-' + links[i].menuLinkId;
let className = 'desktop-menu-link';
firstLevelLinksList.push(
<div
@@ -122,7 +117,7 @@ export class HyDesktopMenuLinks {
>
{links[i].label}
<span class="desktop-menu-link__heading__icon">
- <hy-icon icon={'hy-icon-caret-right'} size={10} />
+ <hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
</div>
);
diff --git a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
index 0e99bfc8..ff73abc1 100644
--- a/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
+++ b/src/components/site-header/hy-desktop-menu-panel/hy-desktop-menu-panel.tsx
@@ -22,6 +22,15 @@ export class HyDesktopMenuPanel {
if (hyDesktopPanel) {
//hide panel, remove class is-active
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
+
+ let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
+ if (parentMenu) {
+ const items = Array.from(parentMenu);
+ items.forEach((item) => {
+ item.classList.add('hy-menu-level-container--mobile');
+ item.classList.remove('hy-menu-level-container--desktop');
+ });
+ }
}
}
--
GitLab