@ilo-org/styles 0.1.7 → 0.1.9

package/scss/components/_card.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@use "../animations" as *;
 @import "../mixins";
 
 .ilo--card {
@@ -52,6 +53,14 @@
     top: 0;
     width: 100%;
     z-index: 2;
+    @include globaltransition("color, background-color, border-color, opacity");
+
+    &:hover,
+    &:focus {
+      @include globaltransition(
+        "color, background-color, border-color, opacity"
+      );
+    }
 
     &--text {
       @include isVisuallyHidden();
@@ -104,10 +113,10 @@
       clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
       content: "";
       display: block;
-      height: px-to-rem(40px);
+      height: px-to-rem(30px);
       left: 0;
       position: absolute;
-      top: px-to-rem(-39.7px);
+      top: px-to-rem(-29.7px);
       width: 100%;
 
       .right-to-left & {
@@ -115,13 +124,13 @@
       }
 
       @include breakpoint("medium") {
-        height: px-to-rem(48px);
-        top: px-to-rem(-47.7px);
+        height: px-to-rem(38px);
+        top: px-to-rem(-37.7px);
       }
 
       @include breakpoint("large") {
-        height: px-to-rem(64px);
-        top: px-to-rem(-63.7px);
+        height: px-to-rem(58px);
+        top: px-to-rem(-57.7px);
       }
     }
   }
@@ -137,10 +146,12 @@
       "body-small",
       "copy"
     );
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -157,10 +168,12 @@
       "body-small",
       "copy"
     );
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -168,10 +181,12 @@
     color: $brand-ilo-grey-charcoal;
     @include font-styles("body-small");
     @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -179,10 +194,12 @@
     color: $brand-ilo-grey-accessible;
     @include font-styles("body-small");
     @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -201,6 +218,28 @@
     z-index: 2;
   }
 
+  &--isvideo {
+    #{$self}--image--wrapper {
+      position: relative;
+
+      &::before {
+        @include dataurlicon("play", $brand-ilo-grey-light);
+        background-color: $brand-ilo-grey-charcoal;
+        background-position: center;
+        background-size: 18px 20px;
+        background-repeat: no-repeat;
+        content: "";
+        display: block;
+        height: 40px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 40px;
+        z-index: 1;
+      }
+    }
+  }
+
   // CARD VARIANTS
   &--multilink {
     padding: px-to-rem(24px);
@@ -383,6 +422,11 @@
 
     &:hover,
     &:focus {
+      filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+        drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+        drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+        drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
+
       picture::before {
         opacity: 0.4;
         z-index: 2;
@@ -408,9 +452,9 @@
         opacity: 0;
         position: absolute;
         top: 0;
-        transition: opacity 0.15s ease-in-out;
         width: 100%;
         z-index: -1;
+        @include globaltransition("opacity");
       }
     }
 
@@ -495,6 +539,22 @@
       width: 100%;
     }
 
+    .ilo--profile--contents * {
+      color: $color-base-neutrals-white;
+    }
+
+    &:hover,
+    &:focus {
+      filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+        drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+        drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+        drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
+
+      .ilo--profile--contents * {
+        color: $color-base-blue-medium;
+      }
+    }
+
     @include breakpoint("medium") {
       padding: 0 px-to-rem(32px) px-to-rem(40px);
     }
@@ -536,7 +596,7 @@
     }
 
     &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
+      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
     }
 
     #{$self}--eyebrow {
@@ -575,6 +635,7 @@
     }
 
     #{$self}--date {
+      display: block;
       @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
     }
   }
@@ -584,12 +645,35 @@
     padding: px-to-rem(40px) px-to-rem(24px);
     width: 100%;
 
+    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
+      height: px-to-rem(40px);
+      top: px-to-rem(-39.7px);
+    }
+
+    &:hover,
+    &:focus {
+      filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+        drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+        drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+        drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
+    }
+
     @include breakpoint("medium") {
       padding: px-to-rem(48px);
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
+        height: px-to-rem(64px);
+        top: px-to-rem(-63.7px);
+      }
     }
 
     @include breakpoint("large") {
       padding: px-to-rem(64px) px-to-rem(72px);
+
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
+        height: px-to-rem(64px);
+        top: px-to-rem(-63.7px);
+      }
     }
 
     &#{$self}--wide {
@@ -608,11 +692,11 @@
       padding: px-to-rem(48px);
 
       @include breakpoint("medium") {
-        padding: px-to-rem(48px);
+        padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);
       }
 
       @include breakpoint("large") {
-        padding: px-to-rem(48px);
+        padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px) px-to-rem(48px);
       }
     }
 
@@ -659,6 +743,7 @@
 
     &#{$self}--light:not(:hover) #{$self}--title {
       color: $brand-ilo-grey-charcoal;
+      @include globaltransition("color");
     }
 
     #{$self}--title {
@@ -700,8 +785,9 @@
     border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
     max-width: px-to-rem(856px);
     padding: 0 px-to-rem(24px) px-to-rem(48px) px-to-rem(24px);
