@ilo-org/styles 0.1.11 → 0.1.13

package/scss/components/_dropdown.scss

@@ -60,6 +60,7 @@
       "background"
     );
     @include bordervalues("input", "formelements", "hover");
+    border-left-width: 2px;
     background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-hover)}"),
       linear-gradient(
         to right,
@@ -82,6 +83,7 @@
       "background"
     );
     @include bordervalues("input", "formelements", "focus");
+    border-left-width: 2px;
     background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-hover)}"),
       linear-gradient(
         to right,

package/scss/components/_hero.scss

@@ -163,20 +163,27 @@
   }
 
   .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;
+    }
   }
 }
 
 .ilo--hero-card {
+  @include cornercut(
+    map-get($color, "hero", "card", "light", "background"),
+    40px
+  );
   background: map-get($color, "hero", "card", "light", "background");
   color: map-get($color, "hero", "card", "light", "color");
   max-width: 998px;
@@ -184,29 +191,39 @@
   padding: 16px 16px 40px 16px;
 
   &::before {
-    background: inherit;
-    clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-    content: "";
-    display: block;
-    height: 40px;
     left: 0;
-    position: absolute;
     top: -39.7px;
-    width: 100%;
 
     .right-to-left & {
-      clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
       left: auto;
       right: 0;
     }
 
     @include breakpoint("large") {
-      height: 56px;
-      top: -55.7px;
+      top: -63.7px;
+    }
+  }
+
+  &::after {
+    right: 0;
+    top: -39.7px;
+
+    .right-to-left & {
+      left: 0;
+      right: auto;
+    }
+
+    @include breakpoint("large") {
+      top: -63.7px;
     }
   }
 
   @include breakpoint("large") {
+    @include cornercut(
+      map-get($color, "hero", "card", "light", "background"),
+      64px,
+      116px
+    );
     padding: 0 70px 70px 56px;
 
     &.ilo--hero-card--graphic {
@@ -227,6 +244,10 @@
     border-bottom: 3px solid $color-base-red-medium;
     color: map-get($color, "hero", "card", "dark", "color");
 
+    &::after {
+      @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
+    }
+
     .ilo--hero-card--link.icon {
       color: map-get($color, "hero", "card", "dark", "icon", "color");
 
@@ -305,7 +326,24 @@
       display: none;
     }
 
+    &.ilo--hero-card--nobackground {
+      background: transparent;
+
+      > * {
+        filter: drop-shadow(0px 12px 32px rgba(0, 0, 0, 0.16))
+          drop-shadow(0px 0.8px 1.6px rgba(0, 0, 0, 0.02))
+          drop-shadow(0px 2.7px 4.8px rgba(0, 0, 0, 0.04))
+          drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08));
+      }
+
+      &::before,
+      &::after {
+        content: "";
+      }
+    }
+
     @include breakpoint("large") {
+      @include cornercut($brand-ilo-white, 48px, 87.4px);
       bottom: 72px;
       max-width: 720px;
       padding: 0 48px 48px 72px;
@@ -313,23 +351,25 @@
       width: 100%;
 
       &::before {
-        background: inherit;
-        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-        content: "";
-        display: block;
-        height: 59px;
         left: 0;
-        position: absolute;
-        top: -58.7px;
-        width: 100%;
+        top: -48px;
 
         .right-to-left & {
-          clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
           left: auto;
           right: 0;
         }
       }
 
+      &::after {
+        right: 0;
+        top: -48px;
+
+        .right-to-left & {
+          left: 0;
+          right: auto;
+        }
+      }
+
       &.ilo--hero-card--center {
         left: 50%;
         right: auto;
@@ -345,6 +385,15 @@
         left: auto;
         right: 0;
       }
+
+      &.ilo--hero-card--nobackground {
+        background: transparent;
+
+        &::before,
+        &::after {
+          content: "";
+        }
+      }
     }
 
     &.ilo--hero-card--dark {
@@ -353,6 +402,22 @@
           map-get($color, "hero", "card", "dark", "background"),
           0.55
         );
+
+        &.ilo--hero-card--nobackground {
+          background: transparent;
+
+          &::before,
+          &::after {
+            content: "";
+          }
+        }
+      }
+
+      &::after {
+        @include dataurlicon(
+          "triangledecoration",
+          rgba($brand-ilo-dark-blue, 0.55)
+        );
       }
     }
   }
@@ -364,7 +429,7 @@
 
     @include breakpoint("large") {
       max-width: 625px;
-      padding: 0 48px 48px 72px;
+      padding: 0 48px 42px 72px;
       width: 100%;
     }
   }
@@ -372,10 +437,15 @@
   &--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%;
     }
   }
@@ -428,7 +498,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,15 @@
   }
 
   &__title {
-    @include font-styles("headline-5");
-
+    @include font-styles("headline-6");
+    margin-bottom: px-to-rem(21px);
     font-family: $fonts-display;
     font-weight: 700;
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "ui-padding-xxl"),
-      "headline-5",
-      "display",
-      "base",
-      "copy"
-    );
+
+    @include breakpoint("medium") {
+      @include font-styles("headline-5");
+      margin-bottom: px-to-rem(27px);
+    }
   }
 
   &__item {
@@ -95,14 +92,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") {
@@ -124,6 +129,50 @@
       .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;
         }
@@ -169,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%;
@@ -188,6 +240,7 @@
 
     @include breakpoint("large") {
       background: $brand-ilo-dark-blue;
+      overflow: visible;
       position: static;
       transform: none;
     }
@@ -297,7 +350,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;
@@ -382,6 +435,14 @@
     display: flex;
     justify-content: space-between;
 
+    .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);
     }
@@ -574,11 +635,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 {
@@ -601,9 +669,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;
@@ -613,6 +678,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);
     }
   }
@@ -779,6 +852,11 @@
     .ilo--header.ilo--search--open & {
       transform: translateY(0);
     }
+
+    &:has(.ilo--input:focus),
+    &:has(.ilo--searchfield--button:focus) {
+      transform: translateY(0);
+    }
   }
 
   .ilo--header--inner {
@@ -810,7 +888,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;
@@ -830,7 +908,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 {
@@ -840,3 +918,20 @@
     }
   }
 }
+
+.ilo--menu--open {
+  height: 100%;
+  padding-top: 85px;
+  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,
+  .ilo--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;