diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 2d5db36dff25d659425653bc244cba15b789182a..1ef48a5e47e842c6028a26631b6609b3a2be068c 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -35,36 +35,35 @@
}
.menu--language__toggle {
- @include font-size(14px, 24px);
align-items: center;
- background: var(--grayscale-white);
border: 0 none;
- color: var(--brand-main-nearly-black);
display: flex;
flex-flow: row;
font-family: var(--main-font-family);
- font-weight: 600;
- letter-spacing: -0.4px;
margin: 0 -4px;
padding: 0;
text-transform: uppercase;
- @include breakpoint($extrawide) {
- @include font-size(12px, 12px);
- font-weight: 400;
- letter-spacing: -0.6px;
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: 2px;
}
- @include breakpoint($xlarge) {
- @include font-size(14px, 24px);
- letter-spacing: -0.5px;
+ &.is-open {
+ .menu--language__toggle__caret {
+ transform: rotate(180deg);
+ }
}
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: 2px;
+ > * {
+ padding: 0 4px;
}
+ span {
+ padding: 0;
+ }
+}
+.menu--language__toggle:not(.group) {
&:hover {
color: var(--brand-main);
cursor: pointer;
@@ -76,35 +75,43 @@
}
}
- &.is-group {
- background: var(--grayscale-black);
- border: 0 none;
- color: var(--grayscale-white);
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ background: var(--grayscale-white);
+ color: var(--brand-main-nearly-black);
+ letter-spacing: -0.4px;
+
+ @include breakpoint($extrawide) {
+ @include font-size(12px, 12px);
+ @include font-weight($regular);
+ letter-spacing: -0.6px;
+ }
+
+ @include breakpoint($xlarge) {
+ @include font-size(14px, 24px);
+ letter-spacing: -0.5px;
+ }
+}
- &:hover {
+.menu--language__toggle.group {
+ &:hover {
+ color: var(--grayscale-medium);
+ cursor: pointer;
+ span {
color: var(--grayscale-medium);
- cursor: pointer;
- span {
- color: var(--grayscale-medium);
- }
- svg {
- fill: var(--grayscale-medium);
- }
}
- }
-
- &.is-open {
- .menu--language__toggle__caret {
- transform: rotate(180deg);
+ svg {
+ fill: var(--grayscale-medium);
}
}
- > * {
- padding: 0 4px;
- }
- span {
- padding: 0;
- }
+ background: var(--grayscale-black);
+ //border: 0 none;
+ color: var(--grayscale-white);
+
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ letter-spacing: -0.5px;
}
.menu--language__dropdown {
@@ -143,7 +150,7 @@
}
}
-.menu--language__globe-icon svg {
+.menu--language__globe-icon:not(.group) svg {
@include breakpoint($wide) {
height: 16px;
width: 16px;
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 1acc32546143f410f8c6e0c5d4aa0cff9aa0aaf9..a13f8aab7cc8327b1df2a9e19ac3a36e0b2a7051 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -96,6 +96,7 @@ export class MenuLanguage {
const black = 'var(--brand-main-nearly-black)';
const white = 'var(--grayscale-white)';
const svgColor = this.isGroup ? white : black;
+ const globeIconSize = this.isGroup ? 16 : 14;
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -124,12 +125,17 @@ export class MenuLanguage {
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
- 'is-group': this.isGroup,
+ group: this.isGroup,
}}
aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={svgColor} />
- <span>
+ <hy-icon
+ class={{'menu--language__globe-icon': true, group: this.isGroup}}
+ icon={'hy-icon-globe'}
+ size={globeIconSize}
+ fill={svgColor}
+ />
+ <span class={{group: this.isGroup}}>
{this._dataMenuLanguage.map((item) => {
if (item.isActive) {
return item.langCode;
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 32cfec316845af650760dff6c1e6c759ca3a6dab..a47d29312237e6c51cef9050500d07531169986b 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -310,6 +310,8 @@
}
.hy-link__donate {
+ font-family: var(--main-font-family);
+
@include breakpoint($wide) {
padding: 0;
text-decoration: none;
@@ -325,19 +327,39 @@
}
&__label {
+ font-family: var(--main-font-family);
+ margin-left: 4px;
+ text-decoration: none;
+ }
+}
+
+.hy-link__donate:not(.group) {
+ svg {
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 13.64px;
+ }
+ @include breakpoint($extrawide) {
+ height: 12px;
+ width: 10.23px;
+ }
+ @include breakpoint($xlarge) {
+ height: 16px;
+ width: 13.64px;
+ }
+ }
+
+ .hy-link__donate__label {
@include breakpoint($wide) {
@include font-size(14px, 24px);
+ @include font-weight($semibold);
color: var(--brand-main-nearly-black);
- font-family: var(--main-font-family);
- font-weight: 600;
letter-spacing: -0.5px;
- margin-left: 4px;
- text-decoration: none;
}
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
- font-weight: 400;
+ @include font-weight($regular);
letter-spacing: -0.6px;
}
@@ -345,36 +367,26 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
-
- &.group {
- color: var(--grayscale-white);
- }
}
+}
- svg {
+.hy-link__donate.group {
+ .hy-link__donate__label {
@include breakpoint($wide) {
- height: 16px;
- width: 13.64px;
- }
- @include breakpoint($extrawide) {
- height: 12px;
- width: 10.23px;
- }
- @include breakpoint($xlarge) {
- height: 16px;
- width: 13.64px;
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ color: var(--grayscale-white);
+ letter-spacing: -0.5px;
}
}
- &.group {
- &:hover {
+ &:hover {
+ color: var(--grayscale-medium);
+ span {
color: var(--grayscale-medium);
- span {
- color: var(--grayscale-medium);
- }
- svg {
- fill: var(--grayscale-medium);
- }
+ }
+ svg {
+ fill: var(--grayscale-medium);
}
}
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 3ae837bda5a9926ae972be14fcbe69a016fe6376..cf04fdf4b43d79fb7b07ea3867f4c820d6c68170 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -230,7 +230,7 @@ export class SiteHeader {
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-top">
- <div class={'hy-site-header__logo-container group '}>
+ <div class={'hy-site-header__logo-container group '} role="navigation">
<hy-site-logo
is-group={true}
size={logoSizeGroup}
@@ -251,7 +251,7 @@ export class SiteHeader {
/>
<hy-site-search
class={'menu--secondary__item group'}
- size={14}
+ size={16}
color={logoColorGroup}
is-group={true}
show-label={true}
@@ -262,7 +262,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+ <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
@@ -320,7 +320,7 @@ export class SiteHeader {
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-top">
- <div class={'hy-site-header__logo-container group '}>
+ <div class={'hy-site-header__logo-container group '} role="navigation">
<hy-site-logo
is-group={true}
size={logoSizeGroup}
@@ -341,7 +341,7 @@ export class SiteHeader {
/>
<hy-site-search
class={'menu--secondary__item group'}
- size={14}
+ size={16}
color={logoColorGroup}
show-label={true}
is-group={true}
@@ -352,7 +352,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+ <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 8487920123a1eb5fc6871785d93d6c0b3f394af1..177a4028728de21aec8676b2169d67ffee18d7f5 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -5,6 +5,7 @@
display: flex;
padding: 12px;
flex-direction: row;
+ font-family: var(--main-font-family);
@include breakpoint($narrow) {
padding: 15px 5px;
@@ -28,13 +29,48 @@
}
&__label {
+ font-family: var(--main-font-family);
+ margin-left: 4px;
+ }
+}
+
+.button--search:not(.group) {
+ &:hover {
+ color: var(--brand-main);
+ cursor: pointer;
+
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
+
+ svg {
+ height: 20px;
+ width: 20px;
+
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ @include breakpoint($extrawide) {
+ height: 12px;
+ width: 12px;
+ }
+ @include breakpoint($xlarge) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+
+ .button--search__label {
@include font-size(14px, 14px);
@include font-weight($bold);
color: var(--site-logo-color);
display: none;
- font-family: var(--main-font-family);
letter-spacing: -0.9px;
- margin-left: 4px;
visibility: hidden;
@include breakpoint($narrow) {
@@ -45,8 +81,8 @@
@include breakpoint($wide) {
@include font-size(14px, 24px);
+ @include font-weight($semibold);
display: block;
- font-weight: 600;
letter-spacing: -0.5px;
text-transform: none;
visibility: visible;
@@ -54,7 +90,7 @@
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
- font-weight: 400;
+ @include font-weight($regular);
letter-spacing: -0.6px;
}
@@ -62,52 +98,30 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
-
- &__group {
- color: var(--grayscale-white);
- }
- }
-
- svg {
- height: 20px;
- width: 20px;
-
- @include breakpoint($wide) {
- height: 16px;
- width: 16px;
- }
- @include breakpoint($extrawide) {
- height: 12px;
- width: 12px;
- }
- @include breakpoint($xlarge) {
- height: 16px;
- width: 16px;
- }
}
+}
+.button--search.group {
&:hover {
- color: var(--brand-main);
+ color: var(--grayscale-medium);
cursor: pointer;
span {
- color: var(--brand-main);
+ color: var(--grayscale-medium);
}
+
svg {
- fill: var(--brand-main);
+ fill: var(--grayscale-medium);
}
}
- &--group {
- &:hover {
- color: var(--grayscale-medium);
- span {
- color: var(--grayscale-medium);
- }
+ .button--search__label {
+ color: var(--grayscale-white);
- svg {
- fill: var(--grayscale-medium);
- }
+ @include breakpoint($wide) {
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ letter-spacing: -0.5px;
}
}
}
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index a4df30221a16a4b5e2fa82985ff25ac92a36e27c..cd8fb081a5ae1498597c43fef6ce50b0ac9bb6f7 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -173,8 +173,6 @@ export class SiteSearch {
}
render() {
- const isGroupClass = this.isGroup ? 'group' : 'page';
- const buttonSearchLabelClass = ['button--search__label', `button--search__label__${isGroupClass}`].join(' ');
return (
<Host
class={{
@@ -187,13 +185,19 @@ export class SiteSearch {
aria-expanded={`${this.isSearchPanelOpen}`}
class={{
'button--search': true,
- 'button--search--group': this.isGroup,
+ group: this.isGroup,
'is-open--menu': this.isAlternative,
'is-open': this.isSearchPanelOpen,
}}
onClick={(e) => this.handleSearchPanelToggle(e)}
>
- {this.showLabel ? <span class={buttonSearchLabelClass}>{this._labels['label']}</span> : ''}
+ {this.showLabel ? (
+ <span class={{'button--search__label': true, 'button--search__label__group': this.isGroup}}>
+ {this._labels['label']}
+ </span>
+ ) : (
+ ''
+ )}
<hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
</button>
<div