@ilo-org/styles 1.9.0 → 1.10.0

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;

package/scss/components/navigation/{mobile → internal/mobile}/_nav-mobile.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 {
   &__branding {
@@ -20,6 +20,10 @@
   }
 
   &__widgets {
+    display: flex;
+    flex-direction: column;
+    margin: px-to-rem(2px);
+
     &-search {
       padding: spacing(4) 0;
       display: flex;
@@ -43,6 +47,23 @@
       }
     }
 
+    &-search-input {
+      // Form control overrides can be deleted when form control hides label conditionally
+      .ilo--fieldset {
+        width: 100%;
+      }
+
+      .ilo--form-control {
+        width: 100%;
+        display: inline;
+      }
+      .ilo--form-control--label {
+        display: none;
+      }
+
+      padding-block: spacing(5);
+    }
+
     &-link {
       @include typography("highlight-medium");
       padding: spacing(4) 0;