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

package/scss/components/_image.scss

@@ -21,12 +21,11 @@
   }
 
   &--caption {
-    border-left: $spacing-ux-caption-border-left solid
-      $color-ux-caption-border-left;
+    border-left: px-to-rem(3px) solid $color-ux-caption-border-left;
     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"));
+    margin-top: spacing(4);
+    padding-left: spacing(2);
     @include font-styles("image-caption");
   }
 
@@ -36,16 +35,16 @@
     position: absolute;
 
     @include breakpoint("large") {
-      bottom: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
+      bottom: -#{px-to-rem(4px)};
     }
   }
 
-  .right-to-left & {
+  [dir="rtl"] & {
     .ilo--image--caption {
       border-left: none;
       border-right: 3px solid #b8c4cc;
       padding-left: 0;
-      padding-right: px-to-rem(map-get($spacing, "padding-1"));
+      padding-right: spacing(2);
     }
 
     .ilo--credit {

package/scss/components/_input.scss

@@ -18,13 +18,11 @@
   font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
-  height: px-to-rem(
-    map-get($spacing, "formelements", "input", "default", "height")
-  );
-  @include spacingvalues("margin", "input", "formelements");
+  height: px-to-rem(48px);
+  margin: spacing(0);
   outline: none;
-  @include spacingvalues("padding", "input", "formelements");
-  width: map-get($spacing, "formelements", "input", "default", "width");
+  padding: spacing(4) spacing(3) spacing(4) spacing(3);
+  width: 100%;
 
   &:focus {
     background-color: map-get(
@@ -35,7 +33,7 @@
       "background"
     );
     @include bordervalues("input", "formelements", "focus");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+    padding-left: spacing(3);
     outline: none;
   }
 

package/scss/components/_linklist.scss

@@ -19,7 +19,7 @@
       @include textmargin("margin-bottom", 27px, "headline-6", "display", 0, 0);
       @include textmargin(
         "margin-top",
-        $spacing-padding-6,
+        $spacing-spacing-12,
         "headline-6",
         "display",
         0,
@@ -30,11 +30,11 @@
 
   &--links--item {
     &.indented {
-      padding-left: px-to-rem($spacing-padding-4);
+      padding-left: spacing(8);
 
       .ilo--link-list--label {
         display: block;
-        padding-left: px-to-rem($spacing-padding-3);
+        padding-left: spacing(5);
         position: relative;
 
         &:before {
@@ -43,18 +43,27 @@
           background-size: contain;
           content: "";
           display: block;
-          height: px-to-rem($spacing-padding-1-5);
+          height: px-to-rem(12px);
           left: 0;
           position: absolute;
           top: 50%;
           transform: translateY(-50%) rotate(-90deg);
           transform-origin: center;
-          width: px-to-rem($spacing-padding-1-5);
+          width: px-to-rem(12px);
           @include dataurlicon(
             "equilateraltriangle",
             $color-base-neutrals-light
           );
         }
+
+        [dir="rtl"] & {
+          padding-right: spacing(6);
+          &:before {
+            transform: translateY(-50%) rotate(90deg);
+            left: unset;
+            right: 0;
+          }
+        }
       }
 
       & .ilo--link-list--link:hover,
@@ -69,18 +78,18 @@
   }
 
   &--link {
-    background-position: calc(100% - $spacing-padding-0-5) center;
+    background-position: calc(100% - 4px) center;
     background-repeat: no-repeat;
-    background-size: px-to-rem($spacing-padding-3) px-to-rem($spacing-padding-3);
+    background-size: px-to-rem(24px) px-to-rem(24px);
     border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;
     color: map-get($color, "link", "text", "default");
     display: block;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
     @include font-styles("body-small");
-    @include textmargin("padding-bottom", 25px, "body-small", "display", 0, 0);
-    @include textmargin("padding-top", 25px, "body-small", "display", 0, 0);
-    padding-right: px-to-rem($spacing-padding-4);
+    padding-top: spacing(4);
+    padding-bottom: spacing(4);
+    padding-right: spacing(8);
     text-decoration: none;
     @include dataurlicon("arrowright", $color-link-text-default);
     @include globaltransition("color, background-color, border-color");
@@ -107,9 +116,10 @@
       @include globaltransition("color, background-color, border-color");
     }
 
-    .right-to-left & {
-      background-position: $spacing-padding-0-5 center;
+    [dir="rtl"] & {
+      background-position: px-to-rem(4px) center;
       @include dataurlicon("arrowleft", $color-link-text-default);
+      padding-right: 0;
 
       &:hover,
       &:focus {
@@ -165,8 +175,8 @@
         }
       }
 
-      .right-to-left & {
-        background-position: $spacing-padding-0-5 center;
+      [dir="rtl"] & {
+        background-position: px-to-rem(4px) center;
         @include dataurlicon("arrowleft", $color-base-neutrals-white);
 
         &:hover,
@@ -176,12 +186,6 @@
       }
     }
   }
-
-  .right-to-left & {
-    * {
-      text-align: right;
-    }
-  }
 }
 
 .wingsuit-body .ilo--link-list--dark {

package/scss/components/_list.scss

@@ -22,9 +22,8 @@
         width: px-to-rem(12px);
         @include dataurlicon("listarrow", $color-base-neutrals-light);
       }
-      margin-bottom: px-to-rem(map-get($spacing, "padding-4"));
-      margin-left: px-to-rem(12px);
-      padding-left: px-to-rem(12px);
+      margin-left: spacing(3);
+      padding-left: spacing(2);
       position: relative;
     }
   }
@@ -39,33 +38,37 @@
   }
 
   &--horizontal {
+    li {
+      &::before {
+        content: none;
+      }
+    }
     align-items: center;
     display: flex;
     flex-wrap: wrap;
     list-style: none;
 
     .ilo--list__title {
-      margin-bottom: px-to-rem(map-get($spacing, "base"));
-      margin-right: px-to-rem(map-get($spacing, "ui-padding-xxl") - 3px);
+      margin-bottom: spacing(2);
+      margin-right: spacing(9);
     }
 
     .ilo--list__item {
-      margin-bottom: px-to-rem(map-get($spacing, "base"));
+      margin-bottom: spacing(2);
       margin-left: 0;
-      margin-right: px-to-rem(map-get($spacing, "ui-padding-xxl") - 3px);
+      margin-right: spacing(10);
       padding-left: 0;
     }
   }
 
   &__title {
     @include font-styles("headline-6");
-    margin-bottom: px-to-rem(21px);
+    margin-bottom: spacing(6);
     font-family: $fonts-display;
     font-weight: 700;
 
     @include breakpoint("medium") {
       @include font-styles("headline-5");
-      margin-bottom: px-to-rem(27px);
     }
   }
 
@@ -73,16 +76,9 @@
     @include font-styles("body-small");
 
     font-family: $fonts-copy;
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "ui-padding-lg"),
-      "body-small",
-      "copy",
-      0,
-      0
-    );
-    margin-left: px-to-rem(map-get($spacing, "ui-padding-lg"));
-    padding-left: px-to-rem(map-get($spacing, "base") - 5px);
+    margin-bottom: spacing(4);
+    margin-left: spacing(5);
+    padding-left: spacing(1);
 
     b,
     strong {
@@ -92,7 +88,6 @@
 
     @include breakpoint("medium") {
       @include font-styles("base");
-      @include textmargin("margin-bottom", 20px, "base", "copy", 0, 0);
     }
   }
 }

