Skip to content
Snippets Groups Projects
Commit 5d784548 authored by Ekaterina Kondareva's avatar Ekaterina Kondareva
Browse files

Merge branch 'NXSTAGE-1002-mobile-menu-modifications' into 'development' 

NXSTAGE-1002: Update mobile menu styles according to the reference

See merge request julkiset-sivut/design-system-lib!89
parents 76ff3cc3 9589ddaf
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 119 additions and 60 deletions
src/components/navigation/menu-item/menu-item.scss
+ 57
− 30
View file @ 5d784548
// 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);
}
}
src/components/navigation/menu-language/menu-language.scss
+ 5
− 1
View file @ 5d784548
......@@ -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])) {
......
src/components/navigation/menu-level-container/menu-level-container.tsx
+ 5
− 0
View file @ 5d784548
......@@ -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 />
......
src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
+ 10
− 1
View file @ 5d784548
......@@ -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;
......
src/components/navigation/menu/menu.scss
+ 20
− 11
View file @ 5d784548
......@@ -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;
......
src/components/site-header/site-header.scss
+ 10
− 14
View file @ 5d784548
......@@ -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;
}
......
src/components/site-header/site-logo/site-logo.scss
+ 7
− 0
View file @ 5d784548
......@@ -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);
......
src/components/site-header/site-logo/site-logo.tsx
+ 1
− 1
View file @ 5d784548
......@@ -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;
......
src/components/site-header/site-search/site-search.scss
+ 4
− 2
View file @ 5d784548
......@@ -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) {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment