@ilo-org/styles 0.13.2 → 0.14.0

package/scss/components/_hero.scss

@@ -70,10 +70,6 @@
     }
   }
 
-  &--breadcrumbs {
-    display: none;
-  }
-
   &--background {
     display: grid;
     background-color: map-get($color, "base", "blue", "light");
@@ -104,264 +100,262 @@
     }
   }
 
-  @include breakpoint("large") {
-    --card-width: 625px;
-    --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
-    --breadcrumbs-height: 48px;
-    --image-gap: 240px;
-
-    // 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: #{$spacing-hero-tooltip-height};
-    --row-5-lg: 72px;
-
-    --col-1-lg: 0;
-    --col-2-lg: var(--card-width);
-    --col-3-lg: #{$spacing-hero-tooltip-width};
-    --col-4-lg: 1fr;
-
-    grid-template-rows:
-      var(--row-1-lg)
-      var(--row-2-lg)
-      var(--row-3-lg)
-      var(--row-4-lg);
-
-    grid-template-columns:
-      var(--col-1-lg)
-      var(--col-2-lg)
-      var(--col-3-lg)
-      var(--col-4-lg);
-
-    &__poster-size {
-      &__small {
-        --image-gap: 112px;
-      }
+  --card-width: 625px;
+  --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
+  --breadcrumbs-height: 48px;
+  --image-gap: 240px;
+
+  // 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: #{$spacing-hero-tooltip-height};
+  --row-5-lg: 72px;
+
+  --col-1-lg: 0;
+  --col-2-lg: var(--card-width);
+  --col-3-lg: #{$spacing-hero-tooltip-width};
+  --col-4-lg: 1fr;
+
+  grid-template-rows:
+    var(--row-1-lg)
+    var(--row-2-lg)
+    var(--row-3-lg)
+    var(--row-4-lg);
+
+  grid-template-columns:
+    var(--col-1-lg)
+    var(--col-2-lg)
+    var(--col-3-lg)
+    var(--col-4-lg);
+
+  &__poster-size {
+    &__small {
+      --image-gap: 112px;
+    }
 
-      &__medium {
-        --image-gap: 176px;
-      }
+    &__medium {
+      --image-gap: 176px;
+    }
 
-      &__large {
-        --image-gap: 240px;
-      }
+    &__large {
+      --image-gap: 240px;
+    }
 
-      &__xlarge {
-        --image-gap: 527px;
-      }
+    &__xlarge {
+      --image-gap: 527px;
     }
+  }
 
-    &__card-size {
-      &__small {
-        --card-width: 625px;
-      }
+  &__card-size {
+    &__small {
+      --card-width: 625px;
+    }
 
-      &__medium {
-        --card-width: 721px;
-      }
+    &__medium {
+      --card-width: 721px;
+    }
 
-      &__large {
-        --card-width: 856px;
-      }
+    &__large {
+      --card-width: 856px;
+    }
 
-      &__xlarge {
-        --card-width: 920px;
-      }
+    &__xlarge {
+      --card-width: 920px;
+    }
 
-      &__xxlarge {
-        --card-width: 998px;
-      }
+    &__xxlarge {
+      --card-width: 998px;
     }
+  }
 
-    &__card-justify {
-      &__start,
-      &__offset {
-        --card-padding-start: #{$squeezy-padding-start};
-        --col-1-lg: #{$card-offset};
-      }
+  &__card-justify {
+    &__start,
+    &__offset {
+      --card-padding-start: #{$squeezy-padding-start};
+      --col-1-lg: #{$card-offset};
+    }
 
-      &__offset {
-        --added-offset: 109px;
-      }
+    &__offset {
+      --added-offset: 109px;
+    }
 
-      &__center {
-        --col-1-lg: calc((100% - var(--card-width)) / 2);
-        --col-4-lg: calc(
-          ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
-        );
-      }
+    &__center {
+      --col-1-lg: calc((100% - var(--card-width)) / 2);
+      --col-4-lg: calc(
+        ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+      );
     }
+  }
 
-    &__card-align {
-      &__center {
-        --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
-        --row-5-lg: #{$spacing-hero-tooltip-height};
-      }
+  &__card-align {
+    &__center {
+      --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
+      --row-5-lg: #{$spacing-hero-tooltip-height};
+    }
 
-      &__bottom {
-        --row-3-lg: 0;
-        --row-4-lg: var(--corner-cut-height);
-        --row-5-lg: auto;
-      }
+    &__bottom {
+      --row-3-lg: 0;
+      --row-4-lg: var(--corner-cut-height);
+      --row-5-lg: auto;
     }
+  }
 
-    &__card-background {
-      &__transparent {
-        #{$c}--card-offset {
-          background-color: transparent !important;
-        }
+  &__card-background {
+    &__transparent {
+      #{$c}--card-offset {
+        background-color: transparent !important;
       }
     }
+  }
 
-    &__card-theme {
-      &__dark {
-        #{$c}--card-offset {
-          background-color: map-get($color, "base", "blue", "dark");
-          position: relative;
-          box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
-        }
+  &__card-theme {
+    &__dark {
+      #{$c}--card-offset {
+        background-color: map-get($color, "base", "blue", "dark");
+        position: relative;
+        box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
+      }
 
-        &[class*="semi-transparent"] {
-          #{$c}--card-offset {
-            background: rgba(
+      &[class*="semi-transparent"] {
+        #{$c}--card-offset {
+          background: rgba(
+            map-get($color, "hero", "card", "dark", "background"),
+            $opacity-semi-transparent
+          );
+          box-shadow: 0.3px 0 0 0
+            rgba(
               map-get($color, "hero", "card", "dark", "background"),
               $opacity-semi-transparent
             );
-            box-shadow: 0.3px 0 0 0
-              rgba(
-                map-get($color, "hero", "card", "dark", "background"),
-                $opacity-semi-transparent
-              );
-          }
         }
       }
+    }
+
+    &__light {
+      #{$c}--card-offset {
+        background: map-get($color, "hero", "card", "light", "background");
+        box-shadow: 0.3px 0 0 0
+          map-get($color, "hero", "card", "light", "background");
+      }
 
-      &__light {
+      &[class*="semi-transparent"] {
         #{$c}--card-offset {
-          background: map-get($color, "hero", "card", "light", "background");
+          background: rgba(
+            map-get($color, "hero", "card", "light", "background"),
+            $opacity-semi-transparent
+          );
           box-shadow: 0.3px 0 0 0
-            map-get($color, "hero", "card", "light", "background");
-        }
-
-        &[class*="semi-transparent"] {
-          #{$c}--card-offset {
-            background: rgba(
+            rgba(
               map-get($color, "hero", "card", "light", "background"),
               $opacity-semi-transparent
             );
-            box-shadow: 0.3px 0 0 0
-              rgba(
-                map-get($color, "hero", "card", "light", "background"),
-                $opacity-semi-transparent
-              );
-          }
         }
       }
     }
+  }
 
-    &--breadcrumbs {
-      grid-area: 1 / 1 / 2 / 5;
-      z-index: 1;
-      display: flex;
-      flex-flow: row nowrap;
+  &--breadcrumbs {
+    grid-area: 1 / 1 / 2 / 5;
+    z-index: 1;
+    display: flex;
+    flex-flow: row nowrap;
 
-      &--wrapper {
-        width: 100%;
-      }
+    &--wrapper {
+      width: 100%;
     }
+  }
 
-    &--background {
-      grid-area: 1 / 1 / 5 / 5;
+  &--background {
+    grid-area: 1 / 1 / 5 / 5;
 
-      #{$c}__card-align__center & {
-        grid-area: 1 / 1 / 6 / 5;
-      }
+    #{$c}__card-align__center & {
+      grid-area: 1 / 1 / 6 / 5;
+    }
 
-      #{$c}__card-align__bottom & {
-        grid-area: 1 / 1 / 5 / 5;
-      }
+    #{$c}__card-align__bottom & {
+      grid-area: 1 / 1 / 5 / 5;
     }
+  }
 
-    &--card-offset {
-      grid-area: 3 / 1 / 6 / 2;
-      z-index: 0;
-      position: relative;
+  &--card-offset {
+    grid-area: 3 / 1 / 6 / 2;
+    z-index: 0;
+    position: relative;
 
-      #{$c}__card-justify__offset &,
-      #{$c}__card-justify__center & {
-        background: transparent !important;
-      }
+    #{$c}__card-justify__offset &,
+    #{$c}__card-justify__center & {
+      background: transparent !important;
+    }
 
-      #{$c}__card-align__center & {
-        grid-area: 3 / 1 / 4 / 2;
-      }
+    #{$c}__card-align__center & {
+      grid-area: 3 / 1 / 4 / 2;
+    }
 
