diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 7eeea7e01b529044e7e2715d10d919f69824a346..3b62026bd8f9aa03a40bd24d2838ac816fe6d7bb 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -284,6 +284,7 @@ h1 {
@include breakpoint($extrawide) {
// > 1200px
+ //@todo Check the size. SHould be 46 till 1600, and after 1600px it should be 52px;
@include font-size(52px, 64px);
letter-spacing: -1.6px;
}
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 d1ed898b2e3c17fd8497bba7c2c6d09f0baf72f1..0bd5d48a43a7e2cddf3cf8a220953b97712301cb 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
@@ -12,6 +12,7 @@
&__menu-desktop-container {
align-items: center;
display: flex;
+ flex-direction: row;
flex-flow: row;
list-style: none;
margin: 0;
@@ -21,10 +22,11 @@
// 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);
@@ -34,10 +36,12 @@
border-top: 0 none;
display: flex;
flex-direction: row;
+ //flex-flow: wrap;
justify-content: center;
letter-spacing: -0.6px;
//padding: 10px 8px;
padding: 0 7px;
+ position: relative;
text-transform: uppercase;
}
@@ -60,22 +64,25 @@
}
}
- hy-icon {
- //justify-content: center;
- svg {
- height: 5.63px;
- width: 8px;
- //height: 7.03px;
- // width: 10px;
- }
+ &__label {
+ border: 1px solid blue;
}
- &__heading__icon {
- display: inline-block;
+ hy-icon {
+ display: inline-block !important;
padding-left: 3px;
@include breakpoint($xlarge) {
padding-left: 4px;
}
+
+ svg {
+ height: 5.63px;
+ width: 8px;
+ @include breakpoint($xlarge) {
+ height: 7.03px;
+ width: 10px;
+ }
+ }
}
// On hover: change background and show heading icon.
@@ -107,14 +114,14 @@
display: none;
&--is-active {
- background-color: var(--grayscale-white);
+ 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);
display: flex;
flex-direction: row;
opacity: 1;
position: absolute;
left: 0;
padding-left: 300px;
- padding-bottom: 28px;
width: 100%;
z-index: 510;
}
@@ -143,7 +150,7 @@
&__desktop-menu {
display: flex;
- //position: relative;
+ margin-bottom: -8px;
&__menu-items {
//@todo check max-with in Specs
@@ -165,7 +172,8 @@
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
- background-color: var(--grayscale-background-box);
+ //background-color: var(--grayscale-background-box);
+ background-color: var(--grayscale-white);
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
@@ -173,7 +181,7 @@
position: relative;
text-transform: none;
}
- @include breakpoint($fullhd) {
+ @include breakpoint($xlarge) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
@@ -185,20 +193,25 @@
margin-left: 14px;
}
.description {
- @include font-size(16px, 24px);
- @include font-weight($semibold);
+ @include font-size(14px, 18px);
+ @include font-weight($regular);
color: var(--grayscale-dark);
- letter-spacing: 0;
+ letter-spacing: -0.2;
margin-left: 14px;
- margin-bottom: 28px;
- margin-top: 8px;
+ margin-bottom: 20px;
+ margin-top: 4px;
+
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.25;
+ }
}
span.heading-icon {
position: absolute;
top: 12px;
left: -6px;
- @include breakpoint($fullhd) {
+ @include breakpoint($xlarge) {
top: 27px;
}
svg {
@@ -211,7 +224,8 @@
// menu item links
&__second-level-menu {
- background-color: var(--grayscale-background-box);
+ //background-color: var(--grayscale-background-box);
+ background-color: var(--grayscale-white);
list-style: none;
margin: 0;
padding: 0;
@@ -228,18 +242,18 @@
width: 100%;
@include breakpoint($extrawide) {
- @include font-size(15px, 22px);
+ @include font-size(14px, 18px);
align-items: center;
flex-direction: row;
- letter-spacing: -0.47px;
+ letter-spacing: -0.5px;
padding-left: 24px;
padding-right: 48px;
text-transform: none;
}
- @include breakpoint($fullhd) {
- @include font-size(18px, 22px);
- letter-spacing: -0.56px;
+ @include breakpoint($xlarge) {
+ @include font-size(16px, 18px);
+ letter-spacing: -0.5px;
}
&:focus {
@@ -272,12 +286,13 @@
// Shortcuts
.shortcuts-panel {
+ background-color: var(--grayscale-white);
position: absolute;
left: 0; // override in js
list-style: none;
min-width: 350px;
+ margin: 0 4px;
max-width: 400px;
- //margin: 0 48px;
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 2851fc66950041d56d1c4df650f7a83ba83d8ae6..657a118d9f33cee01de7c20b23038ffaf15ffa08 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
@@ -39,7 +39,7 @@ export class HyDesktopMenuLinks {
@State() isDesktopMenuOpen: boolean = false;
private _submenuLeftMargin: number = 32;
- private _headerBorderOffset: number = 8;
+ private _headerBorderOffset: number = 0;
@Watch('dataDesktopLinks')
dataDesktopLinksWatcher(data: DesktopLinks[] | string) {
@@ -68,6 +68,7 @@ export class HyDesktopMenuLinks {
}
handleDesktopMenuClose() {
+ /*
this.isDesktopMenuOpen = false;
this.showBackdropShadow();
@@ -87,6 +88,7 @@ export class HyDesktopMenuLinks {
item.classList.remove('hy-desktop-menu-panel--is-active');
item.setAttribute('aria-hidden', 'true');
});
+ */
}
handleDesktopMenuToggle(id) {
@@ -224,7 +226,7 @@ export class HyDesktopMenuLinks {
onFocus={() => this.handleDesktopMenuToggle(id)}
aria-expanded="false"
>
- {label}
+ <span class="desktop-menu-link__label">{label}</span>
<hy-icon icon={'hy-icon-caret-down'} size={32} />
</button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()} aria-hidden="true">
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index ec97df50aba057e899c1ca2ed33410f2e6379b02..7f4314ec367e3ed40fa419049886092068123490 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -30,7 +30,8 @@
.hy-site-header__logo-container & {
@include breakpoint($narrow) {
- max-width: none;
+ min-width: min-content;
+ max-width: max-content;
}
}