diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 830797c20274cee0056b1729bfedf6a1cca8deb9..e780e18d7969c28774af2e09725257420eb1f542 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -1,13 +1,14 @@
// Mobile.
:host(.hy-menu-item--mobile) {
- background-color: var(--grayscale-white);
- border-top: 1px dashed var(--grayscale-medium-dark);
- display: flex;
--menu-item-display: flex;
-}
+ display: flex;
+ margin-left: 12px;
+ margin-right: 12px;
+ margin: 0 12px 5px;
-:host(.hy-menu-item--mobile:first-of-type) {
- border-top: 3px solid var(--brand-main-nearly-black);
+ @include breakpoint($narrow) {
+ margin: 0 28px 6px;
+ }
}
:host(.hy-menu-item--mobile.hy-menu-item--alternative) {
@@ -110,18 +111,50 @@ a {
outline-offset: -2px;
}
- &.is-active,
- &.in-active-trail {
- .hy-menu-item__label {
- border-bottom: 2px solid var(--additional-orange);
- padding-bottom: 5px;
+ &.hy-menu-item--mobile {
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+ color: var(--brand-main-light);
+ padding: 12px 12px 12px 20px;
+
+ &.is-active,
+ &.in-active-trail {
+ @include font-weight($bold);
+ color: var(--grayscale-black);
+ position: relative;
+
+ &:before {
+ border-left: 3px solid var(--grayscale-black);
+ content: '';
+ height: 75%;
+ left: 10px;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
}
- }
- &.is-active,
- &.is-heading {
- .hy-menu-item__label {
+ &.is-heading {
+ @include font-size(24px, 24px);
@include font-weight($bold);
+ background: transparent;
+ border-bottom: 3px solid var(--brand-main-light);
+ color: var(--brand-main-light);
+ margin-top: -24px;
+ padding-bottom: 24px;
+ padding-top: 24px;
+ text-transform: uppercase;
+
+ &.is-active,
+ &.in-active-trail {
+ @include font-weight($bold);
+ color: var(--grayscale-black);
+ position: relative;
+
+ &:before {
+ border-left-width: 4px;
+ height: 55%;
+ }
+ }
}
}
@@ -260,24 +293,18 @@ a {
.hy-menu-item__button {
align-items: center;
- background: transparent;
- border: 0 none;
+ background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
+ border-bottom: 0;
+ border-left: 1px dashed var(--brand-main-light);
+ border-right: 0;
+ border-top: 0;
cursor: pointer;
display: var(--menu-item-display);
justify-content: center;
- width: 70px;
-
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: 2px;
- }
+ padding: 0;
+ width: 50px;
- &::before {
- border-left: 1px dashed var(--brand-main-nearly-black);
- content: '';
- display: block;
- height: 16px;
- margin-right: 16px;
- width: 1px;
+ svg {
+ fill: var(--brand-main-light);
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index f41bf241ba4fd1a6036a239eb82a12053eea27a4..ecbed96fcf3a5ae68ce92ee02032b49364e8aced 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-level-container/menu-level-container.tsx b/src/components/navigation/menu-level-container/menu-level-container.tsx
index 6233f2125306af3a20f884203707756293cef382..ec25ffff57debd5610e2eb84300390d48a94a7bd 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.tsx
+++ b/src/components/navigation/menu-level-container/menu-level-container.tsx
@@ -98,6 +98,10 @@ export class MenuLevelContainer {
...this.headingItem,
label: parentMenuItem.getAttribute('label'),
};
+ this.headingItem = {
+ ...this.headingItem,
+ isActive: window.location.pathname === this.headingItem.url,
+ };
} else {
this.triggerItem = 'home';
}
@@ -149,6 +153,7 @@ export class MenuLevelContainer {
label={this.headingItem.label}
url={this.headingItem.url}
isHeading={true}
+ isActive={this.headingItem.isActive}
menu-type={'mobile'}
/>
<slot />
diff --git a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
index 51084fa1bb4bf50e2f99c7e2b8f05e63ffd8a32a..5b81b608b074a264d1a31ca81645ad4504e0c0a1 100644
--- a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
+++ b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
@@ -4,18 +4,27 @@
border: 0 none;
cursor: pointer;
display: flex;
- margin: 0 0 15px;
+ margin: 0 0 24px 16px;
padding: 0;
+ @include breakpoint($narrow) {
+ margin: 0 0 24px 28px;
+ }
+
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: 2px;
}
+ svg {
+ fill: var(--brand-main-light);
+ }
+
&__label {
@include font-size(14px, 20px);
@include font-weight($regular);
align-items: center;
+ color: var(--brand-main-light);
display: flex;
margin-left: 6px;
text-align: left;
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index b84677bdc159f5b61815e64bdc07583702f782c6..3f5f7a4534fa77337fa4b363145bfe4e6fb42880 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;
@@ -36,11 +35,13 @@
.hy-menu {
&--mobile {
+ -webkit-overflow-scrolling: touch;
flex-flow: column;
min-height: calc(100vh - 60px);
- -webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: visible;
+ padding-left: 12px;
+ padding-right: 12px;
transform: translateX(100%);
transition: 0.45s;
width: 100%;
@@ -73,7 +74,11 @@
&__logo-container {
display: inline-block;
- margin: 5px 0 20px;
+ padding: 16px;
+
+ @include breakpoint($narrow) {
+ padding: 16px 28px;
+ }
}
&--sidenav {
@@ -87,24 +92,28 @@
}
.hy-link__donate {
- align-items: center;
- background-color: var(--brand-main);
+ background-color: var(--grayscale-white);
bottom: -20px;
- display: flex;
- justify-content: center;
- letter-spacing: -0.5px;
- margin: auto -20px 0;
- padding: 20px;
position: sticky;
z-index: 102;
a {
- @include font-size(15px, 20px);
+ @include font-size(16px, 16px);
@include font-weight($semibold);
+ background-color: var(--brand-main-light);
color: var(--grayscale-white);
+ display: block;
font-family: var(--main-font-family);
+ letter-spacing: -0.4px;
+ margin: 12px;
+ padding: 20px;
+ text-align: center;
text-decoration: none;
+ @include breakpoint($narrow) {
+ margin: 12px 28px;
+ }
+
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: 4px;
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 71da362e3bc384ff88e7af9095f8d7406fe2644c..7c43f2305c9568789255bd8f251be6ef78a97bd7 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -9,7 +9,6 @@
display: flex;
flex-flow: row;
place-content: center space-between;
- position: relative;
z-index: 99;
@include breakpoint($medium) {
@@ -33,7 +32,7 @@
margin: 16px 8px;
@include breakpoint($narrow) {
- margin: 16px 16px 16px 24px;
+ margin: 16px 16px 16px 28px;
}
@include breakpoint($wide) {
@@ -71,8 +70,8 @@
width: 90%;
z-index: 100;
- @include breakpoint($medium) {
- width: 356px;
+ @include breakpoint($narrow) {
+ width: 400px;
}
}
}
@@ -83,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 {
@@ -113,13 +114,8 @@
svg {
height: 24px;
- margin-left: 4px;
width: 24px;
- @include breakpoint($narrow) {
- margin-left: 8px;
- }
-
@include breakpoint($medium) {
width: 20px;
}
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index bac069b098ea532d2170f8180a54c5f241cc92dd..356b7550bcd29f5725c49fa17993a70058cdb8a6 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -27,6 +27,13 @@ a {
margin-left: 8px;
max-width: 100%;
text-transform: uppercase;
+ max-width: 90px;
+
+ .hy-site-header__logo-container & {
+ @include breakpoint($narrow) {
+ max-width: none;
+ }
+ }
@include breakpoint($narrow) {
@include font-size(15px, 16px);
diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx
index 90f924f229009eee5290043a0f1021bd89fc20ca..7f06639326843659c2310a2218d3d5d67628eec3 100644
--- a/src/components/site-header/site-logo/site-logo.tsx
+++ b/src/components/site-header/site-logo/site-logo.tsx
@@ -4,7 +4,7 @@ import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
@Component({
tag: 'hy-site-logo',
styleUrl: 'site-logo.scss',
- shadow: true,
+ shadow: false,
})
export class SiteLogo {
@Prop() color: ColorVariant = ColorVariant.black;
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 4190ab9ae8610307cc5a874ea978223eaf1ecf30..c995777755c7e8e6dfb666758499c80a4dd61031 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -33,16 +33,16 @@
&__label {
@include font-size(14px, 14px);
@include font-weight($bold);
-
color: var(--site-logo-color);
display: none;
+ display: none;
font-family: var(--main-font-family);
letter-spacing: -0.9px;
margin-left: 4px;
+ visibility: hidden;
@include breakpoint($narrow) {
@include font-size(15px, 16px);
- display: block;
margin-left: 4px;
margin-right: 8px;
text-transform: uppercase;
@@ -50,8 +50,10 @@
@include breakpoint($wide) {
@include font-size(14px);
+ display: block;
font-weight: 600;
text-transform: none;
+ visibility: visible;
}
@include breakpoint($extrawide) {