@ilo-org/styles 0.6.1 → 0.7.1

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

package/css/components/experiment.css

@@ -1 +0,0 @@
-.experiment{--card-width:minmax(200px,625px);--tooltip-width:30px;--tooltip-height:27px;--card-offset:109px;--image-gap:603px;--row-1-lg:48px;--row-2-lg:var(--image-gap);--row-3-lg:auto;--row-4-lg:var(--tooltip-height);--row-5-lg:72px;--col-1-lg:0;--col-2-lg:var(--card-width);--col-3-lg:var(--tooltip-width);--col-4-lg:1fr;display:grid;grid-template-columns:var(--col-1-lg) var(--col-2-lg) var(--col-3-lg) var(--col-4-lg);grid-template-rows:var(--row-1-lg) var(--row-2-lg) var(--row-3-lg) var(--row-4-lg) var(--row-5-lg);position:relative}.experiment__poster-size__small{--image-gap:75px}.experiment__poster-size__medium{--image-gap:175px}.experiment__poster-size__large{--image-gap:220px}.experiment__poster-size__xlarge{--image-gap:400px}.experiment__card-size__small{--card-width:minmax(200px,625px)}.experiment__card-size__medium{--card-width:minmax(200px,721px)}.experiment__card-size__large{--card-width:minmax(200px,856px)}.experiment__card-size__xlarge{--card-width:minmax(200px,920px)}.experiment__card-size__xxlarge{--card-width:minmax(200px,998px)}.experiment__card-justify__start{--col-1-lg:0}.right-to-left .experiment__card-justify__start{--col-1-lg:1fr;--col-2-lg:var(--tooltip-width);--col-3-lg:var(--card-width);--col-4-lg:0}.experiment__card-justify__offset{--col-1-lg:var(--card-offset)}.right-to-left .experiment__card-justify__offset{--col-1-lg:1fr;--col-2-lg:var(--tooltip-width);--col-3-lg:var(--card-width);--col-4-lg:var(--card-offset)}.experiment__card-justify__center{--col-1-lg:1fr;--col-4-lg:1fr}.right-to-left .experiment__card-justify__center{--col-2-lg:var(--tooltip-width);--col-3-lg:var(--card-width)}.experiment__card-align__center{--row-4-lg:75px;--row-5-lg:var(--tooltip-height)}.experiment__card-align__bottom{--row-3-lg:0;--row-4-lg:var(--tooltip-height);--row-5-lg:auto}.experiment--breadcrumbs{display:flex;flex-flow:row nowrap;grid-area:1/1/2/5;z-index:1}.right-to-left .experiment--breadcrumbs{flex-direction:row-reverse}.experiment--breadcrumbs--wrapper{max-width:500px}.experiment--figure{grid-area:1/1/5/5;position:relative;z-index:-1}.experiment__card-align__center .experiment--figure{grid-area:1/1/6/5}.experiment__card-align__bottom .experiment--figure{grid-area:1/1/5/5}.experiment--figure img{height:100%;object-fit:cover;position:absolute;width:100%}.experiment--card{grid-area:3/2/6/3}.right-to-left .experiment--card{grid-area:3/3/6/4}.experiment__card-align__center .experiment--card{grid-area:3/2/4/3}.experiment__card-align__bottom .experiment--card{grid-area:5/2/6/3}.experiment--caption{grid-area:4/3/5/4}.right-to-left .experiment--caption{grid-area:4/2/5/3}.experiment__card-align__center .experiment--caption{grid-area:5/1/6/3}.experiment__card-align__bottom .experiment--caption{grid-area:4/1/5/2}.experiment--caption--wrapper{align-items:center;background:#2d2d2d;display:flex;height:var(--tooltip-height);justify-content:center;left:2px;position:relative;width:var(--tooltip-width)}.right-to-left .experiment--caption--wrapper{left:auto;right:2px}.experiment__card-align__bottom .experiment--caption--wrapper,.experiment__card-align__center .experiment--caption--wrapper{left:0}.experiment--caption--wrapper:after{border-left:calc(var(--tooltip-height) - 4px) solid #2d2d2d;border-top:var(--tooltip-height) solid transparent;content:"";height:0;left:100%;position:absolute;top:0;width:0}.right-to-left .experiment--caption--wrapper:after{border-left:none;border-right:calc(var(--tooltip-height) - 4px) solid #2d2d2d;left:auto;right:100%}

package/css/components/formcontrol.css

@@ -1 +0,0 @@
-.ilo--form-control{display:inline-grid}.ilo--form-control__label-placement__start{column-gap:.4287245445rem;grid-template-areas:"a b" "c .";grid-template-columns:auto auto;grid-template-rows:auto auto}.ilo--form-control__label-placement__start .ilo--form-control--helper{text-align:right}.ilo--form-control__label-placement__end{column-gap:.4287245445rem;grid-template-areas:"b a" ". c";grid-template-columns:auto auto;grid-template-rows:auto auto}.ilo--form-control__label-placement__top{grid-template-areas:"a" "b" "c";grid-template-columns:auto;grid-template-rows:auto auto auto;row-gap:.4287245445rem}.ilo--form-control__label-placement__bottom{grid-template-areas:"c" "b" "a";grid-template-columns:auto;grid-template-rows:auto auto auto;row-gap:.4287245445rem}.ilo--form-control__disabled .ilo--form-control--helper,.ilo--form-control__disabled .ilo--form-control--label{opacity:.5;pointer-events:none}.ilo--form-control__error .ilo--form-control--helper{color:#c8303c}.ilo--form-control--label{align-items:center;color:#2d2d2d;display:flex;flex-flow:row nowrap;grid-area:a;justify-content:flex-start}.ilo--form-control--label__size__small{font-family:Noto Sans;font-size:.8001071811rem;font-weight:400;letter-spacing:-.0010718114rem;line-height:1.0803858521rem}.ilo--form-control--label__size__medium{font-family:Overpass;font-size:.857449089rem;font-weight:700;letter-spacing:-.0010718114rem;line-height:1.1575562701rem}.ilo--form-control--label__size__large{font-family:Overpass;font-size:1rem;font-weight:700;letter-spacing:-.0010718114rem;line-height:1.3001071811rem}.ilo--form-control--label label{font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}.ilo--form-control--label div[class*=tooltip]{margin-left:.2143622722rem}.ilo--form-control--helper{color:#6d6d6d;font-family:Noto Sans;font-size:11.94px;grid-area:c;letter-spacing:normal;line-height:16.24px}

package/css/components/textinput.css

@@ -1 +0,0 @@
-.ilo--text-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;box-sizing:border-box;font-family:Noto Sans;font-size:16px;font-weight:500;height:2.5723472669rem;letter-spacing:-.02em;line-height:21.6px;margin:0;padding:.857449089rem .6430868167rem;width:100%}.ilo--text-input,.ilo--text-input:focus{border:.1071811361rem solid #b8c4cc;outline:0}.ilo--text-input:focus{background-color:#ebf5fd;border-left:.1607717042rem solid #1e2dbe;padding-left:11px}.ilo--text-input:disabled{opacity:1%;pointer-events:none}.ilo--text-input:invalid,.ilo--text-input__error{background-color:#fff}.ilo--text-input:invalid{border:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #ffcd2d}.ilo--text-input__error{border:.1071811361rem solid #b8c4cc;border-left:.1607717042rem solid #c8303c}

package/css/components/toggle.css

@@ -1 +0,0 @@
-.ilo--input--toggle{--base-toggle-width:2.4651661308rem;--base-toggle-height:1.2861736334rem;display:inline-block;grid-area:a;height:var(--toggle-height);position:relative;width:var(--toggle-width)}.ilo--input--toggle__size__small{--toggle-width:var(--base-toggle-width);--toggle-height:var(--base-toggle-height)}.ilo--input--toggle__size__medium{--toggle-width:calc(var(--base-toggle-width)*1.5);--toggle-height:calc(var(--base-toggle-height)*1.5)}.ilo--input--toggle__size__large{--toggle-width:calc(var(--base-toggle-width)*2);--toggle-height:calc(var(--base-toggle-height)*2)}.ilo--input--toggle__disabled{cursor:not-allowed;opacity:.5}.ilo--input--toggle__error .ilo--input--toggle--slider{outline-color:#fa3c4b!important;outline-style:solid;outline-width:calc(var(--toggle-height)/8)}.ilo--input--toggle input[type=checkbox]{cursor:pointer;height:100%;margin:0;opacity:0;padding:0;width:100%}.ilo--input--toggle--slider{background-color:#b8c4cc;border-radius:calc(var(--toggle-height)/2);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition-duration:.15s;transition-property:background;transition-timing-function:ease-out}.ilo--input--toggle--slider:before{background-color:#fff;border-radius:50%;bottom:calc(var(--toggle-height)/6);content:"";height:calc(var(--toggle-height) - var(--toggle-height)/3);left:calc(var(--toggle-height)/6);position:absolute;transition-duration:.15s;transition-property:transform,background;transition-timing-function:ease-out;width:calc(var(--toggle-height) - var(--toggle-height)/3)}input[type=checkbox]:checked+.ilo--input--toggle--slider{background-color:#230050}input[type=checkbox]:focus+.ilo--input--toggle--slider{outline-color:#ffcd2d;outline-style:solid;outline-width:calc(var(--toggle-height)/8)}input:checked+.ilo--input--toggle--slider:before{background-color:#ebf5fd;transform:translateX(calc(var(--toggle-width) - var(--toggle-height)))}