@ilo-org/styles 1.2.3 → 1.3.1

package/scss/components/_fieldset.scss

@@ -22,14 +22,18 @@
     @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
 
     .ilo--tooltip--wrapper {
-      top: calc(#{spacing(1)} / 2);
+      top: px-to-rem(-1px);
     }
   }
 
   &--legend {
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
     @include font-styles("label-medium");
+    line-height: px-to-rem(20px);
   }
 
   &--direction__column {

package/scss/components/_footer.scss

@@ -3,62 +3,6 @@
 @import "../animations";
 @import "../mixins";
 
-// Properties common to the footer triangle whever they appear
-@mixin footer-triangle-props {
-  background-size: contain;
-  background-repeat: no-repeat;
-  content: "";
-  height: 100%;
-  min-width: 409.5px;
-  position: absolute;
-  width: 28.8%;
-  z-index: 0;
-  @include dataurlicon("footertriangle", $color-base-blue-medium);
-}
-
-@mixin footer-triangle($position: bottom-right) {
-  // The triangle is placed as an after element on
-  // the main footer element on desktop and as a before
-  // element on mobile
-  @if ($position == top-right) {
-    &:after {
-      @include footer-triangle-props;
-      background-position: right top;
-      bottom: auto;
-      top: 0;
-      right: 0;
-      transform: scaleY(1);
-    }
-  }
-
-  @if ($position == bottom-right) {
-    &:before {
-      @include footer-triangle-props;
-      bottom: 0;
-      right: 0;
-      transform: scaleY(-1);
-    }
-  }
-
-  @if ($position == top-left) {
-    &:after {
-      @include footer-triangle-props;
-      top: 0;
-      left: 0;
-      transform: scaleY(1) scaleX(-1);
-    }
-  }
-
-  @if ($position == bottom-left) {
-    &:before {
-      @include footer-triangle-props;
-      bottom: 0;
-      left: 0;
-      transform: scaleY(-1) scaleX(-1);
-    }
-  }
-}
-
 .ilo--footer {
   $c: &;
 
@@ -72,8 +16,6 @@
     padding: spacing(10) spacing(8) spacing(12);
     position: relative;
 
-    @include footer-triangle(bottom-right);
-
     &:after {
       content: "";
       border-bottom: px-to-rem(6px) solid $color-base-red-medium;
@@ -231,7 +173,7 @@
       transform: rotateX(180deg);
       transform-origin: center;
       width: px-to-rem(24px);
-      @include dataurlicon("arrow", $color-ux-labels-actionable);
+      @include dataurlicon("chevron_down", $color-ux-labels-actionable);
     }
 
     &:hover {
@@ -242,7 +184,7 @@
       @include globaltransition("color, background-color, border-color");
 
       &:after {
-        @include dataurlicon("arrow", $color-ux-labels-hover);
+        @include dataurlicon("chevron_down", $color-ux-labels-hover);
       }
     }
   }
@@ -296,8 +238,6 @@
   }
 
   @include breakpoint("lg") {
-    @include footer-triangle(top-right);
-
     &--main {
       display: grid;
       grid-template-columns: 0.25fr 0.33fr 0.09fr 0.33fr;
@@ -377,10 +317,6 @@
 
   /* RTL Styles */
   &[dir="rtl"] & {
-    &--main {
-      @include footer-triangle(bottom-left);
-    }
-
     .secondarylinks--list--item {
       &:before {
         content: none;
@@ -403,8 +339,6 @@
     }
 
     @include breakpoint("lg") {
-      @include footer-triangle(top-left);
-
       &--main {
         grid-template-columns: 0.33fr 0.09fr 0.33fr 0.25fr;
         grid-template-areas:

package/scss/components/_formcontrol.scss

@@ -169,10 +169,10 @@
     }
 
     div[class*="tooltip"] {
-      margin-left: spacing(2);
+      margin-left: calc(1 * var(--ilo-spacing-base));
 
       [dir="rtl"] & {
-        margin-right: spacing(2);
+        margin-right: calc(1 * var(--ilo-spacing-base));
       }
     }
   }
@@ -185,6 +185,6 @@
   }
 
   .ilo--tooltip--wrapper {
-    bottom: calc(#{spacing(1)} / 2);
+    bottom: px-to-rem(1);
   }
 }

package/scss/components/_image.scss

@@ -21,9 +21,9 @@
   }
 
   &--caption {
-    border-left: px-to-rem(3px) solid $color-ux-caption-border-left;
-    color: $color-font-caption;
-    font-weight: 400;
+    border-left: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
+    color: var(--ilo-color-gray-accessible);
+    font-weight: var(--ilo-font-weight-regular);
     margin-top: spacing(4);
     padding-left: spacing(2);
     @include font-styles("image-caption");
@@ -42,7 +42,7 @@
   [dir="rtl"] & {
     .ilo--image--caption {
       border-left: none;
-      border-right: 3px solid #b8c4cc;
+      border-right: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
       padding-left: 0;
       padding-right: spacing(2);
     }

package/scss/components/_linklist.scss

@@ -34,7 +34,7 @@
 
       .ilo--link-list--label {
         display: block;
-        padding-left: spacing(5);
+        padding-left: spacing(8);
         position: relative;
 
         &:before {
@@ -43,17 +43,14 @@
           background-size: contain;
           content: "";
           display: block;
-          height: px-to-rem(12px);
+          height: px-to-rem(24px);
+          width: px-to-rem(24px);
           left: 0;
           position: absolute;
           top: 50%;
           transform: translateY(-50%) rotate(-90deg);
           transform-origin: center;
-          width: px-to-rem(12px);
-          @include dataurlicon(
-            "equilateraltriangle",
-            $color-base-neutrals-light
-          );
+          @include dataurlicon("chevrondown", $color-base-neutrals-light);
         }
 
         [dir="rtl"] & {
@@ -71,7 +68,7 @@
       &:hover,
       &:focus {
         .ilo--link-list--label:before {
-          @include dataurlicon("equilateraltriangle", $color-link-text-hover);
+          @include dataurlicon("chevrondown", $color-link-text-hover);
         }
       }
     }
@@ -91,7 +88,7 @@
     padding-bottom: spacing(4);
     padding-inline-end: spacing(8);
     text-decoration: none;
-    @include dataurlicon("arrowright", $color-link-text-default);
+    @include dataurlicon("chevron_right", $color-link-text-default);
     @include globaltransition("color, background-color, border-color");
 
     &:visited {
@@ -112,7 +109,7 @@
       background-color: $color-base-blue-light;
       color: map-get($color, "link", "text", "hover");
       outline: none;
-      @include dataurlicon("arrowright", $color-link-text-hover);
+      @include dataurlicon("chevron_right", $color-link-text-hover);
       @include globaltransition("color, background-color, border-color");
     }
 
@@ -135,13 +132,13 @@
 
     .ilo--link-list--label {
       &:before {
-        @include dataurlicon("equilateraltriangle", $color-base-neutrals-white);
+        @include dataurlicon("chevrondown", $color-base-neutrals-white);
       }
     }
 
     .ilo--link-list--link {
       border-bottom: px-to-rem($borders-base) solid rgba(237, 240, 242, 0.4);
-      @include dataurlicon("arrowright", $color-base-neutrals-white);
+      @include dataurlicon("chevron_right", $color-base-neutrals-white);
 
       .ilo--link-list--label {
         color: $color-base-neutrals-white;
@@ -166,7 +163,7 @@
       &:hover,
       &:focus {
         outline: none;
-        @include dataurlicon("arrowright", $color-base-blue-medium);
+        @include dataurlicon("chevron_right", $color-base-blue-medium);
 
         .ilo--link-list--label {
           color: $color-base-blue-medium;

package/scss/components/_navigation.scss

@@ -131,13 +131,13 @@
         display: none;
 
         &--link {
-          @include dataurlicon("arrowleft", $brand-ilo-white);
+          @include dataurlicon("chevron_left", $brand-ilo-white);
           @include font-styles("language-switcher");
           appearance: none;
           background-color: inherit;
-          background-position: 16px 50%;
+          background-position: px-to-rem(12px) 50%;
           background-repeat: no-repeat;
-          background-size: 24px;
+          background-size: px-to-rem(24px);
           border: none;
           color: $brand-ilo-white;
           cursor: pointer;
@@ -154,19 +154,19 @@
 
           &:focus,
           &:hover {
-            @include dataurlicon("arrowleft", $brand-ilo-blue);
+            @include dataurlicon("chevron_left", $brand-ilo-blue);
             background-color: $brand-ilo-light-blue;
             color: $brand-ilo-blue;
           }
 
           [dir="rtl"] {
-            @include dataurlicon("arrowright", $brand-ilo-white);
+            @include dataurlicon("chevron_right", $brand-ilo-white);
             background-position: calc(100% - 16px) 50%;
             padding: 16px 36px 16px 16px;
 
             &:focus,
             &:hover {
-              @include dataurlicon("arrowright", $brand-ilo-blue);
+              @include dataurlicon("chevron_right", $brand-ilo-blue);
               background-color: $brand-ilo-light-blue;
               color: $brand-ilo-blue;
             }
@@ -346,7 +346,7 @@
   }
 
   &--trigger {
-    @include dataurlicon("arrowright", $brand-ilo-dark-blue);
+    @include dataurlicon("chevron_right", $brand-ilo-dark-blue);
     @include font-styles("nav-md");
 
     appearance: none;
@@ -369,13 +369,13 @@
 
     &:focus,
     &:hover {
-      @include dataurlicon("arrowright", $brand-ilo-blue);
+      @include dataurlicon("chevron_right", $brand-ilo-blue);
       background-color: $brand-ilo-light-blue;
       color: $brand-ilo-blue;
     }
 
     [dir="rtl"] & {
-      @include dataurlicon("arrowleft", $brand-ilo-dark-blue);
+      @include dataurlicon("chevron_left", $brand-ilo-dark-blue);
       background-color: $brand-ilo-white;
       background-position: 16px 55%;
       background-repeat: no-repeat;
@@ -384,14 +384,14 @@
 
       &:focus,
       &:hover {
-        @include dataurlicon("arrowleft", $brand-ilo-blue);
+        @include dataurlicon("chevron_left", $brand-ilo-blue);
         background-color: $brand-ilo-light-blue;
         color: $brand-ilo-blue;
       }
     }
 
     @include breakpoint("lg") {
-      @include dataurlicon("add", $brand-ilo-white);
+      @include dataurlicon("plus", $brand-ilo-white);
       @include font-styles("nav-bold-b-sm");
 
       background-color: $brand-ilo-dark-blue;
@@ -412,14 +412,14 @@
 
       &:focus,
       &:hover {
-        @include dataurlicon("add", $brand-ilo-blue);
+        @include dataurlicon("plus", $brand-ilo-blue);
         background-color: $brand-ilo-white;
         border-color: $brand-ilo-white;
         color: $brand-ilo-blue;
       }
 
       [dir="rtl"] & {
-        @include dataurlicon("add", $brand-ilo-white);
+        @include dataurlicon("plus", $brand-ilo-white);
         background-color: $brand-ilo-dark-blue;
         background-repeat: no-repeat;
         background-size: 20px;
@@ -428,7 +428,7 @@
 
         &:focus,
         &:hover {
-          @include dataurlicon("add", $brand-ilo-blue);
+          @include dataurlicon("plus", $brand-ilo-blue);
           background-color: $brand-ilo-white;
           color: $brand-ilo-blue;
         }
@@ -533,14 +533,14 @@
   }
 
   &--language--switcher--button {
-    @include dataurlicon("global", $brand-ilo-dark-blue);
+    @include dataurlicon("globe", $brand-ilo-dark-blue);
     @include font-styles("nav-md");
 
     appearance: none;
     background-color: $brand-ilo-white;
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
-    background-size: 16px;
+    background-size: 24px;
     background-position-y: center;
     border: none;
     color: $brand-ilo-dark-blue;
@@ -556,7 +556,7 @@
 
     &:focus,
     &:hover {
-      @include dataurlicon("global", $brand-ilo-blue);
+      @include dataurlicon("globe", $brand-ilo-blue);
       background-color: $brand-ilo-light-blue;
       color: $brand-ilo-blue;
     }
@@ -627,12 +627,12 @@
 
   &--button {
     @include font-styles("image-credit");
-    @include dataurlicon("global", $brand-ilo-white);
+    @include dataurlicon("globe", $brand-ilo-white);
     appearance: none;
     background-color: $brand-ilo-dark-blue;
     background-repeat: no-repeat;
-    background-position: 15px center;
-    background-size: 16px 16px;
+    background-position: px-to-rem(12px) center;
+    background-size: px-to-rem(24px);
     border: none;
     color: $brand-ilo-white;
     cursor: pointer;
@@ -644,14 +644,14 @@
 
     &:hover,
     &:focus {
-      @include dataurlicon("global", $brand-ilo-blue);
+      @include dataurlicon("globe", $brand-ilo-blue);
       background-color: $brand-ilo-light-blue;
       color: $brand-ilo-blue;
     }
 
     [dir="rtl"] & {
       padding: spacing(2) spacing(10) spacing(2) 30px;
-      background-position: calc(100% - 15px) center;
+      background-position: calc(100% - px-to-rem(12px)) center;
     }
   }
 
@@ -802,7 +802,7 @@
       padding: spacing(5) spacing(8) spacing(4) spacing(4);
 
       &::before {
-        @include dataurlicon("arrowright", $brand-ilo-dark-blue);
+        @include dataurlicon("chevron_right", $brand-ilo-dark-blue);
         background-position: 10% center;
         background-repeat: no-repeat;
         background-size: 24px;
@@ -825,7 +825,7 @@
 
       [dir="rtl"] & {
         &::before {
-          @include dataurlicon("arrowright", $brand-ilo-blue);
+          @include dataurlicon("chevron_right", $brand-ilo-blue);
           background-position: 10% center;
           background-repeat: no-repeat;
           background-size: 24px;

package/scss/components/_notification.scss

@@ -53,9 +53,9 @@
     width: calc(100% - 40px);
 
     &:before {
-      background-position: center px-to-rem(24px);
+      background-position: center px-to-rem(22px);
       background-repeat: no-repeat;
-      background-size: px-to-rem(16px);
+      background-size: px-to-rem(24px);
       content: "";
       display: block;
       height: 100%;
@@ -72,22 +72,28 @@
 
       .icon--error & {
         background-color: $color-ux-notification-type-error;
-        @include dataurlicon("error", $color-ux-notification-icon);
+        @include dataurlicon("notification_error", $color-ux-notification-icon);
       }
 
       .icon--info & {
         background-color: $color-ux-notification-type-info;
-        @include dataurlicon("info", $color-ux-notification-icon);
+        @include dataurlicon("notification_info", $color-ux-notification-icon);
       }
 
       .icon--success & {
         background-color: $color-ux-notification-type-success;
-        @include dataurlicon("success", $color-ux-notification-icon);
+        @include dataurlicon(
+          "notification_success",
+          $color-ux-notification-icon
+        );
       }
 
       .icon--warning & {
         background-color: $color-ux-notification-type-warning;
-        @include dataurlicon("warning", $color-ux-notification-icon);
+        @include dataurlicon(
+          "notification_warning",
+          $color-ux-notification-icon
+        );
       }
     }
   }

package/scss/components/_pagination.scss

@@ -10,10 +10,10 @@
   $self: &;
 
   &--link {
-    background: map-get($color, "ux", "pagination", "default", "background");
+    background: var(--ilo-color-gray-light);
     border: none;
     border-radius: 2px;
-    color: map-get($color, "ux", "pagination", "default", "icon");
+    color: var(--ilo-color-blue-dark);
     display: inline-block;
     font-family: var(--ilo-fonts-display);
     height: px-to-rem(40px);
@@ -28,31 +28,26 @@
       content: "";
       display: inline-block;
       left: 50%;
-      height: px-to-rem(16px);
+      height: px-to-rem(20px);
       position: absolute;
       top: 50%;
       transform: translate(-50%, -50%);
       transform-origin: center center;
-      width: px-to-rem(16px);
+      width: px-to-rem(20px);
     }
 
     &:hover {
-      background: map-get($color, "ux", "pagination", "hover", "background");
-      color: map-get($color, "ux", "pagination", "hover", "icon");
+      background: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
     }
 
     &.ilo--pagination--disable {
       opacity: 0.45;
       cursor: unset;
+      pointer-events: none;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
       }
     }
   }
@@ -63,7 +58,7 @@
       transform: translate(-50%, -50%) rotate(180deg);
 
       @include dataurlicon(
-        "doublearrow",
+        "double_chevron_right",
         map-get($color, "ux", "pagination", "default", "icon")
       );
     }
@@ -71,7 +66,7 @@
     &:hover {
       &::before {
         @include dataurlicon(
-          "doublearrow",
+          "double_chevron_right",
           map-get($color, "ux", "pagination", "hover", "icon")
         );
       }
@@ -81,17 +76,11 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
           @include dataurlicon(
-            "doublearrow",
+            "double_chevron_right",
             map-get($color, "ux", "pagination", "default", "icon")
           );
         }
@@ -102,10 +91,10 @@
   &--prev-page {
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
-      width: px-to-rem(10px);
+      width: px-to-rem(20px);
 
       @include dataurlicon(
-        "paginationarrow",
+        "chevron_right",
         map-get($color, "ux", "pagination", "default", "icon")
       );
     }
@@ -113,7 +102,7 @@
     &:hover {
       &::before {
         @include dataurlicon(
-          "paginationarrow",
+          "chevron_right",
           map-get($color, "ux", "pagination", "hover", "icon")
         );
       }
@@ -123,17 +112,11 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
           @include dataurlicon(
-            "paginationarrow",
+            "chevron_right",
             map-get($color, "ux", "pagination", "default", "icon")
           );
         }
@@ -144,10 +127,10 @@
   &--next-page {
     &::before {
       transform: translate(-50%, -50%) rotate(0);
-      width: px-to-rem(10px);
+      width: px-to-rem(20px);
 
       @include dataurlicon(
-        "paginationarrow",
+        "chevron_right",
         map-get($color, "ux", "pagination", "default", "icon")
       );
     }
@@ -155,7 +138,7 @@
     &:hover {
       &::before {
         @include dataurlicon(
-          "paginationarrow",
+          "chevron_right",
           map-get($color, "ux", "pagination", "hover", "icon")
         );
       }
@@ -165,17 +148,11 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
           @include dataurlicon(
-            "paginationarrow",
+            "chevron_right",
             map-get($color, "ux", "pagination", "default", "icon")
           );
         }
@@ -186,7 +163,7 @@
   &--last-page {
     &::before {
       @include dataurlicon(
-        "doublearrow",
+        "double_chevron_right",
         map-get($color, "ux", "pagination", "default", "icon")
       );
     }
@@ -194,7 +171,7 @@
     &:hover {
       &::before {
         @include dataurlicon(
-          "doublearrow",
+          "double_chevron_right",
           map-get($color, "ux", "pagination", "hover", "icon")
         );
       }
@@ -204,17 +181,11 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
           @include dataurlicon(
-            "paginationarrow",
+            "chevron_right",
             map-get($color, "ux", "pagination", "default", "icon")
           );
         }