From f34e06c45286d19c7ee591874941b8a2b435a96c Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 18 Jan 2021 14:27:57 +0200
Subject: [PATCH] menu lang styles
---
.../menu-language-item.scss | 33 ++++++--------
.../menu-language/menu-language.scss | 45 ++-----------------
.../menu-language/menu-language.tsx | 7 +++
3 files changed, 24 insertions(+), 61 deletions(-)
diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index 4f37d85c..1bf43fbf 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -15,25 +15,23 @@ a {
text-transform: uppercase;
@include breakpoint($wide) {
- @include font-size(15px, 20px);
+ @include font-size(14px, 20px);
+ @include font-weight($semibold);
color: var(--brand-main-light);
font-weight: 700;
- padding: 0 40px 32px;
+ letter-spacing: -0.5px;
+ padding: 8px 12px;
+ text-transform: none;
&:hover {
background-color: var(--grayscale-background-box);
color: var(--brand-main);
}
}
- @include breakpoint($extrawide) {
- @include font-size(15px, 20px);
- color: var(--brand-main-light);
- font-weight: 700;
- padding: 0 32px 22px;
- }
@include breakpoint($xlarge) {
- @include font-size(18px, 22px);
- padding: 0 40px 32px;
+ @include font-size(16px, 20px);
+ letter-spacing: -0.53px;
+ padding: 12px 12px;
}
&:focus {
@@ -42,21 +40,16 @@ a {
}
&.is-active {
+ @include breakpoint($wide) {
+ border: 2px solid var(--grayscale-black);
+ }
+
.hy-menu-language-item__label {
color: var(--grayscale-black);
font-weight: 700;
border-bottom: 2px solid var(--additional-orange);
-
@include breakpoint($wide) {
- border-bottom: 3px solid var(--grayscale-black);
- padding-bottom: 6px;
- }
- @include breakpoint($extrawide) {
- border-bottom: 3px solid var(--grayscale-black);
- padding-bottom: 6px;
- }
- @include breakpoint($xlarge) {
- padding-bottom: 8px;
+ border: none;
}
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 8765b635..ba583d56 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -30,8 +30,6 @@
width: 100%;
position: absolute;
bottom: 0;
- //bottom: -24px;
- //left: 0;
}
}
}
@@ -75,21 +73,6 @@
.menu--language__toggle__caret {
transform: rotate(180deg);
}
- //background-color: var(--grayscale-background-box);
- @include breakpoint($wide) {
- //margin-bottom: -28px;
- //margin-top: -26px;
- //padding: 26px 8px 28px;
- }
- @include breakpoint($extrawide) {
- //margin-bottom: -38px;
- //margin-top: -26px;
- //padding: 26px 8px 38px;
- }
- @include breakpoint($xlarge) {
- //margin-bottom: -50px;
- //padding: 26px 12px 50px;
- }
}
> * {
@@ -121,17 +104,15 @@
z-index: 100;
@include breakpoint($wide) {
- //@todo check side paddings
- left: -32px;
- padding: 32px 0 0;
+ left: -20px;
+ min-width: 160px;
+ padding: 6px 8px;
}
@include breakpoint($xlarge) {
- left: -40px;
- padding: 40px 0 0;
+ padding: 8px;
}
a {
- //@todo check fonts
@include font-size(16px, 20px);
margin-left: 0;
}
@@ -152,21 +133,3 @@
width: 16px;
}
}
-
-/*
-.hy-menu-backdrop {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- visibility: hidden;
-
- &.is-active {
- background-color: rgba(0, 0, 0, 0.4);
- transition: background-color 300ms;
- visibility: visible;
- z-index: 99;
- }
-}
-*/
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 644f0d10..14d4e70f 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -32,6 +32,13 @@ export class MenuLanguage {
this._labels = typeof data === 'string' ? JSON.parse(data) : data;
}
+ @Listen('click', {target: 'window'})
+ handleOutsideMenuClick(event) {
+ // Close the language menu if user clicks anywhere outside the Menu language component.
+ this.isMenuOpen = false;
+ event.stopPropagation();
+ }
+
@Listen('click')
handleComponentClick(event) {
this.isMenuOpen = !this.isMenuOpen;
--
GitLab