From 6d3a8a485f80309f1c157875bcc013638fc9bfb2 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Thu, 12 Nov 2020 08:55:20 +0200
Subject: [PATCH] Update mobile menu header styling and spacings
---
.../navigation/menu-language/menu-language.scss | 6 +++++-
src/components/navigation/menu/menu.scss | 7 +++++--
src/components/site-header/site-header.scss | 14 ++++++++------
3 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index f41bf241..ecbed96f 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -3,8 +3,12 @@
display: flex;
flex-flow: row;
position: absolute;
- right: 0;
+ right: 16px;
top: 0;
+
+ @include breakpoint($narrow) {
+ right: 28px;
+ }
}
:host(.menu--language:not([is-mobile])) {
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index b84677bd..bd65244d 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -11,7 +11,6 @@
flex-flow: column;
justify-items: stretch;
left: 0;
- padding: 20px 32px 0;
position: absolute;
right: 0;
top: 0;
@@ -73,7 +72,11 @@
&__logo-container {
display: inline-block;
- margin: 5px 0 20px;
+ padding: 16px;
+
+ @include breakpoint($narrow) {
+ padding: 16px 28px;
+ }
}
&--sidenav {
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 1088f59d..7c43f230 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -32,7 +32,7 @@
margin: 16px 8px;
@include breakpoint($narrow) {
- margin: 16px 16px 16px 24px;
+ margin: 16px 16px 16px 28px;
}
@include breakpoint($wide) {
@@ -82,17 +82,19 @@
padding: 15px 16px 15px 12px;
@include breakpoint($narrow) {
- padding: 15px 32px 15px 10px;
+ padding: 15px 28px 15px 10px;
}
&.is-open {
- margin: 10px;
- padding: 10px;
position: absolute;
right: 0;
- //top: 10px;
- top: 17px;
+ top: 32px;
+ transform: translateY(-50%);
z-index: 101;
+
+ @include breakpoint($narrow) {
+ top: 40px;
+ }
}
&__label {
--
GitLab