@ilo-org/styles 1.9.0 → 1.10.1

package/scss/components/photogallery/_lightboxgallery.scss

@@ -0,0 +1,254 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--lightbox-gallery {
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+
+  &__core {
+    width: 100%;
+    height: 70svh;
+
+    @include breakpoint("md") {
+      height: 80svh;
+    }
+
+    &__viewport {
+      overflow: hidden;
+      width: 100%;
+    }
+
+    &__container {
+      display: flex;
+      touch-action: pan-y pinch-zoom;
+      margin-left: calc(spacing(5) * -1);
+    }
+
+    &__slide {
+      transform: translate3d(0, 0, 0);
+      flex: 0 0 100%;
+      padding-left: spacing(5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      overflow: visible;
+      height: 70svh;
+
+      @include breakpoint("md") {
+        height: 80svh;
+      }
+    }
+
+    &__image-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      @include breakpoint("md") {
+        display: block;
+        height: 100%;
+        width: auto;
+      }
+
+      &-credit {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        color: var(--ilo-color-white);
+        height: 25px;
+        display: flex;
+        @include typography("body-xsmall");
+        margin-bottom: -1px;
+
+        [dir="rtl"] & {
+          left: auto;
+          right: 0;
+        }
+
+        &-text {
+          padding: spacing(1) spacing(3);
+          display: flex;
+          align-items: center;
+          background-color: var(--ilo-color-gray-charcoal);
+        }
+
+        &-corner {
+          display: block;
+          width: px-to-rem(25px);
+          height: px-to-rem(25px);
+          background-color: var(--ilo-color-gray-charcoal);
+          clip-path: polygon(0 0, 0% 100%, 100% 100%);
+          margin-left: px-to-rem(-0.5px);
+
+          @include breakpoint("md") {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
+          [dir="rtl"] & {
+            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+            margin-left: 0;
+            margin-right: px-to-rem(-0.5px);
+          }
+        }
+      }
+
+      img {
+        width: 100%;
+        object-fit: contain;
+
+        @include breakpoint("md") {
+          height: 70svh;
+
+          @include breakpoint("md") {
+            height: 80svh;
+          }
+          aspect-ratio: unset;
+        }
+      }
+    }
+  }
+
+  &__bar {
+    height: 30svh;
+
+    @include breakpoint("md") {
+      height: 20svh;
+    }
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @include breakpoint("md") {
+      justify-content: space-evenly;
+    }
+  }
+
+  &__caption {
+    display: block;
+
+    @include breakpoint("md") {
+      display: none;
+    }
+  }
+
+  &__extra {
+    display: none;
+    height: px-to-rem(80px);
+    padding: spacing(4) spacing(10);
+    align-items: center;
+    justify-content: space-between;
+
+    @include breakpoint("md") {
+      display: flex;
+    }
+
+    &-text {
+      color: var(--ilo-color-white);
+      @include typography("body-small");
+      position: relative;
+      padding-left: spacing(4);
+      text-align: left;
+      flex-basis: 70%;
+
+      [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;
+        }
+      }
+    }
+  }
+
+  &__thumbnails {
+    &__carousel {
+      overflow: hidden;
+      padding-inline: spacing(2);
+    }
+
+    &__container {
+      display: flex;
+      gap: spacing(2);
+    }
+
+    &__slide {
+      display: flex;
+    }
+
+    &__image {
+      position: relative;
+      width: px-to-rem(90px);
+      border: none;
+      outline: none;
+      background-color: var(--ilo-color-gray-light);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+
+      &:focus {
+        outline: px-to-rem(2px) solid var(--ilo-color-blue);
+        outline-offset: px-to-rem(2px);
+      }
+
+      @include breakpoint("md") {
+        width: px-to-rem(160px);
+      }
+
+      img {
+        height: inherit;
+        width: inherit;
+        aspect-ratio: 16/9;
+        object-fit: contain;
+      }
+
+      &--selected,
+      &:hover {
+        z-index: 2;
+
+        &::after {
+          width: inherit;
+          content: "";
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(
+            0deg,
+            rgba(30, 45, 190, 0.4) 0%,
+            rgba(30, 45, 190, 0.4) 100%
+          );
+          pointer-events: none;
+          border-bottom: px-to-rem(4) solid var(--ilo-color-blue);
+        }
+      }
+    }
+  }
+
+  &__controls {
+    display: block;
+    padding: spacing(4);
+
+    @include breakpoint("md") {
+      display: none;
+    }
+  }
+}

