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

code cleanup

parent 3d0f8ba3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+ 23
− 227
View file @ ae6b3e70
...@@ -3,11 +3,7 @@ ...@@ -3,11 +3,7 @@
} }
.hy-site-header { .hy-site-header {
// nav // ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop {
}
// ul
&__menu-desktop-container { &__menu-desktop-container {
align-items: center; align-items: center;
display: flex; display: flex;
...@@ -38,10 +34,7 @@ ...@@ -38,10 +34,7 @@
padding: 10px; padding: 10px;
} }
&__heading__icon { // Underline if link is in active trail.
display: none;
}
&--is-active-trail { &--is-active-trail {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black); border-bottom: 4px solid var(--brand-main-nearly-black);
...@@ -53,6 +46,11 @@ ...@@ -53,6 +46,11 @@
} }
} }
&__heading__icon {
display: none;
}
// On hover: change background and show heading icon.
&--is-active { &--is-active {
background-color: var(--grayscale-background-box); background-color: var(--grayscale-background-box);
padding: 35px 10px; padding: 35px 10px;
...@@ -119,12 +117,12 @@ ...@@ -119,12 +117,12 @@
position: relative; position: relative;
// first level link inside panel // first level link inside panel
a.menu-item-first-level-link { &__first-level-menu-item {
@include font-weight($bold); @include font-weight($bold);
align-items: center; //align-items: center;
color: var(--brand-main-nearly-black); color: var(--brand-main-nearly-black);
display: flex; display: flex;
flex-direction: row; //flex-direction: row;
font-family: var(--main-font-family); font-family: var(--main-font-family);
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
...@@ -147,28 +145,27 @@ ...@@ -147,28 +145,27 @@
padding-top: 19px; padding-top: 19px;
} }
.hy-menu-item__label { .label {
border: none; border: none;
margin-left: 14px; margin-left: 14px;
} }
.hy-menu-item__description { .description {
@include font-size(16px, 24px); @include font-size(16px, 24px);
@include font-weight($semibold); @include font-weight($semibold);
color: var(--grayscale-dark); color: var(--grayscale-dark);
letter-spacing: 0; letter-spacing: 0;
margin-left: 14px; margin-left: 14px;
margin-bottom: 28px; margin-bottom: 28px;
margin-top: 8px;
} }
span.heading-icon-first { span.heading-icon {
position: absolute; position: absolute;
top: 12px; top: 12px;
left: -6px; left: -6px;
@include breakpoint($fullhd) { @include breakpoint($fullhd) {
top: 27px; top: 27px;
} }
svg { svg {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
fill: var(--grayscale-white); fill: var(--grayscale-white);
...@@ -178,7 +175,7 @@ ...@@ -178,7 +175,7 @@
} }
// menu item links // menu item links
ul.desktop-menu { &__second-level-menu {
background-color: var(--grayscale-background-box); background-color: var(--grayscale-background-box);
list-style: none; list-style: none;
margin: 0; margin: 0;
...@@ -215,7 +212,7 @@ ...@@ -215,7 +212,7 @@
outline-offset: -2px; outline-offset: -2px;
} }
.hy-menu-item__label { .label {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
border: none; border: none;
margin-left: 12px; margin-left: 12px;
...@@ -224,7 +221,7 @@ ...@@ -224,7 +221,7 @@
} }
} }
span.heading-icon-second { span.heading-icon {
svg { svg {
fill: var(--brand-main-light); fill: var(--brand-main-light);
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
...@@ -240,16 +237,18 @@ ...@@ -240,16 +237,18 @@
// Shortcuts // Shortcuts
.shortcuts-panel { .shortcuts-panel {
list-style: none;
&__title { &__title {
@include font-size(18px, 22px); @include font-size(18px, 22px);
@include font-weight($bold); @include font-weight($bold);
//border-bottom: 1px solid var(--grayscale-medium-dark);
color: var(--grayscale-black); color: var(--grayscale-black);
font-family: var(--main-font-family); font-family: var(--main-font-family);
letter-spacing: -0.56px; letter-spacing: -0.56px;
margin-bottom: 18px; margin-bottom: 18px;
text-transform: uppercase; text-transform: uppercase;
} }
&__shortcut-item { &__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark); border-bottom: 1px solid var(--grayscale-medium-dark);
&__first { &__first {
...@@ -266,214 +265,12 @@ ...@@ -266,214 +265,12 @@
letter-spacing: -0.5px; letter-spacing: -0.5px;
padding: 19px 0; padding: 19px 0;
text-decoration: none; text-decoration: none;
}
span.shortcut-item__icon {
position: absolute;
right: 0;
svg {
padding: 4px;
}
}
}
}
}
}
/*
.hy-site-header {
&__menu-desktop {
.desktop-menu-link {
color: var(--brand-main-nearly-black);
cursor: pointer;
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
@include font-size(15px, 16px);
@include font-weight($bold);
border-top: 0 none;
padding: 10px 8px;
text-transform: uppercase;
}
@include breakpoint($fullhd) {
@include font-size(18px, 16px);
letter-spacing: -0.5px;
padding: 10px;
}
&__heading__icon {
display: none;
}
&--is-active-trail {
@include breakpoint($extrawide) {
border-bottom: 4px solid var(--brand-main-nearly-black);
padding-bottom: 8px;
}
@include breakpoint($overwide) {
padding-bottom: 12px;
}
}
&--is-active {
background-color: var(--grayscale-background-box);
padding: 35px 10px;
position: relative;
.desktop-menu-link__heading__icon { .icon {
bottom: 14px;
display: block;
left: 0;
position: absolute;
width: 100%;
hy-icon {
justify-content: center;
transform: rotateX(180deg);
svg {
padding: 4px 0;
}
}
}
}
}
}
}
.hy-desktop-menu-panel {
display: none;
&--is-active {
background-color: var(--grayscale-white);
display: flex;
flex-direction: row;
justify-content: center;
opacity: 1;
position: absolute;
left: 0;
top: 104px;
width: 100%;
z-index: 510;
}
&__desktop-menu {
position: relative;
left: 120px;
width: 50%;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
a {
@include font-weight($bold);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
.hy-menu-item__label {
@include breakpoint($extrawide) {
padding-top: 12px;
padding-bottom: 12px;
}
}
}
}
li.first {
a {
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
background-color: var(--grayscale-background-box);
flex-direction: column;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding-left: 32px;
padding-right: 32px;
padding-top: 5px;
position: relative;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
padding-top: 19px;
}
.hy-menu-item__label {
border: none;
margin-left: 14px;
}
.hy-menu-item__description {
@include font-size(16px, 24px);
@include font-weight($semibold);
color: var(--grayscale-dark);
letter-spacing: 0;
margin-left: 14px;
margin-bottom: 28px;
}
span.heading-icon-first {
position: absolute; position: absolute;
top: 12px; right: 0;
left: -6px;
@include breakpoint($fullhd) {
top: 27px;
}
svg { svg {
background-color: var(--brand-main-light); padding: 4px;
fill: var(--grayscale-white);
padding: 8px;
}
}
}
}
li.second {
a {
@include breakpoint($extrawide) {
@include font-size(15px, 22px);
align-items: center;
flex-direction: row;
letter-spacing: -0.47px;
padding-left: 24px;
padding-right: 24px;
text-transform: none;
}
@include breakpoint($fullhd) {
@include font-size(18px, 22px);
letter-spacing: -0.56px;
}
.hy-menu-item__label {
border: none;
margin-left: 12px;
}
span.heading-icon-second {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
} }
} }
} }
...@@ -481,4 +278,3 @@ ...@@ -481,4 +278,3 @@
} }
} }
} }
*/
src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+ 14
− 9
View file @ ae6b3e70
...@@ -107,21 +107,26 @@ export class HyDesktopMenuLinks { ...@@ -107,21 +107,26 @@ export class HyDesktopMenuLinks {
</button> </button>
<div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}> <div class="hy-desktop-menu-panel" onMouseLeave={() => this.handleDesktopMenuClose()}>
<div class="hy-desktop-menu-panel__desktop-menu"> <div class="hy-desktop-menu-panel__desktop-menu">
<a aria-current={label} href={url} class="menu-item-first-level-link" menu-link-id={id}> <a
<span class="heading-icon-first"> aria-current={label}
href={url}
class="hy-desktop-menu-panel__desktop-menu__first-level-menu-item"
menu-link-id={id}
>
<span class="heading-icon">
<hy-icon icon={'hy-icon-arrow-right'} size={40} /> <hy-icon icon={'hy-icon-arrow-right'} size={40} />
</span> </span>
<span class="hy-menu-item__label">{label}</span> <span class="label">{label}</span>
<span class="hy-menu-item__description">{description}</span> {description && <span class="description">{description}</span>}
</a> </a>
<ul class={'desktop-menu first'} menu-link-id={id}> <ul class={'hy-desktop-menu-panel__desktop-menu__second-level-menu'} menu-link-id={id}>
{items.map(({label, url}) => ( {items.map(({label, url}) => (
<li> <li>
<a href={url}> <a href={url}>
<span class="heading-icon-second"> <span class="heading-icon">
<hy-icon icon={'hy-icon-caret-right'} size={12} /> <hy-icon icon={'hy-icon-caret-right'} size={12} />
</span> </span>
<span class="hy-menu-item__label">{label}</span> <span class="label">{label}</span>
</a> </a>
</li> </li>
))} ))}
...@@ -146,8 +151,8 @@ export class HyDesktopMenuLinks { ...@@ -146,8 +151,8 @@ export class HyDesktopMenuLinks {
target={target} target={target}
aria-label={shortcut_aria_label} aria-label={shortcut_aria_label}
> >
<span class="shortcut-item__label">{shortcut_title}</span> <span class="label">{shortcut_title}</span>
<span class="shortcut-item__icon"> <span class="icon">
<hy-icon icon={'hy-icon-arrow-right'} size={24} /> <hy-icon icon={'hy-icon-arrow-right'} size={24} />
</span> </span>
</a> </a>
......
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