@ilo-org/styles 0.13.0 → 0.13.2

package/package.json

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

package/scss/_mixins.scss

@@ -214,79 +214,63 @@
 
 @mixin linkstyles() {
   background: map-get($color, "link", "background", "default");
-  border-bottom: $widths-border-sm solid
-    map-get($color, "link", "underline", "default");
   color: map-get($color, "link", "text", "default");
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
-  text-decoration: none;
+  text-decoration: underline;
+  text-underline-offset: px-to-rem(6px);
+  text-decoration-thickness: px-to-rem(1.5px);
+  padding-bottom: spacing(1);
 
   &:visited {
     background: map-get($color, "link", "background", "visited");
-    border-bottom: $widths-border-sm solid
-      map-get($color, "link", "underline", "visited");
     color: map-get($color, "link", "text", "visited");
   }
 
   &:hover {
     background: map-get($color, "link", "background", "hover");
-    border-bottom: $widths-border-med solid
-      map-get($color, "link", "underline", "hover");
     color: map-get($color, "link", "text", "hover");
-    text-decoration: none;
+    text-decoration-thickness: 3px;
   }
 
   &:active {
     background: map-get($color, "link", "background", "active");
-    border-bottom: $widths-border-med solid
-      map-get($color, "link", "underline", "active");
     color: map-get($color, "link", "text", "active");
-    outline: none;
+    text-decoration-thickness: 3px;
   }
 
   &:focus {
     background: map-get($color, "link", "background", "focus");
-    border-bottom: $widths-border-lg solid
-      map-get($color, "link", "underline", "focus");
     color: map-get($color, "link", "text", "focus");
-    outline: none;
+    text-decoration-thickness: 3px;
   }
 
   &--dark {
     background: map-get($color, "link", "background-dark", "default");
-    border-bottom: $widths-border-sm solid
-      map-get($color, "link", "underline-dark", "default");
     color: map-get($color, "link", "text-dark", "default");
 
     &:visited {
       background: map-get($color, "link", "background-dark", "visited");
-      border-bottom: $widths-border-sm solid
-        map-get($color, "link", "underline-dark", "visited");
       color: map-get($color, "link", "text-dark", "visited");
     }
 
     &:hover {
       background: map-get($color, "link", "background-dark", "hover");
-      border-bottom: $widths-border-med solid
-        map-get($color, "link", "underline-dark", "hover");
       color: map-get($color, "link", "text-dark", "hover");
+      text-decoration-thickness: 3px;
     }
 
     &:active {
       background: map-get($color, "link", "background-dark", "active");
-      border-bottom: $widths-border-med solid
-        map-get($color, "link", "underline-dark", "active");
       color: map-get($color, "link", "text-dark", "active");
-      outline: none;
+      text-decoration-thickness: 3px;
     }
 
     &:focus {
       background: map-get($color, "link", "background-dark", "focus");
-      border-bottom: $widths-border-lg solid
-        map-get($color, "link", "underline-dark", "focus");
       color: map-get($color, "link", "text-dark", "focus");
-      outline: none;
+      text-decoration-thickness: 3px;
     }
   }
 
@@ -294,38 +278,29 @@
     @include font-styles("body-xxs");
 
     background: map-get($color, "link", "background-footer", "default");
-    border-bottom: $widths-border-xsm solid
-      map-get($color, "link", "underline-footer", "default");
     color: map-get($color, "link", "text-footer", "default");
 
     &:visited {
       background: map-get($color, "link", "background-footer", "visited");
-      border-bottom: $widths-border-xsm solid
-        map-get($color, "link", "underline-footer", "visited");
       color: map-get($color, "link", "text-footer", "visited");
     }
 
     &:hover {
       background: map-get($color, "link", "background-footer", "hover");
-      border-bottom: $widths-border-sm solid
-        map-get($color, "link", "underline-footer", "hover");
       color: map-get($color, "link", "text-footer", "hover");
+      text-decoration-thickness: 3px;
     }
 
     &:active {
       background: map-get($color, "link", "background-footer", "active");
-      border-bottom: $widths-border-sm solid
-        map-get($color, "link", "underline-footer", "active");
       color: map-get($color, "link", "text-footer", "active");
-      outline: none;
+      text-decoration-thickness: 3px;
     }
 
     &:focus {
       background: map-get($color, "link", "background-footer", "focus");
-      border-bottom: $widths-border-med-sm solid
-        map-get($color, "link", "underline-footer", "focus");
       color: map-get($color, "link", "text-footer", "focus");
-      outline: none;
+      text-decoration-thickness: 3px;
     }
   }
 }

package/scss/components/_featurecard.scss

@@ -80,8 +80,7 @@
         &--link,
         &--link:hover {
           border-bottom: none;
-          padding-left: spacing(6);
-          padding-right: spacing(6);
+          padding-inline: spacing(6) spacing(2);
         }
       }
 

package/scss/components/_linklist.scss

@@ -89,7 +89,7 @@
     @include font-styles("body-small");
     padding-top: spacing(4);
     padding-bottom: spacing(4);
-    padding-right: spacing(8);
+    padding-inline-end: spacing(8);
     text-decoration: none;
     @include dataurlicon("arrowright", $color-link-text-default);
     @include globaltransition("color, background-color, border-color");
@@ -119,7 +119,6 @@
     [dir="rtl"] & {
       background-position: px-to-rem(4px) center;
       @include dataurlicon("arrowleft", $color-link-text-default);
-      padding-right: 0;
 
       &:hover,
       &:focus {

package/scss/components/_navigation.scss

@@ -118,7 +118,7 @@
 
   &--utility-bar {
     display: none;
-
+    min-height: px-to-rem(24px);
     &--local {
       background: $brand-ilo-blue;
       display: flex;
@@ -619,6 +619,11 @@
     position: relative;
   }
 
+  &--empty {
+    height: px-to-rem(26);
+    width: px-to-rem(100);
+  }
+
   &--button {
     @include font-styles("image-credit");
     @include dataurlicon("global", $brand-ilo-white);

package/scss/components/_richtext.scss

@@ -22,6 +22,7 @@
   p + figure,
   p + img,
   p + blockquote,
+  p + iframe,
   ul + img,
   ol + img,
   dl + img,
@@ -40,6 +41,10 @@
     );
   }
 
+  iframe {
+    margin-bottom: spacing(14);
+  }
+
   figure {
     width: 100%;
     margin-bottom: spacing(14);
@@ -335,6 +340,7 @@
     p + figure,
     p + img,
     p + blockquote,
+    p + iframe,
     ul + img,
     ol + img,
     dl + img,

package/scss/components/_statcard.scss

@@ -83,6 +83,7 @@
 
       .ilo--link {
         @include font-styles("image-credit");
+        line-height: px-to-rem(24px);
       }
     }
   }

package/scss/components/_tableofcontents.scss

@@ -135,6 +135,7 @@
     font-weight: 500;
     margin: 0 spacing(2) 0 spacing(2);
     padding: spacing(4) spacing(2) spacing(4);
+    padding-inline-end: spacing(12);
     position: relative;
     text-decoration: none;
     width: calc(100% - 16px);