From e25e7814349c4a13ed66d171c71414d0651a206c Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Thu, 19 Nov 2020 21:01:47 +0200
Subject: [PATCH] desktop menu first level, description
---
.../hy-desktop-menu-links.scss | 13 +++++++++++++
.../hy-desktop-menu-links/hy-desktop-menu-links.tsx | 2 ++
2 files changed, 15 insertions(+)
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 7321fd04..2113b48f 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
@@ -90,6 +90,7 @@
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
+ flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@@ -111,7 +112,9 @@
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
+ align-items: flex-start;
background-color: var(--grayscale-background-box);
+ flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
@@ -131,6 +134,14 @@
border: none;
margin-left: 14px;
}
+ .hy-menu-item__description {
+ @include font-size(16px, 24px);
+ @include font-weight($semibold);
+ color: var(--grayscale-dark);
+ letter-spacing: 0;
+ margin-left: 14px;
+ margin-bottom: 28px;
+ }
span.heading-icon-first {
position: absolute;
@@ -154,6 +165,8 @@
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
+ align-items: center;
+ flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
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 fa226114..dfbdf861 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
@@ -1,6 +1,7 @@
export interface DesktopLinks {
label: string;
url: string;
+ description: string;
menuLinkId: string;
items: Array<DesktopLinks>;
}
@@ -122,6 +123,7 @@ export class HyDesktopMenuLinks {
<hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span>
<span class="hy-menu-item__label">{link.label}</span>
+ <span class="hy-menu-item__description">{link.description}</span>
</a>
{link.items && (
<ul class="second" menu-link-id={link.menuLinkId}>
--
GitLab