@ilo-org/styles 1.9.0 → 1.10.1

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;

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;

package/scss/components/photogallery/_expandable-caption.scss

@@ -0,0 +1,92 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--photo-gallery-expandable-caption {
+  position: relative;
+  $self: &;
+  min-height: px-to-rem(56px);
+
+  &__preview {
+    padding: spacing(4);
+    min-height: px-to-rem(56px);
+    display: flex;
+    justify-content: space-between;
+    gap: spacing(1);
+    align-items: center;
+    color: var(--ilo-color-white);
+    animation: slideDown 0.2s ease-out;
+  }
+
+  &__text {
+    @include typography("body-xsmall");
+    line-height: normal;
+    position: relative;
+    padding-left: spacing(4);
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin: 0;
+
+    [dir="rtl"] & {
+      padding-left: 0;
+      padding-right: spacing(4);
+      text-align: right;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: px-to-rem(3px);
+      height: 100%;
+      background-color: var(--ilo-color-gray-light);
+
+      [dir="rtl"] & {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+
+  &__toggle {
+    border: none;
+    outline: none;
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+    background: transparent;
+    color: var(--ilo-color-white);
+    cursor: pointer;
+    flex-shrink: 0;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &--expanded {
+    #{$self}__preview {
+      overflow: visible;
+      white-space: normal;
+      text-overflow: unset;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, 0.8);
+      color: var(--ilo-color-white);
+      animation: slideUp 0.2s ease-out;
+      align-items: flex-start;
+    }
+
+    #{$self}__text {
+      overflow: visible;
+      white-space: normal;
+      text-overflow: unset;
+    }
+  }
+}

package/scss/components/photogallery/_lightbox.scss

@@ -0,0 +1,70 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--lightbox {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  display: none;
+  opacity: 0;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ilo-color-gray-charcoal);
+
+  &--open {
+    display: flex;
+    opacity: 1;
+  }
+
+  &__backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--ilo-color-gray-charcoal);
+  }
+
+  &__container {
+    position: relative;
+    width: 100svw;
+    height: 100%;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+  }
+
+  &__close {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 10000;
+    background: var(--ilo-color-white);
+    border: none;
+    width: px-to-rem(40px);
+    height: px-to-rem(40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ilo-color-gray-charcoal);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
+    }
+
+    &:focus {
+      outline: 2px solid var(--ilo-color-blue);
+      outline-offset: 2px;
+    }
+  }
+}