@ilo-org/styles 1.4.0 → 1.6.0

package/scss/components/_card.scss

@@ -3,93 +3,47 @@
 @use "../animations" as *;
 @import "../mixins";
 
+@mixin card-drop-shadow {
+  filter: drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.05))
+    drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+    drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.05))
+    drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.04));
+}
+
+$card-transitions: "color, background-color, border-color, opacity, fill, filter";
+
+$link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--card--link:focus-within";
+
+@mixin card-link-hover {
+  &:has(#{$link-hover-selectors}) {
+    @content;
+  }
+}
+
 .ilo--card {
   $self: &;
   $transition-timing: 250ms;
+
   box-sizing: border-box;
   position: relative;
   background-color: var(--ilo-color-white);
-
-  // Max width is set in the invididual card types unless fluid
   max-width: var(--max-width);
   flex: 1 1 var(--max-width);
+  @include globaltransition("border-bottom, filter");
 
   * {
-    @include globaltransition("color, background-color, border-color, opacity");
-  }
-
-  &__size__fluid {
-    --max-width: 100% !important;
-  }
-
-  &__action:hover,
-  &__action:focus,
-  &__action:focus-within {
-    // background: var(--ilo-color-white);
-    outline: none;
-    text-decoration: none;
-
-    // &#{$self}__dark {
-    //   background: var(--ilo-color-white);
-    // }
-
-    #{$self}--eyebrow,
-    #{$self}--title,
-    #{$self}--intro,
-    #{$self}--date,
-    #{$self}--date-extra {
-      color: var(--ilo-color-blue);
-    }
+    @include globaltransition($card-transitions);
   }
 
-  &__theme {
-    &__light {
-      background: var(--ilo-color-white);
-    }
-
-    &__dark {
-      background: var(--ilo-color-blue-dark);
+  @include card-link-hover {
+    @include card-drop-shadow;
 
-      #{$self}--eyebrow,
-      #{$self}--title,
-      #{$self}--intro,
-      #{$self}--date,
-      #{$self}--eventdate {
-        color: var(--ilo-color-gray-light);
-      }
+    #{$self}--image--wrapper::before {
+      opacity: 0.4;
     }
 
-    &__soft {
-      background: var(--ilo-color-blue-lighter);
-    }
-  }
-
-  &__isvideo {
-    #{$self}--image--wrapper {
-      position: relative;
-
-      &::before,
-      &::after {
-        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;
-      }
-
-      &::before {
-        background-color: var(--ilo-color-gray-charcoal);
-      }
-
-      &::after {
-        @include icon("caret_right", var(--ilo-color-gray-light));
-      }
+    #{$self}--picture {
+      filter: saturate(0);
     }
   }
 
@@ -97,130 +51,172 @@
     height: 100%;
   }
 
+  // The outer element for cards with corner cut
   &--wrapper {
     max-width: var(--max-width);
-    transition: filter $transition-timing ease-out;
+    @include globaltransition($card-transitions);
 
-    &:hover,
-    &:focus,
-    &:focus-within {
+    @include card-link-hover {
       @include card-drop-shadow;
     }
   }
 
+  &--image--wrapper {
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      background-color: var(--ilo-color-blue);
+      height: 100%;
+      width: 100%;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      @include globaltransition("opacity");
+    }
+  }
+
   &--link {
     background: none;
     color: transparent;
-    height: 100%;
-    left: 0;
     position: absolute;
-    text-decoration: none;
     top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+    text-decoration: none;
     z-index: 2;
 
-    &:hover,
-    &:focus,
-    &:focus-within {
-      outline: none;
-
-      + #{$self}--wrap {
-        #{$self}--eyebrow {
-          color: var(--ilo-color-blue);
-        }
-
-        #{$self}--title {
-          color: var(--ilo-color-blue);
-        }
-
-        #{$self}--intro {
-          color: var(--ilo-color-blue);
-        }
-
-        #{$self}--date {
-          color: var(--ilo-color-blue);
-        }
-
-        #{$self}--eventdate {
-          color: var(--ilo-color-blue);
-        }
-      }
-    }
-
     &--text {
       @include isVisuallyHidden();
     }
   }
 
   &--eyebrow {
-    color: $brand-ilo-purple;
-    @include font-styles("body-small");
-    margin-bottom: spacing(3);
-
-    #{$self}--link:hover &,
-    #{$self}--link:focus &,
-    #{$self}--link:focus-within & {
-      color: var(--ilo-color-blue);
-    }
+    color: var(--ilo-color-purple);
+    @include typography("body-small");
+    margin-bottom: spacing(4);
   }
 
   &--title {
-    color: var(--ilo-color-blue-dark);
-    font-family: var(--ilo-fonts-display);
-    font-weight: 700;
-    @include font-styles("headline-5");
-    @include textmargin(
-      "margin-bottom",
-      10px,
-      "headline-5",
-      "display",
-      "body-small",
-      "copy"
-    );
-
-    #{$self}--link:hover &,
-    #{$self}--link:focus &,
-    #{$self}--link:focus-within & {
-      color: var(--ilo-color-blue);
-    }
+    color: var(--ilo-color-dark-blue);
+    @include typography("heading-4");
+    margin-bottom: spacing(6);
   }
 
   &--intro {
     color: var(--ilo-color-gray-charcoal);
-    @include font-styles("body-small");
-    margin-bottom: spacing(8);
-
-    #{$self}--link:hover &,
-    #{$self}--link:focus &,
-    #{$self}--link:focus-within & {
-      color: var(--ilo-color-blue);
-    }
+    @include typography("body-large");
   }
 
   &--date {
-    color: $brand-ilo-grey-accessible;
-    @include font-styles("body-small");
-    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
-
-    #{$self}--link:hover &,
-    #{$self}--link:focus &,
-    #{$self}--link:focus-within & {
-      color: var(--ilo-color-blue);
-    }
+    color: var(--ilo-gray-accessible);
+    @include typography("body-small");
+    margin-bottom: spacing(6);
   }
 
   &--event-date {
-    @include font-styles("body-small");
-    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
+    @include typography("body-small");
   }
 
