@ilo-org/styles 0.1.6 → 0.1.8

package/scss/components/_card.scss

@@ -1,10 +1,12 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@use "../animations" as *;
 @import "../mixins";
 
 .ilo--card {
   $self: &;
   margin: 0;
+  max-width: px-to-rem(920px);
 
   .right-to-left & {
     text-align: right;
@@ -16,7 +18,7 @@
     color: $brand-ilo-blue;
     text-decoration: none;
 
-    &#{$self}--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink) {
+    &#{$self}--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(#{$self}--factlist) {
       background: $brand-ilo-white;
     }
 
@@ -51,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();
@@ -61,7 +71,7 @@
     background: $brand-ilo-white;
   }
 
-  &--dark:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(:hover):not(:focus) {
+  &--dark#{$self}--action:not(#{$self}--detail):not(#{$self}--data):not(#{$self}--multilink):not(:hover):not(:focus) {
     background: $brand-ilo-dark-blue;
 
     #{$self}--eyebrow {
@@ -103,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 & {
@@ -114,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);
       }
     }
   }
@@ -136,10 +146,12 @@
       "body-small",
       "copy"
     );
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -156,10 +168,12 @@
       "body-small",
       "copy"
     );
+    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus & {
       color: $brand-ilo-blue;
+      @include globaltransition("color");
     }
   }
 
@@ -167,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");
     }
   }
 
@@ -178,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");
     }
   }
 
@@ -374,6 +392,7 @@
   &--detail {
     border-bottom: px-to-rem(3px) solid $brand-ilo-grey-light;
     padding: px-to-rem(24px) 0;
+    position: relative;
 
     @include breakpoint("large") {
       padding: px-to-rem(32px) 0;
@@ -381,6 +400,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;
@@ -406,9 +430,9 @@
         opacity: 0;
         position: absolute;
         top: 0;
-        transition: opacity 0.15s ease-in-out;
         width: 100%;
         z-index: -1;
+        @include globaltransition("opacity");
       }
     }
 
@@ -493,6 +517,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);
     }
@@ -573,6 +613,7 @@
     }
 
     #{$self}--date {
+      display: block;
       @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
     }
   }
@@ -582,6 +623,14 @@
     padding: px-to-rem(40px) px-to-rem(24px);
     width: 100%;
 
+    &: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);
     }
@@ -606,11 +655,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);
       }
     }
 
@@ -657,6 +706,7 @@
 
     &#{$self}--light:not(:hover) #{$self}--title {
       color: $brand-ilo-grey-charcoal;
+      @include globaltransition("color");
     }
 
     #{$self}--title {
@@ -698,36 +748,41 @@
     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);
+      height: px-to-rem(34px);
+      top: px-to-rem(-33.7px);
+    }
+
+    &#{$self}--dark {
+      background: $brand-ilo-dark-blue;
     }
 
     @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);
       }
     }
 
@@ -744,10 +799,27 @@
 
       #{$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;
+        }
       }
     }
 
@@ -779,7 +851,7 @@
 
   &--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 {
@@ -824,7 +896,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%;
     }
 
@@ -840,6 +912,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);
@@ -912,7 +989,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;
@@ -925,14 +1001,23 @@
       border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
     }
 
+    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 {
@@ -971,10 +1056,6 @@
           display: flex;
           flex-wrap: wrap;
           width: 50%;
-
-          .right-to-left & {
-            flex-direction: row-reverse;
-          }
         }
 
         #{$self}--image--wrapper {

package/scss/components/_checkbox.scss

@@ -98,10 +98,16 @@
 
   .ilo--fieldset--label {
     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 & {
+      margin-left: 0;
+      margin-right: px-to-rem($spacing-padding-1);
+    }
   }
 
   .ilo--fieldset--error,

package/scss/components/_hero.scss

