@ilo-org/styles 1.2.2 → 1.3.0

package/scss/components/_dropdown.scss

@@ -28,10 +28,14 @@
   white-space: nowrap;
   width: calc(100% - 78px);
 
-  background-position: calc(100% - 14px) center, 100% center;
+  background-position:
+    calc(100% - 14px) center,
+    100% center;
   background-repeat: no-repeat;
-  background-size: 24px 24px, 102px 100%;
-  background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
+  background-size:
+    24px 24px,
+    102px 100%;
+  background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
     linear-gradient(
       to right,
       transparent 0%,
@@ -58,7 +62,7 @@
     );
     @include bordervalues("input", "formelements", "hover");
     border-left-width: 2px;
-    background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-hover)}"),
+    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-hover)}"),
       linear-gradient(
         to right,
         transparent 0%,
@@ -81,7 +85,7 @@
     );
     @include bordervalues("input", "formelements", "focus");
     border-left-width: 2px;
-    background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-hover)}"),
+    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-hover)}"),
       linear-gradient(
         to right,
         transparent 0%,
@@ -94,10 +98,14 @@
   }
 
   &:active {
-    background-position: calc(100% - 14px) center, 100% center;
+    background-position:
+      calc(100% - 14px) center,
+      100% center;
     background-repeat: no-repeat;
-    background-size: 24px 24px, 102px 100%;
-    background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
+    background-size:
+      24px 24px,
+      102px 100%;
+    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
       linear-gradient(
         to right,
         transparent 0%,
@@ -129,8 +137,10 @@
   }
   [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)}"),
+    background-position:
+      calc(0% + 14px) center,
+      0% center;
+    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
       linear-gradient(
         to left,
         transparent 0%,

package/scss/components/_featurecard.scss

@@ -23,10 +23,10 @@
 
           &--link {
             color: $brand-ilo-white;
-            @include dataurlicon("arrowright", $brand-ilo-white);
+            @include dataurlicon("chevron_right", $brand-ilo-white);
 
             [dir="rtl"] & {
-              @include dataurlicon("arrowleft", $brand-ilo-white);
+              @include dataurlicon("chevron_left", $brand-ilo-white);
             }
           }
         }
@@ -37,10 +37,10 @@
           .ilo--link-list {
             &--link {
               color: $brand-ilo-blue;
-              @include dataurlicon("arrowright", $brand-ilo-blue);
+              @include dataurlicon("chevron_right", $brand-ilo-blue);
 
               [dir="rtl"] & {
-                @include dataurlicon("arrowleft", $brand-ilo-blue);
+                @include dataurlicon("chevron_left", $brand-ilo-blue);
               }
             }
           }

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;
             }
@@ -225,7 +225,9 @@
     position: absolute;
     top: 0;
     transform: translateX(100%);
-    transition: transform 225ms ease-out, visibility 225ms 0ms;
+    transition:
+      transform 225ms ease-out,
+      visibility 225ms 0ms;
     width: 100%;
     visibility: hidden;
 
@@ -317,7 +319,9 @@
     display: block;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     text-decoration: none;
-    transition: color 150ms ease-out, background 150ms ease-out;
+    transition:
+      color 150ms ease-out,
+      background 150ms ease-out;
 
     &:hover,
     &:focus {
@@ -342,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;
@@ -365,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;
@@ -380,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;
@@ -408,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;
@@ -424,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;
         }
@@ -529,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;
@@ -552,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;
     }
@@ -623,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;
@@ -640,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;
     }
   }
 
@@ -798,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;
@@ -821,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

@@ -5,8 +5,10 @@
 
 .ilo--notification {
   background-color: $color-ux-notification-background;
-  box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
-    0px 4px 8px rgba(30, 45, 190, 0.054), 0px 10px 20px rgba(30, 45, 190, 0.08),
+  box-shadow:
+    0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
+    0px 4px 8px rgba(30, 45, 190, 0.054),
+    0px 10px 20px rgba(30, 45, 190, 0.08),
     0px -4px 16px rgba(30, 45, 190, 0.054);
   border-radius: 2px;
   color: $color-ux-notification-text;
@@ -51,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%;
@@ -70,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
+        );
       }
     }
   }