-  &--picture {
-    max-width: 100%;
-    width: 100%;
+  &--content--item {
+    @include typography("body-small");
   }
 
   &--cta {
     position: relative;
     z-index: 2;
   }
+
+  &__theme {
+    &__light {
+      background: var(--ilo-color-white);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+    }
+
+    &__soft {
+      background: var(--ilo-color-blue-lighter);
+    }
+
+    &__light,
+    &__soft {
+      @include card-link-hover {
+        border-bottom: px-to-rem(3px) solid var(--ilo-color-blue);
+
+        #{$self}--eyebrow,
+        #{$self}--title,
+        #{$self}--intro,
+        #{$self}--date,
+        #{$self}--date-extra,
+        #{$self}--content--item,
+        .ilo--profile {
+          color: var(--ilo-color-blue);
+
+          .ilo--icon {
+            fill: var(--ilo-color-blue);
+          }
+        }
+      }
+    }
+
+    &__dark {
+      background: var(--ilo-color-blue-dark);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
+
+      @include card-link-hover {
+        border-bottom: px-to-rem(3px) solid var(--ilo-color-white);
+      }
+
+      #{$self}--title {
+        color: var(--ilo-color-white);
+      }
+
+      #{$self}--eyebrow,
+      #{$self}--intro,
+      #{$self}--date,
+      #{$self}--content--item {
+        color: var(--ilo-color-gray-light);
+      }
+
+      #{$self}--content--item {
+        .ilo--icon {
+          fill: var(--ilo-color-gray-light);
+        }
+      }
+    }
+  }
+
+  &__size {
+    &__fluid {
+      --max-width: 100% !important;
+    }
+  }
+
+  // Video style
+  &__isvideo {
+    #{$self}--image--wrapper {
+      position: relative;
+      &::before,
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 40px;
+        width: 40px;
+        z-index: 1;
+        background-position: center;
+        background-size: 18px 20px;
+        background-repeat: no-repeat;
+      }
+      &::before {
+        background-color: var(--ilo-color-gray-charcoal);
+      }
+      &::after {
+        @include icon("caret_right", var(--ilo-color-gray-light));
+      }
+    }
+  }
 }

package/scss/components/_datacard.scss

@@ -131,6 +131,11 @@
         max-width: 200px;
       }
 
+      #{$self}--picture {
+        max-width: 100%;
+        width: 100%;
+      }
+
       &--content-label {
         @include font-styles("body-xs");
         @include textmargin(

package/scss/components/_detailcard.scss

@@ -10,39 +10,27 @@
     &__detail {
       --max-width: #{px-to-rem(343px)};
 
-      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-light;
-      padding: spacing(8) 0;
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-light);
+      padding: spacing(8) spacing(4);
       position: relative;
 
-      @include globaltransition(border);
-
-      @include breakpoint("lg") {
-        padding: spacing(8) 0;
-      }
-
-      @include breakpoint("md", true) {
-        --max-width: 100%;
+      #{$self}--wrap {
+        display: flex;
+        flex-flow: column;
       }
 
-      &:hover,
-      &:focus,
-      &:focus-within {
-        @include card-drop-shadow;
-        border-bottom: px-to-rem(3px) solid $brand-ilo-blue;
+      #{$self}--image--wrapper {
+        width: px-to-rem(100px);
+        height: auto;
+        margin-bottom: spacing(8);
 
-        picture::before {
-          opacity: 0.4;
-          z-index: 2;
+        picture {
+          display: flex;
         }
 
-        #{$self}--date-extra {
-          &::before {
-            @include dataurlicon("caret_right", $brand-ilo-blue);
-
-            [dir="rtl"] & {
-              @include dataurlicon("caret_left", $brand-ilo-blue);
-            }
-          }
+        img {
+          width: 100%;
+          height: 100%;
         }
       }
 
@@ -54,116 +42,90 @@
         padding: 0 0 spacing(2) 0;
         @include font-styles("headline-6");
         @include breakpoint("lg") {
-          #{$self}__size__wide & {
-            @include font-styles("headline-5");
-          }
-
           #{$self}__size__wide & {
             @include font-styles("headline-6");
           }
         }
       }
 
