@ilo-org/styles 0.1.10 → 0.1.12

package/scss/components/_hero.scss

@@ -163,16 +163,19 @@
   }
 
   .ilo--breadcrumb {
-    left: 0;
-    max-width: 560px;
-    position: absolute;
-    top: 0;
     width: 100%;
 
     .right-to-left & {
       left: auto;
       right: 0;
     }
+
+    @include breakpoint("medium") {
+      left: 0;
+      max-width: 560px;
+      position: absolute;
+      top: 0;
+    }
   }
 }
 
@@ -364,7 +367,7 @@
 
     @include breakpoint("large") {
       max-width: 625px;
-      padding: 0 48px 48px 72px;
+      padding: 0 48px 42px 72px;
       width: 100%;
     }
   }
@@ -372,11 +375,21 @@
   &--publication {
     padding: 24px;
 
+    .ilo--hero-card--eyebrow {
+      margin-bottom: px-to-rem(6px);
+    }
+
     @include breakpoint("large") {
+      margin-left: 106px;
       margin-top: -64px;
       max-width: 720px;
-      padding: 0 48px 48px 72px;
+      padding: 0 48px 48px 48px;
       width: 100%;
+
+      &:before {
+        height: px-to-rem(40px);
+        top: px-to-rem(-39.7px);
+      }
     }
   }
 
@@ -428,7 +441,7 @@
 
   &--list--item {
     display: inline-block;
-    margin-right: 32px;
+    margin-right: 24px;
 
     &:last-of-type {
       margin-right: 0;

package/scss/components/_list.scss

@@ -58,18 +58,29 @@
   }
 
   &__title {
-    @include font-styles("headline-5");
-
-    font-family: $fonts-display;
-    font-weight: 700;
+    @include font-styles("headline-6");
     @include textmargin(
       "margin-bottom",
-      map-get($spacing, "ui-padding-xxl"),
-      "headline-5",
+      24px,
+      "headline-6",
       "display",
-      "base",
+      "body-small",
       "copy"
     );
+    font-family: $fonts-display;
+    font-weight: 700;
+
+    @include breakpoint("medium") {
+      @include font-styles("headline-5");
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "ui-padding-xxl"),
+        "headline-5",
+        "display",
+        "base",
+        "copy"
+      );
+    }
   }
 
   &__item {
@@ -95,14 +106,7 @@
 
     @include breakpoint("medium") {
       @include font-styles("base");
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "ui-padding-lg"),
-        "base",
-        "copy",
-        0,
-        0
-      );
+      @include textmargin("margin-bottom", 20px, "base", "copy", 0, 0);
     }
   }
 }

package/scss/components/_navigation.scss

