@ilo-org/styles 0.1.1 → 0.1.3

package/scss/components/_credit.scss

@@ -79,4 +79,41 @@
       }
     }
   }
+
+  .right-to-left & {
+    &:after {
+      background-position: top left;
+      left: auto;
+      right: 100%;
+      transform: scaleX(-1);
+    }
+
+    @include breakpoint("large", true) {
+      &--label {
+        left: auto;
+        right: 0;
+
+        &:after {
+          background-position: top right;
+          @include dataurlicon(
+            "equilateraltriangle",
+            $color-base-neutrals-dark
+          );
+          left: auto;
+          right: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
+        }
+      }
+
+      &:before {
+        background-position: 4px center;
+        left: auto;
+        right: 0;
+      }
+
+      &:after {
+        left: auto;
+        right: px-to-rem(29px);
+      }
+    }
+  }
 }

package/scss/components/_dropdown.scss

@@ -16,12 +16,10 @@
   @include bordervalues("input", "formelements");
   border-radius: 0;
   box-sizing: content-box;
-  font-family: $fonts-display;
+  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")
-  );
+  height: px-to-rem(45px);
   @include spacingvalues("margin", "input", "formelements");
   outline: none;
   overflow: hidden;
@@ -33,9 +31,9 @@
   white-space: nowrap;
   width: calc(100% - 78px);
 
-  background-position: calc(100% - 14px) center;
+  background-position: calc(100% - 14px) center, 100% center;
   background-repeat: no-repeat;
-  background-size: 24px 24px, 72px 100%;
+  background-size: 24px 24px, 102px 100%;
   background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-actionable)}"),
     linear-gradient(
       to right,
@@ -43,8 +41,8 @@
       transparent calc(50% - 0.81px),
       $color-formelements-input-default-border-left calc(50% - 0.8px),
       $color-formelements-input-default-border-left calc(50% + 0.8px),
-      transparent calc(50% + 0.81px),
-      transparent 100%
+      rgba(237, 240, 242, 1) calc(50% + 0.81px),
+      rgba(237, 240, 242, 1) 100%
     );
 
   option {
@@ -95,6 +93,23 @@
       );
   }
 
+  &:active {
+    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)}"),
+      linear-gradient(
+        to right,
+        transparent 0%,
+        transparent calc(50% - 0.81px),
+        $color-formelements-input-default-border-left calc(50% - 0.8px),
+        $color-formelements-input-default-border-left calc(50% + 0.8px),
+        rgba(237, 240, 242, 1) calc(50% + 0.81px),
+        rgba(237, 240, 242, 1) 100%
+      );
+    @include bordervalues("input", "formelements");
+  }
+
   &:disabled {
     opacity: 45%;
     pointer-events: none;

package/scss/components/_fieldset.scss

@@ -18,6 +18,7 @@
   }
 
   &--helper {
+    color: $color-base-neutrals-medium;
     font-family: $fonts-copy;
     @include font-styles("body-xxs");
     @include textmargin(

package/scss/components/_footer.scss

@@ -34,7 +34,9 @@
   }
 
   &--logo {
+    min-width: 200px;
     max-width: 100%;
+    width: 35%;
   }
 
   &--secondary {
@@ -294,7 +296,7 @@
     }
 
     &--logo {
-      width: 100%;
+      width: 25%;
     }
 
     &--secondary {

package/scss/components/_image.scss

@@ -39,4 +39,18 @@
       bottom: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
     }
   }
+
+  .right-to-left & {
+    .ilo--image--caption {
+      border-left: none;
+      border-right: 3px solid #b8c4cc;
+      padding-left: 0;
+      padding-right: px-to-rem(map-get($spacing, "padding-1"));
+    }
+
+    .ilo--credit {
+      left: auto;
+      right: 0;
+    }
+  }
 }

package/scss/components/_input.scss

@@ -15,7 +15,7 @@
   );
   @include bordervalues("input", "formelements");
   box-sizing: border-box;