-      &#{$self}__size {
-        &__wide,
-        &__fluid {
-          --max-width: #{px-to-rem(745px)};
-
-          #{$self}--title {
-            @include breakpoint("lg") {
-              @include font-styles("headline-5");
-            }
-          }
+      #{$self}--intro {
+        margin-bottom: spacing(8);
+      }
 
-          #{$self}--image--wrapper {
-            @include breakpoint("lg") {
-              flex: 0 0 px-to-rem(196px);
-            }
-          }
+      #{$self}--date {
+        font-size: var(--ilo-font-size-sm);
+        line-height: var(--ilo-line-height-xlg);
+        letter-spacing: var(--ilo-letter-spacing-md);
+        color: var(--ilo-color-gray-accessible);
+      }
 
-          #{$self}--picture {
-            @include breakpoint("lg") {
-              width: px-to-rem(196px);
-            }
-          }
+      #{$self}--date-extra {
+        font-size: var(--ilo-font-size-md);
+        line-height: var(--ilo-line-height-2xlg);
+        letter-spacing: var(--ilo-letter-spacing-md);
+        color: var(--ilo-color-gray-charcoal);
+        gap: spacing(2);
+
+        // this makes sure the para will be indented
+        // if it has to wrap on two lines
+        margin-inline-start: px-to-rem(-4px);
+        padding-inline-start: px-to-rem(24px);
+        text-indent: px-to-rem(-24px);
+
+        .ilo--icon {
+          display: inline-block;
+          position: relative;
+          vertical-align: sub;
+          top: px-to-rem(1px);
         }
+      }
 
+      &#{$self}__size {
         &__narrow {
           --max-width: #{px-to-rem(343px)};
-
-          @include breakpoint("md", true) {
-            --max-width: 100%;
-          }
         }
-      }
 
-      picture {
-        display: flex;
-        position: relative;
-
-        &::before {
-          background-color: $brand-ilo-blue;
-          content: "";
-          display: block;
-          height: 100%;
-          left: 0;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          width: 100%;
-          z-index: -1;
-          @include globaltransition("opacity");
-        }
-      }
+        &__wide,
+        &__fluid {
+          @include breakpoint("md") {
+            --max-width: #{px-to-rem(745px)};
+            padding: spacing(8) spacing(4) spacing(8) spacing(0);
+
+            #{$self}--image--wrapper {
+              flex: 1 0 18%;
+              height: 100%;
+              margin: 0;
+            }
 
-      #{$self}--wrap {
-        display: flex;
-      }
+            #{$self}--picture {
+              height: auto;
+            }
 
-      #{$self}--title {
-        @include font-styles("headline-6");
-      }
+            #{$self}--wrap {
+              flex-flow: row;
+              gap: spacing(4);
+            }
+          }
 
-      #{$self}--image--wrapper {
-        flex: 0 0 px-to-rem(77px);
-      }
+          @include breakpoint("lg") {
+            padding: spacing(8) spacing(6) spacing(8) spacing(0);
 
-      #{$self}--picture {
-        object-fit: contain;
-        width: px-to-rem(77px);
-      }
+            #{$self}--wrap {
+              gap: spacing(6);
+            }
 
-      #{$self}--content {
-        padding: 0 spacing(6);
-      }
+            #{$self}--image--wrapper {
+              flex: 1 0 27%;
+            }
+          }
 
-      #{$self}--date-extra {
-        @include font-styles("body-small");
-        margin-bottom: 0;
-        padding-inline-start: spacing(5);
-        position: relative;
-
-        &::before {
-          background-repeat: no-repeat;
-          content: "";
-          display: inline-block;
-          height: px-to-rem(24px);
-          left: -8px;
-          top: 0;
-          position: absolute;
-          width: px-to-rem(24px);
-          @include dataurlicon("caret_right", $brand-ilo-black);
-
-          [dir="rtl"] & {
-            @include dataurlicon("caret_left", $brand-ilo-black);
-            right: -8px;
+          #{$self}--title {
+            @include breakpoint("lg") {
+              @include font-styles("headline-5");
+            }
           }
         }
       }
-
-      #{$self}--date {
-        @include font-styles("body-small");
-      }
     }
   }
 }