+    pointer-events: none;
 
-    &::before {
+    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
       clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
       height: px-to-rem(40px);
       top: px-to-rem(-39.7px);
@@ -714,26 +800,26 @@
     @include breakpoint("large") {
       padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
 
-      &::before {
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
         clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
-        height: px-to-rem(48px);
-        top: px-to-rem(-47.7px);
+        height: px-to-rem(41px);
+        top: px-to-rem(-40.7px);
       }
     }
 
     &#{$self}--wide {
-      padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
+      padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);
 
       @include breakpoint("medium") {
-        padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
+        padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);
       }
     }
 
     &#{$self}--standard {
-      padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
+      padding: 0 px-to-rem(40px) px-to-rem(52px) px-to-rem(40px);
 
       @include breakpoint("medium") {
-        padding: 0 px-to-rem(40px) px-to-rem(56px) px-to-rem(40px);
+        padding: 0 px-to-rem(40px) px-to-rem(60px) px-to-rem(40px);
       }
     }
 
@@ -746,14 +832,31 @@
     }
 
     &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $brand-ilo-red;
+      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
 
       #{$self}--title {
         color: $brand-ilo-white;
+        @include globaltransition("color");
       }
 
       .ilo--list__item {
         color: $brand-ilo-white;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+
+      &:hover,
+      &:focus {
+        #{$self}--title {
+          color: $brand-ilo-white;
+          @include globaltransition("color");
+        }
+
+        .ilo--list__item {
+          color: $brand-ilo-white;
+        }
       }
     }
 
@@ -785,10 +888,10 @@
 
   &--stat {
     border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
-    padding: 0 px-to-rem(24px) px-to-rem(24px) px-to-rem(30px);
+    padding: 0 px-to-rem(24px) px-to-rem(40px) px-to-rem(22px);
     width: 100%;
 
-    &::before {
+    &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
       clip-path: polygon(75% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
       height: px-to-rem(40px);
       top: px-to-rem(-39.7px);
@@ -830,7 +933,7 @@
     #{$self}--intro {
       color: $brand-ilo-dark-blue;
       @include font-styles("nav-md-sm");
-      @include textmargin("margin-bottom", 40px, "nav-md-sm", "copy", 0, 0);
+      @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
       width: 100%;
     }
 
@@ -838,6 +941,13 @@
       @include font-styles("image-credit");
       align-self: flex-end;
     }
+
+    @include breakpoint("large") {
+      &.ilo--card--cornercut:not(.ilo--card--multilink):not(.ilo--card--detail):not(.ilo--card--feature)::before {
+        height: px-to-rem(48px);
+        top: px-to-rem(-47.7px);
+      }
+    }
   }
 
   &--data {
@@ -846,6 +956,11 @@
     max-width: px-to-rem(600px);
     padding: 0 px-to-rem(24px) px-to-rem(56px);
 
+    &:hover,
+    &:focus {
+      background: $brand-ilo-light-blue;
+    }
+
     &::before {
       clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
       height: px-to-rem(40px);
@@ -918,7 +1033,6 @@
 
   &--feature {
     border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-    filter: drop-shadow(0 4px 4px rgba($brand-ilo-black, 0.25));
     display: flex;
     margin-top: 0;
     position: relative;
@@ -928,17 +1042,45 @@
     }
 
     &#{$self}--dark {
-      border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
+      border-bottom: px-to-rem(3px) solid $color-base-red-medium;
+
+      .ilo--link-list {
+        border-top: 2px solid rgba($brand-ilo-grey-light, 0.25);
+
+        &--link {
+          color: $brand-ilo-white;
+          @include dataurlicon("arrowright", $brand-ilo-white);
+        }
+      }
+
+      &:hover,
+      &:focus {
+        .ilo--link-list {
+          &--link {
+            color: $brand-ilo-blue;
+            @include dataurlicon("arrowright", $brand-ilo-blue);
+          }
+        }
+      }
+    }
+
+    picture::before {
+      @include globaltransition("opacity");
     }
 
     &:hover,
     &:focus {
       background-color: $brand-ilo-white;
+      filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+        drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+        drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+        drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
       border-bottom: px-to-rem(3px) solid $brand-ilo-blue;
 
       picture::before {
         opacity: 0.4;
         z-index: 1;
+        @include globaltransition("opacity");
       }
 
       #{$self}--image {
@@ -946,6 +1088,22 @@
       }
     }
 
+    .ilo--link-list {
+      border-top: px-to-rem(2px) solid $brand-ilo-grey-light;
+      margin-left: px-to-rem(-24px);
+      margin-right: px-to-rem(-24px);
+      margin-top: px-to-rem(34px);
+      position: relative;
+      z-index: 2;
+
+      &--link,
+      &--link:hover {
+        border-bottom: none;
+        padding-left: px-to-rem(24px);
+        padding-right: px-to-rem(24px);
+      }
+    }
+
     &#{$self}--narrow,
     &#{$self}--standard {
       #{$self}--wrap {
