@ilo-org/styles 0.6.1 → 0.7.1

package/scss/components/_cardgroup.scss

@@ -3,45 +3,87 @@
 @import "../mixins";
 
 .ilo--cardgroup {
-  $card: ".ilo--card";
+  $c: &;
 
-  &--inner {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin: auto;
-    row-gap: px-to-rem(32px);
+  &__collapsed {
+    #{$c}--inner {
+      gap: 0 !important;
+    }
+  }
 
-    .right-to-left & {
-      flex-direction: row-reverse;
+  &__justify {
+    &__start {
+      #{$c}--inner {
+        justify-content: flex-start;
+      }
     }
 
-    #{$card} {
-      width: 100%;
+    &__between {
+      #{$c}--inner {
+        justify-content: space-between;
+      }
     }
-  }
 
-  &--two {
-    @include breakpoint("large") {
-      #{$card} {
-        width: calc(50% - 16px);
+    &__center {
+      #{$c}--inner {
+        justify-content: center;
       }
     }
   }
 
-  &--three {
+  &__count {
     @include breakpoint("large") {
-      #{$card} {
-        width: calc(33.333% - 21px);
+      &__one {
+        #{$c}--inner {
+          gap: 0;
+        }
+
+        #{$c}--card {
+          flex: 1 1 100%;
+        }
+      }
+
+      &__two {
+        #{$c}--inner {
+          gap: 16px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(50% - 16px);
+        }
+      }
+
+      &__three {
+        #{$c}--inner {
+          gap: 21px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(33.3333% - 21px);
+        }
+      }
+
+      &__four {
+        #{$c}--inner {
+          gap: 24px;
+        }
+
+        #{$c}--card {
+          flex: 0 1 calc(25% - 24px);
+        }
       }
     }
   }
 
-  &--four {
-    @include breakpoint("large") {
-      #{$card} {
-        width: calc(25% - 24px);
-      }
+  &--inner {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    margin: auto;
+    width: 100%;
+
+    .right-to-left & {
+      flex-direction: row-reverse;
     }
   }
 

package/scss/components/_datacard.scss

@@ -0,0 +1,90 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__data {
+      --max-width: #{px-to-rem(301px)};
+
+      background: $brand-ilo-light-blue;
+      border-bottom: px-to-rem(3px) solid #82afdc;
+      margin-top: px-to-rem(40px);
+      padding: px-to-rem(24px) px-to-rem(56px);
+      position: relative;
+      width: 100%;
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background: $brand-ilo-light-blue;
+      }
+
+      &#{$self}__size {
+        &__narrow {
+          --max-width: #{px-to-rem(301px)};
+
+          @include cornercut(72px, 40px);
+        }
+
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(600px)};
+
+          @include cornercut(87px, 48px);
+        }
+      }
+
+      #{$self}--image--wrapper {
+        width: max(px-to-rem(205px), 50%);
+      }
+
+      &--content-label {
+        @include font-styles("body-xs");
+        @include textmargin(
+          "margin-bottom",
+          16px,
+          "body-xs",
+          "copy",
+          "headline-5",
+          "display"
+        );
+        color: $brand-ilo-grey-accessible;
+      }
+
+      &--content-copy {
+        @include font-styles("headline-5");
+        @include textmargin(
+          "margin-bottom",
+          40px,
+          "headline-5",
+          "display",
+          "body-xs",
+          "copy"
+        );
+        color: $brand-ilo-grey-charcoal;
+        font-family: $fonts-display;
+        font-weight: 500;
+      }
+
+      &--content-files {
+        margin-bottom: px-to-rem(40px);
+      }
+
+      .ilo--link {
+        @include font-styles("headline-6");
+      }
+
+      &--file {
+        margin: px-to-rem(4px) px-to-rem(8px) px-to-rem(4px) 0;
+
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/_detailcard.scss

@@ -0,0 +1,150 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__detail {
+      --max-width: #{px-to-rem(343px)};
+
+      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;
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        @include card-drop-shadow;
+
+        picture::before {
+          opacity: 0.4;
+          z-index: 2;
+        }
+
+        #{$self}--date-extra {
+          &::before {
+            @include dataurlicon("equilateraltriangle", $brand-ilo-blue);
+          }
+        }
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-6");
+
+        @include breakpoint("large") {
+          #{$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("large") {
+              @include font-styles("headline-5");
+            }
+          }
+
+          #{$self}--image--wrapper {
+            @include breakpoint("large") {
+              flex: 0 0 px-to-rem(196px);
+            }
+          }
+
+          #{$self}--picture {
+            @include breakpoint("large") {
+              width: px-to-rem(196px);
+            }
+          }
+        }
+
+        &__narrow {
+          --max-width: #{px-to-rem(343px)};
+        }
+      }
+
+      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");
+        }
+      }
+
+      #{$self}--wrap {
+        display: flex;
+
+        .right-to-left & {
+          flex-direction: row-reverse;
+        }
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-6");
+      }
+
+      #{$self}--image--wrapper {
+        flex: 0 0 px-to-rem(77px);
+      }
+
+      #{$self}--picture {
+        object-fit: contain;
+        width: px-to-rem(77px);
+      }
+
+      #{$self}--content {
+        padding: 0 px-to-rem(24px);
+      }
+
+      #{$self}--date-extra {
+        @include font-styles("body-small");
+        margin-bottom: 0;
+        padding-left: px-to-rem(24px);
+        position: relative;
+
+        &::before {
+          background-repeat: no-repeat;
+          content: "";
+          display: inline-block;
+          height: px-to-rem(14px);
+          left: 0;
+          position: absolute;
+          top: 50%;
+          transform: rotate(-90deg) translateX(50%);
+          width: px-to-rem(12px);
+          @include dataurlicon("equilateraltriangle", $brand-ilo-grey-charcoal);
+        }
+      }
+
+      #{$self}--date {
+        @include font-styles("body-small");
+      }
+    }
+  }
+}