-  font-family: $fonts-display;
+  font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(
@@ -26,18 +26,6 @@
   @include spacingvalues("padding", "input", "formelements");
   width: map-get($spacing, "formelements", "input", "default", "width");
 
-  &:hover {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "hover",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "hover");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
-  }
-
   &:focus {
     background-color: map-get(
       $color,

package/scss/components/_linklist.scss

@@ -78,6 +78,7 @@
     @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);
     text-decoration: none;
     @include dataurlicon("arrowright", $color-link-text-default);
 

package/scss/components/_modal.scss

@@ -27,7 +27,8 @@
       .ilo--modal--wrapper {
         & > * {
           opacity: 1;
-          transition: opacity 1.5s ease-out 125ms;
+          transition-delay: 125ms;
+          @include globaltransition("opacity");
         }
       }
     }
@@ -57,10 +58,17 @@
   }
 
   .modal--close {
+    height: px-to-rem(40px);
     right: 0;
     position: absolute;
     top: 0;
+    width: px-to-rem(40px);
     z-index: 10004;
+
+    .ilo--icon {
+      left: px-to-rem(3px);
+      top: px-to-rem(3px);
+    }
   }
 
   @include breakpoint("medium") {

package/scss/components/_navigation.scss

@@ -4,7 +4,7 @@
 
 .ilo--header {
   $self: &;
-  overflow-x: hidden;
+  overflow: hidden;
   position: relative;
   z-index: 4;
 
@@ -117,6 +117,10 @@
       &--local {
         justify-content: space-between;
       }
+
+      .right-to-left & {
+        flex-direction: row-reverse;
+      }
     }
   }
 
@@ -126,6 +130,10 @@
     padding: 0 16px;
     width: 100%;
 
+    .right-to-left & {
+      direction: rtl;
+    }
+
     @include breakpoint("large") {
       display: flex;
       justify-content: space-between;
@@ -162,12 +170,17 @@
     padding: 20px 0;
     text-align: right;
 
+    .right-to-left & {
+      text-align: left;
+    }
+
     @include breakpoint("large") {
       display: block;
     }
 
     &--small {
       @include font-styles("tagline");
+      color: $brand-ilo-ramp-blue;
       display: block;
       font-weight: 500;
     }
@@ -236,7 +249,7 @@
 
       &:hover,
       &:focus {
-        background: $brand-ilo-white;
+        background: $brand-ilo-light-blue;
         color: $brand-ilo-blue;
         text-decoration: none;
       }
@@ -249,7 +262,7 @@
 
     appearance: none;
     background-color: $brand-ilo-white;
-    background-position: 90% 55%;
+    background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
     background-size: 16px;
     border: none;
@@ -270,6 +283,22 @@
       color: $brand-ilo-blue;
     }
 
+    .right-to-left & {
+      @include dataurlicon("arrowleft", $brand-ilo-dark-blue);
+      background-color: $brand-ilo-white;
+      background-position: 16px 55%;
+      background-repeat: no-repeat;
+      background-size: 16px;
+      text-align: right;
+
+      &:focus,
+      &:hover {
+        @include dataurlicon("arrowleft", $brand-ilo-blue);
+        background-color: $brand-ilo-light-blue;
+        color: $brand-ilo-blue;
+      }
+    }
+
     @include breakpoint("large") {
       @include dataurlicon("add", $brand-ilo-white);
       @include font-styles("nav-bold-b-sm");
@@ -297,6 +326,22 @@
         border-color: $brand-ilo-white;
         color: $brand-ilo-blue;
       }
+
+      .right-to-left & {
+        @include dataurlicon("add", $brand-ilo-white);
+        background-color: $brand-ilo-dark-blue;
+        background-position: 90% 55%;
+        background-repeat: no-repeat;
+        background-size: 20px;
+        text-align: left;
+
+        &:focus,
+        &:hover {
+          @include dataurlicon("add", $brand-ilo-blue);
+          background-color: $brand-ilo-white;
+          color: $brand-ilo-blue;
+        }
+      }
     }
   }
 
