@ilo-org/styles 0.11.0 → 0.11.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -18,7 +18,7 @@
     "css"
   ],
   "dependencies": {
-    "@ilo-org/fonts": "0.1.0",
+    "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
     "@ilo-org/themes": "0.6.1"
   },

package/scss/_reset.scss

@@ -151,6 +151,12 @@ select {
   -moz-appearance: none;
 }
 
+// Reset border-radius on iOS Safari
+input,
+textarea {
+  border-radius: 0;
+}
+
 *,
 *::before,
 *::after {

package/scss/components/_accordion.scss

@@ -3,33 +3,35 @@
 @import "../mixins";
 
 .ilo--accordion {
-  $transition-timing: 150ms;
-  $transition-timing-long: 225ms;
-  $scroll-max-height: 500px;
+  $transition-timing: 500ms;
+  $scroll-max-height: 300px;
 
   &--button {
+    display: flex;
     align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+
+    width: 100%;
+    margin: 0;
+    padding: px-to-rem(calc($spacing-ui-padding-lg - 6px)) px-to-rem(36px)
+      px-to-rem(calc($spacing-ui-padding-lg - 6px)) 0;
+
     background-color: $color-ux-background-default;
     background-position: calc(100% - px-to-rem(6px)) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
+
     border: none;
     border-top: 2px solid map-get($color, "accordion", "border");
-    color: $color-ux-labels-actionable;
-    display: flex;
+
     fill: $color-ux-labels-actionable;
-    flex-direction: row;
     font-family: $fonts-display;
+    color: $color-ux-labels-actionable;
     font-weight: map-get($type, "weights", "section");
     @include font-styles("label-medium");
-    justify-content: space-between;
-    margin: 0;
-    padding: px-to-rem(calc($spacing-ui-padding-lg - 6px)) px-to-rem(36px)
-      px-to-rem(calc($spacing-ui-padding-lg - 6px)) 0;
-    text-align: left;
-    transition: border $transition-timing ease-out,
-      background $transition-timing ease-out, color $transition-timing ease-out;
-    width: 100%;
+
+    transition: all $transition-timing ease-in-out;
     @include dataurlicon("add", $color-ux-labels-actionable);
 
     &--large {
@@ -77,50 +79,26 @@
   }
 
   &--panel {
-    --height: auto;
-    color: $color-ux-labels-default;
-    font-family: $fonts-copy;
-    position: relative;
-    height: 0px;
+    $panel: &;
+
+    max-height: 0;
+    transition: all $transition-timing cubic-bezier(0, 1, 0, 1);
     overflow: hidden;
-    transition: height $transition-timing-long ease-out,
-      padding $transition-timing-long ease-out;
 
     .ilo--accordion--innerpanel {
       padding-bottom: px-to-rem($spacing-ui-padding-xxl);
       padding-top: px-to-rem(8px);
     }
 
-    @include font-styles("label-medium");
-
     &--open {
-      height: var(--height);
-      transition: height $transition-timing-long ease-out,
-        padding $transition-timing-long ease-out;
-    }
-
-    &__scroll {
-      max-height: $scroll-max-height;
-      overflow-y: auto;
-      padding-right: px-to-rem($spacing-ui-padding-xl);
-    }
+      max-height: 100vh;
+      transition: all $transition-timing ease-in-out;
 
-    &.collapsing,
-    &.expanding {
-      height: 0;
-      position: relative;
-      overflow: hidden;
-      visibility: visible;
-      -webkit-transition-property: height, padding, visibility;
-      transition-property: height, padding, visibility;
-      transition-duration: attr(data-transition);
-      -webkit-transition-duration: attr(data-transition);
-      transition-timing-function: ease;
-      -webkit-transition-timing-function: ease;
-    }
-
-    @include breakpoint("medium") {
-      @include font-styles("label-large");
+      &#{$panel}__scroll {
+        max-height: $scroll-max-height;
+        overflow-y: auto;
+        padding-right: px-to-rem($spacing-ui-padding-xl);
+      }
     }
   }
 }

package/scss/components/_callout.scss

@@ -24,20 +24,18 @@
   &--sidebar {
     padding: px-to-rem($spacing-padding-3 + 2) px-to-rem(12px);
     width: px-to-rem(40px);
+
+    #{$self}--icon {
+      position: relative;
+      top: px-to-rem(1.5px);
+    }
   }
 
   &--content {
     padding: px-to-rem($spacing-padding-3 + 2) px-to-rem($spacing-padding-3 - 2)
       px-to-rem($spacing-padding-3);
     width: 100%;
-  }
-
-  &--copy {
-    @include font-styles("body-xs");
-
-    &:not(:last-child) {
-      margin-bottom: px-to-rem($spacing-padding-3);
-    }
+    font-size: px-to-rem(14.93px);
   }
 
   &--header {
@@ -46,7 +44,7 @@
     padding: 0 0 px-to-rem(24px);
   }
 