package/scss/components/_factlistcard.scss

@@ -0,0 +1,110 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__factlist {
+      --max-width: #{px-to-rem(375px)};
+
+      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
+      padding: px-to-rem(24px) px-to-rem(48px);
+
+      @include cornercut(72px, 40px);
+
+      @include breakpoint("large") {
+        padding: px-to-rem(40px) px-to-rem(56px);
+      }
+
+      &#{$self}__size {
+        &__wide {
+          --max-width: #{px-to-rem(856px)};
+
+          padding: px-to-rem(40px) px-to-rem(52px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(40px) px-to-rem(60px);
+            @include cornercut(87px, 48px);
+          }
+        }
+
+        // &__standard {
+        //   padding: px-to-rem(40px) px-to-rem(52px);
+
+        //   @include breakpoint("medium") {
+        //     padding: px-to-rem(40px) px-to-rem(60px);
+        //   }
+        // }
+
+        &__narrow {
+          --max-width: #{px-to-rem(375px)};
+
+          padding: px-to-rem(24px) px-to-rem(48px);
+          @include cornercut(72px, 40px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(24px) px-to-rem(48px);
+          }
+        }
+      }
+
+      &#{$self}__theme {
+        &__dark {
+          border-bottom: px-to-rem(3px) solid $color-base-red-medium;
+
+          #{$self}--title {
+            color: $brand-ilo-white;
+          }
+
+          .ilo--list__item {
+            color: $brand-ilo-white;
+
+            &:last-of-type {
+              margin-bottom: 0;
+            }
+          }
+
+          &:hover,
+          &:focus,
+          &:focus-within {
+            #{$self}--title {
+              color: $brand-ilo-white;
+            }
+
+            .ilo--list__item {
+              color: $brand-ilo-white;
+            }
+          }
+        }
+      }
+
+      #{$self}--title {
+        color: $brand-ilo-grey-charcoal;
+        @include font-styles("headline-5");
+        @include textmargin(
+          "margin-bottom",
+          32px,
+          "headline-5",
+          "display",
+          "body-small",
+          "copy"
+        );
+
+        @include breakpoint("large") {
+          @include font-styles("headline-4");
+          @include textmargin(
+            "margin-bottom",
+            40px,
+            "headline-4",
+            "display",
+            "base",
+            "copy"
+          );
+        }
+      }
+    }
+  }
+}