-      #{$c}__card-align__bottom & {
-        grid-area: 4 / 1 / 6 / 2;
-      }
+    #{$c}__card-align__bottom & {
+      grid-area: 4 / 1 / 6 / 2;
     }
+  }
 
-    &--card {
-      grid-area: 3 / 2 / 6 / 3;
+  &--card {
+    grid-area: 3 / 2 / 6 / 3;
 
-      #{$c}__card-align__center & {
-        grid-area: 3 / 2 / 4 / 3;
-      }
+    #{$c}__card-align__center & {
+      grid-area: 3 / 2 / 4 / 3;
+    }
 
-      #{$c}__card-align__bottom & {
-        grid-area: 4 / 2 / 6 / 3;
-      }
+    #{$c}__card-align__bottom & {
+      grid-area: 4 / 2 / 6 / 3;
     }
+  }
 
-    &--caption {
-      grid-area: 4 / 3 / 5 / 4;
-      position: relative;
+  &--caption {
+    grid-area: 4 / 3 / 5 / 4;
+    position: relative;
 
-      #{$c}__card-align__center & {
-        grid-area: 5 / 1 / 6 / 3;
-      }
+    #{$c}__card-align__center & {
+      grid-area: 5 / 1 / 6 / 3;
+    }
 
-      #{$c}__card-align__bottom & {
-        grid-area: 4 / 1 / 5 / 2;
-      }
+    #{$c}__card-align__bottom & {
+      grid-area: 4 / 1 / 5 / 2;
+    }
 
