@ilo-org/styles 0.0.1

package/scss/components/_hero.scss

@@ -0,0 +1,445 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--hero {
+  &--home {
+    @include breakpoint("large") {
+      position: relative;
+    }
+  }
+
+  &--portal {
+    position: relative;
+
+    @include breakpoint("large") {
+      padding-top: 128px;
+
+      .ilo--image {
+        height: calc(100% - 80px);
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      .ilo--image--wrapper {
+        height: 100%;
+      }
+
+      .ilo--image--img {
+        display: flex;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+
+        img {
+          object-fit: cover;
+          height: auto;
+          width: 100%;
+        }
+      }
+    }
+  }
+  background: map-get($color, "ux", "pagination", "default", "background");
+  &--article {
+    background: map-get($color, "hero", "article");
+    padding: 88px 0 0 0;
+
+    @include breakpoint("large") {
+      margin-bottom: 80px;
+      padding: 112px 0 0 0;
+
+      .ilo--hero-card {
+        top: 80px;
+      }
+    }
+
+    &.ilo--hero--image {
+      background-color: map-get($color, "hero", "image");
+      padding: 0;
+
+      @include breakpoint("large") {
+        .ilo--hero-card {
+          top: 0;
+        }
+      }
+    }
+
+    .ilo--hero-card {
+      &--center {
+        margin: auto;
+      }
+    }
+  }
+
+  &--project {
+    background: map-get($color, "hero", "project");
+    padding: 88px 0 0 0;
+
+    @include breakpoint("large") {
+      margin-bottom: 80px;
+      padding: 112px 0 0 0;
+
+      .ilo--hero-card {
+        top: 80px;
+      }
+    }
+
+    &.ilo--hero--image {
+      background-color: map-get($color, "hero", "image");
+      padding: 0;
+
+      @include breakpoint("large") {
+        .ilo--hero-card {
+          top: 0;
+        }
+      }
+    }
+
+    .ilo--hero-card {
+      &--center {
+        margin: auto;
+      }
+    }
+  }
+
+  &--image {
+    background-color: map-get($color, "hero", "image");
+
+    @include breakpoint("large") {
+      padding-top: 128px;
+
+      .ilo--image {
+        height: 100%;
+        max-height: 592px;
+        width: 100%;
+      }
+
+      .ilo--image--wrapper {
+        height: 100%;
+      }
+
+      .ilo--image--img {
+        display: flex;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+
+        img {
+          object-fit: cover;
+          height: auto;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+.ilo--hero-card {
+  background: map-get($color, "hero", "card", "light", "background");
+  color: map-get($color, "hero", "card", "light", "color");
+  max-width: 998px;
+  position: relative;
+  padding: 16px 16px 40px 16px;
+
+  &::before {
+    background: inherit;
+    clip-path: polygon(90% 0, 100% 100%, 100% 100%, 0% 100%, 0% 0%);
+    content: "";
+    display: block;
+    height: 40px;
+    left: 0;
+    position: absolute;
+    top: -39.7px;
+    width: 100%;
+
+    @include breakpoint("large") {
+      height: 64px;
+      top: -63.7px;
+    }
+  }
+
+  @include breakpoint("large") {
+    padding: 0 70px 70px 56px;
+  }
+
+  &--center {
+    margin: auto;
+  }
+
+  &--dark {
+    background: map-get($color, "hero", "card", "dark", "background");
+    color: map-get($color, "hero", "card", "dark", "color");
+
+    .ilo--hero-card--link.icon {
+      color: map-get($color, "hero", "card", "dark", "icon", "color");
+
+      &:hover {
+        background-color: map-get(
+          $color,
+          "hero",
+          "card",
+          "dark",
+          "iconhover",
+          "background"
+        );
+      }
+
+      &--facebook {
+        @include dataurlicon(
+          "facebook",
+          map-get($color, "hero", "card", "dark", "icon", "color")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "facebook",
+            map-get($color, "hero", "card", "dark", "iconhover", "color")
+          );
+        }
+      }
+
+      &--twitter {
+        @include dataurlicon(
+          "twitter",
+          map-get($color, "hero", "card", "dark", "icon", "color")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "twitter",
+            map-get($color, "hero", "card", "dark", "iconhover", "color")
+          );
+        }
+      }
+
+      &--linkedin {
+        @include dataurlicon(
+          "linkedin",
+          map-get($color, "hero", "card", "dark", "icon", "color")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "linkedin",
+            map-get($color, "hero", "card", "dark", "iconhover", "color")
+          );
+        }
+      }
+    }
+
+    .ilo--hero-card--eyebrow {
+      color: map-get($color, "hero", "card", "dark", "eyebrow", "color");
+    }
+
+    .ilo--hero-card--datecopy {
+      color: map-get($color, "hero", "card", "dark", "datecopy", "color");
+    }
+  }
+
+  &--graphic {
+    max-width: 856px;
+  }
+
+  &--home {
+    padding: 24px;
+
+    @include breakpoint("large") {
+      bottom: 72px;
+      max-width: 720px;
+      padding: 0 48px 48px 72px;
+      position: absolute;
+      width: 100%;
+
+      &.ilo--hero-card--center {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+      }
+
+      &.ilo--hero-card--left {
+        left: 0;
+        right: auto;
+      }
+
+      &.ilo--hero-card--right {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    &.ilo--hero-card--dark {
+      background: rgba(
+        map-get($color, "hero", "card", "dark", "background"),
+        0.55
+      );
+    }
+  }
+
+  &--portal {
+    background: map-get($color, "hero", "portal", "background");
+    color: map-get($color, "hero", "portal", "color");
+    padding: 24px;
+
+    @include breakpoint("large") {
+      max-width: 625px;
+      padding: 0 48px 48px 72px;
+      width: 100%;
+    }
+  }
+
+  &--publication {
+    margin-top: -64px;
+    padding: 24px;
+
+    @include breakpoint("large") {
+      max-width: 720px;
+      padding: 0 48px 48px 72px;
+      width: 100%;
+    }
+  }
+
+  &--datecopy {
+    @include font-styles("body-small");
+    @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+
+    color: map-get($color, "hero", "card", "light", "datecopy", "color");
+  }
+
+  &--eyebrow {
+    @include font-styles("body-small");
+    @include textmargin(
+      "margin-bottom",
+      32px,
+      "body-small",
+      "copy",
+      "headline-2",
+      "display"
+    );
+
+    color: map-get($color, "hero", "card", "light", "eyebrow", "color");
+  }
+
+  &--intro {
+    @include font-styles("body-small");
+    @include textmargin(
+      "margin-bottom",
+      40px,
+      "base",
+      "copy",
+      "body-small",
+      "copy"
+    );
+
+    @include breakpoint("large") {
+      @include font-styles("base");
+    }
+  }
+
+  &--title {
+    @include font-styles("headline-3");
+    @include textmargin(
+      "margin-bottom",
+      40px,
+      "headline-2",
+      "display",
+      "base",
+      "copy"
+    );
+
+    font-family: $fonts-display;
+    font-weight: 700;
+
+    @include breakpoint("large") {
+      @include font-styles("headline-2");
+    }
+  }
+
+  &--list {
+    display: flex;
+  }
+
+  &--list--item {
+    display: inline-block;
+    margin-right: 32px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  &--link {
+    color: map-get($color, "hero", "card", "light", "link", "color");
+    display: inline-block;
+    overflow: hidden;
+    padding: 0 5px;
+    text-indent: -999px;
+    width: 100%;
+
+    &.icon {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: auto 16px;
+      border-radius: 2px;
+      display: inline-block;
+      color: map-get($color, "hero", "card", "light", "icon", "color");
+      height: 24px;
+      width: px-to-rem(24px);
+
+      &:hover {
+        background-color: map-get(
+          $color,
+          "hero",
+          "card",
+          "light",
+          "iconhover",
+          "background"
+        );
+        transition: all 0.1s ease-in-out;
+      }
+
+      &--facebook {
+        @include dataurlicon(
+          "facebook",
+          map-get($color, "hero", "card", "light", "iconhover", "background")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "facebook",
+            map-get($color, "hero", "card", "light", "iconhover", "color")
+          );
+        }
+      }
+
+      &--twitter {
+        @include dataurlicon(
+          "twitter",
+          map-get($color, "hero", "card", "light", "iconhover", "background")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "twitter",
+            map-get($color, "hero", "card", "light", "iconhover", "color")
+          );
+        }
+      }
+
+      &--linkedin {
+        @include dataurlicon(
+          "linkedin",
+          map-get($color, "hero", "card", "light", "iconhover", "background")
+        );
+
+        &:hover {
+          @include dataurlicon(
+            "linkedin",
+            map-get($color, "hero", "card", "light", "iconhover", "color")
+          );
+        }
+      }
+    }
+  }
+}

package/scss/components/_image.scss

@@ -0,0 +1,42 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--image {
+  position: relative;
+
+  &--wrapper {
+    line-height: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  &--img {
+    line-height: 0;
+  }
+
+  &--img,
+  img {
+    width: 100%;
+  }
+
+  &--caption {
+    border-left: $spacing-ux-caption-border-left solid
+      $color-ux-caption-border-left;
+    color: $color-font-caption;
+    font-weight: 400;
+    margin-top: px-to-rem(map-get($spacing, "padding-2"));
+    padding-left: px-to-rem(map-get($spacing, "padding-1"));
+    @include font-styles("image-caption");
+  }
+
+  .ilo--credit {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+
+    @include breakpoint("large") {
+      bottom: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
+    }
+  }
+}

package/scss/components/_input.scss

@@ -0,0 +1,71 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: map-get(
+    $color,
+    "formelements",
+    "input",
+    "default",
+    "background"
+  );
+  @include bordervalues("input", "formelements");
+  box-sizing: border-box;
+  font-family: $fonts-display;
+  font-weight: map-get($type, "weights", "section");
+  @include font-styles("label-medium");
+  height: px-to-rem(
+    map-get($spacing, "formelements", "input", "default", "height")
+  );
+  @include spacingvalues("margin", "input", "formelements");
+  outline: none;
+  @include spacingvalues("padding", "input", "formelements");
+  width: map-get($spacing, "formelements", "input", "default", "width");
+
+  &:hover {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "hover",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "hover");
+    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+  }
+
+  &:focus {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "focus",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "focus");
+    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 45%;
+    pointer-events: none;
+  }
+
+  &:invalid,
+  &.error,
+  .error & {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "error",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "error");
+  }
+}

package/scss/components/_link.scss

@@ -0,0 +1,6 @@
+@use "../tokens" as *;
+@use "../mixins" as *;
+
+.ilo--link {
+  @include linkstyles();
+}

package/scss/components/_linklist.scss

@@ -0,0 +1,148 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--link-list {
+  &--headline {
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("headline-5");
+    @include textmargin("margin-bottom", 30px, "headline-5", "display", 0, 0);
+  }
+
+  &--links {
+    &--headline {
+      font-family: $fonts-display;
+      font-weight: map-get($type, "weights", "label");
+      @include font-styles("headline-6");
+      @include textmargin("margin-bottom", 27px, "headline-6", "display", 0, 0);
+      @include textmargin(
+        "margin-top",
+        $spacing-padding-6,
+        "headline-6",
+        "display",
+        0,
+        0
+      );
+    }
+  }
+
+  &--links--item {
+    &.indented {
+      padding-left: px-to-rem($spacing-padding-4);
+
+      .ilo--link-list--label {
+        display: block;
+        padding-left: px-to-rem($spacing-padding-3);
+        position: relative;
+
+        &:before {
+          background-position: left center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          content: "";
+          display: block;
+          height: px-to-rem($spacing-padding-1-5);
+          left: 0;
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%) rotate(-90deg);
+          transform-origin: center;
+          width: px-to-rem($spacing-padding-1-5);
+          @include dataurlicon(
+            "equilateraltriangle",
+            $color-base-neutrals-light
+          );
+        }
+      }
+
+      &:hover,
+      &:focus {
+        .ilo--link-list--label:before {
+          @include dataurlicon("equilateraltriangle", $color-link-text-hover);
+        }
+      }
+    }
+  }
+
+  &--link {
+    background-position: calc(100% - $spacing-padding-0-5) center;
+    background-repeat: no-repeat;
+    background-size: px-to-rem($spacing-padding-3) px-to-rem($spacing-padding-3);
+    border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;
+    color: map-get($color, "link", "text", "default");
+    display: block;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "section");
+    @include font-styles("body-small");
+    @include textmargin("padding-bottom", 25px, "body-small", "display", 0, 0);
+    @include textmargin("padding-top", 25px, "body-small", "display", 0, 0);
+    text-decoration: none;
+    @include dataurlicon("arrowright", $color-link-text-default);
+
+    &:visited {
+      color: map-get($color, "link", "text", "default");
+    }
+
+    &:active {
+      color: map-get($color, "link", "text", "active");
+      outline: none;
+    }
+
+    &:hover,
+    &:focus {
+      border-bottom: px-to-rem($borders-base) solid
+        map-get($color, "link", "text", "hover");
+      background-color: $color-base-blue-light;
+      color: map-get($color, "link", "text", "hover");
+      outline: none;
+      @include dataurlicon("arrowright", $color-link-text-hover);
+    }
+  }
+
+  &--dark {
+    .ilo--link-list--headline,
+    .ilo--link-list--links--headline {
+      color: $color-base-neutrals-white;
+    }
+
+    .ilo--link-list--label {
+      &:before {
+        @include dataurlicon("equilateraltriangle", $color-base-neutrals-white);
+      }
+    }
+
+    .ilo--link-list--link {
+      border-bottom: px-to-rem($borders-base) solid $color-base-purple-light;
+      @include dataurlicon("arrowright", $color-base-neutrals-white);
+
+      .ilo--link-list--label {
+        color: $color-base-neutrals-white;
+      }
+
+      &:visited {
+        .ilo--link-list--label {
+          color: $color-base-neutrals-white;
+        }
+      }
+
+      &:active {
+        outline: none;
+
+        .ilo--link-list--label {
+          color: map-get($color, "link", "text", "active");
+        }
+      }
+
+      &:hover,
+      &:focus {
+        outline: none;
+        @include dataurlicon("arrowright", $color-base-blue-medium);
+
+        .ilo--link-list--label {
+          color: $color-base-blue-medium;
+        }
+      }
+    }
+  }
+}