@ilo-org/styles 0.6.0 → 0.7.0

package/scss/components/_multilinkcard.scss

@@ -0,0 +1,189 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__multilink {
+      // Defaults to standard size
+      --max-width: #{px-to-rem(536px)};
+
+      padding: px-to-rem(24px);
+
+      #{$self}--image--wrapper {
+        display: none;
+      }
+
+      #{$self}--content {
+        #{$self}--image--wrapper {
+          display: block;
+        }
+      }
+
+      @include breakpoint("medium") {
+        padding: px-to-rem(40px);
+      }
+
+      @include breakpoint("large") {
+        padding: px-to-rem(56px) px-to-rem(48px);
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-5");
+        @include textmargin(
+          "margin-bottom",
+          24px,
+          "headline-5",
+          "display",
+          0,
+          0
+        );
+        color: $brand-ilo-grey-charcoal;
+
+        @include breakpoint("medium") {
+          @include font-styles("headline-4");
+          @include textmargin(
+            "margin-bottom",
+            24px,
+            "headline-4",
+            "display",
+            0,
+            0
+          );
+        }
+      }
+
+      #{$self}--intro {
+        @include font-styles("body-small");
+        @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+        color: $brand-ilo-grey-charcoal;
+
+        @include breakpoint("medium") {
+          @include font-styles("base");
+          @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
+        }
+      }
+
+      &#{$self}__size {
+        &__standard {
+          --max-width: #{px-to-rem(536px)};
+
+          padding: px-to-rem(48px) px-to-rem(40px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(48px) px-to-rem(40px);
+          }
+
+          @include breakpoint("large") {
+            padding: px-to-rem(48px) px-to-rem(40px);
+          }
+        }
+
+        &__narrow {
+          --max-width: #{px-to-rem(375px)};
+
+          padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
+          }
+
+          @include breakpoint("large") {
+            padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
+          }
+
+          #{$self}--image--wrapper {
+            display: none;
+          }
+
+          #{$self}--content {
+            #{$self}--image--wrapper {
+              display: block;
+              margin-bottom: px-to-rem(24px);
+            }
+          }
+
+          #{$self}--title {
+            @include breakpoint("medium") {
+              @include font-styles("headline-5");
+              @include textmargin(
+                "margin-bottom",
+                24px,
+                "headline-5",
+                "display",
+                0,
+                0
+              );
+            }
+          }
+
+          #{$self}--intro {
+            @include breakpoint("medium") {
+              @include font-styles("body-small");
+              @include textmargin(
+                "margin-bottom",
+                40px,
+                "body-small",
+                "copy",
+                0,
+                0
+              );
+            }
+          }
+        }
+
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(1104px)};
+
+          padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(56px) px-to-rem(48px);
+
+            &#{$self}__align__right {
+              #{$self}--wrap {
+                flex-direction: row-reverse;
+
+                .right-to-left & {
+                  flex-direction: row;
+                }
+              }
+            }
+
+            #{$self}--wrap {
+              display: flex;
+              column-gap: px-to-rem(32px);
+
+              .right-to-left & {
+                flex-direction: row-reverse;
+              }
+            }
+
+            #{$self}--image--wrapper {
+              display: block;
+              width: 50%;
+            }
+
+            #{$self}--content {
+              width: 50%;
+
+              #{$self}--image--wrapper {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      .ilo--link-list {
+        margin-top: px-to-rem(35px);
+        position: relative;
+        z-index: 3;
+      }
+    }
+  }
+}

package/scss/components/_promocard.scss

@@ -0,0 +1,157 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__promo {
+      --max-width: #{px-to-rem(343px)};
+
+      padding: px-to-rem(40px) px-to-rem(24px);
+      width: 100%;
+
+      @include breakpoint("medium") {
+        padding: px-to-rem(48px);
+      }
+
+      @include breakpoint("large") {
+        padding: px-to-rem(64px) px-to-rem(72px);
+      }
+
+      &#{$self}__size {
+        &__standard {
+          --max-width: #{px-to-rem(634px)};
+
+          padding: px-to-rem(48px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px);
+          }
+
+          @include breakpoint("large") {
+            padding: px-to-rem(48px) px-to-rem(48px) px-to-rem(64px);
+          }
+
+          &#{$self}__cornercut {
+            @include cornercut(87px, 48px);
+          }
+        }
+
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(920px)};
+
+          padding: px-to-rem(64px) px-to-rem(72px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(64px) px-to-rem(72px);
+          }
+
+          @include breakpoint("large") {
+            padding: px-to-rem(64px) px-to-rem(72px);
+          }
+
+          &#{$self}__cornercut {
+            @include cornercut(116px, 64px);
+          }
+        }
+
+        &__narrow {
+          --max-width: #{px-to-rem(343px)};
+
+          padding: px-to-rem(40px) px-to-rem(24px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(40px) px-to-rem(24px);
+          }
+
+          @include breakpoint("large") {
+            padding: px-to-rem(40px) px-to-rem(24px);
+          }
+
+          &#{$self}__cornercut {
+            @include cornercut(72px, 40px);
+          }
+
+          #{$self}--title {
+            @include font-styles("headline-4");
+            @include textmargin(
+              "margin-bottom",
+              24px,
+              "headline-4",
+              "display",
+              "body-small",
+              "copy"
+            );
+
+            @include breakpoint("medium") {
+              @include font-styles("headline-3");
+              @include textmargin(
+                "margin-bottom",
+                24px,
+                "headline-3",
+                "display",
+                "body-small",
+                "copy"
+              );
+            }
+          }
+
+          #{$self}--intro {
+            @include font-styles("body-small");
+            @include textmargin(
+              "margin-bottom",
+              40px,
+              "body-small",
+              "copy",
+              0,
+              0
+            );
+          }
+        }
+      }
+
+      &#{$self}__theme__light:not(:hover) #{$self}--title {
+        color: $brand-ilo-grey-charcoal;
+        @include globaltransition("color");
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-4");
+        @include textmargin(
+          "margin-bottom",
+          24px,
+          "headline-4",
+          "display",
+          "body-small",
+          "copy"
+        );
+
+        @include breakpoint("medium") {
+          @include font-styles("headline-3");
+          @include textmargin(
+            "margin-bottom",
+            32px,
+            "headline-3",
+            "display",
+            "base",
+            "copy"
+          );
+        }
+      }
+
+      #{$self}--intro {
+        @include font-styles("body-small");
+        @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+
+        @include breakpoint("medium") {
+          @include font-styles("base");
+          @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
+        }
+      }
+    }
+  }
+}

