Skip to content
Snippets Groups Projects
Commit 232beaa6 authored by druid's avatar druid
Browse files

desktop menu links styles

parent 89ce59af
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/navigation/menu-item/menu-item.scss
+ 146
− 185
View file @ 232beaa6
:host(.hy-menu-item--desktop.hy-menu-item--is-active) {
display: block;
visibility: visible;
}
:host(.hy-menu-item--desktop:not(.hy-menu-item--is-active)) {
display: none;
visibility: hidden;
}
// Mobile.
:host(.hy-menu-item--mobile) {
--menu-item-display: flex;
......@@ -43,12 +33,24 @@
}
// Desktop.
:host(.hy-menu-item--desktop.hy-menu-item--for-desktop) {
display: block;
visibility: visible;
}
:host(.hy-menu-item--desktop:not(.hy-menu-item--for-desktop)) {
display: none;
visibility: hidden;
}
/*
:host(.hy-menu-item--desktop.is-hidden) {
height: auto;
visibility: visible !important;
}
*/
:host(.hy-menu-item--desktop[depth='1']) {
:host(.hy-menu-item--for-desktop[depth='1']) {
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
......@@ -90,7 +92,8 @@
}
}
}
:host(.hy-menu-item--desktop[depth='2']) {
:host(.hy-menu-item--for-desktop[depth='2']) {
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
......@@ -121,29 +124,40 @@
}
}
:host(.hy-menu-item--desktop) {
border: 0 none;
--menu-item-display: none;
:host(.hy-menu-item--for-desktop:not([depth='2']):not([depth='1'])) {
a {
display: none;
}
}
:host(.hy-menu-item--desktop:first-of-type) {
:host(.hy-menu-item.hy-menu-item--for-desktop) {
border: 0 none;
--menu-item-display: none;
}
:host(.hy-menu-item--desktop.hy-menu-item--alternative) {
@include breakpoint($medium) {
@include font-size(14px, 14px);
//--menu-item-display: none;
a {
@include font-weight($bold);
border-top: 0 none;
}
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
@include breakpoint($extrawide) {
@include font-size(16px, 16px);
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
@include breakpoint($overwide) {
@include font-size(18px, 18px);
a.is-heading {
display: none;
}
button {
display: none;
}
}
......@@ -178,54 +192,27 @@
visibility: visible;
}
a {
@include font-size(15px, 20px);
@include font-weight($regular);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
padding: 24px 16px;
text-decoration: none;
width: 100%;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
&.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;
:host(.hy-menu-item:not(.hy-menu-item--for-desktop)) {
a {
@include font-size(15px, 20px);
@include font-weight($regular);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
padding: 24px 16px;
text-decoration: none;
width: 100%;
&:before {
border-left: 3px solid var(--grayscale-black);
content: '';
height: 75%;
left: 10px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
&.is-heading {
@include font-size(24px, 24px);
@include font-weight($bold);
background: transparent;
border-bottom: 3px solid var(--brand-main-light);
&.hy-menu-item--mobile {
background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
color: var(--brand-main-light);
margin-top: -24px;
padding-bottom: 24px;
padding-top: 24px;
text-transform: uppercase;
padding: 12px 12px 12px 20px;
&.is-active,
&.in-active-trail {
......@@ -234,148 +221,122 @@ a {
position: relative;
&:before {
border-left-width: 4px;
height: 55%;
border-left: 3px solid var(--grayscale-black);
content: '';
height: 75%;
left: 10px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
}
&.is-heading {
display: inherit;
@include breakpoint($extrawide) {
display: none;
}
}
&.hy-menu-item--desktop {
@include breakpoint($medium) {
@include font-size(14px, 14px);
@include font-weight($bold);
padding: 10px 15px;
text-transform: uppercase;
}
@include breakpoint($extrawide) {
@include font-size(15px, 16px);
padding: 10px 8px;
&.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%;
}
}
}
}
@include breakpoint($overwide) {
@include font-size(18px, 16px);
padding: 10px;
&.is-heading {
display: inherit;
@include breakpoint($extrawide) {
display: none;
}
}
.hy-menu-item__label {
@include breakpoint($medium) {
border-bottom: 4px solid transparent;
padding-bottom: 8px;
padding-top: 7px;
}
&.hy-menu-item--sidenav {
@include font-size(18px, 24px);
@include font-weight($bold);
color: var(--brand-main-light);
display: var(--hy-menu-item-sidenav-display);
font-family: var(--main-font-family);
margin: 10px 0;
padding: 8px 0;
@include breakpoint($extrawide) {
padding-top: 13px;
&:focus {
outline-offset: 4px;
}
@include breakpoint($overwide) {
padding-top: 12px;
padding-bottom: 12px;
&:hover {
color: var(--brand-main-nearly-black);
}
}
&.in-active-trail {
.hy-menu-item__label {
@include breakpoint($medium) {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding-bottom: 8px;
}
@include breakpoint($extrawide) {
padding-bottom: 8px;
padding-top: 14px;
}
&.is-active {
color: var(--brand-main-nearly-black);
text-decoration: none;
@include breakpoint($overwide) {
padding-top: 12px;
padding-bottom: 12px;
.hy-menu-item__label {
padding-bottom: 0;
}
}
}
}
&.hy-menu-item--sidenav {
@include font-size(18px, 24px);
@include font-weight($bold);
color: var(--brand-main-light);
display: var(--hy-menu-item-sidenav-display);
font-family: var(--main-font-family);
margin: 10px 0;
padding: 8px 0;
&:focus {
outline-offset: 4px;
}
&:hover {
color: var(--brand-main-nearly-black);
}
&.is-active--heading {
@include font-size(26px, 40px);
color: var(--brand-main-nearly-black);
text-transform: uppercase;
&.is-active {
color: var(--brand-main-nearly-black);
text-decoration: none;
.hy-menu-item__label {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding: 0;
.hy-menu-item__label {
padding-bottom: 0;
&__icon {
display: none;
}
}
}
}
&.is-active--heading {
@include font-size(26px, 40px);
color: var(--brand-main-nearly-black);
text-transform: uppercase;
&.is-active--child {
color: var(--brand-main-light);
text-decoration: none;
}
.hy-menu-item__label {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding: 0;
.hy-menu-item__label__icon {
color: var(--brand-main-light);
display: inline-block;
padding-left: 5px;
&__icon {
.is-active & {
display: none;
}
}
}
&.is-active--child {
color: var(--brand-main-light);
text-decoration: none;
}
&.is-parent {
@include font-size(16px, 22px);
@include font-weight($semibold);
align-items: center;
color: var(--brand-main-light);
display: flex;
text-decoration: none;
.hy-menu-item__label__icon {
color: var(--brand-main-light);
display: inline-block;
padding-left: 5px;
.is-active & {
display: none;
}
}
&.is-parent {
@include font-size(16px, 22px);
@include font-weight($semibold);
align-items: center;
color: var(--brand-main-light);
display: flex;
text-decoration: none;
&:hover {
color: var(--brand-main-nearly-black);
.hy-menu-item__label__icon {
&:hover {
color: var(--brand-main-nearly-black);
.hy-menu-item__label__icon {
color: var(--brand-main-nearly-black);
}
}
}
.hy-menu-item__label__icon {
margin-right: 8px;
.hy-menu-item__label__icon {
margin-right: 8px;
}
}
}
}
......
src/components/navigation/menu-level-container/menu-level-container.tsx
+ 10
− 0
View file @ 232beaa6
......@@ -59,6 +59,16 @@ export class MenuLevelContainer {
componentWillUpdate() {
// Pass the menu type and menu-button-submenu-expand attributes to
// the child menu item component.
/*
let hyMenu = this.el.closest('hy-menu');
if (hyMenu) {
if (hyMenu.menuType==MenuType.desktop) {
console.log(hyMenu.menuType);
this.menuType = MenuType.desktop;
}
}
*/
if (this.menuType) {
const items = Array.from(this.el.children);
items.forEach((item) => {
......
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 25
− 2
View file @ 232beaa6
......@@ -62,7 +62,6 @@
display: none;
&--is-active {
border: 1px solid red;
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
......@@ -70,7 +69,7 @@
opacity: 1;
position: absolute;
left: 0;
top: 90px;
top: 104px;
width: 100%;
z-index: 510;
}
......@@ -87,3 +86,27 @@
top: 10px;
}
}
/*
apply to desktop menu links upper level
&.hy-menu-item--desktop {
&.in-active-trail {
.hy-menu-item__label {
@include breakpoint($medium) {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding-bottom: 8px;
}
@include breakpoint($extrawide) {
padding-bottom: 8px;
padding-top: 14px;
}
@include breakpoint($overwide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
}
*/
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 10
− 4
View file @ 232beaa6
......@@ -42,7 +42,12 @@ export class HyDesktopMenuLinks {
// Hide panel, remove class is-active.
(hyDesktopPanel as HTMLElement).classList.remove('hy-desktop-menu-panel--is-active');
let parentMenu = document.querySelectorAll('hy-menu-level-container[menu-level="2"]');
let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
});
let parentMenu = document.querySelectorAll('hy-site-header hy-menu-level-container[menu-level="2"]');
if (parentMenu) {
const items = Array.from(parentMenu);
items.forEach((item) => {
......@@ -78,19 +83,20 @@ export class HyDesktopMenuLinks {
// Hide all menu-item that have other menu-link-id attribute value.
let menuItems = document.querySelectorAll('hy-site-header hy-menu-item');
menuItems.forEach((item) => {
(item as HTMLElement).classList.remove('hy-menu-item--is-active');
(item as HTMLElement).classList.remove('hy-menu-item--for-desktop');
});
let menuActivatedItems = document.querySelectorAll('hy-site-header hy-menu-item[menu-link-id="' + id + '"]');
(menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--is-active');
(menuActivatedItems[0] as HTMLElement).classList.add('hy-menu-item--for-desktop');
let parentMenu = (menuActivatedItems[0] as HTMLElement).querySelector('hy-menu-level-container[menu-level="2"]');
if (parentMenu && parentMenu.children) {
(parentMenu as HTMLElement).classList.remove('hy-menu-level-container--mobile');
(parentMenu as HTMLElement).classList.add('hy-menu-level-container--desktop');
const items = Array.from(parentMenu.children);
items.forEach((item) => {
item.classList.add('hy-menu-item--is-active');
item.classList.add('hy-menu-item--for-desktop');
});
}
}
......
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