-      #{$c}__card-align__center &,
-      #{$c}__card-align__bottom & {
-        &--wrapper {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-        }
+    #{$c}__card-align__center &,
+    #{$c}__card-align__bottom & {
+      &--wrapper {
+        position: absolute;
+        left: 0;
+        bottom: 0;
       }
+    }
 
-      #{$c}__card-align__bottom#{$c}__card-justify__start & {
-        grid-area: 1 / 1 / 3 / 3;
-      }
+    #{$c}__card-align__bottom#{$c}__card-justify__start & {
+      grid-area: 1 / 1 / 3 / 3;
+    }
 
-      #{$c}__card-align__bottom#{$c}__card-justify__offset & {
-        grid-area: 1 / 2 / 3 / 3;
-      }
+    #{$c}__card-align__bottom#{$c}__card-justify__offset & {
+      grid-area: 1 / 2 / 3 / 3;
+    }
 
-      #{$c}__card-align__bottom#{$c}__card-justify__start &,
-      #{$c}__card-align__bottom#{$c}__card-justify__offset & {
-        #{$c}--caption--wrapper {
-          @include caption-icon-wrapper(
-            "right",
-            $spacing-hero-tooltip-width,
-            $spacing-hero-tooltip-height
-          );
+    #{$c}__card-align__bottom#{$c}__card-justify__start &,
+    #{$c}__card-align__bottom#{$c}__card-justify__offset & {
+      #{$c}--caption--wrapper {
+        @include caption-icon-wrapper(
+          "right",
+          $spacing-hero-tooltip-width,
+          $spacing-hero-tooltip-height
+        );
 
-          position: absolute;
-          left: 0;
-          right: initial;
-          bottom: 0;
-        }
+        position: absolute;
+        left: 0;
+        right: initial;
+        bottom: 0;
       }
+    }
 
-      &--wrapper {
-        left: 2px;
-      }
+    &--wrapper {
+      left: 2px;
     }
   }
 
@@ -378,22 +372,20 @@
       }
     }
 