@@ -9,7 +9,12 @@
   z-index: 4;
 
   &.ilo--mobile--open {
-    height: 100vh;
+    height: 100%;
+    left: 0;
+    min-height: 100vh;
+    position: fixed;
+    top: 0;
+    width: 100%;
   }
 
   @include breakpoint("large") {
@@ -115,6 +120,69 @@
   &--utility-bar {
     display: none;
 
+    &--local {
+      background: $brand-ilo-blue;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      .ilo--language-switcher {
+        display: none;
+
+        &--link {
+          @include dataurlicon("arrowleft", $brand-ilo-white);
+          @include font-styles("language-switcher");
+          appearance: none;
+          background-color: inherit;
+          background-position: 16px 50%;
+          background-repeat: no-repeat;
+          background-size: 24px;
+          border: none;
+          color: $brand-ilo-white;
+          cursor: pointer;
+          font-family: $fonts-display;
+          font-weight: 500;
+          padding: 16px 16px 16px 36px;
+          text-decoration: none;
+          transition: all 150ms ease-out;
+          width: 100%;
+
+          &:focus,
+          &:hover {
+            @include dataurlicon("arrowleft", $brand-ilo-blue);
+            background-color: $brand-ilo-light-blue;
+            color: $brand-ilo-blue;
+          }
+
+          .right-to-left & {
+            @include dataurlicon("arrowright", $brand-ilo-white);
+            background-position: calc(100% - 16px) 50%;
+            padding: 16px 36px 16px 16px;
+
+            &:focus,
+            &:hover {
+              @include dataurlicon("arrowright", $brand-ilo-blue);
+              background-color: $brand-ilo-light-blue;
+              color: $brand-ilo-blue;
+            }
+          }
+
+          &--wrap {
+            align-items: center;
+            display: flex;
+          }
+        }
+
+        @include breakpoint("large") {
+          display: flex;
+        }
+      }
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
+
     @include breakpoint("large") {
       background: $brand-ilo-blue;
       display: flex;
@@ -150,9 +218,12 @@
 
   &--navigation {
     background: $brand-ilo-white;
+    height: 100%;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
     position: absolute;
     top: 0;
-    left: 0;
     transform: translateX(100%);
     transition: transform 225ms ease-out;
     width: 100%;
@@ -161,6 +232,12 @@
       transform: translateX(0);
     }
 
+    .ilo--header--local & {
+      @include breakpoint("large") {
+        display: none;
+      }
+    }
+
     @include breakpoint("large") {
       background: $brand-ilo-dark-blue;
       position: static;
@@ -272,7 +349,7 @@
     background-color: $brand-ilo-white;
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
-    background-size: 16px;
+    background-size: 24px;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
@@ -356,15 +433,40 @@
   &--local {
     display: flex;
     justify-content: space-between;
-    padding: 0 0 0 max((100% - 1260px) / 2, 20px);
+
+    .right-to-left & {
+      direction: rtl;
+
+      @include breakpoint("large") {
+        padding: 0 max((100% - 1260px) / 2, 20px) 0 0;
+      }
+    }
+
+    @include breakpoint("large") {
+      padding: 0 0 0 max((100% - 1260px) / 2, 20px);
+    }
+
+    &--logo-wrapper {
+      display: flex;
+      padding: 16px 0;
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
 
     &--logo-link {
       display: flex;
+      align-items: center;
     }
 
     &--set {
-      display: flex;
-      justify-content: space-between;
+      display: none;
+
+      @include breakpoint("large") {
+        display: flex;
+        justify-content: space-between;
+      }
     }
 
     &--item {
@@ -532,11 +634,18 @@
     transition: opacity 150ms ease-out;
     z-index: -1;
 
-    .ilo--context--open & {
+    .ilo--context--open &,
+    .ilo--language-switcher:focus-within &,
+    &:focus-within {
       opacity: 1;
       z-index: 1;
     }
   }
+
+  .ilo--language-switcher--button:focus + .ilo--context-menu {
+    opacity: 1;
+    z-index: 1;
+  }
 }
 
 .ilo--subnav {
@@ -559,9 +668,6 @@
   }
 
   @include breakpoint("large") {
-    filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
-      drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
-      drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
     height: auto;
     left: 0;
     padding: 32px 0;
@@ -571,6 +677,14 @@
     z-index: -1;
 
     .ilo--header.ilo--subnav--open & {
+      border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
+      filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+        drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+        drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
+      transform: translateY(0);
+    }
+
+    &:has(.ilo--subnav--link:focus) {
       transform: translateY(0);
     }
   }
@@ -737,6 +851,11 @@
     .ilo--header.ilo--search--open & {
       transform: translateY(0);
     }
+
+    &:has(.ilo--input:focus),
+    &:has(.ilo--searchfield--button:focus) {
+      transform: translateY(0);
+    }
   }
 
   .ilo--header--inner {
@@ -768,7 +887,7 @@
     background-color: transparent;
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 21.5px 21.5px;
+    background-size: 32px 32px;
     border: none;
     border-radius: 0;
     cursor: pointer;
@@ -788,7 +907,7 @@
       background-color: $brand-ilo-white;
       background-position: center;
       background-repeat: no-repeat;
-      background-size: 21.5px 21.5px;
+      background-size: 32px 32px;
 
       &:hover,
       &:focus {
@@ -798,3 +917,20 @@
     }
   }
 }
+
+
+.ilo--menu--open {
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+}
+
+#anchor--components-navigation--navigation .docs-story {
+  & > div:first-child {
+    padding-top: 0;
+  }
+}
+
+.sb-show-main.sb-main-padded {
+  padding-top: 0;
+}

package/scss/components/_pagination.scss

@@ -235,4 +235,10 @@
     font-weight: 400;
     line-height: 45px;
   }
+
+  &--previous-set,
+  &--next-set {
+    display: flex;
+    justify-content: flex-start;
+  }
 }

package/scss/components/_tooltip.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@use "../animations" as *;
 @import "../mixins";
 
 .ilo--tooltip {
@@ -16,12 +17,13 @@
   opacity: 0;
   padding: px-to-rem($spacing-padding-1) px-to-rem($spacing-padding-1-5);
   position: absolute;
-  transition: opacity 150ms ease-out;
   visibility: hidden;
   width: auto;
+  @include globaltransition("opacity");
 
   &--fade {
     opacity: 1;
+    @include globaltransition("opacity");
   }
 
   &--visible {
@@ -191,3 +193,7 @@
     }
   }
 }
+
+.docs-story div[height] {
+  min-height: 150px;
+}

package/scss/components/_video.scss

@@ -723,7 +723,8 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus,
+  &:focus-within {
     .ilo--video--controls,
     .vjs-control-bar {
       opacity: 1;