@ilo-org/styles 0.0.1

package/scss/components/_profile.scss

@@ -0,0 +1,138 @@
+@use "../tokens" as *;
+@import "../mixins";
+
+.ilo--profile {
+  max-width: 343px;
+  position: relative;
+
+  &--avatar {
+    border-radius: 50%;
+    float: left;
+    width: 18.65%;
+  }
+
+  &--contents {
+    .id {
+      margin-left: calc(18.65% + 11px);
+      padding-top: 5px;
+
+      &:first-of-type {
+        padding-bottom: 1px;
+      }
+
+      &:nth-of-type(2):last-of-type {
+        padding-top: 0;
+      }
+    }
+
+    .id:first-of-type:last-of-type,
+    .id:nth-of-type(2):last-of-type {
+      border-bottom: 2px solid $color-base-neutrals-lighter;
+      padding-bottom: 11px;
+    }
+
+    .id:first-of-type:last-of-type {
+      padding-top: 14px;
+    }
+  }
+
+  &--name {
+    display: block;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    margin-left: 11px;
+    @include font-styles("body-xs");
+  }
+
+  &--role {
+    display: block;
+    font-family: $fonts-copy;
+    margin-left: 11px;
+    @include font-styles("body-xss");
+  }
+
+  &--description {
+    clear: both;
+    font-family: $fonts-copy;
+    padding-top: 22px;
+    @include font-styles("body-xss");
+  }
+
+  &--link {
+    clear: both;
+    color: map-get($color, "link", "text", "default");
+    display: block;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "section");
+    text-decoration: none;
+    @include font-styles("body-xs");
+
+    span {
+      background-position: calc(100% - 10px) center;
+      background-repeat: no-repeat;
+      background-size: 24px 24px;
+      padding-right: 32px;
+      @include dataurlicon("arrowright", $color-link-text-default);
+    }
+
+    &:visited {
+      color: map-get($color, "link", "text", "visited");
+
+      span {
+        @include dataurlicon("arrowright", $color-link-text-visited);
+      }
+    }
+
+    &:active {
+      color: map-get($color, "link", "text", "active");
+      outline: none;
+
+      span {
+        @include dataurlicon("arrowright", $color-link-text-active);
+        background-color: map-get($color, "link", "background", "active");
+      }
+    }
+
+    &:hover,
+    &:focus {
+      color: map-get($color, "link", "text", "hover");
+      outline: none;
+
+      span {
+        @include dataurlicon("arrowright", $color-link-text-hover);
+      }
+    }
+  }
+
+  .ilo--profile--description + .ilo--profile--link {
+    margin-top: 28px;
+  }
+
+  .ilo--profile--role + .ilo--profile--link {
+    margin-top: 22px;
+  }
+
+  .ilo--profile--name + .ilo--profile--link {
+    margin-top: 38px;
+  }
+
+  @include breakpoint("medium") {
+    &--name {
+      @include font-styles("body-small");
+    }
+
+    &--role {
+      font-family: $fonts-copy;
+      @include font-styles("body-xs");
+    }
+
+    &--description {
+      font-family: $fonts-copy;
+      @include font-styles("body-xs");
+    }
+
+    &--link {
+      @include font-styles("body-small");
+    }
+  }
+}

package/scss/components/_radio.scss