@@ -206,6 +206,7 @@
 
   &--dark {
     background: map-get($color, "hero", "card", "dark", "background");
+    border-bottom: 3px solid $brand-ilo-red;
     color: map-get($color, "hero", "card", "dark", "color");
 
     .ilo--hero-card--link.icon {
@@ -279,6 +280,7 @@
   }
 
   &--home {
+    border: none;
     padding: 24px;
 
     @include breakpoint("large") {
@@ -438,7 +440,7 @@
       &--facebook {
         @include dataurlicon(
           "facebook",
-          map-get($color, "hero", "card", "light", "iconhover", "background")
+          map-get($color, "hero", "card", "light", "icon", "color")
         );
 
         &:hover {
@@ -452,7 +454,7 @@
       &--twitter {
         @include dataurlicon(
           "twitter",
-          map-get($color, "hero", "card", "light", "iconhover", "background")
+          map-get($color, "hero", "card", "light", "icon", "color")
         );
 
         &:hover {
@@ -466,7 +468,7 @@
       &--linkedin {
         @include dataurlicon(
           "linkedin",
-          map-get($color, "hero", "card", "light", "iconhover", "background")
+          map-get($color, "hero", "card", "light", "icon", "color")
         );
 
         &:hover {

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

@@ -174,7 +174,7 @@
     display: none;
     font-family: $fonts-display;
     font-weight: 700;
-    padding: 20px 0;
+    padding: 16px 0;
     text-align: right;
 
     .right-to-left & {
@@ -240,6 +240,7 @@
     display: block;
     padding: 16px 36px 16px 8px;
     text-decoration: none;
+    transition: color 150ms ease-out, background 150ms ease-out;
 
     &:hover,
     &:focus {
@@ -452,7 +453,6 @@
 
   &--search {
     .ilo--searchfield {
-      max-width: 618px;
       width: 100%;
     }
 
@@ -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;
     }

package/scss/components/_profile.scss

@@ -10,12 +10,12 @@
   &--avatar {
     border-radius: 50%;
     float: left;
-    width: 18.65%;
+    width: px-to-rem(64px);
   }
 
   &--contents {
     .id {
-      margin-left: calc(18.65% + 11px);
+      margin-left: px-to-rem(75px);
       padding-top: 5px;
 
       &:first-of-type {
@@ -135,7 +135,7 @@
     .ilo--profile--contents {
       .id {
         margin-left: auto;
-        margin-right: calc(18.65% + 11px);
+        margin-right: px-to-rem(75px);
       }
     }
 

package/scss/components/_radio.scss

@@ -99,6 +99,11 @@
     margin-left: px-to-rem($spacing-padding-1);
     margin-top: 2px;
     order: 2;
+
+    .right-to-left & {
+      margin-left: 0;
+      margin-right: px-to-rem($spacing-padding-1);
+    }
   }
 
   .ilo--fieldset--error,

package/scss/components/_tabs.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@use "../animations" as *;
 @import "../mixins";
 
 .ilo--tabs {
@@ -20,6 +21,7 @@
         font-weight: inherit;
         line-height: inherit;
         text-decoration: none;
+        @include globaltransition("color, background-color, border-color");
 
         &:visited {
           background: map-get($color, "link", "background", "visited");
@@ -34,6 +36,7 @@
             map-get($color, "link", "underline", "hover");
           color: map-get($color, "link", "text", "hover");
           text-decoration: none;
+          @include globaltransition("color, background-color, border-color");
         }
 
         &:active {
@@ -74,10 +77,12 @@
         padding-right: $spacing-padding-3;
         text-decoration: none;
         @include font-styles("label-medium");
+        @include globaltransition("color, background-color, border-color");
 
         &[aria-selected="true"] {
           background-color: $color-base-neutrals-white;
           border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
+          @include globaltransition("color, background-color, border-color");
         }
 
         &.icon {
@@ -98,6 +103,7 @@
           background-color: $color-base-blue-light;
           color: $color-base-blue-medium;
           outline: none;
+          @include globaltransition("color, background-color, border-color");
 
           &.has--tooltip {
             .ilo--tooltip--wrapper {

package/scss/components/_tag.scss

@@ -1,6 +1,7 @@
 @use "../tokens" as *;
 @use "../functions" as *;
-@use "../mixins" as *;
+@use "../animations" as *;
+@import "../mixins";
 
 .ilo--tags {
   list-style: none;
@@ -26,9 +27,11 @@
   font-size: inherit;
   font-weight: 500;
   line-height: inherit;
-  padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"));
+  padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"))
+    px-to-rem(8px) px-to-rem(map-get($spacing, "ui-padding-sm"));
   text-decoration: none;
   $self: &;
+  @include globaltransition("color, background-color, border-color");
 
   &--active {
     background: map-get($color, "tag", "background", "active");
@@ -44,17 +47,24 @@
       color: map-get($color, "tag", "text", "active");
       cursor: pointer;
       outline: none;
+      pointer-events: none;
 
       &:hover {
         background: map-get($color, "tag", "background", "hover");
         color: map-get($color, "tag", "text", "hover");
         text-decoration: none;
+        @include globaltransition("color, background-color, border-color");
       }
 
       &:focus {
         background: map-get($color, "tag", "background", "focus");
         color: map-get($color, "tag", "text", "focus");
         outline: none;
+        @include globaltransition("color, background-color, border-color");
+      }
+
+      &.ilo--tag--active {
+        pointer-events: auto;
       }
     }
   }
@@ -76,12 +86,37 @@
       opacity: 1;
       outline: none;
       visibility: visible;
+      @include globaltransition("color, background-color, border-color");
+    }
+
+    &.icon__position--right {
+      .ilo--icon {
+        @include dataurlicon("close", map-get($color, "tag", "text", "active"));
+
+        height: 100%;
+        max-height: 28px;
+        max-width: 28px;
+        position: absolute;
+        right: 5px;
+        top: 5px;
+        width: 100%;
+      }
     }
 
     &:hover {
       background: map-get($color, "tag", "background", "hover");
       color: map-get($color, "tag", "text", "hover");
       text-decoration: none;
+      @include globaltransition("color, background-color, border-color");
+
+      &.icon__position--right {
+        .ilo--icon {
+          @include dataurlicon(
+            "close",
+            map-get($color, "tag", "text", "hover")
+          );
+        }
+      }
     }
 
     &:focus {
@@ -89,6 +124,27 @@
       color: map-get($color, "tag", "text", "focus");
       outline: none;
     }
+  }
+
+  &--reset {
+    @include font-styles("label-small");
+
+    cursor: pointer;
+    display: none;
+    opacity: 0;
+    position: relative;
+    visibility: hidden;
+
+    &.ilo--tag--active {
+      background: $color-base-neutrals-white;
+      border: 1.5px solid $color-base-neutrals-light;
+      color: map-get($color, "tag", "text", "active");
+      display: block;
+      opacity: 1;
+      outline: none;
+      visibility: visible;
+      @include globaltransition("color, background-color, border-color");
+    }
 
     &.icon__position--right {
       .ilo--icon {
@@ -99,9 +155,33 @@
         max-width: 28px;
         position: absolute;
         right: 5px;
-        top: 6px;
+        top: 5px;
         width: 100%;
       }
     }
+
+    &:hover {
+      background: map-get($color, "tag", "background", "hover");
+      border: 1.5px solid map-get($color, "tag", "background", "hover");
+      color: map-get($color, "tag", "text", "hover");
+      text-decoration: none;
+      @include globaltransition("color, background-color, border-color");
+
+      &.icon__position--right {
+        .ilo--icon {
+          @include dataurlicon(
+            "close",
+            map-get($color, "tag", "text", "hover")
+          );
+        }
+      }
+    }
+
+    &:focus {
+      background: map-get($color, "tag", "background", "focus");
+      border: 1.5px solid map-get($color, "tag", "background", "focus");
+      color: map-get($color, "tag", "text", "focus");
+      outline: none;
+    }
   }
 }