@ilo-org/styles 1.8.4 → 1.9.0

package/css/components/heading.css

@@ -1 +0,0 @@
-.ilo--h1,.ilo--h2,.ilo--h3,.ilo--h4,.ilo--h5,.ilo--h6{color:inherit;font-family:var(--ilo-fonts-display);font-weight:700}.ilo--h1--default,.ilo--h2--default,.ilo--h3--default,.ilo--h4--default,.ilo--h5--default,.ilo--h6--default{color:#2d2d2d}.ilo--h1--actionable,.ilo--h2--actionable,.ilo--h3--actionable,.ilo--h4--actionable,.ilo--h5--actionable,.ilo--h6--actionable{color:#960a55}.ilo--h1--light,.ilo--h2--light,.ilo--h3--light,.ilo--h4--light,.ilo--h5--light,.ilo--h6--light{color:#fff}.ilo--h1{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}@media screen and (min-width:610px){.ilo--h1{font-size:56.95px;letter-spacing:-.035em;line-height:65.49px}}.ilo--h2{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}@media screen and (min-width:610px){.ilo--h2{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}.ilo--h3{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}@media screen and (min-width:610px){.ilo--h3{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}}.ilo--h4{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}@media screen and (min-width:610px){.ilo--h4{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--h5{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h5{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}}.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}}

package/scss/components/_credit.scss

@@ -1,112 +0,0 @@
-@use "../tokens" as *;
-@import "../functions";
-@import "../mixins";
-@import "../animations";
-
-.ilo--credit {
-  color: #ffffff;
-  display: inline-block;
-  height: px-to-rem($spacing-ux-credit-height);
-  padding: 0;
-  position: relative;
-  @include font-styles("image-credit");
-
-  &--label {
-    background-color: $color-ux-credit-background;
-    @include boxpadding("credit", "large");
-  }
-
-  &:after {
-    background-position: top right;
-    background-repeat: no-repeat;
-    background-size: contain;
-    content: "";
-    height: px-to-rem($spacing-ux-credit-height);
-    position: absolute;
-    left: 100%;
-    top: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
-    width: px-to-rem($spacing-ux-credit-height);
-  }
-
-  @include breakpoint("lg", true) {
-    width: 75%;
-
-    &--label {
-      bottom: calc(100% + 1px);
-      display: none;
-      left: 0;
-      margin-bottom: px-to-rem(map-get($spacing, "padding-1-5"));
-      position: absolute;
-
-      &:after {
-        background-position: top left;
-        background-repeat: no-repeat;
-        background-size: contain;
-        content: "";
-        height: px-to-rem(map-get($spacing, "padding-1-5"));
-        position: absolute;
-        left: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
-        bottom: -#{px-to-rem(map-get($spacing, "padding-1-5"))};
-        width: px-to-rem(map-get($spacing, "padding-1-5"));
-      }
-    }
-
-    &:before {
-      background-color: $color-base-neutrals-dark;
-      background-position: calc(100% - 4px) center;
-      background-repeat: no-repeat;
-      background-size: px-to-rem(map-get($spacing, "padding-1-5"))
-        px-to-rem(map-get($spacing, "padding-1-5"));
-      content: "";
-      height: px-to-rem(map-get($spacing, "padding-3"));
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: px-to-rem(29px);
-    }
-
-    &:after {
-      left: px-to-rem(29px);
-      top: 0;
-    }
-
-    &:hover {
-      .ilo--credit--label {
-        display: inline-block;
-      }
-    }
-  }
-
-  [dir="rtl"] & {
-    &:after {
-      background-position: top left;
-      left: auto;
-      right: 100%;
-      transform: scaleX(-1);
-    }
-
-    @include breakpoint("lg", true) {
-      &--label {
-        left: auto;
-        right: 0;
-
-        &:after {
-          background-position: top right;
-          left: auto;
-          right: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
-        }
-      }
-
-      &:before {
-        background-position: 4px center;
-        left: auto;
-        right: 0;
-      }
-
-      &:after {
-        left: auto;
-        right: px-to-rem(29px);
-      }
-    }
-  }
-}

package/scss/components/_heading.scss

@@ -1,74 +0,0 @@
-@use "../tokens" as *;
-@use "../functions" as *;
-@import "../mixins";
-
-.ilo--h1,
-.ilo--h2,
-.ilo--h3,
-.ilo--h4,
-.ilo--h5,
-.ilo--h6 {
-  color: inherit;
-  font-family: var(--ilo-fonts-display);
-  font-weight: 700;
-
-  &--default {
-    color: $color-font-base;
-  }
-
-  &--actionable {
-    color: $color-base-purple-medium;
-  }
-
-  &--light {
-    color: $color-base-neutrals-white;
-  }
-}
-
-.ilo--h1 {
-  @include font-styles("headline-2");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-1");
-  }
-}
-
-.ilo--h2 {
-  @include font-styles("headline-3");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-2");
-  }
-}
-
-.ilo--h3 {
-  @include font-styles("headline-4");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-3");
-  }
-}
-
-.ilo--h4 {
-  @include font-styles("headline-5");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-4");
-  }
-}
-
-.ilo--h5 {
-  @include font-styles("headline-6");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-5");
-  }
-}
-
-.ilo--h6 {
-  @include font-styles("headline-6");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-6");
-  }
-}