package/scss/components/_featurecard.scss

@@ -0,0 +1,218 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__feature {
+      --max-width: #{px-to-rem(412px)};
+
+      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
+      display: flex;
+      margin-top: 0;
+      position: relative;
+
+      &#{$self}__theme__dark {
+        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,
+        &:focus-within {
+          .ilo--link-list {
+            &--link {
+              color: $brand-ilo-blue;
+              @include dataurlicon("arrowright", $brand-ilo-blue);
+            }
+          }
+        }
+      }
+
+      picture::before {
+        @include globaltransition("opacity");
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: $brand-ilo-white;
+        border-bottom: px-to-rem(3px) solid $brand-ilo-blue;
+        @include card-drop-shadow;
+
+        picture::before {
+          opacity: 0.4;
+          z-index: 1;
+          @include globaltransition("opacity");
+        }
+
+        #{$self}--picture {
+          filter: saturate(0);
+        }
+      }
+
+      .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}__size {
+        &__narrow {
+          #{$self}--wrap {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+          }
+
+          #{$self}--content {
+            width: 100%;
+          }
+
+          #{$self}--image--wrapper {
+            width: 100%;
+          }
+        }
+
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(754px)};
+
+          @include breakpoint("medium") {
+            #{$self}--wrap {
+              flex-direction: row;
+
+              .right-to-left & {
+                flex-direction: row-reverse;
+              }
+            }
+
+            #{$self}--content {
+              display: flex;
+              flex-direction: row;
+              flex-wrap: wrap;
+              position: relative;
+              width: 50%;
+            }
+
+            #{$self}--image--wrapper {
+              width: 50%;
+            }
+
+            #{$self}--image {
+              object-fit: cover;
+            }
+
+            #{$self}--date {
+              align-self: flex-end;
+              width: 100%;
+            }
+
+            #{$self}--eyebrow {
+              width: 100%;
+            }
+
+            #{$self}--title {
+              width: 100%;
+            }
+
+            .ilo--link-list {
+              width: calc(100% + 48px);
+              align-self: flex-end;
+            }
+          }
+        }
+      }
+
+      #{$self}--wrap {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      picture {
+        display: flex;
+        height: 100%;
+        position: relative;
+
+        &::before {
+          background-color: $brand-ilo-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;
+        }
+      }
+
+      #{$self}--content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        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");
+        @include textmargin(
+          "margin-bottom",
+          40px,
+          "headline-5",
+          "display",
+          "body-eyebrow",
+          "copy"
+        );
+        font-family: $fonts-display;
+        font-weight: 700;
+      }
+
+      #{$self}--eyebrow {
+        @include font-styles("body-eyebrow");
+        @include textmargin(
+          "margin-bottom",
+          10px,
+          "body-eyebrow",
+          "copy",
+          "headline-5",
+          "display"
+        );
+      }
+
+      #{$self}--date {
+        margin-bottom: 0;
+        margin-top: auto;
+      }
+    }
+  }
+}

package/scss/components/_herocard.scss

@@ -5,8 +5,8 @@
 .ilo--hero-card {
   $c: &;
   $semi-transparent: 0.6;
-  $padding-lg: 64px;
-  $padding-sm: 39px;
+  $padding-lg: $spacing-padding-8;
+  $padding-sm: $spacing-padding-5;
 
   height: 100%;
   position: relative;
@@ -74,23 +74,7 @@
   }
 
   &__cornercut {
-    clip-path: polygon(
-      0 0,
-      calc(100% - $padding-lg) 0,
-      100% $padding-sm,
-      100% 100%,
-      0 100%
-    );
-
-    @include breakpoint("large") {
-      clip-path: polygon(
-        0 0,
-        calc(100% - $padding-lg) 0,
-        100% $padding-lg,
-        100% 100%,
-        0 100%
-      );
-    }
+    @include cornercut(116px, 64px);
   }
 
   &--datecopy {