-  &--headline {
+  &--title {
     @include font-styles("nav-bold-b");
 
     font-family: $fonts-display;
@@ -62,7 +60,7 @@
     cursor: pointer;
     font-family: $fonts-display;
     font-weight: 500;
-    padding-right: 36px;
+    padding-right: 32px;
     position: relative;
 
     &--icon {
@@ -73,11 +71,11 @@
       display: inline-block;
       height: 24px;
       position: absolute;
-      right: -3px;
-      top: 50%;
+      right: 0;
+      top: 11px;
       transform: translateY(-50%) rotate(0);
       transition: transform 225ms ease-out;
-      width: 23px;
+      width: 24px;
     }
   }
 

package/scss/components/_card.scss

@@ -85,6 +85,10 @@
     }
   }
 
+  &--wrap {
+    height: 100%;
+  }
+
   &--wrapper {
     max-width: var(--max-width);
 

package/scss/components/_navigation.scss

@@ -86,19 +86,17 @@
 
   &--logo {
     display: block;
-    max-width: 150px;
     width: 100%;
 
-    @include breakpoint("large") {
-      max-width: 200px;
-    }
-
     &-link {
       display: block;
       padding: 16px 0;
+      max-width: 150px;
+      width: 100%;
 
       @include breakpoint("large") {
         padding: 0 0 24px;
+        max-width: 200px;
       }
     }
   }

package/scss/components/_profile.scss

@@ -3,199 +3,177 @@
 @import "../animations";
 @import "../mixins";
 
+$row-1-lg: 64px;
+$avatar-size-lg: $row-1-lg;
+
 .ilo--profile {
-  max-width: 343px;
-  position: relative;
+  $c: &;
+
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: minmax($row-1-lg, auto) auto;
+  max-width: px-to-rem(343px);
+  width: 100%;
 
   &--avatar {
+    grid-row: 1;
     border-radius: 50%;
-    float: left;
-    width: px-to-rem(64px);
   }
 
-  &--contents--light {
-    .id {
-      margin-left: px-to-rem(75px);
-      padding-top: 5px;
-
-      &:first-of-type {
-        padding-bottom: 1px;
-      }
-
-      &:nth-of-type(2):last-of-type {
-        padding-top: 0;
-      }
-    }
-
-    .id:first-of-type:last-of-type,
-    .id:nth-of-type(2):last-of-type {
-      border-bottom: 2px solid $color-base-neutrals-lighter;
-      padding-bottom: 11px;
-    }
-
-    .id:first-of-type:last-of-type {
-      padding-top: 14px;
-    }
+  figcaption {
+    box-sizing: border-box;
+    grid-row: 1;
+    grid-column-end: -1;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: start;
   }
 
-  &--contents--dark {
-    .id {
-      margin-left: px-to-rem(75px);
-      padding-top: 5px;
-
-      &:first-of-type {
-        padding-bottom: 1px;
-      }
-
-      &:nth-of-type(2):last-of-type {
-        padding-top: 0;
-      }
-    }
-
-    .id:first-of-type:last-of-type,
-    .id:nth-of-type(2):last-of-type {
+  &--figcaption--content {
+    box-sizing: border-box;
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: start;
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: -12px;
+      width: 100%;
       border-bottom: 2px solid $color-base-neutrals-lighter;
-      padding-bottom: 11px;
-    }
-
-    .id:first-of-type:last-of-type {
-      padding-top: 14px;
     }
   }
 
   &--name {
-    display: block;
     font-family: $fonts-display;
-    font-weight: map-get($type, "weights", "label");
-    margin-left: 11px;
-    @include font-styles("body-small");
   }
 
   &--role {
-    display: block;
     font-family: $fonts-copy;
-    margin-left: 11px;
-    @include font-styles("body-xs");
   }
 
   &--description {
-    clear: both;
     font-family: $fonts-copy;
-    padding-top: 22px;
-    @include font-styles("body-xs");
+    grid-row: 2;
+    grid-column: 1 / -1;
   }
 
   &--link {
-    align-items: center;
-    clear: both;
-    color: map-get($color, "link", "text", "default");
-    display: inline-flex;
+    $link: &;
+
     font-family: $fonts-display;
-    font-weight: map-get($type, "weights", "section");
-    height: px-to-rem(56px);
-    text-decoration: none;
-    @include font-styles("body-small");
+    grid-column: 1 / -1;
 
-    span {
-      align-items: center;
-      background-position: calc(100% - 10px) center;
-      background-repeat: no-repeat;
-      background-size: 24px 24px;
-      display: inline-flex;
-      height: 24px;
-      padding-right: 32px;
-      @include dataurlicon("arrowright", $color-link-text-default);
+    a {
+      text-decoration: none;
+      color: map-get($color, "link", "text", "default");
+      display: inline-block;
     }
 
-    &:visited {
-      color: map-get($color, "link", "text", "visited");
+    &--label {
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
 
-      span {
-        @include dataurlicon("arrowright", $color-link-text-visited);
+      &:after {
+        position: relative;
+        bottom: px-to-rem(1px);
+        height: px-to-rem(24px);
+        width: px-to-rem(24px);
+        margin-inline-start: px-to-rem(8px);
+        content: "";
+        @include dataurlicon("arrowright", $color-link-text-default);
+
+        [dir="rtl"] & {
+          @include dataurlicon("arrowleft", $color-link-text-default);
+        }
       }
     }
 
-    &:active {
-      color: map-get($color, "link", "text", "active");
-      outline: none;
-
-      span {
-        @include dataurlicon("arrowright", $color-link-text-active);
-        background-color: map-get($color, "link", "background", "active");
-      }
-    }
+    a:hover,
+    a:focus {
+      #{$link}--label {
+        color: map-get($color, "link", "text", "hover");
+        outline: none;
 
-    &:hover,
-    &:focus {
-      background-color: $color-base-blue-light;
-      color: map-get($color, "link", "text", "hover");
-      outline: none;
-      @include globaltransition("color, background-color");
+        &:after {
+          @include dataurlicon("arrowright", $color-link-text-hover);
 
-      span {
-        @include dataurlicon("arrowright", $color-link-text-hover);
+          [dir="rtl"] & {
+            @include dataurlicon("arrowleft", $color-link-text-hover);
+          }
+        }
       }
     }
   }
 
-  .ilo--profile--description + .ilo--profile--link {
-    margin-top: px-to-rem(8px);
-  }
+  &__theme {
+    &__dark {
+      color: $color-base-neutrals-lighter;
 
-  .ilo--profile--role + .ilo--profile--link {
-    margin-top: px-to-rem(2px);
-  }
+      #{$c}--link {
+        &--label {
+          &:after {
+            @include dataurlicon("arrowright", $color-base-neutrals-lighter);
 
-  .ilo--profile--name + .ilo--profile--link {
-    margin-top: px-to-rem(18px);
-  }
+            [dir="rtl"] & {
+              @include dataurlicon("arrowleft", $color-base-neutrals-lighter);
+            }
+          }
+        }
 
-  .right-to-left & {
-    direction: rtl;
+        a {
+          color: $color-base-neutrals-lighter;
+        }
 
-    .ilo--profile--avatar {
-      float: right;
-    }
+        a:hover,
+        a:focus {
+          #{$c}--link--label {
+            color: $brand-ilo-turquoise;
+            outline: none;
 
-    .ilo--profile--contents--light {
-      .id {
-        margin-left: auto;
-        margin-right: px-to-rem(75px);
+            &:after {
+              @include dataurlicon("arrowright", $brand-ilo-turquoise);
+
+              [dir="rtl"] & {
+                @include dataurlicon("arrowleft", $brand-ilo-turquoise);
+              }
+            }
+          }
+        }
       }
     }
+  }
 
-    .ilo--profile--contents--dark {
-      .id {
-        margin-left: auto;
-        margin-right: px-to-rem(75px);
+  &__size {
+    &__large {
+      #{$c}--avatar {
+        width: px-to-rem($avatar-size-lg);
+        height: px-to-rem($avatar-size-lg);
+        margin-inline-end: px-to-rem(15px);
       }
-    }
 
-    .ilo--profile--link {
-      span {
-        background-position: 10px center;
-        padding-left: 32px;
-        padding-right: 0;
-        @include dataurlicon("arrowleft", $color-link-text-default);
+      #{$c}--name {
+        font-weight: map-get($type, "weights", "label");
+        @include font-styles("body-small");
       }
 
-      &:visited {
-        span {
-          @include dataurlicon("arrowleft", $color-link-text-visited);
-        }
+      #{$c}--role {
+        @include font-styles("body-xs");
       }
 
-      &:active {
-        span {
-          @include dataurlicon("arrowleft", $color-link-text-active);
-        }
+      #{$c}--description {
+        @include font-styles("body-xs");
+        padding-block-start: px-to-rem(21px);
       }
 
-      &:hover,
-      &:focus {
-        span {
-          @include dataurlicon("arrowleft", $color-link-text-hover);
-        }
+      #{$c}--link {
+        @include font-styles("body-small");
+        padding-block-start: px-to-rem(21px);
       }
     }
   }

package/scss/components/_statcard.scss

@@ -37,7 +37,9 @@
 
       #{$self}--content {
         display: flex;
-        flex-wrap: wrap;
+        flex-flow: column;
+        align-items: flex-start;
+        justify-content: flex-start;
         height: 100%;
 
         .right-to-left & {
@@ -67,9 +69,16 @@
         width: 100%;
       }
 
+      #{$self}--source {
+        display: flex;
+        flex: auto;
+        flex-flow: column;
+        justify-content: flex-end;
+        align-items: flex-start;
+      }
+
       .ilo--link {
         @include font-styles("image-credit");
-        align-self: flex-end;
       }
     }
   }

package/scss/components/_tabs.scss

@@ -156,7 +156,7 @@
       .ilo--tabs--selection {
         display: flex;
         max-width: 100%;
-        overflow-x: scroll;
+        overflow-x: hidden;
         overflow-y: hidden;
 
         &--button {