@ilo-org/styles 1.5.0 → 1.6.1

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");
-      }
     }
   }
 }

package/scss/components/_featurecard.scss

@@ -10,67 +10,44 @@
     &__feature {
       --max-width: #{px-to-rem(412px)};
 
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
       display: flex;
+      flex-flow: column;
       margin-top: 0;
       position: relative;
 
-      &:hover,
-      &:focus,
-      &:focus-within {
-        .ilo--link-list {
-          &--label {
-            color: var(--ilo-color-blue) !important;
-          }
+      #{$self}--image--wrapper {
+        height: 0;
+        overflow: hidden;
+        padding-top: 56.25%;
+        width: 100%;
 
-          &--icon {
-            background-color: var(--ilo-color-blue);
-          }
+        img {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          height: auto;
+          width: 100%;
         }
       }
 
-      &#{$self}__theme__dark {
-        border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
-
-        .ilo--link-list {
-          border-top: 2px solid var(--ilo-color-gray-light-semi-transparent);
-        }
+      #{$self}--content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding: spacing(6) spacing(6) spacing(2) spacing(6);
       }
 
-      picture::before {
-        @include globaltransition("opacity");
+      #{$self}--eyebrow {
+        margin-bottom: spacing(4);
       }
 
-      &:hover,
-      &:focus,
-      &:focus-within {
-        background-color: var(--ilo-color-white);
-        border-bottom: px-to-rem(3px) solid var(--ilo-color-blue);
-        @include card-drop-shadow;
-
-        picture::before {
-          opacity: 0.4;
-          z-index: 1;
-          @include globaltransition("opacity");
-        }
-
-        #{$self}--picture {
-          filter: saturate(0);
-        }
+      #{$self}--title {
+        margin-bottom: spacing(6);
       }
 
-      .ilo--link-list {
-        border-top: px-to-rem(2px) solid var(--ilo-color-gray-light);
-        margin-left: px-to-rem(-24px);
-        margin-right: px-to-rem(-24px);
-        position: relative;
-        z-index: 2;
-
-        &--link,
-        &--link:hover {
-          border-bottom: none;
-          padding-inline: spacing(6) spacing(2);
-        }
+      #{$self}--date {
+        margin-bottom: spacing(8);
       }
 
       &#{$self}__size {
@@ -88,6 +65,10 @@
           #{$self}--image--wrapper {
             width: 100%;
           }
+
+          .ilo--link-list {
+            margin: 0 px-to-rem(-24px);
+          }
         }
 
         &__wide,
@@ -101,18 +82,22 @@
 
             #{$self}--content {
               display: flex;
-              flex-direction: row;
               flex-wrap: wrap;
               position: relative;
               width: 50%;
             }
 
             #{$self}--image--wrapper {
+              padding: 0;
+              height: initial;
               width: 50%;
             }
 
-            #{$self}--image {
+            img {
               object-fit: cover;
+              max-width: initial;
+              height: 100%;
+              width: 100%;
             }
 
             #{$self}--date {
@@ -129,8 +114,7 @@
             }
 
             .ilo--link-list {
-              width: calc(100% + 48px);
-              align-self: flex-end;
+              width: 100%;
             }
           }
         }
@@ -142,66 +126,40 @@
         width: 100%;
       }
 
-      picture {
-        display: flex;
-        height: 100%;
-        position: relative;
-
-        &::before {
-          background-color: var(--ilo-color-blue);
-          content: "";
-          display: block;
-          height: 100%;
-          left: 0;
-          opacity: 0;
-          position: absolute;
-          top: 0;
-          transition: opacity 150ms ease-in-out;
-          width: 100%;
-          z-index: -1;
-        }
-
-        img {
-          object-fit: cover;
-        }
-      }
-
-      #{$self}--content {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        padding: spacing(6) spacing(6) spacing(2) spacing(6);
+      #{$self}--title {
+        @include font-styles("headline-5");
+        font-family: var(--ilo-fonts-display);
+        font-weight: 700;
       }
 
+      // Not sure what's going on down here...
       &#{$self}__linklist {
         #{$self}--content {
           padding-bottom: 0;
         }
       }
 
-      #{$self}--title {
-        @include font-styles("headline-5");
-        margin-bottom: spacing(6);
-        font-family: var(--ilo-fonts-display);
-        font-weight: 700;
-        flex: 1;
-      }
+      .ilo--link-list {
+        border-top: px-to-rem(2px) solid var(--ilo-color-gray-light);
 
-      #{$self}--eyebrow {
-        @include font-styles("body-eyebrow");
-        @include textmargin(
-          "margin-bottom",
-          10px,
-          "body-eyebrow",
-          "copy",
-          "headline-5",
-          "display"
-        );
+        a {
+          border-bottom: none;
+        }
+
+        position: relative;
+        z-index: 2;
+
+        &--link,
+        &--link:hover {
+          padding-inline: spacing(6) spacing(2);
+          border-bottom: none;
+        }
       }
 
-      #{$self}--date {
-        margin-bottom: spacing(8);
-        margin-top: auto;
+      &#{$self}__theme__dark {
+        .ilo--link-list {
+          border-top: 2px solid var(--ilo-color-gray-light-semi-transparent);
+        }
       }
     }
   }

package/scss/components/_multilinkcard.scss

@@ -12,9 +12,19 @@
       --narrow-spacing: #{spacing(6)};
       // Defaults to standard size
       --max-width: #{px-to-rem(536px)};
-
       padding: spacing(6);
 
+      // Unset properties we set in the card component
+      border: unset;
+      &:has(
+          .ilo--card--link:hover,
+          .ilo--card--link:focus,
+          .ilo--card--link:focus-within
+        ) {
+        border: unset;
+        filter: unset;
+      }
+
       #{$self}--image--wrapper {
         display: none;
         background-color: var(--ilo-color-blue-lighter);
@@ -120,7 +130,7 @@
             #{$self}--wrap {
               display: grid;
               grid-template-areas: "image content";
-              grid-template-columns: 1fr 1fr;
+              grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
               gap: px-to-rem(32px);
             }