@ilo-org/styles 1.0.0 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,7 +38,7 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
-    "@ilo-org/fonts": "0.2.1",
+    "@ilo-org/fonts": "0.2.2",
     "@ilo-org/icons": "0.3.1",
     "@ilo-org/themes": "0.8.1"
   },

package/scss/_mixins.scss

@@ -373,10 +373,10 @@
   background: map-get($color, "tooltip", "dark", "background");
   height: $height;
   width: $width;
-
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 
   &::after {
     content: "";

package/scss/components/_accordion.scss

@@ -16,7 +16,7 @@
     width: 100%;
     margin: 0;
     padding: spacing(4) 0;
-    padding-inline-end: spacing(4);
+    padding-inline-end: spacing(11);
 
     background-color: $color-ux-background-default;
     background-position: calc(100% - px-to-rem(6px)) center;
@@ -38,7 +38,7 @@
     &--large {
       @include font-styles("headline-6");
       padding: spacing(5) 0;
-      padding-inline-end: spacing(4);
+      padding-inline-end: spacing(11);
     }
 
     &:hover,
@@ -64,7 +64,7 @@
       &--large {
         @include font-styles("headline-6");
         padding: spacing(5) 0;
-        padding-inline-end: spacing(4);
+        padding-inline-end: spacing(11);
       }
     }
 

package/scss/components/_breadcrumb.scss

@@ -51,6 +51,7 @@
 
       &--dropdown {
         font-family: $fonts-copy;
+        @include font-styles("body-xxs");
       }
     }
 

package/scss/components/_hero.scss

@@ -84,6 +84,17 @@
     }
   }
 
+  &--breadcrumbs {
+    grid-area: 1 / 1 / 2 / 5;
+    z-index: 1;
+    display: flex;
+    flex-flow: row nowrap;
+
+    &--wrapper {
+      width: 100%;
+    }
+  }
+
   &--card {
     grid-area: 3 / 1 / 5 / 2;
   }
@@ -100,262 +111,254 @@
     }
   }
 
