@ilo-org/styles 0.5.0 → 0.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/components/_accordion.scss

@@ -5,6 +5,7 @@
 .ilo--accordion {
   $transition-timing: 150ms;
   $transition-timing-long: 225ms;
+  $scroll-max-height: 500px;
 
   &--button {
     align-items: center;
@@ -79,6 +80,7 @@
     --height: auto;
     color: $color-ux-labels-default;
     font-family: $fonts-copy;
+    position: relative;
     height: 0px;
     overflow: hidden;
     transition: height $transition-timing-long ease-out,
@@ -97,6 +99,12 @@
         padding $transition-timing-long ease-out;
     }
 
+    &__scroll {
+      max-height: $scroll-max-height;
+      overflow-y: auto;
+      padding-right: px-to-rem($spacing-ui-padding-xl);
+    }
+
     &.collapsing,
     &.expanding {
       height: 0;

package/scss/components/_card.scss

@@ -7,7 +7,6 @@
   $self: &;
   $transition-timing: 150ms;
   margin: 0;
-  max-width: px-to-rem(920px);
 
   .right-to-left & {
     text-align: right;

package/scss/components/_cardgroup.scss

@@ -24,7 +24,7 @@
   &--two {
     @include breakpoint("large") {
       #{$card} {
-        width: calc(50% - 24px);
+        width: calc(50% - 16px);
       }
     }
   }
@@ -32,7 +32,7 @@
   &--three {
     @include breakpoint("large") {
       #{$card} {
-        width: calc(33.333% - 24px);
+        width: calc(33.333% - 21px);
       }
     }
   }

package/scss/components/_logogrid.scss

@@ -0,0 +1,52 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--logo-grid {
+  $c: &;
+
+  &--logos {
+    display: flex;
+    flex-flow: row wrap;
+    grid-gap: px-to-rem(16px);
+  }
+
+  &--link {
+    text-decoration: none;
+    transition: background-color 0.2s ease-in-out;
+
+    #{$c}__theme__light &,
+    #{$c}__theme__dark & {
+      &:hover {
+        background-color: map-get($color, "ux", "background", "hover");
+      }
+    }
+  }
+
+  &--item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: px-to-rem(134px);
+    flex: 100%;
+
+    @include breakpoint("small") {
+      flex: 0 0 px-to-rem(238px);
+    }
+
+    #{$c}__theme__light & {
+      background-color: map-get($color, "ux", "background", "highlight");
+    }
+
+    #{$c}__theme__dark & {
+      background-color: map-get($color, "ux", "background", "default");
+    }
+
+    img {
+      width: auto;
+      height: auto;
+      max-width: px-to-rem(150px);
+      max-height: px-to-rem(50px);
+    }
+  }
+}

package/scss/components/index.scss

@@ -25,6 +25,7 @@
 @use "list";
 @use "loading";
 @use "logo";
+@use "logogrid";
 @use "modal";
 @use "navigation";
 @use "notification";