From 451a55e7e8ca902ee578eb9770a8eac84fd94d38 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Thu, 12 Nov 2020 11:34:23 +0200
Subject: [PATCH] Update mobile menu items appearance and spacings
---
.../navigation/menu-item/menu-item.scss | 64 ++++++++++---------
src/components/navigation/menu/menu.scss | 4 +-
2 files changed, 38 insertions(+), 30 deletions(-)
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 830797c2..fcbda807 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -1,13 +1,19 @@
// Mobile.
:host(.hy-menu-item--mobile) {
- background-color: var(--grayscale-white);
- border-top: 1px dashed var(--grayscale-medium-dark);
- display: flex;
--menu-item-display: flex;
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+ display: flex;
+ margin-left: 12px;
+ margin-right: 12px;
+ margin: 0 12px 5px;
+
+ @include breakpoint($narrow) {
+ margin: 0 28px 6px;
+ }
}
:host(.hy-menu-item--mobile:first-of-type) {
- border-top: 3px solid var(--brand-main-nearly-black);
+ // border-top: 3px solid var(--brand-main-light);
}
:host(.hy-menu-item--mobile.hy-menu-item--alternative) {
@@ -110,18 +116,24 @@ a {
outline-offset: -2px;
}
- &.is-active,
- &.in-active-trail {
- .hy-menu-item__label {
- border-bottom: 2px solid var(--additional-orange);
- padding-bottom: 5px;
- }
- }
+ &.hy-menu-item--mobile {
+ color: var(--brand-main-light);
+ padding: 12px 0 12px 20px;
- &.is-active,
- &.is-heading {
- .hy-menu-item__label {
- @include font-weight($bold);
+ &.is-active,
+ &.in-active-trail {
+ color: var(--grayscale-black);
+ position: relative;
+
+ &:before {
+ border-left: 3px solid var(--grayscale-black);
+ content: '';
+ height: 75%;
+ left: 10px;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
}
}
@@ -261,23 +273,17 @@ a {
.hy-menu-item__button {
align-items: center;
background: transparent;
- border: 0 none;
+ border-bottom: 0;
+ border-left: 1px dashed var(--brand-main-light);
+ border-right: 0;
+ border-top: 0;
cursor: pointer;
display: var(--menu-item-display);
justify-content: center;
- width: 70px;
-
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: 2px;
- }
+ padding: 0;
+ width: 50px;
- &::before {
- border-left: 1px dashed var(--brand-main-nearly-black);
- content: '';
- display: block;
- height: 16px;
- margin-right: 16px;
- width: 1px;
+ svg {
+ fill: var(--brand-main-light);
}
}
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index bd65244d..f52702ed 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -35,11 +35,13 @@
.hy-menu {
&--mobile {
+ -webkit-overflow-scrolling: touch;
flex-flow: column;
min-height: calc(100vh - 60px);
- -webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: visible;
+ padding-left: 12px;
+ padding-right: 12px;
transform: translateX(100%);
transition: 0.45s;
width: 100%;
--
GitLab