@@ -1028,6 +1186,11 @@
     #{$self}--content {
       padding: px-to-rem(24px) px-to-rem(24px) px-to-rem(40px);
     }
+    &#{$self}--linklist {
+      #{$self}--content {
+        padding-bottom: 0;
+      }
+    }
 
     #{$self}--title {
       @include font-styles("headline-5");

package/scss/components/_checkbox.scss

@@ -97,10 +97,12 @@
   margin-bottom: px-to-rem(22px);
 
   .ilo--fieldset--label {
+    font-family: unquote("#{$fonts-copy}, sans-serif");
     font-weight: 400;
+    line-height: 1;
     margin-left: px-to-rem($spacing-padding-1);
     margin-bottom: 0;
-    margin-top: 2px;
+    margin-top: 1px;
     order: 2;
 
     .right-to-left & {

package/scss/components/_hero.scss

@@ -5,6 +5,7 @@
 .ilo--hero {
   background: map-get($color, "ux", "pagination", "default", "background");
   display: block;
+  position: relative;
   width: 100%;
 
   &--home {
@@ -160,6 +161,18 @@
       }
     }
   }
+
+  .ilo--breadcrumb {
+    left: 0;
+    max-width: 560px;
+    position: absolute;
+    top: 0;
+
+    .right-to-left & {
+      left: auto;
+      right: 0;
+    }
+  }
 }
 
 .ilo--hero-card {
@@ -187,13 +200,17 @@
     }
 
     @include breakpoint("large") {
-      height: 64px;
-      top: -63.7px;
+      height: 56px;
+      top: -55.7px;
     }
   }
 
   @include breakpoint("large") {
     padding: 0 70px 70px 56px;
+
+    &.ilo--hero-card--graphic {
+      padding: 0 70px 44px 56px;
+    }
   }
 
   .right-to-left & {
@@ -206,7 +223,7 @@
 
   &--dark {
     background: map-get($color, "hero", "card", "dark", "background");
-    border-bottom: 3px solid $brand-ilo-red;
+    border-bottom: 3px solid $color-base-red-medium;
     color: map-get($color, "hero", "card", "dark", "color");
 
     .ilo--hero-card--link.icon {
@@ -283,6 +300,10 @@
     border: none;
     padding: 24px;
 
+    &::before {
+      display: none;
+    }
+
     @include breakpoint("large") {
       bottom: 72px;
       max-width: 720px;
@@ -290,6 +311,24 @@
       position: absolute;
       width: 100%;
 
+      &::before {
+        background: inherit;
+        clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+        content: "";
+        display: block;
+        height: 59px;
+        left: 0;
+        position: absolute;
+        top: -58.7px;
+        width: 100%;
+
+        .right-to-left & {
+          clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0% 100%, 10% 0%);
+          left: auto;
+          right: 0;
+        }
+      }
+
       &.ilo--hero-card--center {
         left: 50%;
         right: auto;
@@ -308,10 +347,12 @@
     }
 
     &.ilo--hero-card--dark {
-      background: rgba(
-        map-get($color, "hero", "card", "dark", "background"),
-        0.55
-      );
+      @include breakpoint("large") {
+        background: rgba(
+          map-get($color, "hero", "card", "dark", "background"),
+          0.55
+        );
+      }
     }
   }
 
@@ -328,10 +369,10 @@
   }
 
   &--publication {
-    margin-top: -64px;
     padding: 24px;
 
     @include breakpoint("large") {
+      margin-top: -64px;
       max-width: 720px;
       padding: 0 48px 48px 72px;
       width: 100%;
@@ -340,35 +381,21 @@
 
   &--datecopy {
     @include font-styles("body-small");
-    @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+    margin-bottom: px-to-rem(28px);
 
     color: map-get($color, "hero", "card", "light", "datecopy", "color");
   }
 
   &--eyebrow {
     @include font-styles("body-small");
-    @include textmargin(
-      "margin-bottom",
-      32px,
-      "body-small",
-      "copy",
-      "headline-2",
-      "display"
-    );
+    margin-bottom: px-to-rem(16px);
 
     color: map-get($color, "hero", "card", "light", "eyebrow", "color");
   }
 
   &--intro {
     @include font-styles("body-small");
-    @include textmargin(
-      "margin-bottom",
-      40px,
-      "base",
-      "copy",
-      "body-small",
-      "copy"
-    );
+    margin-bottom: px-to-rem(28px);
 
     @include breakpoint("large") {
       @include font-styles("base");

package/scss/components/_linklist.scss

@@ -81,6 +81,7 @@
     padding-right: px-to-rem($spacing-padding-4);
     text-decoration: none;
     @include dataurlicon("arrowright", $color-link-text-default);
+    @include globaltransition("color, background-color, border-color");
 
     &:visited {
       color: map-get($color, "link", "text", "default");

package/scss/components/_navigation.scss

@@ -488,7 +488,7 @@
     width: 32px;
 
     .right-to-left & {
-      clip-path: polygon(0 0, 0 100%, 100% 100%);
+      clip-path: polygon(0 0, 0 100%, 100% 0);
       left: auto;
       right: -32px;
     }