@ilo-org/styles 1.8.5 → 1.10.0

package/scss/components/navigation/_nav-complex.scss

@@ -1,15 +1,11 @@
 @use "../../tokens" as *;
 @use "../../functions" as *;
+@use "./internal/nav-shared" as *;
 @import "../../mixins";
 @import "../../config";
 
 .ilo--subsite-nav-complex {
-  position: relative;
-  overflow: hidden;
-
-  @include breakpoint("lg", true) {
-    height: px-to-rem(70px);
-  }
+  @include nav-base;
 
   &-bg {
     &--light {
@@ -22,189 +18,59 @@
   }
 
   &__container {
-    max-width: px-to-rem(1296px);
-    margin-left: auto;
-    margin-right: auto;
-    padding-inline: spacing(4);
-
-    &--light {
-      background-color: var(--ilo-color-blue-lighter);
-    }
-
-    &--dark {
-      background-color: var(--ilo-color-blue);
-    }
+    @include nav-container;
   }
 
   &__widgets {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    height: px-to-rem(32px);
-    position: relative;
-    padding-inline-end: 0;
-
-    @include breakpoint("lg", true) {
-      display: none;
-    }
+    @include nav-widgets-bar-content;
 
     &-bar-corner {
-      display: block;
-      background-color: var(--ilo-color-blue);
-      width: px-to-rem(32px);
-      height: px-to-rem(32px);
-      clip-path: polygon(0 0, 100% 0, 99% 100%);
-      margin-right: -1px;
-      transform: skewY(0.001deg);
-
-      [dir="rtl"] & {
-        @include cornercut(spacing(10), 100%, "left");
-        margin-right: 0;
-        margin-left: -1px;
-        clip-path: polygon(0 0, 100% 0, 1% 100%);
-      }
+      @include nav-widgets-corner(var(--ilo-color-blue));
     }
 
     &-bar {
-      background-color: var(--ilo-color-blue);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      gap: spacing(4);
-      padding-inline-end: spacing(4);
-      height: px-to-rem(32px);
+      @include nav-widgets-bar(var(--ilo-color-blue));
 
       &__link {
-        @include typography("highlight-small-bold");
-        height: inherit;
-        display: flex;
-        align-items: center;
-        padding-inline: spacing(2);
-        text-decoration: none;
-        color: var(--ilo-color-white);
-
-        &:hover,
-        &:focus {
-          background-color: var(--ilo-color-blue-dark);
-        }
+        @include nav-widgets-link(var(--ilo-color-blue-dark));
       }
     }
 
     &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 100%;
-      width: 100vw;
-      height: 100%;
       background-color: var(--ilo-color-blue);
-      z-index: 1;
-
-      [dir="rtl"] & {
-        left: auto;
-        right: 100%;
-      }
     }
   }
 
   &__branding {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: spacing(6);
-
-    @include breakpoint("lg", true) {
-      display: none;
-    }
+    @include nav-branding;
 
     &-main {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &__logo img {
-        height: 100%;
-        height: px-to-rem(72px);
-        width: auto;
-      }
-
-      &__name {
-        @include typography("heading-2");
-        padding-inline-start: spacing(4);
-      }
+      @include nav-branding-main;
     }
 
     &-tag {
-      display: flex;
-      flex-direction: column;
-      text-align: right;
-
-      &__main {
-        @include typography("heading-4");
-      }
-
-      &__sub {
-        @include typography("body-xsmall");
-      }
+      @include nav-branding-tag;
     }
   }
 
   &__nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: px-to-rem(64px);
-
-    @include breakpoint("lg", true) {
-      height: px-to-rem(70px);
-    }
+    @include nav-core;
 
     &-menu {
-      height: 100%;
-      @include breakpoint("lg", true) {
-        display: none;
-      }
+      @include nav-menu;
     }
 
     &-mobile {
-      justify-content: center;
-      align-items: center;
-      display: none;
-
-      @include breakpoint("lg", true) {
-        display: flex;
-      }
-
-      &__logo {
-        padding-inline-end: spacing(4);
-        height: px-to-rem(38px);
-
-        img {
-          height: 100%;
-          width: auto;
-        }
-      }
+      @include nav-mobile;
     }
 
     &-search {
+      @include nav-search;
       --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding-inline: spacing(2);
       text-decoration: none;
 
-      @include breakpoint("lg", true) {
-        display: none;
-      }
-
-      display: flex;
-
       &__icon {
         @include icon("search", var(--ilo-subsite_nav_complex-search-color));
-        width: px-to-rem(32px);
-        height: px-to-rem(32px);
-        cursor: pointer;
       }
 
       &:hover,
@@ -215,26 +81,15 @@
     }
 
     &-burger {
-      display: none;
-
-      @include breakpoint("lg", true) {
-        display: flex;
-      }
-
+      @include nav-burger;
       --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
-      margin-block: px-to-rem(20px);
-      align-items: center;
-      border: none;
-      cursor: pointer;
 
       &__icon {
-        width: px-to-rem(32px);
-        height: px-to-rem(32px);
         @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
       }
 
       &:hover {
-        --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
+        --ilo-subsite_nav_complex-burger-color: var(--ilo-color-blue);
         background-color: var(--ilo-color-white);
       }
     }

package/scss/components/navigation/_nav-main.scss

@@ -0,0 +1,127 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@use "./internal/nav-shared" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--main-nav {
+  @include nav-base;
+
+  &-bg {
+    &--dark {
+      background-color: var(--ilo-color-blue);
+    }
+
+    &--darker {
+      background-color: var(--ilo-color-blue-dark);
+
+      @include breakpoint("lg", true) {
+        background-color: var(--ilo-color-blue);
+      }
+    }
+  }
+
+  &__container {
+    @include nav-container;
+  }
+
+  &__widgets {
+    @include nav-widgets-bar-content;
+    &::after {
+      background-color: var(--ilo-color-blue-dark);
+    }
+
+    &-bar-corner {
+      @include nav-widgets-corner(var(--ilo-color-blue-dark));
+    }
+
+    &-bar {
+      @include nav-widgets-bar(var(--ilo-color-blue-dark));
+
+      &__link {
+        @include nav-widgets-link(var(--ilo-color-blue-dark));
+      }
+    }
+  }
+
+  &__branding {
+    @include nav-branding;
+
+    &-main {
+      @include nav-branding-main;
+    }
+
+    &-tag {
+      @include nav-branding-tag;
+
+      &__main {
+        color: white;
+      }
+
+      &__sub {
+        color: var(--ilo-color-blue-light);
+      }
+    }
+  }
+
+  &__nav {
+    @include nav-core;
+
+    &-menu {
+      @include nav-menu;
+    }
+
+    &-mobile {
+      @include nav-mobile;
+    }
+
+    &-search {
+      --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
+      @include nav-search;
+      border: none;
+
+      &__icon {
+        @include icon("search", var(--ilo-subsite_nav_complex-search-color));
+      }
+
+      &:hover {
+        --ilo-subsite_nav_complex-search-color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+
+    &-burger {
+      @include nav-burger;
+
+      --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
+
+      &__icon {
+        @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
+      }
+
+      &:hover {
+        --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+
+    &-search-dropdown {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      form {
+        width: px-to-rem(620px);
+      }
+
+      .ilo--form-control,
+      .ilo--fieldset {
+        width: 100%;
+      }
+
+      .ilo--form-control {
+        padding-top: spacing(20);
+        padding-bottom: spacing(22);
+      }
+    }
+  }
+}

package/scss/components/navigation/index.scss

@@ -1,6 +1,4 @@
-@use "nav-menu";
+@use "internal";
 @use "nav-compact";
 @use "nav-complex";
-@use "nav-dropdown";
-@use "nav-grid";
-@use "mobile";
+@use "nav-main";

package/scss/components/navigation/{_nav-dropdown.scss → internal/_nav-dropdown.scss}

@@ -1,7 +1,7 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
 
 .ilo--nav-dropdown {
   position: absolute;

package/scss/components/navigation/{_nav-grid.scss → internal/_nav-grid.scss}

@@ -1,7 +1,7 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
 
 .ilo--nav-menu-grid {
   display: flex;

package/scss/components/navigation/{_nav-menu.scss → internal/_nav-menu.scss}

@@ -1,13 +1,14 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
-@import "../../animations";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
+@import "../../../animations";
 
 .ilo--nav-menu {
   display: flex;
   align-items: center;
   gap: spacing(12);
+  $self: &;
 
   @include breakpoint("xl", true) {
     gap: spacing(6);
@@ -46,6 +47,18 @@
     }
   }
 
+  &--light {
+    #{$self}__link {
+      &--active,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+  }
+
   &__more {
     @include globaltransition("background-color, border-color");
 
@@ -75,11 +88,23 @@
 
     &--open,
     &:hover,
-    &:focus,
     &:active {
       outline: none;
       border-color: var(--ilo-color-blue-dark);
       background-color: var(--ilo-color-blue-dark);
     }
   }
+
+  &--light {
+    #{$self}__more {
+      &--open,
+      &:hover,
+      &:active {
+        --ilo-nav_menu-icon-color: var(--ilo-color-blue);
+        color: var(--ilo-color-blue);
+        border-color: var(--ilo-color-white);
+        background-color: var(--ilo-color-white);
+      }
+    }
+  }
 }

package/scss/components/navigation/internal/_nav-shared.scss

@@ -0,0 +1,206 @@
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
+
+// Base navigation container
+@mixin nav-base {
+  position: relative;
+  overflow: hidden;
+
+  @include breakpoint("lg", true) {
+    height: px-to-rem(70px);
+  }
+}
+
+@mixin nav-container {
+  max-width: px-to-rem(1296px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-inline: spacing(4);
+}
+
+@mixin nav-widgets-bar-content {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: px-to-rem(32px);
+  position: relative;
+  padding-inline-end: 0;
+
+  @include breakpoint("lg", true) {
+    display: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: 100vw;
+    height: 100%;
+    z-index: 1;
+
+    [dir="rtl"] & {
+      left: auto;
+      right: 100%;
+    }
+  }
+}
+
+@mixin nav-widgets-corner($bg-color) {
+  display: block;
+  background-color: $bg-color;
+  width: px-to-rem(32px);
+  height: px-to-rem(32px);
+  clip-path: polygon(0 0, 100% 0, 99% 100%);
+  margin-right: -1px;
+  transform: skewY(0.001deg);
+
+  [dir="rtl"] & {
+    @include cornercut(spacing(10), 100%, "left");
+    margin-right: 0;
+    margin-left: -1px;
+    clip-path: polygon(0 0, 100% 0, 1% 100%);
+  }
+}
+
+@mixin nav-widgets-bar($bg-color) {
+  background-color: $bg-color;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: spacing(4);
+  padding-inline-end: spacing(4);
+  height: px-to-rem(32px);
+}
+
+@mixin nav-widgets-link($hover-bg-color) {
+  @include typography("highlight-small-bold");
+  height: inherit;
+  display: flex;
+  align-items: center;
+  padding-inline: spacing(2);
+  text-decoration: none;
+  color: var(--ilo-color-white);
+
+  &:hover,
+  &:focus {
+    background-color: $hover-bg-color;
+  }
+}
+
+@mixin nav-branding {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: spacing(6);
+
+  @include breakpoint("lg", true) {
+    display: none;
+  }
+}
+
+@mixin nav-branding-main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__logo img {
+    height: 100%;
+    height: px-to-rem(72px);
+    width: auto;
+  }
+
+  &__name {
+    @include typography("heading-2");
+    padding-inline-start: spacing(4);
+  }
+}
+
+@mixin nav-branding-tag {
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+
+  &__main {
+    @include typography("heading-4");
+  }
+
+  &__sub {
+    @include typography("body-xsmall");
+  }
+}
+
+@mixin nav-core {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: px-to-rem(64px);
+
+  @include breakpoint("lg", true) {
+    height: px-to-rem(70px);
+  }
+}
+
+@mixin nav-menu {
+  height: 100%;
+  @include breakpoint("lg", true) {
+    display: none;
+  }
+}
+
+@mixin nav-mobile {
+  justify-content: center;
+  align-items: center;
+  display: none;
+
+  @include breakpoint("lg", true) {
+    display: flex;
+  }
+
+  &__logo {
+    padding-inline-end: spacing(4);
+    height: px-to-rem(38px);
+
+    img {
+      height: 100%;
+      width: auto;
+    }
+  }
+}
+
+@mixin nav-search {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding-inline: spacing(2);
+
+  @include breakpoint("lg", true) {
+    display: none;
+  }
+
+  &__icon {
+    width: px-to-rem(32px);
+    height: px-to-rem(32px);
+    cursor: pointer;
+  }
+}
+
+@mixin nav-burger {
+  display: none;
+
+  @include breakpoint("lg", true) {
+    display: flex;
+  }
+
+  margin-block: px-to-rem(20px);
+  align-items: center;
+  border: none;
+  cursor: pointer;
+
+  &__icon {
+    width: px-to-rem(32px);
+    height: px-to-rem(32px);
+  }
+}

package/scss/components/navigation/internal/index.scss

@@ -0,0 +1,5 @@
+@use "nav-dropdown";
+@use "nav-grid";
+@use "nav-menu";
+@use "nav-shared";
+@use "mobile";

package/scss/components/navigation/{mobile → internal/mobile}/_nav-mobile-drawer.scss

@@ -1,7 +1,7 @@
-@use "../../../tokens" as *;
-@use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../../tokens" as *;
+@use "../../../../functions" as *;
+@import "../../../../mixins";
+@import "../../../../config";
 
 .ilo--nav-mobile-drawer {
   position: fixed;

package/scss/components/navigation/{mobile → internal/mobile}/_nav-mobile-menu.scss

@@ -1,7 +1,7 @@
-@use "../../../tokens" as *;
-@use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../../tokens" as *;
+@use "../../../../functions" as *;
+@import "../../../../mixins";
+@import "../../../../config";
 
 .ilo--nav-mobile-menu {
   display: flex;