@ilo-org/styles 0.11.3-next.3 → 0.12.0

package/scss/components/_dropdown.scss

@@ -20,13 +20,10 @@
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(45px);
-  @include spacingvalues("margin", "input", "formelements");
+  margin: spacing(0);
   outline: none;
   overflow: hidden;
-  padding-left: 16px;
-  padding-right: 56px;
-  padding-bottom: 0;
-  padding-top: 0;
+  padding: 0 spacing(14) 0 spacing(4);
   text-overflow: ellipsis;
   white-space: nowrap;
   width: calc(100% - 78px);
@@ -130,4 +127,18 @@
     );
     @include bordervalues("input", "formelements", "error");
   }
+  [dir="rtl"] & {
+    padding: 0 spacing(4) 0 spacing(14);
+    background-position: calc(0% + 14px) center, 0% center;
+    background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
+      linear-gradient(
+        to left,
+        transparent 0%,
+        transparent calc(50% - 0.81px),
+        $color-formelements-input-default-border-right calc(50% - 0.8px),
+        $color-formelements-input-default-border-right calc(50% + 0.8px),
+        rgba(237, 240, 242, 1) calc(50% + 0.81px),
+        rgba(237, 240, 242, 1) 100%
+      );
+  }
 }

package/scss/components/_factlistcard.scss

@@ -11,43 +11,30 @@
       --max-width: #{px-to-rem(375px)};
 
       border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-      padding: px-to-rem(24px) px-to-rem(48px);
+      padding: spacing(10) spacing(6) spacing(12);
 
       @include cornercut(72px, 40px);
 
       @include breakpoint("large") {
-        padding: px-to-rem(40px) px-to-rem(56px);
+        padding: spacing(12) spacing(10) spacing(14);
       }
 
       &#{$self}__size {
         &__wide {
           --max-width: #{px-to-rem(856px)};
 
-          padding: px-to-rem(40px) px-to-rem(52px);
+          padding: spacing(12) spacing(10) spacing(14);
 
           @include breakpoint("medium") {
-            padding: px-to-rem(40px) px-to-rem(60px);
             @include cornercut(87px, 48px);
           }
         }
 
-        // &__standard {
-        //   padding: px-to-rem(40px) px-to-rem(52px);
-
-        //   @include breakpoint("medium") {
-        //     padding: px-to-rem(40px) px-to-rem(60px);
-        //   }
-        // }
-
         &__narrow {
           --max-width: #{px-to-rem(375px)};
 
-          padding: px-to-rem(24px) px-to-rem(48px);
+          padding: spacing(10) spacing(6) spacing(12);
           @include cornercut(72px, 40px);
-
-          @include breakpoint("medium") {
-            padding: px-to-rem(24px) px-to-rem(48px);
-          }
         }
       }
 

package/scss/components/_featurecard.scss

@@ -24,6 +24,10 @@
           &--link {
             color: $brand-ilo-white;
             @include dataurlicon("arrowright", $brand-ilo-white);
+
+            [dir="rtl"] & {
+              @include dataurlicon("arrowleft", $brand-ilo-white);
+            }
           }
         }
 
@@ -34,6 +38,10 @@
             &--link {
               color: $brand-ilo-blue;
               @include dataurlicon("arrowright", $brand-ilo-blue);
+
+              [dir="rtl"] & {
+                @include dataurlicon("arrowleft", $brand-ilo-blue);
+              }
             }
           }
         }
@@ -72,8 +80,8 @@
         &--link,
         &--link:hover {
           border-bottom: none;
-          padding-left: px-to-rem(24px);
-          padding-right: px-to-rem(24px);
+          padding-left: spacing(6);
+          padding-right: spacing(6);
         }
       }
 
@@ -101,10 +109,6 @@
           @include breakpoint("medium") {
             #{$self}--wrap {
               flex-direction: row;
-
-              .right-to-left & {
-                flex-direction: row-reverse;
-              }
             }
 
             #{$self}--content {
@@ -178,7 +182,7 @@
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
-        padding: px-to-rem(24px) px-to-rem(24px) px-to-rem(40px);
+        padding: spacing(6) spacing(6) spacing(10);
       }
 
       &#{$self}__linklist {

package/scss/components/_fieldset.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@use "sass:math";
 @import "../mixins";
 
 .ilo--fieldset {
@@ -19,6 +20,10 @@
 
   &--legend-wrapper {
     @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
+
+    .ilo--tooltip--wrapper {
+      top: math.div(spacing(1), 2);
+    }
   }
 
   &--legend {
@@ -103,7 +108,6 @@
   }
 
   .ilo--tooltip--wrapper {
-    margin-left: 8px;
-    margin-top: 3px;
+    margin-left: spacing(1);
   }
 }

