From aa5bf2953c43d48e7bbdaf54298631c46c9accbd Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Fri, 20 Nov 2020 16:18:56 +0200
Subject: [PATCH] shortcut styles
---
.../hy-desktop-menu-links.scss | 40 +++++++++++++++++++
.../hy-desktop-menu-links.tsx | 14 +++++--
2 files changed, 51 insertions(+), 3 deletions(-)
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 8a6ace35..0ffa09cf 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
@@ -225,4 +225,44 @@
right: 10px;
top: 10px;
}
+
+ .shortcuts-panel {
+ &__title {
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
+ //border-bottom: 1px solid var(--grayscale-medium-dark);
+ color: var(--grayscale-black);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.56px;
+ margin-bottom: 18px;
+ text-transform: uppercase;
+ }
+ &__shortcut-item {
+ border-bottom: 1px solid var(--grayscale-medium-dark);
+ &__first {
+ border-top: 1px solid var(--grayscale-medium-dark);
+ }
+
+ a {
+ @include font-size(16px, 22px);
+ @include font-weight($semibold);
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.5px;
+ padding: 19px 0;
+ text-decoration: none;
+ }
+
+ span.shortcut-item__icon {
+ position: absolute;
+ right: 0;
+
+ svg {
+ padding: 4px;
+ }
+ }
+ }
+ }
}
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 41e9340b..a5894b12 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
@@ -144,6 +144,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}>
@@ -170,11 +171,15 @@ export class HyDesktopMenuLinks {
</ul>
{link.shortcuts.length > 0 && (
<div class="shortcuts-panel">
- <span class="shortcut-panel__title">{'Shortcuts'}</span>
- {link.shortcuts.map((shortcut_item) => {
+ <div class="shortcuts-panel__title">{'Shortcuts'}</div>
+ {link.shortcuts.map((shortcut_item, index) => {
let target = shortcut_item.shortcut_is_external ? '_blank' : '_self';
+ let shortcutClass = [
+ 'shortcuts-panel__shortcut-item',
+ index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
+ ].join(' ');
return (
- <div class="shortcut-item">
+ <div class={shortcutClass}>
<a
aria-current={shortcut_item.shortcut_aria_label}
href={shortcut_item.shortcut_url}
@@ -183,6 +188,9 @@ export class HyDesktopMenuLinks {
aria-label={shortcut_item.shortcut_aria_label}
>
<span class="shortcut-item__label">{shortcut_item.shortcut_title}</span>
+ <span class="shortcut-item__icon">
+ <hy-icon icon={'hy-icon-arrow-right'} size={24} />
+ </span>
</a>
</div>
);
--
GitLab