From 2c400a703b5a9a73611698a65b095c7f21d03173 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Sun, 1 Nov 2020 22:47:53 +0200
Subject: [PATCH] menu language styles
---
.../menu-language-item.scss | 48 +++++++++++++++----
.../menu-language/menu-language.scss | 26 ++++++++++
.../menu-language/menu-language.tsx | 3 +-
src/components/navigation/menu/menu.scss | 2 +-
src/components/site-header/site-header.tsx | 2 +-
5 files changed, 70 insertions(+), 11 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 c380d25f..06f5c9e0 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -14,6 +14,28 @@ a {
text-decoration: none;
text-transform: uppercase;
+ @include breakpoint($wide) {
+ @include font-size(15px, 20px);
+ color: var(--brand-main-light);
+ font-weight: 700;
+ padding: 0 40px 32px;
+
+ &: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($overwide) {
+ @include font-size(18px, 22px);
+ padding: 0 40px 32px;
+ }
+
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: 2px;
@@ -21,17 +43,27 @@ a {
&.is-active {
.hy-menu-language-item__label {
- border-bottom-color: var(--additional-orange);
+ 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($overwide) {
+ padding-bottom: 8px;
+ }
}
}
&:not(.is-mobile) {
- @include font-size(16px, 20px);
- margin: 0 0 5px;
- }
-
- .hy-menu-language-item__label {
- border-bottom: 2px solid transparent;
- padding-bottom: 5px;
+ //@include font-size(16px, 20px);
+ margin: 0;
+ // margin: 0 0 5px;
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 46563382..fe8ead0f 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -46,6 +46,21 @@
.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($overwide) {
+ margin-bottom: -50px;
+ padding: 26px 12px 50px;
+ }
}
> * {
@@ -71,6 +86,17 @@
top: 40px;
visibility: hidden;
+ @include breakpoint($wide) {
+ padding: 32px 0 0;
+ top: 70px;
+ }
+ @include breakpoint($extrawide) {
+ top: 80px;
+ }
+ @include breakpoint($overwide) {
+ top: 90px;
+ }
+
&.is-open {
visibility: visible;
z-index: 100;
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 52c6fd7f..ca837147 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -43,6 +43,7 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
+ const menuLanguageContainerClass = ['menu--language'].join(' ');
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -60,7 +61,7 @@ export class MenuLanguage {
})}
</Host>
) : (
- <Host class={'menu--language'}>
+ <Host class={menuLanguageContainerClass}>
<button
onClick={() => this.languageMenuToggle()}
class={{
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 0138078e..b84677bd 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -120,7 +120,7 @@
min-height: 35px;
}
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
.menu--language {
display: none;
visibility: hidden;
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 53542c52..68fbb869 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -90,7 +90,7 @@ export class SiteHeader {
applySizeClasses(size: number) {
// Set the menu-type based on the width of the browser.
- if (size < 1200 && size > 960) {
+ if (size <= 1200 && size > 960) {
this.menuType = MenuType.tablet;
} else if (size <= 960) {
this.menuType = MenuType.mobile;
--
GitLab