-  --card-width: 625px;
-  --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
-  --breadcrumbs-height: 48px;
-  --image-gap: 240px;
-
-  // Defaults to baseline
-  --row-1-lg: var(--breadcrumbs-height);
-  --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
-  --row-3-lg: auto;
-  --row-4-lg: #{$spacing-hero-tooltip-height};
-  --row-5-lg: 72px;
-
-  --col-1-lg: 0;
-  --col-2-lg: var(--card-width);
-  --col-3-lg: #{$spacing-hero-tooltip-width};
-  --col-4-lg: 1fr;
-
-  grid-template-rows:
-    var(--row-1-lg)
-    var(--row-2-lg)
-    var(--row-3-lg)
-    var(--row-4-lg);
-
-  grid-template-columns:
-    var(--col-1-lg)
-    var(--col-2-lg)
-    var(--col-3-lg)
-    var(--col-4-lg);
-
-  &__poster-size {
-    &__small {
-      --image-gap: 112px;
-    }
-
-    &__medium {
-      --image-gap: 176px;
-    }
+  @include breakpoint("large") {
+    --card-width: 625px;
+    --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
+    --breadcrumbs-height: 48px;
+    --image-gap: 240px;
+
+    // Defaults to baseline
+    --row-1-lg: var(--breadcrumbs-height);
+    --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
+    --row-3-lg: auto;
+    --row-4-lg: #{$spacing-hero-tooltip-height};
+    --row-5-lg: 72px;
+
+    --col-1-lg: 0;
+    --col-2-lg: var(--card-width);
+    --col-3-lg: #{$spacing-hero-tooltip-width};
+    --col-4-lg: 1fr;
+
+    grid-template-rows:
+      var(--row-1-lg)
+      var(--row-2-lg)
+      var(--row-3-lg)
+      var(--row-4-lg);
+
+    grid-template-columns:
+      var(--col-1-lg)
+      var(--col-2-lg)
+      var(--col-3-lg)
+      var(--col-4-lg);
+
+    &__poster-size {
+      &__small {
+        --image-gap: 112px;
+      }
 
-    &__large {
-      --image-gap: 240px;
-    }
+      &__medium {
+        --image-gap: 176px;
+      }
 
-    &__xlarge {
-      --image-gap: 527px;
-    }
-  }
+      &__large {
+        --image-gap: 240px;
+      }
 
-  &__card-size {
-    &__small {
-      --card-width: 625px;
+      &__xlarge {
+        --image-gap: 527px;
+      }
     }
 
-    &__medium {
-      --card-width: 721px;
-    }
+    &__card-size {
+      &__small {
+        --card-width: 625px;
+      }
 
-    &__large {
-      --card-width: 856px;
-    }
+      &__medium {
+        --card-width: 721px;
+      }
 
-    &__xlarge {
-      --card-width: 920px;
-    }
+      &__large {
+        --card-width: 856px;
+      }
 
-    &__xxlarge {
-      --card-width: 998px;
-    }
-  }
+      &__xlarge {
+        --card-width: 920px;
+      }
 
-  &__card-justify {
-    &__start,
-    &__offset {
-      --card-padding-start: #{$squeezy-padding-start};
-      --col-1-lg: #{$card-offset};
+      &__xxlarge {
+        --card-width: 998px;
+      }
     }
 
-    &__offset {
-      --added-offset: 109px;
-    }
+    &__card-justify {
+      &__start,
+      &__offset {
+        --card-padding-start: #{$squeezy-padding-start};
+        --col-1-lg: #{$card-offset};
+      }
 
-    &__center {
-      --col-1-lg: calc((100% - var(--card-width)) / 2);
-      --col-4-lg: calc(
-        ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
-      );
-    }
-  }
+      &__offset {
+        --added-offset: 109px;
+      }
 
-  &__card-align {
-    &__center {
-      --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
-      --row-5-lg: #{$spacing-hero-tooltip-height};
+      &__center {
+        --col-1-lg: calc((100% - var(--card-width)) / 2);
+        --col-4-lg: calc(
+          ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+        );
+      }
     }
 
-    &__bottom {
-      --row-3-lg: 0;
-      --row-4-lg: var(--corner-cut-height);
-      --row-5-lg: auto;
-    }
-  }
+    &__card-align {
+      &__center {
+        --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
+        --row-5-lg: #{$spacing-hero-tooltip-height};
+      }
 
-  &__card-background {
-    &__transparent {
-      #{$c}--card-offset {
-        background-color: transparent !important;
+      &__bottom {
+        --row-3-lg: 0;
+        --row-4-lg: var(--corner-cut-height);
+        --row-5-lg: auto;
       }
     }
-  }
 
-  &__card-theme {
-    &__dark {
-      #{$c}--card-offset {
-        background-color: map-get($color, "base", "blue", "dark");
-        position: relative;
-        box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
+    &__card-background {
+      &__transparent {
+        #{$c}--card-offset {
+          background-color: transparent !important;
+          box-shadow: none !important;
+        }
       }
+    }
 
-      &[class*="semi-transparent"] {
+    &__card-theme {
+      &__dark {
         #{$c}--card-offset {
-          background: rgba(
-            map-get($color, "hero", "card", "dark", "background"),
-            $opacity-semi-transparent
-          );
-          box-shadow: 0.3px 0 0 0
-            rgba(
+          background-color: map-get($color, "base", "blue", "dark");
+          position: relative;
+          box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
               map-get($color, "hero", "card", "dark", "background"),
               $opacity-semi-transparent
             );
+            box-shadow: 0.3px 0 0 0
+              rgba(
+                map-get($color, "hero", "card", "dark", "background"),
+                $opacity-semi-transparent
+              );
+          }
         }
       }
-    }
-
-    &__light {
-      #{$c}--card-offset {
-        background: map-get($color, "hero", "card", "light", "background");
-        box-shadow: 0.3px 0 0 0
-          map-get($color, "hero", "card", "light", "background");
-      }
 
-      &[class*="semi-transparent"] {
+      &__light {
         #{$c}--card-offset {
-          background: rgba(
-            map-get($color, "hero", "card", "light", "background"),
-            $opacity-semi-transparent
-          );
+          background: map-get($color, "hero", "card", "light", "background");
           box-shadow: 0.3px 0 0 0
-            rgba(
+            map-get($color, "hero", "card", "light", "background");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
               map-get($color, "hero", "card", "light", "background"),
               $opacity-semi-transparent
             );
+            box-shadow: 0.3px 0 0 0
+              rgba(
+                map-get($color, "hero", "card", "light", "background"),
+                $opacity-semi-transparent
+              );
+          }
         }
       }
     }
-  }
-
-  &--breadcrumbs {
-    grid-area: 1 / 1 / 2 / 5;
-    z-index: 1;
-    display: flex;
-    flex-flow: row nowrap;
-
-    &--wrapper {
-      width: 100%;
-    }
-  }
 
-  &--background {
-    grid-area: 1 / 1 / 5 / 5;
+    &--background {
+      grid-area: 1 / 1 / 5 / 5;
 
-    #{$c}__card-align__center & {
-      grid-area: 1 / 1 / 6 / 5;
-    }
+      #{$c}__card-align__center & {
+        grid-area: 1 / 1 / 6 / 5;
+      }
 
-    #{$c}__card-align__bottom & {
-      grid-area: 1 / 1 / 5 / 5;
+      #{$c}__card-align__bottom & {
+        grid-area: 1 / 1 / 5 / 5;
+      }
     }