package/scss/components/_loading.scss

@@ -36,8 +36,8 @@
         background-size: contain;
         content: "";
         display: block;
-        height: px-to-rem($spacing-padding-12);
-        width: px-to-rem($spacing-padding-12);
+        height: px-to-rem(96px);
+        width: px-to-rem(96px);
       }
     }
   }
@@ -65,9 +65,9 @@
         background-size: contain;
         content: "";
         display: block;
-        height: px-to-rem($spacing-padding-3);
-        margin-right: px-to-rem($spacing-padding-1-5);
-        width: px-to-rem($spacing-padding-3);
+        height: px-to-rem(24px);
+        margin-right: spacing(3);
+        width: px-to-rem(24px);
       }
     }
 
@@ -79,9 +79,9 @@
         background-size: contain;
         content: "";
         display: block;
-        height: px-to-rem($spacing-padding-3);
-        margin-right: px-to-rem($spacing-padding-1-5);
-        width: px-to-rem($spacing-padding-3);
+        height: px-to-rem(24px);
+        margin-right: spacing(3);
+        width: px-to-rem(24px);
       }
     }
   }

package/scss/components/_multilinkcard.scss

@@ -11,7 +11,7 @@
       // Defaults to standard size
       --max-width: #{px-to-rem(536px)};
 
