// Blank menu
.menu-blank {
border: 2px dashed rgba($color_warning, .35);
padding: 0.5rem 1rem;
display: inline-block;
font-size: $font-size-small;
@include border-radius;
a {
font-weight: bold;
font-family: inherit;
}
}
// Submenu indicator icon
.has-submenu {
&-icon {
position: absolute;
top: 50%;
transform-origin: center;
transform: translateY(-50%) scale(0.75) rotate(0deg);
right: 0;
line-height: 0;
opacity: .5;
.menu-plus {
@include transition;
}
}
&:hover,
&.active,
&.visible {
> a {
> .has-submenu-icon {
.menu-plus {
transform: rotate(135deg) !important;
}
}
}
}
}
.menu {
&,
.sub-menu,
.sub-sub-menu {
@include unlist;
}
}
// Main menu
.nav {
cursor: default;
position: relative;
z-index: 10;
font-weight: 500;
height: 100%;
@include flex;
@include align-items(center);
a::before,
.close-bar {
display: none;
}
.mobile-overlay {
display: block;
}
// With counters
&.with-counters {
// First level menu items
.nav-item {
counter-increment: number;
> a {
> span {
position: relative;
&::before {
content: '0'counter(number);
display: inline-block;
font-weight: bold;
width: auto;
right: 0;
top: -0.75em;
line-height: 0.6em;
font-size: 0.6em;
position: absolute;
height: auto;
opacity: .75;
@include sm-screen {
display: none;
}
}
}
}
}
}
&.hidden {
display: none;
}
}
.header {
// Desktop menu
&:not(.-mobile) {
.menu {
min-height: 2.75rem;
@include flex;
@include align-items(stretch);
// All menu items
li {
position: relative;
padding: 0;
span {
white-space: normal;
line-height: 1.3;
}
.menu-chevron {
margin-left: 2.5vw;
@include inline-flex;
@include transition;
}
// Sub menu items
> ul {
width: auto;
min-width: 13.5rem;
position: absolute;
left: 0;
top: 2.75rem;
z-index: 10;
margin: 0;
padding-top: 1rem;
padding-bottom: 1rem;
background-color: $color-white;
@include flip-up;
@include border-radius;
@include dropdown-shadow;
transition-property: transform, opacity, visibility;
> li {
line-height: 100%;
font-weight: normal;
font-size: .98rem;
@include note-screen {
font-size: .96rem;
}
a {
padding: 0.45rem 1.5rem;
display: block;
@include note-screen {
padding: 0.45rem 1rem;
}
&:hover {
background-color: $color-neutral-6;
}
// Hide chevron indicator
> .has-submenu-icon {
> .menu-chevron {
display: none;
}
}
}
> ul {
top: -1rem;
left: 100%;
}
}
.has-submenu-icon {
margin-right: 1.5rem;
@include note-screen {
margin-right: 1rem;
}
}
}
&:hover,
&.active {
// Sub menu items
> ul {
transform: none;
visibility: visible;
z-index: 200;
@include flip-up-active;
}
// Wide menu items
.sub-menu-wide {
ul {
visibility: visible;
opacity: 1;
}
}
.menu-chevron {
transform: rotate3d(1, 0, 0, 180deg);
}
}
}
// 1st level menu items
> .nav-item {
margin: 0;
@include transition;
> a {
padding: 0 1.2vw;
height: 100%;
@include flex;
@include align-items(center);
// Chevron indicator
> .has-submenu-icon {
// padding-left: 0.5rem;
// position: static;
// transform: none;
> .menu-plus {
display: none;
}
}
}
}
// Wide menu
.sub-menu-wide {
width: calc(100vw - 8.8vh);
@include border-radius($radius-large);
@include flex;
@include align-items(flex-start);
@include flex-just(center);
@include lg-screen {
padding: 1.75rem 1rem;
}
@include tablet-screen {
width: calc(100vw - 40px);
height: auto !important;
}
> li {
width: calc(100% / 6);
> a {
&.menu-link {
text-transform: uppercase;
opacity: 0.65;
font-size: .8em;
font-weight: 600;
margin-bottom: 0.5rem;
&:hover {
background: transparent;
}
}
}
}
ul {
padding: 0;
box-shadow: none !important;
position: static;
transform: none;
}
.has-submenu-icon {
display: none;
}
}
&:hover {
.nav-item {
&:not(:hover) {
opacity: 0.5;
}
}
}
}
.mobile-overlay {
height: 100%;
.lang-dropdown {
display: none;
}
.holder {
height: 100%;
}
}
// Hide elements on desktop
.copyright,
.mobile-hamburger {
display: none;
}
.nav {
&-container {
height: 100%;
@include flex;
@include align-items(center);
}
&.with-mobile-menu {
#mobile-menu {
display: none;
}
}
}
}
// Mobile menu
&.-mobile {
// Switch chevron indicator to plus
.menu-chevron {
display: none;
}
.menu {
// All menu items
li {
// Sub menu items
> ul {
height: 0px;
margin: 0;
padding-left: 15px;
overflow: hidden;
font-size: 0.95em;
@include transition;
&.active {
height: auto;
}
li {
padding: 0;
&.active {
font-weight: 600;
}
}
ul {
font-weight: 500;
}
}
}
// 1st level menu items
> .nav-item {
font-size: $font_size_large;
position: relative;
padding: 0;
margin: 0 -20px;
a {
display: block;
line-height: 2em;
padding: 5px 20px;
position: relative;
.has-submenu-icon {
right: 20px;
}
}
&.active {
> a {
&::before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 2px;
left: 0;
top: 0;
opacity: 1;
background-color: currentColor;
}
}
}
}
}
.nav {
&.with-mobile-menu {
#menu-primary {
display: none;
}
}
&:not(.with-mobile-menu) {
#mobile-menu {
display: none;
}
}
}
.desktop-hamburger {
display: none;
}
&.-sticky {
.close-bar {
position: static;
.clb-close {
z-index: 10;
}
.search-global {
position: absolute;
}
}
}
&:not(.without-mobile-search) {
.search-global {
display: block !important;
}
}
&.without-mobile-search {
.search-global {
display: none;
}
}
}
@include sm-screen {
.mobile-overlay {
opacity: 0;
}
}
}
// Hamburger
.hamburger {
user-select: none;
&.icon-button {
> .icon {
@include inline-flex;
@include flex-direction(column);
@include align-items(flex-start);
&::after,
&::before {
content: "";
height: 2px;
margin: 3px 0;
background-color: currentColor;
}
&::before {
width: 1.375rem;
}
&::after {
width: 1.1rem;
}
}
}
}
// Menu optional
.menu-optional {
position: relative;
@include flex;
@include align-items(center);
> li {
&:not(.icon-button-holder):not(:last-child) {
padding-right: 1rem;
}
&:first-child {
padding-left: 2vw;
@include sm-screen {
padding-left: 0;
}
}
}
}
// Hamburger menu
.hamburger-nav {
@include flex;
@include flex-direction(column);
@include spacer;
&-holder {
height: 100%;
@include spacer(top);
@include flex;
@include align-items(center);
}
.menu {
counter-reset: number;
width: 25%;
position: relative;
li {
color: $color-white;
}
// Blank menu
&-blank {
color: $color-white;
}
@include tablet-screen {
width: calc(100% / 3);
}
.menu-chevron {
display: none;
}
&.menu-blank {
width: auto;
margin: 0;
color: $color-white;
}
// First level menu items
.nav-item {
counter-increment: number;
> a {
&::before {
content: '0'counter(number);
display: inline-block;
opacity: 1;
font-weight: bold;
width: auto;
vertical-align: top;
line-height: 20px;
font-size: 14px;
position: relative;
height: auto;
background: transparent;
align-self: flex-start;
color: $color-grey-light;
@include transition;
@include sm-screen {
font-size: 11px;
}
}
}
}
// All menu items
.mega-menu-item {
padding: 5px 50px 5px 0px;
list-style-type: none;
line-height: 1;
@include transition;
> a {
width: 100%;
vertical-align: middle;
font-weight: bold;
font-size: 5vh;
font-family: $font-headlines;
display: block;
position: relative;
z-index: 2;
&:hover,
&:focus {
color: inherit;
}
span {
line-height: 1.2;
@include inline-flex;
@include transition;
}
}
// Submenu indicator
.has-submenu-icon {
&:not(:hover) {
transform: translateY(-50%) scale(1) rotate(0deg);
}
}
// Sub menu items
> ul {
width: 100%;
margin: 0;
position: absolute;
top: 0;
left: 100%;
z-index: 1;
visibility: hidden;
opacity: 0;
@include transition;
&.visible {
opacity: 1;
visibility: visible;
}
}
// &.active,
&:hover {
> a {
span {
opacity: .5;
transform: translateX(1rem);
}
&::before {
transform: translateX(1rem);
opacity: 0;
}
.ion {
color: $color-red;
}
}
> ul {
opacity: 1;
visibility: visible;
> * {
@include flip-up-active;
}
}
}
}
}
// Custom HTML details
&-details {
font-size: $font-size-small;
padding-top: 2rem;
flex-wrap: wrap;
color: $color-grey;
@include flex;
@include align-items(flex-start);
.lang-dropdown {
background-color: $color-neutral-8;
color: $color-white;
width: auto;
@include chevron(light);
}
.details-column {
width: 25%;
margin: 1rem 0;
@include tablet-screen {
width: calc(100% / 3);
}
b,
.network {
color: $color-white;
}
}
}
// Type1 menu
&:not(.type2):not(.type3) {
@include spacer4x(padding-left);
@include spacer4x(padding-right);
.menu {
// First level menu items
.nav-item {
> a::before {
margin-right: 0.5rem;
}
}
}
}
// Type2, Type3 menu
&.type2,
&.type3 {
display: block;
.page-container {
height: 100%;
@include flex;
@include flex-direction(column);
}
.hamburger-nav-holder {
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
@include flex-just(center);
&::-webkit-scrollbar,
&::-webkit-scrollbar-thumb {
visibility: hidden;
}
}
.menu {
min-width: initial;
text-align: center;
width: 40vw;
// With submenu icons
.has-submenu-icon {
position: static;
top: 0;
right: 0;
margin-left: -3rem;
transform: translate(100%, 0);
z-index: 1;
&:not(:hover) {
transform: translate(100%, 0);
}
.ion {
background-color: transparent;
font-size: 1.25em;
}
}
// All menu items
li {
padding-right: 0;
white-space: nowrap;
position: relative;
overflow: hidden;
text-transform: uppercase;
> a {
position: relative;
width: auto;
@include inline-flex;
@include flex-just(center);
span {
padding: 0px 10px;
@include transition;
&.cloned {
position: absolute;
top: 0;
transform: translateY(100%);
opacity: 0;
}
}
&::before {
position: absolute;
left: -1rem;
}
}
// Sub menu items
> ul {
max-height: 0vh;
overflow: hidden;
position: static;
visibility: visible !important;
opacity: 1 !important;
margin: 0;
@include align-items(flex-start);
@include transition;
span {
font-size: 0.75em;
}
}
&.active {
> ul {
max-height: 100vh;
margin-top: 20px;
margin-bottom: 20px;
}
}
&:hover,
&.active {
.has-submenu-icon {
transform: translateX(100%);
}
> a {
span {
&:not(.cloned) {
transform: translateY(-110%);
opacity: 0;
}
&.cloned {
transform: translateY(0);
opacity: .5;
}
}
}
}
}
}
}
// Type2 menu
&.type2 {
// Custom HTML details
.hamburger-nav-details {
@include flex-just(center);
}
}
// Type3 menu
&.type3 {
padding: 0;
@include align-items(center);
@include flex-just(space-between);
@include flex-direction(row);
> .page-container {
@include flex-direction(row);
@include align-items(center);
@include flex-just(center);
@include sm-screen {
@include flex-direction(column);
}
}
.hamburger-nav-holder {
width: 75%;
@include flex-just(flex-start);
@include sm-screen {
width: 100%;
}
}
// menu
.menu {
width: 100%;
padding-left: 0;
max-height: 80vh;
// All menu items
.mega-menu-item {
> a {
overflow: hidden;
padding-left: $grid-spacer;
font-size: 10vh;
@include flex;
@include flex-just(flex-start);
@include sm-screen {
font-size: 9vw;
}
span {
line-height: .95;
&.cloned {
width: 100%;
-webkit-text-stroke: 1px currentColor;
-webkit-text-fill-color: transparent;
}
}
&::before {
left: 0;
}
}
}
}
// Custom HTML
.hamburger-nav-details {
width: 25%;
height: 100%;
@include flex;
@include align-items(center);
@include flex-just(center);
@include flex-direction(column);
@include spacer(padding-left);
@include sm-screen {
width: 100%;
padding-left: 0;
}
.details-column {
width: 100%;
}
}
}
}
.is-mobile-menu {
.hamburger-nav {
display: none;
}
}