-    @include breakpoint("large") {
-      &__card-align__bottom {
-        &#{$c}__card-justify__start,
-        &#{$c}__card-justify__offset {
-          #{$c}--caption--wrapper {
-            @include caption-icon-wrapper(
-              "left",
-              $spacing-hero-tooltip-width,
-              $spacing-hero-tooltip-height
-            );
+    &__card-align__bottom {
+      &#{$c}__card-justify__start,
+      &#{$c}__card-justify__offset {
+        #{$c}--caption--wrapper {
+          @include caption-icon-wrapper(
+            "left",
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
+          );
 
-            position: absolute;
-            left: initial;
-            right: 0;
-            bottom: 0;
-          }
+          position: absolute;
+          left: initial;
+          right: 0;
+          bottom: 0;
         }
       }
     }

package/scss/components/_icon.scss

@@ -0,0 +1,6 @@
+.ilo--icon {
+  &:not([data-js-processed="true"]) {
+    height: 24px;
+    width: 24px;
+  }
+}

package/scss/components/_list.scss

@@ -43,9 +43,7 @@
         content: none;
       }
     }
-    align-items: center;
     display: flex;
-    flex-wrap: wrap;
     list-style: none;
 
     .ilo--list__title {

package/scss/components/_multilinkcard.scss

@@ -35,7 +35,7 @@
       #{$self}--title {
         @include font-styles("headline-5");
         margin-bottom: spacing(8);
-        color: $brand-ilo-grey-charcoal;
+        color: $brand-ilo-black;
 
         @include breakpoint("medium") {
           @include font-styles("headline-4");
@@ -45,7 +45,7 @@
       #{$self}--intro {
         @include font-styles("body-small");
         margin-bottom: spacing(8);
-        color: $brand-ilo-grey-charcoal;
+        color: $brand-ilo-black;
 
         @include breakpoint("medium") {
           @include font-styles("base");

package/scss/components/_navigation.scss

@@ -86,17 +86,19 @@
 
   &--logo {
     display: block;
-    width: 100%;
+    height: spacing(14);
+
+    @include breakpoint("large") {
+      height: spacing(18);
+    }
 
     &-link {
       display: block;
-      padding: 16px 0;
-      max-width: 150px;
-      width: 100%;
+      padding: spacing(4) 0;
+      width: auto;
 
       @include breakpoint("large") {
-        padding: 0 0 24px;
-        max-width: 200px;
+        padding: 0 0 spacing(6);
       }
     }
   }
@@ -780,7 +782,7 @@
     cursor: pointer;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: spacing(4) spacing(4) spacing(4) spacing(8);
+    padding: spacing(5) spacing(4) spacing(4) spacing(8);
     position: relative;
     transition: all 150ms ease-out;
 
@@ -800,7 +802,7 @@
     }
 
     [dir="rtl"] & {
-      padding: 16px 32px 16px 16px;
+      padding: spacing(5) spacing(8) spacing(4) spacing(4);
 
       &::before {
         @include dataurlicon("arrowright", $brand-ilo-dark-blue);
@@ -842,7 +844,7 @@
   &--label {
     @include font-styles("headline-6");
     border-bottom: 3px solid $brand-ilo-grey-light;
-    color: $brand-ilo-grey-charcoal;
+    color: $brand-ilo-black;
     font-family: $fonts-display;
     font-weight: 700;
     margin-bottom: spacing(4);

package/scss/components/_pagination.scss

@@ -185,8 +185,6 @@
   }
 
   &--last-page {
-    margin: 0 0 0 spacing(2);
-
     &::before {
       @include dataurlicon(
         "doublearrow",
@@ -227,7 +225,7 @@
 
   &--page {
     @include font-styles("nav-md-sm");
-
+    margin-inline-end: spacing(2);
     font-family: $fonts-copy;
     font-weight: 400;
     line-height: 45px;

package/scss/components/_profile.scss

@@ -84,7 +84,7 @@ $avatar-size-lg: $row-1-lg;
         bottom: px-to-rem(1px);
         height: px-to-rem(24px);
         width: px-to-rem(24px);
-        margin-inline-start: px-to-rem(8px);
+        margin-inline-start: spacing(2);
         content: "";
         @include dataurlicon("arrowright", $color-link-text-default);
 

package/scss/components/_promocard.scss

@@ -104,7 +104,7 @@
       }
 
       &#{$self}__theme__light:not(:hover) #{$self}--title {
-        color: $brand-ilo-grey-charcoal;
+        color: $brand-ilo-black;
         @include globaltransition("color");
       }