-      padding: px-to-rem(24px);
+      padding: spacing(6);
 
       #{$self}--image--wrapper {
         display: none;
@@ -20,50 +20,35 @@
       #{$self}--content {
         #{$self}--image--wrapper {
           display: block;
+          margin-bottom: spacing(8);
         }
       }
 
       @include breakpoint("medium") {
-        padding: px-to-rem(40px);
+        padding: spacing(10);
       }
 
       @include breakpoint("large") {
-        padding: px-to-rem(56px) px-to-rem(48px);
+        padding: spacing(14) spacing(12);
       }
 
       #{$self}--title {
         @include font-styles("headline-5");
-        @include textmargin(
-          "margin-bottom",
-          24px,
-          "headline-5",
-          "display",
-          0,
-          0
-        );
+        margin-bottom: spacing(8);
         color: $brand-ilo-grey-charcoal;
 
         @include breakpoint("medium") {
           @include font-styles("headline-4");
-          @include textmargin(
-            "margin-bottom",
-            24px,
-            "headline-4",
-            "display",
-            0,
-            0
-          );
         }
       }
 
       #{$self}--intro {
         @include font-styles("body-small");
-        @include textmargin("margin-bottom", 40px, "body-small", "copy", 0, 0);
+        margin-bottom: spacing(8);
         color: $brand-ilo-grey-charcoal;
 
         @include breakpoint("medium") {
           @include font-styles("base");
-          @include textmargin("margin-bottom", 40px, "base", "copy", 0, 0);
         }
       }
 
@@ -71,30 +56,13 @@
         &__standard {
           --max-width: #{px-to-rem(536px)};
 
-          padding: px-to-rem(48px) px-to-rem(40px);
-
-          @include breakpoint("medium") {
-            padding: px-to-rem(48px) px-to-rem(40px);
-          }
-
-          @include breakpoint("large") {
-            padding: px-to-rem(48px) px-to-rem(40px);
-          }
+          padding: spacing(12) spacing(10);
         }
 
         &__narrow {
           --max-width: #{px-to-rem(375px)};
 
-          padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-
-          @include breakpoint("medium") {
-            padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-          }
-
-          @include breakpoint("large") {
-            padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
-          }
-
+          padding: spacing(10) spacing(6) spacing(12);
           #{$self}--image--wrapper {
             display: none;
           }
@@ -102,35 +70,21 @@
           #{$self}--content {
             #{$self}--image--wrapper {
               display: block;
-              margin-bottom: px-to-rem(24px);
+              margin-bottom: spacing(6);
             }
           }
 
           #{$self}--title {
             @include breakpoint("medium") {
               @include font-styles("headline-5");
-              @include textmargin(
-                "margin-bottom",
-                24px,
-                "headline-5",
-                "display",
-                0,
-                0
-              );
+              margin-bottom: spacing(6);
             }
           }
 
           #{$self}--intro {
             @include breakpoint("medium") {
               @include font-styles("body-small");
-              @include textmargin(
-                "margin-bottom",
-                40px,
-                "body-small",
-                "copy",
-                0,
-                0
-              );
+              margin-bottom: spacing(6);
             }
           }
         }
@@ -139,28 +93,24 @@
         &__fluid {
           --max-width: #{px-to-rem(1104px)};
 
-          padding: px-to-rem(40px) px-to-rem(24px) px-to-rem(48px);
+          padding: spacing(10) spacing(6) spacing(12);
+
+          #{$self}--title {
+            margin-bottom: spacing(3);
+          }
 
           @include breakpoint("medium") {
-            padding: px-to-rem(56px) px-to-rem(48px);
+            padding: spacing(14) spacing(12);
 
             &#{$self}__align__right {
               #{$self}--wrap {
                 flex-direction: row-reverse;
-
-                .right-to-left & {
-                  flex-direction: row;
-                }
               }
             }
 
             #{$self}--wrap {
               display: flex;
               column-gap: px-to-rem(32px);
-
-              .right-to-left & {
-                flex-direction: row-reverse;
-              }
             }
 
             #{$self}--image--wrapper {
@@ -180,7 +130,6 @@
       }
 
       .ilo--link-list {
-        margin-top: px-to-rem(35px);
         position: relative;
         z-index: 3;
       }