@@ -0,0 +1,121 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--radio {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  display: grid;
+  height: px-to-rem(24px);
+  margin: 0;
+  order: 1;
+  position: relative;
+  place-content: center;
+  width: px-to-rem(24px);
+
+  &:before {
+    content: "";
+    background-color: $color-base-neutrals-light;
+    border: px-to-rem(4px) solid $color-base-neutrals-light;
+    border-radius: 50%;
+    height: px-to-rem(18px);
+    left: px-to-rem(3px);
+    position: absolute;
+    top: px-to-rem(3px);
+    width: px-to-rem(18px);
+    z-index: 1;
+  }
+
+  &:after {
+    content: "";
+    background-color: $color-base-neutrals-light;
+    border-radius: 50%;
+    height: px-to-rem(24px);
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: px-to-rem(24px);
+    z-index: 0;
+  }
+
+  &:checked {
+    &:before {
+      background-color: $color-base-blue-light;
+      border-color: $color-base-blue-dark;
+    }
+
+    &:after {
+      background-color: $color-base-blue-dark;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+
+    &:after {
+      background-color: $color-base-yellow;
+    }
+
+    &:checked {
+      &:before {
+        border-color: $color-base-blue-dark;
+      }
+    }
+  }
+
+  &:focus {
+    &:after {
+      background-color: $color-base-yellow;
+    }
+
+    &:checked {
+      &:before {
+        border-color: $color-base-blue-dark;
+      }
+    }
+
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 45%;
+    pointer-events: none;
+  }
+
+  &:invalid,
+  &.error,
+  .error & {
+    &:after {
+      background-color: $color-base-red-medium;
+    }
+
+    &:checked {
+      &:before {
+        border-color: $color-base-blue-dark;
+      }
+    }
+  }
+}
+
+.ilo--fieldset--input--radio {
+  align-items: center;
+  clear: both;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-bottom: px-to-rem(22px);
+
+  .ilo--fieldset--label {
+    font-weight: 400;
+    margin-left: px-to-rem($spacing-padding-1);
+    margin-top: 2px;
+    order: 2;
+  }
+
+  .ilo--fieldset--error,
+  .ilo--fieldset--helper {
+    order: 3;
+    width: 100%;
+  }
+}

package/scss/components/_readmore.scss

@@ -0,0 +1,53 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--read-more {
+  &--button {
+    background: map-get($color, "ux", "readmore", "default", "background");
+    @include bordervalues("readmore", "ux");
+    color: $color-ux-labels-actionable;
+    font-family: $fonts-display;
+    height: px-to-rem(map-get($spacing, "ux", "readmore", "default", "height"));
+    @include spacingvalues("margin", "readmore", "ux");
+    @include spacingvalues("padding", "readmore", "ux");
+    position: relative;
+    text-align: left;
+    width: $spacing-ux-readmore-default-width;
+    @include font-styles("label-medium");
+
+    &:after {
+      background-repeat: no-repeat;
+      content: "";
+      display: inline-block;
+      height: px-to-rem(24px);
+      position: absolute;
+      right: px-to-rem(2px);
+      top: 50%;
+      transform: translateY(-50%);
+      transform-origin: center center;
+      width: px-to-rem(24px);
+      @include dataurlicon("arrow", $color-ux-labels-actionable);
+    }
+
+    &:hover {
+      background: map-get($color, "ux", "readmore", "hover", "background");
+      @include bordervalues("readmore", "ux", "hover");
+      color: $color-ux-labels-hover;
+      cursor: pointer;
+      transition: background 150ms linear, border 150ms linear,
+        color 150ms linear;
+
+      &:after {
+        @include dataurlicon("arrow", $color-ux-labels-hover);
+      }
+    }
+
+    &--open {
+      &:after {
+        transform: translateY(-50%) rotateX(180deg);
+        transform-origin: center center;
+      }
+    }
+  }
+}

package/scss/components/_richtext.scss

@@ -0,0 +1,390 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--richtext {
+  font-family: $fonts-copy;
+  font-weight: 400;
+  @include font-styles("body-small");
+
+  a {
+    @include linkstyles();
+  }
+
+  img {
+    width: 100%;
+  }
+
+  p {
+    margin-bottom: px-to-rem(map-get($spacing, "padding-3"));
+  }
+
+  p + figure,
+  p + img,
+  p + blockquote,
+  ul + img,
+  ol + img,
+  dl + img,
+  p + hr,
+  ul + hr,
+  ol + hr,
+  dl + hr,
+  blockquote + hr {
+    @include textmargin(
+      "margin-top",
+      map-get($spacing, "padding-7"),
+      "body-small",
+      "copy",
+      0,
+      0
+    );
+  }
+
+  figure {
+    width: 100%;
+    margin-bottom: px-to-rem(map-get($spacing, "padding-7"));
+  }
+
+  figcaption {
+    border-left: 3px solid #b8c4cc;
+    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");
+  }
+
+  em,
+  i {
+    font-style: italic;
+  }
+
+  strong,
+  b {
+    font-weight: 700;
+  }
+
+  hr {
+    background-color: $color-ux-horizontal-rule-default;
+    border: none;
+    height: px-to-rem(map-get($spacing, "horizontal-rule"));
+    margin-bottom: px-to-rem(map-get($spacing, "padding-7"));
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: $fonts-display;
+    font-weight: 700;
+    margin-top: px-to-rem(map-get($spacing, "padding-7"));
+  }
+
+  h1 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-4"),
+      "headline-2",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-2");
+  }
+
+  h2 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-4"),
+      "headline-3",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-3");
+  }
+
+  h3 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-3"),
+      "headline-4",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-4");
+  }
+
+  h4 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-3"),
+      "headline-5",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-5");
+  }
+
+  h5 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-3"),
+      "headline-6",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-6");
+  }
+
+  h6 {
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-3"),
+      "headline-6",
+      "display",
+      "body-small",
+      "copy"
+    );
+    @include font-styles("headline-6");
+  }
+
+  ul,
+  ol {
+    li {
+      &::before {
+        content: "";
+        display: inline-block;
+        height: px-to-rem(14px);
+        left: px-to-rem(-12px);
+        position: absolute;
+        top: 6px;
+        width: px-to-rem(12px);
+        @include dataurlicon("listarrow");
+      }
+      margin-bottom: px-to-rem(map-get($spacing, "padding-4"));
+      margin-left: px-to-rem(12px);
+      padding-left: px-to-rem(12px);
+      position: relative;
+    }
+    margin-bottom: px-to-rem(map-get($spacing, "padding-4"));
+  }
+
+  blockquote {
+    background-color: $color-ux-background-highlight;
+    background-position: right top;
+    background-repeat: no-repeat;
+    background-size: px-to-rem(72px) px-to-rem(40px);
+    display: block;
+    margin: px-to-rem(map-get($spacing, "padding-3")) 0
+      px-to-rem(map-get($spacing, "padding-5")) 0;
+    padding: px-to-rem(54px) 0 px-to-rem(34px)
+      px-to-rem(map-get($spacing, "padding-4"));
+    position: relative;
+    width: 100%;
+    @include dataurlicon("triangle", $color-ux-background-default);
+
+    p {
+      color: $color-font-blockquote;
+      font-weight: 300;
+      margin-bottom: px-to-rem(map-get($spacing, "padding-3"));
+      padding: 0 px-to-rem(map-get($spacing, "padding-6")) 0 0;
+      position: relative;
+      @include font-styles("pull-quote-sm");
+
+      &:after {
+        background-repeat: no-repeat;
+        bottom: 0;
+        content: "";
+        display: inline-block;
+        height: px-to-rem(20px);
+        position: absolute;
+        right: 0;
+        transform: scaleX(-1);
+        width: px-to-rem(26.5px);
+        @include dataurlicon("quote", $color-font-blockquote);
+      }
+    }
+
+    cite {
+      color: $color-font-cite;
+      font-weight: 400;
+      @include font-styles("pull-quote-cite");
+    }
+
+    &:before {
+      background-repeat: no-repeat;
+      content: "";
+      display: inline-block;
+      height: px-to-rem(40px);
+      left: 0;
+      position: absolute;
+      width: px-to-rem(53px);
+      top: 0;
+      @include dataurlicon("quote", $color-font-blockquote);
+    }
+  }
+
+  @include breakpoint("medium") {
+    @include font-styles("base");
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-top: px-to-rem(map-get($spacing, "padding-8"));
+    }
+
+    h1 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-5"),
+        "headline-1",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-1");
+    }
+
+    h2 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-5"),
+        "headline-2",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-2");
+    }
+
+    h3 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-4"),
+        "headline-3",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-3");
+    }
+
+    h4 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-4"),
+        "headline-4",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-4");
+    }
+
+    h5 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-4"),
+        "headline-5",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-5");
+    }
+
+    h6 {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-4"),
+        "headline-5",
+        "display",
+        "body-large",
+        "copy"
+      );
+      @include font-styles("headline-5");
+    }
+
+    p {
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-3"),
+        "body-large",
+        "copy",
+        "body-large",
+        "copy"
+      );
+    }
+
+    p + figure,
+    p + img,
+    p + blockquote,
+    ul + img,
+    ol + img,
+    dl + img,
+    p + hr,
+    ul + hr,
+    ol + hr,
+    dl + hr,
+    blockquote + hr {
+      @include textmargin(
+        "margin-top",
+        map-get($spacing, "padding-8"),
+        "body-large",
+        "copy",
+        0,
+        0
+      );
+    }
+
+    hr {
+      margin-bottom: px-to-rem(map-get($spacing, "padding-8"));
+    }
+
+    figure {
+      width: 100%;
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "padding-8"),
+        "body-large",
+        "copy",
+        0,
+        0
+      );
+    }
+
+    blockquote {
+      background-size: px-to-rem(86px) px-to-rem(48px);
+      margin: px-to-rem(map-get($spacing, "padding-4")) 0
+        px-to-rem(map-get($spacing, "padding-8")) 0;
+      padding: px-to-rem(62px) 0 px-to-rem(map-get($spacing, "padding-6"))
+        px-to-rem(map-get($spacing, "padding-6"));
+
+      p {
+        margin-bottom: px-to-rem(map-get($spacing, "padding-3"));
+        padding: 0 px-to-rem(map-get($spacing, "padding-6")) 0 0;
+        position: relative;
+        @include font-styles("pull-quote-lg");
+
+        &:after {
+          height: px-to-rem(24px);
+          width: px-to-rem(32px);
+        }
+      }
+
+      &:before {
+        height: px-to-rem(48px);
+        width: px-to-rem(64px);
+      }
+    }
+  }
+}