@ilo-org/styles 0.11.2 → 0.11.3-next.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.11.2",
+  "version": "0.11.3-next.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.6.1"
+    "@ilo-org/themes": "0.7.0-next.0"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_accordion.scss

@@ -86,7 +86,7 @@
     overflow: hidden;
 
     .ilo--accordion--innerpanel {
-      padding-bottom: px-to-rem($spacing-ui-padding-xxl);
+      padding-bottom: px-to-rem($spacing-ui-padding-sm);
       padding-top: px-to-rem(8px);
     }
 

package/scss/components/_breadcrumb.scss

@@ -16,7 +16,6 @@
     padding-inline-end: 0;
     padding-inline-start: var(--card-padding-start);
     position: relative;
-
     &.context--menu {
       padding: 0;
     }
@@ -41,6 +40,10 @@
     }
 
     &--label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 40ch;
       font-family: $fonts-copy;
       font-weight: 400;
       @include font-styles("body-xxs");

package/scss/components/_hero.scss

@@ -5,8 +5,11 @@
 .hero {
   $c: &;
 
+  // Additional offset to add for justify: offset
+  --added-offset: 0;
+
   // Total offset from the edge of the window
-  $base-offset: calc((100vw - #{$layout-max-width}) / 2);
+  --base-offset: calc(((100vw - #{$layout-max-width}) / 2));
 
   // Card padding defaults to a fixed value. But it's a CSS variable
   // so that we can make it squeezy when the card is justified `start`
@@ -18,11 +21,16 @@
   // depending on how far the card is from the edge of the screen
   $squeezy-padding-start: max(
     16px,
-    min(#{$base-offset}, #{$spacing-hero-card-padding-x-lg})
+    min(
+      var(--base-offset) + var(--added-offset),
+      #{$spacing-hero-card-padding-x-lg}
+    )
   );
 
   // Card offset from the edge of the window minus the card's fixed padding
-  $card-offset: calc(#{$base-offset} - #{$spacing-hero-card-padding-x-lg});
+  $card-offset: calc(
+    var(--base-offset) - #{$spacing-hero-card-padding-x-lg} + var(--added-offset)
+  );
 
   // The height of the corner cut
   --corner-cut-height: #{$spacing-hero-card-corner-cut-height-sm};
@@ -148,6 +156,10 @@
         --col-1-lg: #{$card-offset};
       }
 
+      &__offset {
+        --added-offset: 109px;
+      }
+
       &__center {
         --col-1-lg: calc((100% - var(--card-width)) / 2);
         --col-4-lg: calc(
@@ -305,7 +317,14 @@
 
       #{$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__start &,
+      #{$c}__card-align__bottom#{$c}__card-justify__offset & {
         #{$c}--caption--wrapper {
           @include caption-icon-wrapper(
             "right",

package/scss/components/_linklist.scss

@@ -57,6 +57,8 @@
         }
       }
 
+      & .ilo--link-list--link:hover,
+      & .ilo--link-list--link:focus,
       &:hover,
       &:focus {
         .ilo--link-list--label:before {

package/scss/components/_tabs.scss

@@ -103,6 +103,7 @@
           background-color: $color-base-blue-light;
           color: $color-base-blue-medium;
           outline: none;
+          border-top: px-to-rem(3px) solid $color-base-blue-medium;
           @include globaltransition("color, background-color, border-color");
 
           &.has--tooltip {

package/scss/components/_tag.scss

@@ -30,6 +30,10 @@
   text-decoration: none;
   $self: &;
   @include globaltransition("color, background-color, border-color");
+  max-width: $widths-tags-max-width;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 
   &--active {
     background: map-get($color, "tag", "background", "active");