-  }
 
-  &--card-offset {
-    grid-area: 3 / 1 / 6 / 2;
-    z-index: 0;
-    position: relative;
+    &--card-offset {
+      grid-area: 3 / 1 / 6 / 2;
+      z-index: 0;
+      position: relative;
 
-    #{$c}__card-justify__offset &,
-    #{$c}__card-justify__center & {
-      background: transparent !important;
-    }
+      #{$c}__card-justify__offset &,
+      #{$c}__card-justify__center & {
+        background: transparent !important;
+      }
 
-    #{$c}__card-align__center & {
-      grid-area: 3 / 1 / 4 / 2;
-    }
+      #{$c}__card-align__center & {
+        grid-area: 3 / 1 / 4 / 2;
+      }
 
-    #{$c}__card-align__bottom & {
-      grid-area: 4 / 1 / 6 / 2;
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 1 / 6 / 2;
+      }
     }
-  }
 
-  &--card {
-    grid-area: 3 / 2 / 6 / 3;
+    &--card {
+      grid-area: 3 / 2 / 6 / 3;
 
-    #{$c}__card-align__center & {
-      grid-area: 3 / 2 / 4 / 3;
-    }
+      #{$c}__card-align__center & {
+        grid-area: 3 / 2 / 4 / 3;
+      }
 
-    #{$c}__card-align__bottom & {
-      grid-area: 4 / 2 / 6 / 3;
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 2 / 6 / 3;
+      }
     }
-  }
 
-  &--caption {
-    grid-area: 4 / 3 / 5 / 4;
-    position: relative;
+    &--caption {
+      grid-area: 4 / 3 / 5 / 4;
+      position: relative;
 
-    #{$c}__card-align__center & {
-      grid-area: 5 / 1 / 6 / 3;
-    }
+      #{$c}__card-align__center & {
+        grid-area: 5 / 1 / 6 / 3;
+      }
 
-    #{$c}__card-align__bottom & {
-      grid-area: 4 / 1 / 5 / 2;
-    }
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 1 / 5 / 2;
+      }
 
-    #{$c}__card-align__center &,
-    #{$c}__card-align__bottom & {
-      &--wrapper {
-        position: absolute;
-        left: 0;
-        bottom: 0;
+      #{$c}__card-align__center &,
+      #{$c}__card-align__bottom & {
+        &--wrapper {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+        }
       }
-    }
 