package/scss/components/_statcard.scss

@@ -0,0 +1,76 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__stat {
+      --max-width: #{px-to-rem(343px)};
+
+      border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
+      padding: px-to-rem(24px) px-to-rem(40px) px-to-rem(22px);
+      position: relative;
+      width: 100%;
+
+      @include cornercut(72px, 40px);
+
+      &#{$self}__color {
+        &__blue {
+          background: $brand-ilo-light-blue;
+        }
+
+        &__yellow {
+          background: $brand-ilo-yellow;
+        }
+
+        &__green {
+          background: $brand-ilo-green;
+        }
+
+        &__turquoise {
+          background: $brand-ilo-turquoise;
+        }
+      }
+
+      #{$self}--content {
+        display: flex;
+        flex-wrap: wrap;
+        height: 100%;
+
+        .right-to-left & {
+          flex-direction: row-reverse;
+        }
+      }
+
+      #{$self}--title {
+        color: $brand-ilo-dark-blue;
+        @include font-styles("headline-3");
+        @include textmargin(
+          "margin-bottom",
+          24px,
+          "headline-3",
+          "display",
+          0,
+          0
+        );
+        width: 100%;
+      }
+
+      #{$self}--intro {
+        color: $brand-ilo-dark-blue;
+        font-family: $fonts-display;
+        @include font-styles("base");
+        @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
+        width: 100%;
+      }
+
+      .ilo--link {
+        @include font-styles("image-credit");
+        align-self: flex-end;
+      }
+    }
+  }
+}

package/scss/components/_textcard.scss

@@ -0,0 +1,135 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@use "../animations" as *;
+@import "../mixins";
+
+.ilo--card {
+  $self: &;
+
+  &__type {
+    &__text {
+      --max-width: #{px-to-rem(301px)};
+
+      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
+      padding: px-to-rem(24px) px-to-rem(40px);
+
+      @include cornercut(73px, 40px);
+
+      [class$="profile--contents--light"] * {
+        color: $color-base-neutrals-dark;
+      }
+
+      [class$="profile--contents--dark"] * {
+        color: $color-base-neutrals-white;
+      }
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        @include card-drop-shadow;
+
+        [class*="profile--contents"] * {
+          color: $color-base-blue-medium;
+        }
+      }
+
+      @include breakpoint("medium") {
+        padding: px-to-rem(32px) px-to-rem(40px);
+      }
+
+      &#{$self}__size {
+        &__wide,
+        &__fluid {
+          --max-width: #{px-to-rem(523px)};
+
+          padding: px-to-rem(32px) px-to-rem(40px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(32px) px-to-rem(40px);
+          }
+        }
+
+        &__narrow {
+          --max-width: #{px-to-rem(301px)};
+
+          padding: px-to-rem(24px) px-to-rem(40px);
+
+          @include breakpoint("medium") {
+            padding: px-to-rem(24px) px-to-rem(40px);
+          }
+
+          #{$self}--title {
+            @include font-styles("headline-6");
+            @include textmargin(
+              "margin-bottom",
+              40px,
+              "headline-6",
+              "display",
+              "base",
+              "copy"
+            );
+          }
+        }
+      }
+
+      &#{$self}__dark {
+        border-bottom: px-to-rem(3px) solid $color-base-red-medium;
+      }
+
+      #{$self}--eyebrow {
+        @include textmargin(
+          "margin-bottom",
+          24px,
+          "base",
+          "copy",
+          "headline-5",
+          "display"
+        );
+      }
+
+      #{$self}--title {
+        @include font-styles("headline-6");
+        @include textmargin(
+          "margin-bottom",
+          40px,
+          "headline-6",
+          "display",
+          "base",
+          "copy"
+        );
+
+        @include breakpoint("medium") {
+          @include font-styles("headline-5");
+          @include textmargin(
+            "margin-bottom",
+            40px,
+            "headline-5",
+            "display",
+            "base",
+            "copy"
+          );
+        }
+      }
+
+      #{$self}--date {
+        display: block;
+        @include textmargin("margin-bottom", 32px, "base", "copy", 0, 0);
+      }
+
+      #{$self}--content {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+
+        > * {
+          justify-self: flex-start;
+        }
+
+        > *:last-child {
+          justify-self: flex-end;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

package/scss/components/index.scss

@@ -3,6 +3,14 @@
 @use "button";
 @use "callout";
 @use "card";
+@use "featurecard";
+@use "textcard";
+@use "detailcard";
+@use "promocard";
+@use "multilinkcard";
+@use "datacard";
+@use "statcard";
+@use "factlistcard";
 @use "cardgroup";
 @use "checkbox";
 @use "contextmenu";