@ilo-org/styles 0.3.5 → 0.4.0

package/scss/components/_hero.scss

@@ -2,578 +2,272 @@
 @use "../functions" as *;
 @import "../mixins";
 
-.ilo--hero {
-  background: map-get($color, "ux", "pagination", "default", "background");
-  display: block;
-  position: relative;
-  width: 100%;
-
-  &--home {
-    .ilo--image {
-      &::before {
-        background: linear-gradient(
-            360deg,
-            rgba($brand-ilo-black, 0.3) 0%,
-            rgba($brand-ilo-black, 0) 24.88%
-          ),
-          transparent;
-        content: "";
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: 2;
-      }
-    }
+.hero {
+  $c: &;
 
-    @include breakpoint("large") {
-      position: relative;
-    }
-  }
+  --tooltip-width: 30px;
+  --tooltip-height: 27px;
+  --corner-cut-height: 39px;
+  --image-max-height: 216px;
 
-  &--portal {
-    position: relative;
-
-    @include breakpoint("large") {
-      margin-bottom: 80px;
-      padding-top: 170px;
-
-      .ilo--image {
-        height: calc(100% - 80px);
-        left: 0;
-        position: absolute;
-        top: 0;
-        width: 100%;
-      }
-
-      .ilo--image--wrapper {
-        height: 100%;
-      }
+  display: grid;
+  position: relative;
 
-      .ilo--image--img {
-        display: flex;
-        height: 100%;
-        object-fit: cover;
-        width: 100%;
+  grid-template-rows:
+    minmax(var(--image-max-height), 1fr)
+    var(--tooltip-height)
+    39px
+    auto;
+  grid-template-columns: 1fr;
 
-        img {
-          object-fit: cover;
-          height: auto;
-          width: 100%;
-        }
-      }
-
-      .ilo--hero-card {
-        top: 80px;
-      }
-    }
+  &--breadcrumbs {
+    display: none;
   }
 
-  &--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;
+  &--figure {
+    background-color: map-get($color, "base", "blue", "light");
+    position: relative;
 
-      @include breakpoint("large") {
-        .ilo--hero-card {
-          top: 0;
-        }
-      }
-    }
+    grid-area: 1 / 1 / 4 / 2;
 
-    .ilo--hero-card {
-      &--center {
-        margin: auto;
-      }
+    img {
+      position: absolute;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
     }
   }
 
-  &--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;
-      }
-    }
+  &--card {
+    grid-area: 3 / 1 / 5 / 2;
   }
 
-  &--image {
-    background-color: map-get($color, "hero", "image");
+  &--caption {
+    grid-area: 2 / 1 / 3 / 2;
 
-    @include breakpoint("large") {
-      .ilo--image {
-        height: 100%;
-        max-height: 592px;
-        overflow: hidden;
-        width: 100%;
-      }
+    &--wrapper {
+      background: map-get($color, "tooltip", "dark", "background");
+      height: var(--tooltip-height);
+      width: var(--tooltip-width);
 
-      .ilo--image--wrapper {
-        height: 100%;
-      }
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
 
-      .ilo--image--img {
-        display: flex;
-        height: 100%;
-        object-fit: cover;
-        width: 100%;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 0;
+        height: 0;
+        border-top: var(--tooltip-height) solid transparent;
+        border-left: calc(var(--tooltip-height) - 4px) solid
+          map-get($color, "tooltip", "dark", "background");
 
-        img {
-          object-fit: cover;
-          height: auto;
-          width: 100%;
+        .right-to-left & {
+          left: auto;
+          right: 100%;
+          border-left: none;
+          border-right: calc(var(--tooltip-height) - 4px) solid
+            map-get($color, "tooltip", "dark", "background");
         }
       }
     }
   }
 
-  .ilo--breadcrumb {
-    width: 100%;
-
-    .right-to-left & {
-      left: auto;
-      right: 0;
-    }
-
-    @include breakpoint("medium") {
-      left: 0;
-      max-width: 560px;
-      position: absolute;
-      top: 0;
-    }
-  }
-}
-
-.ilo--hero-card {
-  @include cornercut(
-    map-get($color, "hero", "card", "light", "background"),
-    40px
-  );
-  background: map-get($color, "hero", "card", "light", "background");
-  color: map-get($color, "hero", "card", "light", "color");
-  max-width: 920px;
-  position: relative;
-  padding: 16px 16px 40px 16px;
-
-  &::before {
-    left: 0;
-    top: -39.7px;
-
-    .right-to-left & {
-      left: auto;
-      right: 0;
-    }
-
-    @include breakpoint("large") {
-      top: -63.7px;
-    }
-  }
-
-  &::after {
-    right: 0;
-    top: -39.7px;
-
-    .right-to-left & {
-      left: 0;
-      right: auto;
-    }
-
-    @include breakpoint("large") {
-      top: -63.7px;
-    }
-  }
-
   @include breakpoint("large") {
-    @include cornercut(
-      map-get($color, "hero", "card", "light", "background"),
-      64px,
-      116px
-    );
-    padding: 0 70px 70px 70px;
-
-    &.ilo--hero-card--graphic {
-      padding: 0 70px 44px 70px;
-    }
-  }
+    --card-width: minmax(200px, 625px);
+    --corner-cut-height: 64px;
+    --breadcrumbs-height: 48px;
+    --card-offset: 109px;
+    --image-gap: 240px;
 
-  .right-to-left & {
-    direction: rtl;
-  }
+    // Defaults to baseline
+    --row-1-lg: var(--breadcrumbs-height);
+    --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
+    --row-3-lg: auto;
+    --row-4-lg: var(--tooltip-height);
+    --row-5-lg: 72px;
 
-  &--center {
-    margin: auto;
-  }
+    --col-1-lg: 0;
+    --col-2-lg: var(--card-width);
+    --col-3-lg: var(--tooltip-width);
+    --col-4-lg: 1fr;
 
-  &--dark {
-    background: map-get($color, "hero", "card", "dark", "background");
-    border-bottom: 3px solid $color-base-red-medium;
-    color: map-get($color, "hero", "card", "dark", "color");
+    grid-template-rows:
+      var(--row-1-lg)
+      var(--row-2-lg)
+      var(--row-3-lg)
+      var(--row-4-lg)
+      var(--row-5-lg);
 
-    &::after {
-      @include dataurlicon("triangledecoration", $brand-ilo-dark-blue);
-    }
+    grid-template-columns:
+      var(--col-1-lg)
+      var(--col-2-lg)
+      var(--col-3-lg)
+      var(--col-4-lg);
 
-    .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"
-        );
+    &__poster-size {
+      &__small {
+        --image-gap: 112px;
       }
 
-      &--facebook {
-        @include dataurlicon(
-          "facebook",
-          map-get($color, "hero", "card", "dark", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "facebook",
-            map-get($color, "hero", "card", "dark", "iconhover", "color")
-          );
-        }
+      &__medium {
+        --image-gap: 176px;
       }
 
-      &--twitter {
-        @include dataurlicon(
-          "twitter",
-          map-get($color, "hero", "card", "dark", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "twitter",
-            map-get($color, "hero", "card", "dark", "iconhover", "color")
-          );
-        }
+      &__large {
+        --image-gap: 240px;
       }
 
-      &--linkedin {
-        @include dataurlicon(
-          "linkedin",
-          map-get($color, "hero", "card", "dark", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "linkedin",
-            map-get($color, "hero", "card", "dark", "iconhover", "color")
-          );
-        }
+      &__xlarge {
+        --image-gap: 527px;
       }
     }
 
-    .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 {
-    border: none;
-    padding: 24px;
+    &__card-size {
+      &__small {
+        --card-width: minmax(200px, 625px);
+      }
 
-    &::before {
-      display: none;
-    }
+      &__medium {
+        --card-width: minmax(200px, 721px);
+      }
 
-    &.ilo--hero-card--nobackground {
-      background: transparent;
+      &__large {
+        --card-width: minmax(200px, 856px);
+      }
 
-      > * {
-        filter: drop-shadow(0px 12px 32px rgba(0, 0, 0, 0.16))
-          drop-shadow(0px 0.8px 1.6px rgba(0, 0, 0, 0.02))
-          drop-shadow(0px 2.7px 4.8px rgba(0, 0, 0, 0.04))
-          drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.08));
+      &__xlarge {
+        --card-width: minmax(200px, 920px);
       }
 
-      &::before,
-      &::after {
-        content: "";
+      &__xxlarge {
+        --card-width: minmax(200px, 998px);
       }
     }
 
-    @include breakpoint("large") {
-      @include cornercut($brand-ilo-white, 48px, 87.4px);
-      bottom: 72px;
-      max-width: 720px;
-      padding: 0 48px 48px 72px;
-      position: absolute;
-      width: 100%;
-
-      &::before {
-        left: 0;
-        top: -48px;
+    &__card-justify {
+      &__start {
+        --col-1-lg: 0;
 
         .right-to-left & {
-          left: auto;
-          right: 0;
+          --col-1-lg: 1fr;
+          --col-2-lg: var(--tooltip-width);
+          --col-3-lg: var(--card-width);
+          --col-4-lg: 0;
         }
       }
 
-      &::after {
-        right: 0;
-        top: -48px;
+      &__offset {
+        --col-1-lg: var(--card-offset);
 
         .right-to-left & {
-          left: 0;
-          right: auto;
+          --col-1-lg: 1fr;
+          --col-2-lg: var(--tooltip-width);
+          --col-3-lg: var(--card-width);
+          --col-4-lg: var(--card-offset);
         }
       }
 
-      &.ilo--hero-card--center {
-        left: 50%;
-        right: auto;
-        transform: translateX(-50%);
-      }
+      &__center {
+        --col-1-lg: 1fr;
+        --col-4-lg: 1fr;
 
-      &.ilo--hero-card--left {
-        left: 0;
-        right: auto;
+        .right-to-left & {
+          --col-2-lg: var(--tooltip-width);
+          --col-3-lg: var(--card-width);
+        }
       }
+    }
 
-      &.ilo--hero-card--right {
-        left: auto;
-        right: 0;
+    &__card-align {
+      &__center {
+        --row-4-lg: calc(72px - var(--tooltip-height));
+        --row-5-lg: var(--tooltip-height);
       }
 
-      &.ilo--hero-card--nobackground {
-        background: transparent;
-
-        &::before,
-        &::after {
-          content: "";
-        }
+      &__bottom {
+        --row-3-lg: 0;
+        --row-4-lg: var(--corner-cut-height);
+        --row-5-lg: auto;
       }
     }
 
-    &.ilo--hero-card--dark {
-      @include breakpoint("large") {
-        background: rgba(
-          map-get($color, "hero", "card", "dark", "background"),
-          0.55
-        );
+    &--breadcrumbs {
+      grid-area: 1 / 1 / 2 / 5;
+      z-index: 1;
+      display: flex;
+      flex-flow: row nowrap;
 
-        &.ilo--hero-card--nobackground {
-          background: transparent;
-
-          &::before,
-          &::after {
-            content: "";
-          }
-        }
+      .right-to-left & {
+        flex-direction: row-reverse;
       }
 
-      &::after {
-        @include dataurlicon(
-          "triangledecoration",
-          rgba($brand-ilo-dark-blue, 0.55)
-        );
+      &--wrapper {
+        max-width: 500px;
       }
     }
-  }
-
-  &--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 42px 72px;
-      width: 100%;
-    }
-  }
 
-  &--publication {
-    padding: 24px;
+    &--figure {
+      grid-area: 1 / 1 / 5 / 5;
 
-    .ilo--hero-card--eyebrow {
-      margin-bottom: px-to-rem(6px);
-    }
+      #{$c}__card-align__center & {
+        grid-area: 1 / 1 / 6 / 5;
+      }
 
-    @include breakpoint("large") {
-      margin-left: 106px;
-      margin-top: -64px;
-      max-width: 720px;
-      padding: 0 48px 48px 48px;
-      width: 100%;
+      #{$c}__card-align__bottom & {
+        grid-area: 1 / 1 / 5 / 5;
+      }
     }
-  }
-
-  &--datecopy {
-    @include font-styles("body-small");
-    margin-bottom: px-to-rem(28px);
 
-    color: map-get($color, "hero", "card", "light", "datecopy", "color");
-  }
-
-  &--eyebrow {
-    @include font-styles("body-small");
-    margin-bottom: px-to-rem(16px);
-
-    color: map-get($color, "hero", "card", "light", "eyebrow", "color");
-  }
+    &--card {
+      grid-area: 3 / 2 / 6 / 3;
 
-  &--intro {
-    @include font-styles("body-small");
-    margin-bottom: px-to-rem(28px);
+      .right-to-left & {
+        grid-area: 3 / 3 / 6 / 4;
+      }
 
-    @include breakpoint("large") {
-      @include font-styles("base");
-    }
-  }
+      #{$c}__card-align__center & {
+        grid-area: 3 / 2 / 4 / 3;
+      }
 
-  &--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");
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 2 / 6 / 3;
+      }
     }
-  }
-
-  &--list {
-    display: flex;
-  }
 
-  &--list--item {
-    display: inline-block;
-    margin-right: 24px;
+    &--caption {
+      grid-area: 4 / 3 / 5 / 4;
+      position: relative;
 
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
+      .right-to-left & {
+        grid-area: 4 / 2 / 5 / 3;
+      }
 
-  &--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;
+      #{$c}__card-align__center & {
+        grid-area: 5 / 1 / 6 / 3;
       }
 
-      &--facebook {
-        @include dataurlicon(
-          "facebook",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "facebook",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
-        }
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 1 / 5 / 2;
       }
 
-      &--twitter {
-        @include dataurlicon(
-          "twitter",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "twitter",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
+      &--wrapper {
+        left: 2px;
+
+        .right-to-left & {
+          left: auto;
+          right: 2px;
         }
-      }
 
-      &--linkedin {
-        @include dataurlicon(
-          "linkedin",
-          map-get($color, "hero", "card", "light", "icon", "color")
-        );
-
-        &:hover {
-          @include dataurlicon(
-            "linkedin",
-            map-get($color, "hero", "card", "light", "iconhover", "color")
-          );
+        #{$c}__card-align__center &,
+        #{$c}__card-align__bottom & {
+          position: absolute;
+          left: 0;
+          bottom: 0;
         }
       }
     }