package/scss/components/photogallery/_photogallery-controls.scss

@@ -0,0 +1,125 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--photo-gallery-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: spacing(4);
+
+  &__page {
+    display: flex;
+    gap: spacing(1);
+    @include typography("highlight-small");
+    font-family: var(--ilo-fonts-copy);
+    color: var(--ilo-color-white);
+
+    [dir="rtl"] & {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__previous-set,
+  &__next-set {
+    display: flex;
+    gap: spacing(2);
+  }
+
+  &__item {
+    background: var(--ilo-color-gray-light);
+    border: none;
+    border-radius: 2px;
+    color: var(--ilo-color-blue-dark);
+    height: px-to-rem(40px);
+    width: px-to-rem(40px);
+    position: relative;
+    text-indent: -999%;
+    cursor: pointer;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: px-to-rem(20px);
+      width: px-to-rem(20px);
+      background-repeat: no-repeat;
+    }
+
+    &:hover {
+      background: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
+    }
+  }
+
+  &__first {
+    &::before {
+      transform: translate(-50%, -50%) rotate(180deg);
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
+    }
+
+    &:hover::before {
+      @include icon("double_chevron_right", var(--ilo-color-blue));
+    }
+
+    [dir="rtl"] & {
+      &::before {
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  &__prev {
+    &::before {
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
+
+    &:hover::before {
+      @include icon("chevron_right", var(--ilo-color-blue));
+    }
+
+    [dir="rtl"] & {
+      &::before {
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  &__next {
+    &::before {
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover::before {
+      @include icon("chevron_right", var(--ilo-color-blue));
+    }
+
+    [dir="rtl"] & {
+      &::before {
+        transform: translate(-50%, -50%) rotate(180deg);
+      }
+    }
+  }
+
+  &__last {
+    &::before {
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
+      transform: translate(-50%, -50%);
+    }
+
+    &:hover::before {
+      @include icon("double_chevron_right", var(--ilo-color-blue));
+    }
+
+    [dir="rtl"] & {
+      &::before {
+        transform: translate(-50%, -50%) rotate(180deg);
+      }
+    }
+  }
+}

package/scss/components/photogallery/_photogallery-thumbnails.scss

@@ -0,0 +1,100 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--photo-gallery-thumbnails {
+  --ilo-photo_gallery-thumbnails-width: 90px;
+
+  @include breakpoint("md") {
+    --ilo-photo_gallery-thumbnails-width: 142px;
+  }
+
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: spacing(2);
+  overflow: hidden;
+  flex-wrap: nowrap;
+
+  &__carousel {
+    overflow: hidden;
+  }
+
+  &__container {
+    display: flex;
+    gap: spacing(2);
+  }
+
+  &__slide {
+    display: flex;
+  }
+
+  &__thumbnail {
+    width: var(--ilo-photo_gallery-thumbnails-width);
+    position: relative;
+    border: none;
+    cursor: pointer;
+    background-color: var(--ilo-color-gray-light);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &--selected,
+    &:hover {
+      z-index: 2;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(
+          0deg,
+          rgba(30, 45, 190, 0.4) 0%,
+          rgba(30, 45, 190, 0.4) 100%
+        );
+        pointer-events: none;
+        border-bottom: px-to-rem(4) solid var(--ilo-color-blue);
+      }
+    }
+  }
+
+  img {
+    width: var(--ilo-photo_gallery-thumbnails-width);
+    aspect-ratio: 16 / 9;
+    object-fit: contain;
+  }
+
+  &__see-all {
+    flex-shrink: 0;
+    width: var(--ilo-photo_gallery-thumbnails-width);
+    aspect-ratio: 16 / 9;
+    background-color: var(--ilo-color-blue-dark);
+    border: none;
+    outline: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &-label {
+      @include typography("highlight-small-bold");
+      color: var(--ilo-color-blue-dark);
+      text-align: center;
+      background-color: var(--ilo-color-gray-light);
+      padding: spacing(2) spacing(4) spacing(1) spacing(4);
+      border-radius: var(--ilo-border-radius);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--ilo-color-blue-ramp);
+    }
+
+    &:hover &-label,
+    &:focus &-label {
+      background-color: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
+    }
+  }
+}

package/scss/components/photogallery/_photogallery.scss

@@ -0,0 +1,179 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--photo-gallery {
+  --ilo-photo_gallery-target-height: 210px;
+  background-color: var(--ilo-color-white);
+  display: flex;
+  flex-direction: column;
+  gap: spacing(4);
+
+  @include breakpoint("md") {
+    --ilo-photo_gallery-target-height: 420px;
+  }
+
+  &__core {
+    margin: auto;
+    position: relative;
+
+    &__viewport {
+      overflow: hidden;
+      width: 100%;
+    }
+
+    &__container {
+      display: flex;
+      touch-action: pan-y pinch-zoom;
+      margin-left: calc(spacing(5) * -1);
+    }
+
+    &__slide {
+      transform: translate3d(0, 0, 0);
+      flex: 0 0 100%;
+      min-width: 0;
+      padding-left: spacing(5);
+    }
+
+    &__image {
+      .ilo--image--wrapper {
+        position: relative;
+
+        &::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 35%;
+          background: linear-gradient(
+              0deg,
+              rgba(45, 45, 45, 0.6) 0%,
+              rgba(45, 45, 45, 0) 24.88%
+            )
+            transparent;
+          pointer-events: none;
+          z-index: 1;
+        }
+      }
+
+      .ilo--image--credit {
+        z-index: 2;
+      }
+
+      img {
+        width: 100%;
+        object-fit: contain;
+        height: inherit;
+        background-color: var(--ilo-color-gray-light);
+        height: var(--ilo-photo_gallery-target-height);
+        position: relative;
+      }
+
+      &--contain {
+        img {
+          object-fit: contain;
+        }
+      }
+
+      &--cover {
+        img {
+          object-fit: cover;
+        }
+      }
+
+      &--fill {
+        img {
+          object-fit: fill;
+        }
+      }
+    }
+
+    &__controls {
+      display: none;
+      position: absolute;
+      z-index: 2;
+      right: spacing(4);
+      bottom: px-to-rem(10px);
+      visibility: hidden;
+      opacity: 0;
+      transition:
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out;
+
+      [dir="rtl"] & {
+        right: auto;
+        left: spacing(4);
+      }
+
+      @include breakpoint("md") {
+        display: flex;
+      }
+    }
+
+    &:hover &__controls {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &__zoom {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 2;
+      background: var(--ilo-color-gray-light);
+      border: none;
+      width: px-to-rem(40px);
+      height: px-to-rem(40px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--ilo-color-blue-dark);
+      cursor: pointer;
+      border-radius: var(--ilo-border-radius);
+
+      &:hover {
+        background: var(--ilo-color-blue-lighter);
+        color: var(--ilo-color-blue);
+      }
+
+      &:focus {
+        outline: 2px solid var(--ilo-color-blue);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  &__caption {
+    @include typography("body-small");
+    color: var(--ilo-color-gray-accessible);
+    padding-left: spacing(4);
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    [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-base);
+
+      [dir="rtl"] & {
+        left: auto;
+        right: 0;
+      }
+    }
+  }
+}

package/scss/components/photogallery/index.scss

@@ -0,0 +1,6 @@
+@use "photogallery";
+@use "photogallery-controls";
+@use "photogallery-thumbnails";
+@use "lightbox";
+@use "lightboxgallery";
+@use "expandable-caption";

package/scss/theme/_foundation.scss

@@ -34,6 +34,12 @@
   --ilo-color-turquoise: rgba(5, 210, 210, 1);
   --ilo-color-purple: rgba(150, 10, 85, 1);
 
+  /* New colors */
+  --ilo-color-brand-800: rgba(35, 0, 80, 1);
+  --ilo-color-brand-600: rgba(30, 45, 190, 1);
+  --ilo-color-brand-100: rgba(235, 245, 253, 1);
+  --ilo-color-yellow-500: rgba(250, 180, 40, 1);
+
   --ilo-color-notification-type-error: var(--ilo-color-red);
   --ilo-color-notification-type-info: var(--ilo-color-blue);
   --ilo-color-notification-type-success: var(--ilo-color-green);
@@ -95,10 +101,10 @@
   /**
     * Letter spacing
     */
-  --ilo-letter-spacing-xsm: -3.5%;
-  --ilo-letter-spacing-sm: -2%;
-  --ilo-letter-spacing-md: 0;
-  --ilo-letter-spacing-lg: 2%;
+  --ilo-letter-spacing-xsm: -0.035em;
+  --ilo-letter-spacing-sm: -0.02em;
+  --ilo-letter-spacing-md: 0em;
+  --ilo-letter-spacing-lg: 0.02em;
 
   /**
     * Spacing