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 4f37d85c5ed2620e9207fc7fd6d2a7829012c405..1bf43fbfd5ec278e2f06f7ab1241116ca05ff57c 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 8765b635f3b6c732a8b00110968b66318bc112e9..ba583d5651d5cdd6c42f31b753987d324d4c7d15 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 644f0d10ce108a13976bb3282e7e2ffdf1ae9723..14d4e70f39b296e4554f706677abb245e73560f2 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;