package/scss/components/_file-upload.scss

@@ -20,7 +20,6 @@
     display: inline-block;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "label");
-    padding: 0;
     @include borderradius("button");
     @include boxpadding("button", "medium");
     @include font-styles("label-medium");
@@ -80,8 +79,8 @@
     order: 4;
     display: flex;
     flex-flow: column;
-    padding-top: px-to-rem($spacing-padding-1);
-    gap: px-to-rem($spacing-padding-1);
+    padding-top: spacing(2);
+    gap: spacing(2);
   }
 
   &--list-item {
@@ -92,10 +91,8 @@
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
     @include font-styles("label-medium");
-    height: px-to-rem(
-      map-get($spacing, "formelements", "uploadedfile", "default", "height")
-    );
+    height: px-to-rem(48px);
     outline: none;
-    @include spacingvalues("padding", "uploadedfile", "formelements");
+    padding: spacing(3) spacing(3) spacing(4);
   }
 }

package/scss/components/_footer.scss

@@ -69,7 +69,7 @@
   overflow: hidden;
 
   &--main {
-    padding: px-to-rem(40px) px-to-rem(32px);
+    padding: spacing(10) spacing(8) spacing(12);
     position: relative;
 
     @include footer-triangle(bottom-right);
@@ -95,11 +95,13 @@
   }
 
   &--secondary {
+    [class*="container"] {
+      padding: 0;
+    }
+
     background-color: $color-base-neutrals-lighter;
-    padding-top: px-to-rem(36px);
-    min-height: px-to-rem(
-      map-get($spacing, "ux", "readmore", "default", "height")
-    );
+    padding: spacing(8) spacing(4) 0;
+    min-height: px-to-rem(56px);
   }
 
   &--headline {
@@ -116,21 +118,21 @@
       "body-xxs",
       "display"
     );
-    margin-top: px-to-rem(22px);
+    margin-top: spacing(5);
   }
 
   &--subhead {
     color: #bedcfa;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
-    margin-top: px-to-rem(10px);
+    margin-top: spacing(1);
     @include font-styles("body-xxs");
     line-height: px-to-rem(18.56px);
-    margin-bottom: px-to-rem(45px);
+    margin-bottom: spacing(12);
   }
 
   .address {
-    margin-bottom: px-to-rem(39px);
+    margin-bottom: spacing(5);
   }
 
   .address--line {
@@ -147,11 +149,11 @@
   }
 
   .connect {
-    margin: px-to-rem(55px) 0;
+    margin: spacing(12) 0 spacing(10);
   }
 
   .social--links {
-    margin-bottom: px-to-rem(45px);
+    margin-bottom: spacing(10);
   }
 
   .legal,
@@ -171,7 +173,7 @@
   .secondarylinks--list--item {
     &:before {
       content: "|";
-      margin: px-to-rem(4px);
+      margin: spacing(1);
     }
   }
 
@@ -216,16 +218,15 @@
     // Mobile styles
     justify-content: center;
     border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
