Something went wrong on our end
hy-desktop-menu-links.scss 9.82 KiB
:host {
align-items: center;
display: flex;
flex-flow: row;
justify-content: center;
margin: 0 32px;
padding: 0;
height: 100%;
}
.hy-site-header {
&__menu-desktop {
height: 100%;
}
// ul - menu items first level and panels that consist of menu items second level and shortcut items per panel.
&__menu-desktop-container {
align-items: center;
display: flex;
flex-direction: row;
flex-flow: row;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
li {
display: flex;
height: 100%;
}
// First level menu items
.desktop-menu-link {
background-color: transparent;
border: none;
color: var(--brand-main-nearly-black);
cursor: pointer;
font-family: var(--main-font-family);
@include breakpoint($extrawide) {
@include font-size(14px, 14px);
@include font-weight($bold);
align-items: center;
border-top: 0 none;
display: flex;
flex-direction: row;
justify-content: center;
letter-spacing: -0.6px;
padding: 0 7px;
position: relative;
text-transform: uppercase;
}
@include breakpoint($xlarge) {
@include font-size(16px, 16px);
letter-spacing: -0.7px;
padding: 0 9px;
}
&__label {
position: relative;
width: min-content;
@include breakpoint($overwide) {
width: 100%;
}
&--is-active-trail::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
bottom: -12px; content: ' ';
position: absolute;
right: 0;
width: 100%;
}
&--is-active-trail--disabled::after {
border: none;
}
}
hy-icon {
display: inline-block !important;
padding-left: 3px;
@include breakpoint($xlarge) {
padding-left: 4px;
}
svg {
height: 8px;
width: 10px;
@include breakpoint($xlarge) {
height: 8.44px;
width: 12px;
}
}
}
// On hover: heading icon is turned 180deg and grows bigger.
&--is-active {
position: relative;
&:hover,
&:focus {
color: var(--link-blue);
hy-icon {
svg {
fill: var(--link-blue);
}
}
}
hy-icon {
transform: rotateX(180deg);
}
.desktop-menu-link__label--is-active-trail::after {
border: none;
}
}
// Underline active link when showing menu panel
&--is-active::after {
border-bottom: 4px solid var(--brand-main-nearly-black);
bottom: 0;
content: ' ';
position: absolute;
right: 0;
width: 100%;
}
&:focus {
outline: none;
}
}
// Panel with second level menu items and shortcuts.
.hy-desktop-menu-panel {
display: none;
flex-direction: row;
opacity: 0; transition: none;
position: absolute;
left: 0;
top: 0;
z-index: 510;
width: 100%;
&--is-active {
background: radial-gradient(circle, var(--grayscale-light) 0%, var(--grayscale-background-box) 100%);
box-shadow: 0 0 20px 0 rgba(14, 104, 139, 0.1) inset;
display: flex;
padding-left: 300px;
}
&__panel-toggle {
background-color: transparent;
border: none;
position: absolute;
right: 10px;
top: 10px;
&__label {
@include font-size(18px, 22px);
@include font-weight($bold);
color: var(--grayscale-black);
display: flex;
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
&__title {
padding-right: 5px;
}
}
}
&__desktop-menu {
display: flex;
margin-bottom: -8px;
margin-top: 6px;
&__menu-items {
min-width: 440px;
max-width: 540px;
}
// first level link inside panel
&__first-level-menu-item {
@include font-weight($bold);
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
text-decoration: none;
width: 100%;
&:hover,
&:focus {
box-shadow: 0 0 16px 0 rgba(0, 83, 121, 0.2);
color: var(--link-blue);
svg {
//height: 42px;
//width: 42px;
}
}
@include breakpoint($extrawide) {
@include font-size(24px, 32px);
align-items: flex-start;
background-color: var(--grayscale-white); flex-direction: column;
justify-content: center;
letter-spacing: -0.75px;
margin-bottom: 4px;
padding: 17px 32px 12px 32px;
position: relative;
text-transform: none;
}
@include breakpoint($xlarge) {
@include font-size(26px, 32px);
letter-spacing: -0.81px;
margin-bottom: 6px;
padding: 25px 32px 20px 32px;
}
.label {
border: none;
margin-left: 14px;
&:hover,
&:focus {
color: var(--link-blue);
}
}
.description {
@include font-size(14px, 18px);
@include font-weight($regular);
color: var(--grayscale-dark);
letter-spacing: -0.2;
margin-left: 14px;
margin-bottom: 12px;
margin-top: 4px;
@include breakpoint($xlarge) {
@include font-size(16px, 20px);
letter-spacing: -0.25;
}
&:hover {
color: var(--grayscale-dark);
}
}
span.heading-icon {
position: absolute;
top: 12px;
left: -6px;
@include breakpoint($xlarge) {
top: 20px;
}
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
padding: 8px;
}
}
}
// Second level menu item links
&__second-level-menu {
background-color: var(--grayscale-white);
list-style: none;
margin: 0;
padding: 12px 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%;
@include breakpoint($extrawide) {
@include font-size(14px, 18px);
align-items: center;
flex-direction: row;
letter-spacing: -0.5px;
padding-left: 24px;
padding-right: 48px;
text-transform: none;
}
@include breakpoint($xlarge) {
@include font-size(16px, 18px);
letter-spacing: -0.5px;
}
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: -2px;
}
&:hover,
&:focus {
color: var(--link-blue);
span.external-icon {
svg {
fill: var(--link-blue);
}
}
}
.label {
@include breakpoint($extrawide) {
border: none;
margin: 0 5px 0 12px;
padding-top: 12px;
padding-bottom: 12px;
}
}
span.heading-icon {
svg {
fill: var(--brand-main-light);
@include breakpoint($extrawide) {
padding: 1px 0;
}
}
}
span.external-icon {
svg {
fill: var(--brand-main-nearly-black);
transform: rotate(-45deg);
&:hover,
&:focus {
fill: var(--link-blue);
}
}
}
}
}
}
} }
// Shortcuts
.shortcuts-panel {
background-color: var(--grayscale-white);
position: absolute;
left: 0; // override in js
list-style: none;
min-width: 350px;
margin: 6px 4px 0 4px;
max-width: 400px;
padding: 0 48px;
top: 0;
&__title {
@include font-size(18px, 22px);
@include font-weight($bold);
color: var(--grayscale-black);
font-family: var(--main-font-family);
letter-spacing: -0.56px;
margin-bottom: 18px;
text-transform: uppercase;
}
&__shortcut-item {
border-bottom: 1px solid var(--grayscale-medium-dark);
&__first {
border-top: 1px solid var(--grayscale-medium-dark);
}
a {
@include font-size(16px, 22px);
@include font-weight($semibold);
color: var(--grayscale-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
justify-content: space-between;
letter-spacing: -0.5px;
padding: 19px 0;
text-decoration: none;
.icon {
padding-left: 24px;
svg {
padding: 4px;
}
}
}
}
}
}
}