@@ -339,12 +384,65 @@
 }
 
 .ilo--mobile--nav {
+  border-bottom: 3px solid $brand-ilo-grey-light;
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+
   &--logo {
     align-items: center;
     display: flex;
     justify-content: space-between;
   }
 
+  &--language--select {
+    background: $brand-ilo-white;
+    left: 0;
+    height: 100%;
+    padding: 0 0 px-to-rem(32px);
+    position: absolute;
+    top: 0;
+    transform: translateX(100%);
+    transition: transform 225ms ease-out;
+    width: 100%;
+
+    .ilo--select--open & {
+      transform: translateX(0);
+    }
+  }
+
+  &--language--switcher--button {
+    @include dataurlicon("global", $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;
+    border: none;
+    color: $brand-ilo-dark-blue;
+    cursor: pointer;
+    display: block;
+    font-family: $fonts-display;
+    font-weight: 500;
+    padding: 16px 36px 16px 8px;
+    text-align: left;
+    transition: all 150ms ease-out;
+    width: 100%;
+
+    &:focus,
+    &:hover {
+      @include dataurlicon("global", $brand-ilo-blue);
+      background-color: $brand-ilo-light-blue;
+      color: $brand-ilo-blue;
+    }
+
+    .right-to-left & {
+      background-position: 16px 55%;
+      text-align: right;
+    }
+  }
+
   @include breakpoint("large") {
     display: none;
   }
@@ -356,6 +454,10 @@
   padding: 0 max((100% - 1300px) / 2, 20px) 0 0;
   position: relative;
 
+  .right-to-left & {
+    padding: 0 0 0 max((100% - 1300px) / 2, 20px);
+  }
+
   &::before {
     background: $brand-ilo-dark-blue;
     clip-path: polygon(0 0, 100% 0, 100% 100%);
@@ -366,6 +468,12 @@
     position: absolute;
     top: 0;
     width: 32px;
+
+    .right-to-left & {
+      clip-path: polygon(0 0, 0 100%, 100% 100%);
+      left: auto;
+      right: -32px;
+    }
   }
 
   &--wrap {
@@ -385,6 +493,7 @@
     color: $brand-ilo-white;
     cursor: pointer;
     display: block;
+    font-family: $fonts-display;
     font-weight: 500;
     padding: 8px 30px 8px 40px;
     transition: all 150ms ease-out;
@@ -414,6 +523,8 @@
 
 .ilo--subnav {
   background: $brand-ilo-white;
+  height: 100%;
+  left: 0;
   padding: 0 0 32px;
   position: absolute;
   top: 0;
@@ -425,7 +536,15 @@
     transform: translateX(0);
   }
 
+  .right-to-left & {
+    direction: rtl;
+  }
+
   @include breakpoint("large") {
+    filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+      drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+      drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
+    height: auto;
     left: 0;
     padding: 32px 0;
     top: auto;
@@ -500,12 +619,14 @@
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
+    font-family: $fonts-display;
+    font-weight: 500;
     padding: 16px 16px 16px 32px;
     position: relative;
     transition: all 150ms ease-out;
 
     &::before {
-      @include dataurlicon("arrowright", $brand-ilo-dark-blue);
+      @include dataurlicon("arrowleft", $brand-ilo-dark-blue);
       background-position: 10% center;
       background-repeat: no-repeat;
       background-size: 24px;
@@ -515,21 +636,43 @@
       left: 0;
       position: absolute;
       top: 50%;
-      transform: translateY(-50%) rotate(180deg);
+      transform: translateY(-50%);
       width: 24px;
     }
 
+    .right-to-left & {
+      padding: 16px 32px 16px 16px;
+
+      &::before {
+        @include dataurlicon("arrowright", $brand-ilo-dark-blue);
+        background-position: 10% center;
+        background-repeat: no-repeat;
+        background-size: 24px;
+        left: auto;
+        right: 0;
+      }
+    }
+
     &:hover,
     &:focus {
       background-color: $brand-ilo-light-blue;
       color: $brand-ilo-blue;
 
       &::before {
-        @include dataurlicon("arrowright", $brand-ilo-blue);
+        @include dataurlicon("arrowleft", $brand-ilo-blue);
         background-position: 10% center;
         background-repeat: no-repeat;
         background-size: 24px;
       }
+
+      .right-to-left & {
+        &::before {
+          @include dataurlicon("arrowright", $brand-ilo-blue);
+          background-position: 10% center;
+          background-repeat: no-repeat;
+          background-size: 24px;
+        }
+      }
     }
 
     @include breakpoint("large") {
@@ -551,6 +694,7 @@
 
 .ilo--search-box {
   background: $brand-ilo-white;
+  left: 0;
   position: absolute;
   top: 0;
   transform: translateX(100%);
@@ -562,6 +706,9 @@
   }
 
   @include breakpoint("large") {
+    filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+      drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+      drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
     left: 0;
     padding: 32px 0;
     top: auto;
@@ -610,7 +757,7 @@
     }
 
     .ilo--search--open & {
-      @include dataurlicon("add", $brand-ilo-dark-blue);
+      @include dataurlicon("close", $brand-ilo-dark-blue);
       background-color: $brand-ilo-white;
       background-position: center;
       background-repeat: no-repeat;
@@ -618,7 +765,7 @@
 
       &:hover,
       &:focus {
-        @include dataurlicon("add", $brand-ilo-blue);
+        @include dataurlicon("close", $brand-ilo-blue);
         background-color: $brand-ilo-light-blue;
       }
     }

package/scss/components/_profile.scss

@@ -1,4 +1,5 @@
 @use "../tokens" as *;
+@use "../functions" as *;
 @import "../mixins";
 
 .ilo--profile {
@@ -41,36 +42,41 @@
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "label");
     margin-left: 11px;
-    @include font-styles("body-xs");
+    @include font-styles("body-small");
   }
 
   &--role {
     display: block;
     font-family: $fonts-copy;
     margin-left: 11px;
-    @include font-styles("body-xss");
+    @include font-styles("body-xs");
   }
 
   &--description {
     clear: both;
     font-family: $fonts-copy;
     padding-top: 22px;
-    @include font-styles("body-xss");
+    @include font-styles("body-xs");
   }
 
   &--link {
+    align-items: center;
     clear: both;
     color: map-get($color, "link", "text", "default");
-    display: block;
+    display: inline-flex;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
+    height: px-to-rem(56px);
     text-decoration: none;
-    @include font-styles("body-xs");
+    @include font-styles("body-small");
 
     span {
+      align-items: center;
       background-position: calc(100% - 10px) center;
       background-repeat: no-repeat;
       background-size: 24px 24px;
+      display: inline-flex;
+      height: 24px;
       padding-right: 32px;
       @include dataurlicon("arrowright", $color-link-text-default);
     }
@@ -95,6 +101,7 @@
 
     &:hover,
     &:focus {
+      background-color: $color-base-blue-light;
       color: map-get($color, "link", "text", "hover");
       outline: none;
 
@@ -105,34 +112,14 @@
   }
 
   .ilo--profile--description + .ilo--profile--link {
-    margin-top: 28px;
+    margin-top: px-to-rem(8px);
   }
 
   .ilo--profile--role + .ilo--profile--link {
-    margin-top: 22px;
+    margin-top: px-to-rem(2px);
   }
 
   .ilo--profile--name + .ilo--profile--link {
-    margin-top: 38px;
-  }
-
-  @include breakpoint("medium") {
-    &--name {
-      @include font-styles("body-small");
-    }
-
-    &--role {
-      font-family: $fonts-copy;
-      @include font-styles("body-xs");
-    }
-
-    &--description {
-      font-family: $fonts-copy;
-      @include font-styles("body-xs");
-    }
-
-    &--link {
-      @include font-styles("body-small");
-    }
+    margin-top: px-to-rem(18px);
   }
 }

package/scss/components/_radio.scss

@@ -50,20 +50,6 @@
     }
   }
 
-  &:hover {
-    cursor: pointer;
-
-    &:after {
-      background-color: $color-base-yellow;
-    }
-
-    &:checked {
-      &:before {
-        border-color: $color-base-blue-dark;
-      }
-    }
-  }
-
   &:focus {
     &:after {
       background-color: $color-base-yellow;