-    margin: px-to-rem(12px) auto 0 auto;
-    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-2)
-      px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-2);
+    margin: spacing(3) auto 0 auto;
+    padding: spacing(4);
 
     &:after {
       background-repeat: no-repeat;
       content: "";
       height: px-to-rem(24px);
       position: relative;
-      margin-left: px-to-rem(8px);
+      margin-left: spacing(2);
       bottom: px-to-rem(3px);
       transform: rotateX(180deg);
       transform-origin: center;
@@ -250,7 +251,7 @@
     &--main {
       display: grid;
       grid-template-columns: minmax(0, 50%) minmax(0, 50%);
-      gap: 0px 64px;
+      gap: 0px spacing(16);
       grid-template-areas:
         "site-info address"
         "site-info links"
@@ -258,7 +259,7 @@
         "site-info subscribe";
       align-content: start;
       align-items: start;
-      padding: px-to-rem(40px) px-to-rem(20px);
+      padding: spacing(10) spacing(5) spacing(24);
     }
 
     .site--info {
@@ -283,8 +284,8 @@
     }
 
     &--secondary {
-      padding-top: px-to-rem(18px);
-      padding-bottom: px-to-rem(18px);
+      padding-top: spacing(4);
+      padding-bottom: spacing(4);
       position: relative;
       z-index: 1;
     }
@@ -301,13 +302,13 @@
       display: grid;
       grid-template-columns: 0.25fr 0.33fr 0.09fr 0.33fr;
       grid-template-rows: auto auto;
-      gap: 0px 64px;
+      gap: 0px spacing(16);
       grid-template-areas:
         "site-info address  .  connect"
         "site-info links    .  subscribe";
 
-      padding-top: px-to-rem(44px);
-      padding-bottom: px-to-rem(51px);
+      padding-top: spacing(10);
+      padding-bottom: spacing(24);
 
       &:before {
         content: none;
@@ -333,9 +334,13 @@
       justify-self: start;
     }
 
+    .address {
+      margin-bottom: spacing(5);
+    }
+
     &--secondary {
-      padding-top: px-to-rem(18px);
-      padding-bottom: px-to-rem(18px);
+      padding-top: spacing(4);
+      padding-bottom: spacing(4);
       position: relative;
 
       [class*="container"] {
@@ -354,7 +359,7 @@
 
       .secondarylinks--list--item {
         &:before {
-          margin: px-to-rem(8px);
+          margin: spacing(2);
         }
       }
     }
@@ -362,7 +367,7 @@
     .anchorlink {
       margin: 0;
       border: none;
-      padding: 0.25rem;
+      padding: spacing(1);
 
       &:hover {
         margin-bottom: -0.1071811361rem;
@@ -371,36 +376,11 @@
   }
 
   /* RTL Styles */
-  .right-to-left & {
-    * {
-      text-align: right;
-    }
-
+  &[dir="rtl"] & {
     &--main {
       @include footer-triangle(bottom-left);
     }
 
-    .subscribe a {
-      align-self: flex-end;
-    }
-
-    &--secondary {
-      [class*="container"] {
-        flex-direction: row-reverse;
-      }
-
-      &--details {
-        display: flex;
-        flex-flow: row-reverse wrap;
-      }
-    }
-
-    .secondarylinks {
-      &--list {
-        flex-direction: row-reverse;
-      }
-    }
-
     .secondarylinks--list--item {
       &:before {
         content: none;
@@ -408,7 +388,7 @@
 
       &:after {
         content: "|";
-        margin: px-to-rem(4px);
+        margin: spacing(1);
       }
     }
 

package/scss/components/_form.scss

@@ -3,7 +3,7 @@
 @import "../mixins";
 
 .ilo--form {
-  $gap: 32px;
+  $gap: spacing(8);
   $c: &;
 
   box-sizing: border-box;

package/scss/components/_formcontrol.scss

@@ -10,7 +10,7 @@
   display: inline-grid;
   grid-template-rows: auto;
   grid-template-columns: auto;
-  gap: px-to-rem($spacing-padding-1);
+  gap: spacing(2);
 
   &__label-placement {
     // Label is to the flex start of form element
@@ -169,7 +169,11 @@
     }
 
     div[class*="tooltip"] {
-      margin-left: px-to-rem(math.div($spacing-padding-1, 2));
+      margin-left: spacing(2);
+
+      [dir="rtl"] & {
+        margin-right: spacing(2);
+      }
     }
   }
 
@@ -179,4 +183,8 @@
     font-family: $fonts-copy;
     @include font-styles("body-xxs");
   }
+
+  .ilo--tooltip--wrapper {
+    bottom: math.div(spacing(1), 2);
+  }
 }

package/scss/components/_hero.scss

@@ -6,7 +6,7 @@
   $c: &;
 
   // Additional offset to add for justify: offset
-  --added-offset: 0;
+  --added-offset: 0px;
 
   // Total offset from the edge of the window
   --base-offset: calc(((100vw - #{$layout-max-width}) / 2));
@@ -16,7 +16,7 @@
   // or `offset`
   --card-padding-start: #{$spacing-hero-card-padding-x-lg};
 
-  // Squishy padding makes it so we can have a flexible padding value
+  // Squeezy padding makes it so we can have a flexible padding value
   // that will be somewhere between 16px and the card's fixed padding
   // depending on how far the card is from the edge of the screen
   $squeezy-padding-start: max(
@@ -38,19 +38,21 @@
   width: 100%;
   display: grid;
   position: relative;
-  grid-template-rows:
-    minmax($spacing-hero-image-max-height, 1fr)
-    $spacing-hero-tooltip-height
-    $spacing-hero-card-corner-cut-height-sm
-    auto;
   grid-template-columns: 1fr;
   overflow: hidden;
+  @include hero-grid-rows(1rem);
+
+  &--image {
+    display: grid;
+    @include hero-grid-rows();
+  }
 
   &--breadcrumbs {
     display: none;
   }
 
-  &--figure {
+  &--background {
+    display: grid;
     background-color: map-get($color, "base", "blue", "light");
     position: relative;
     grid-area: 1 / 1 / 4 / 2;
@@ -239,7 +241,7 @@
       }
     }
 
-    &--figure {
+    &--background {
       grid-area: 1 / 1 / 5 / 5;
 
       #{$c}__card-align__center & {
@@ -345,8 +347,7 @@
     }
   }
 
-  // Layout for RTL languages
-  .right-to-left & {
+  [dir="rtl"] & {
     &--caption {
       &--wrapper {
         @include caption-icon-wrapper(
@@ -354,122 +355,29 @@
           $spacing-hero-tooltip-width,
           $spacing-hero-tooltip-height
         );
-        position: absolute;
         right: 0;
+        position: absolute;
       }
     }
 
     @include breakpoint("large") {
-      &__card-justify {
-        &__start {
-          --col-1-lg: 1fr;
-          --col-2-lg: #{$spacing-hero-tooltip-width};
-          --col-3-lg: var(--card-width);
-          --col-4-lg: #{$card-offset};
-        }
-
-        &__offset {
-          --col-1-lg: 1fr;
-          --col-2-lg: #{$spacing-hero-tooltip-width};
-          --col-3-lg: var(--card-width);
-          --col-4-lg: #{$card-offset};
-        }
-
-        &__center {
-          --col-1-lg: calc(
-            ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
-          );
-          --col-2-lg: #{$spacing-hero-tooltip-width};
-          --col-3-lg: var(--card-width);
-          --col-4-lg: calc((100% - var(--card-width)) / 2);
-        }
-      }
-
-      &__card-align {
-        &__center {
-          #{$c}--card {
-            grid-area: 3 / 3 / 4 / 4;
-          }
-
-          #{$c}--caption {
-            grid-area: 5 / 4 / 6 / 5;
-
-            &--wrapper {
-              right: 0;
-              left: initial;
-              position: absolute;
-            }
-          }
-        }
-
-        &__bottom {
-          #{$c}--caption {
-            grid-area: 4 / 4 / 5 / 5;
-
-            &--wrapper {
-              position: absolute;
-              right: 0;
-              bottom: 0;
-              left: initial;
-            }
-          }
-        }
+      &__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
+            );
 
-        &__bottom#{$c}__card-justify__start {
-          #{$c}--caption {
-            grid-area: 2 / 3 / 3 / 4;
-
-            &--wrapper {
-              @include caption-icon-wrapper(
-                "left",
-                $spacing-hero-tooltip-width,
-                $spacing-hero-tooltip-height
-              );
-
-              position: absolute;
-              left: initial;
-              right: 0;
-            }
+            position: absolute;
+            left: initial;
+            right: 0;
+            bottom: 0;
           }
         }
       }
-
-      &--card-offset {
-        grid-area: 3 / 4 / 6 / 5;
-
-        &:after {
-          right: initial;
-          left: -1px;
-        }
-      }
-
-      &--card {
-        grid-area: 3 / 3 / 6 / 4;
-      }
-
-      &--breadcrumbs-offset {
-        grid-area: 1 / 4 / 2 / 5;
-      }
-
-      &--breadcrumbs {
-        grid-area: 1 / 4 / 2 / 1;
-        flex-direction: row-reverse;
-      }
-
-      &--caption {
-        grid-area: 4 / 2 / 5 / 3;
-
-        &--wrapper {
-          right: 2px;
-          left: initial;
-
-          @include caption-icon-wrapper(
-            "left",
-            $spacing-hero-tooltip-width,
-            $spacing-hero-tooltip-height
-          );
-        }
-      }
     }
   }
 }

package/scss/components/_herocard.scss

@@ -15,10 +15,6 @@
     padding-inline-start: var(--card-padding-start);
   }
 
-  .right-to-left & {
-    direction: rtl;
-  }
-
   &--title-link {
     color: inherit;
     text-decoration: none;
@@ -78,7 +74,7 @@
       $spacing-hero-card-corner-cut-height-sm
     );
 
-    .right-to-left & {
+    [dir="rtl"] & {
       @include cornercut(
         $spacing-hero-card-corner-cut-width-sm,
         $spacing-hero-card-corner-cut-height-sm,
@@ -92,7 +88,7 @@
         $spacing-hero-card-corner-cut-height-lg
       );
 
-      .right-to-left & {
+      [dir="rtl"] & {
         @include cornercut(
           $spacing-hero-card-corner-cut-width-lg,
           $spacing-hero-card-corner-cut-height-lg,