-    #{$c}__card-align__bottom#{$c}__card-justify__start & {
-      grid-area: 1 / 1 / 3 / 3;
-    }
+      #{$c}__card-align__bottom#{$c}__card-justify__start & {
+        grid-area: 1 / 1 / 3 / 3;
+      }
 
-    #{$c}__card-align__bottom#{$c}__card-justify__offset & {
-      grid-area: 1 / 2 / 3 / 3;
-    }
+      #{$c}__card-align__bottom#{$c}__card-justify__offset & {
+        grid-area: 1 / 2 / 3 / 3;
+      }
 
-    #{$c}__card-align__bottom#{$c}__card-justify__start &,
-    #{$c}__card-align__bottom#{$c}__card-justify__offset & {
-      #{$c}--caption--wrapper {
-        @include caption-icon-wrapper(
-          "right",
-          $spacing-hero-tooltip-width,
-          $spacing-hero-tooltip-height
-        );
+      #{$c}__card-align__bottom#{$c}__card-justify__start &,
+      #{$c}__card-align__bottom#{$c}__card-justify__offset & {
+        #{$c}--caption--wrapper {
+          @include caption-icon-wrapper(
+            "right",
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
+          );
 
-        position: absolute;
-        left: 0;
-        right: initial;
-        bottom: 0;
+          position: absolute;
+          left: 0;
+          right: initial;
+          bottom: 0;
+        }
       }
-    }
 
-    &--wrapper {
-      left: 2px;
+      &--wrapper {
+        left: 2px;
+      }
     }
   }
 
@@ -372,20 +375,22 @@
       }
     }
 
-    &__card-align__bottom {
-      &#{$c}__card-justify__start,
-      &#{$c}__card-justify__offset {
-        #{$c}--caption--wrapper {
-          @include caption-icon-wrapper(
-            "left",
-            $spacing-hero-tooltip-width,
-            $spacing-hero-tooltip-height
-          );
+    @include breakpoint("large") {
+      &__card-align__bottom {
+        &#{$c}__card-justify__start,
+        &#{$c}__card-justify__offset {
+          #{$c}--caption--wrapper {
+            @include caption-icon-wrapper(
+              "left",
+              $spacing-hero-tooltip-width,
+              $spacing-hero-tooltip-height
+            );
 
-          position: absolute;
-          left: initial;
-          right: 0;
-          bottom: 0;
+            position: absolute;
+            left: initial;
+            right: 0;
+            bottom: 0;
+          }
         }
       }
     }

package/scss/components/_navigation.scss

@@ -595,7 +595,7 @@
 
   &::before {
     background: $brand-ilo-dark-blue;
-    clip-path: polygon(0 0, 100% 0, 100% 100%);
+    clip-path: polygon(0 0, 100% 0, 97% 100%);
     content: "";
     display: block;
     height: 100%;
@@ -605,7 +605,7 @@
     width: 32px;
 
     [dir="rtl"] & {
-      clip-path: polygon(0 0, 0 100%, 100% 0);
+      clip-path: polygon(0 0, 0 100%, 97% 0);
       left: auto;
       right: -31px;
     }

package/scss/components/_tabs.scss

@@ -71,6 +71,7 @@
         font-family: $fonts-display;
         font-weight: 600;
         display: flex;
+        gap: spacing(1);
         height: px-to-rem(60px);
         justify-content: flex-start;
         padding-left: spacing(2);
@@ -88,13 +89,13 @@
         &.icon {
           .ilo--icon {
             height: px-to-rem(16px);
-            margin-right: px-to-rem(5px);
             order: 1;
             width: px-to-rem(16px);
           }
 
           .ilo--tabs--selection--label {
             order: 2;
+            flex: 1 1;
           }
         }
 
@@ -115,14 +116,14 @@
       }
 
       &--label {
-        max-width: 50ch;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         padding-top: spacing(1);
+        white-space: nowrap;
+        text-overflow: ellipsis;
       }
 
       &--item {
+        overflow: hidden;
         display: block;
         width: 100%;