@ilo-org/styles 0.1.2 → 0.1.4

package/scss/components/_contextmenu.scss

@@ -36,7 +36,7 @@
     }
 
     &.endsection {
-      border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-white;
+      border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;
 
       .ilo--context-menu--link {
         border-bottom: none;
@@ -50,10 +50,11 @@
     display: inline-block;
     font-family: $fonts-copy;
     font-weight: map-get($type, "weights", "section");
-    padding: px-to-rem($spacing-padding-2) 0;
+    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-1);
     text-decoration: none;
     width: 100%;
     @include font-styles("body-xxs");
+    letter-spacing: -0.1px;
 
     &:visited {
       color: map-get($color, "link", "text", "default");

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/_datepicker.scss

@@ -16,4 +16,16 @@
       }
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+  }
+}
+
+.right-to-left
+  .ilo--datepicker--range
+  > .ilo--fieldset:nth-of-type(1)
+  .ilo--input {
+  border-left: none;
+  border-right: 0.1071811361rem solid rgb(184, 196, 204);
 }

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(
@@ -71,4 +72,16 @@
     margin-left: 8px;
     margin-top: 3px;
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--fieldset--label {
+      float: right;
+    }
+
+    &.ilo--choice-group .ilo--fieldset--legend {
+      float: right;
+    }
+  }
 }

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 {
@@ -341,7 +343,8 @@
     }
 
     &--logo {
-      width: 100%;
+      min-width: 133px;
+      width: 48%;
     }
 
     .connect {
@@ -388,10 +391,37 @@
       flex-direction: row-reverse;
     }
 
+    .social--links--item:first-of-type {
+      margin-right: 0;
+    }
+
     .social--links--link {
       text-indent: 999em;
     }
 
+    .legal,
+    .secondarylinks {
+      display: block;
+    }
+
+    .secondarylinks {
+      &--list {
+        display: flex;
+        flex-direction: row-reverse;
+      }
+    }
+
+    .secondarylinks--list--item:not(first-child) {
+      &:before {
+        content: none;
+      }
+
+      &:after {
+        content: " |  ";
+        padding-right: px-to-rem(2px);
+      }
+    }
+
     &--main {
       &:after {
         bottom: 0;
@@ -409,6 +439,26 @@
           "links site-info"
           "connect site-info";
       }
+
+      .legal,
+      .secondarylinks {
+        float: right;
+      }
+
+      .secondarylinks {
+        margin-left: px-to-rem(126px);
+        margin-right: px-to-rem(4px);
+
+        &--list {
+          display: flex;
+          flex-direction: row-reverse;
+        }
+      }
+
+      .anchorlink {
+        left: 16px;
+        right: auto;
+      }
     }
 
     @include breakpoint("large") {

package/scss/components/_form.scss

@@ -0,0 +1,24 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--formgroup {
+  &--legend {
+    display: block;
+    font-family: $fonts-display;
+    font-weight: map-get($type, "weights", "label");
+    @include font-styles("legend");
+    @include textmargin(
+      "margin-bottom",
+      map-get($spacing, "padding-5"),
+      "legend",
+      "display",
+      "label-small",
+      "display"
+    );
+  }
+
+  .right-to-left & {
+    direction: rtl;
+  }
+}

package/scss/components/_formgroup.scss

@@ -2,19 +2,8 @@
 @use "../functions" as *;
 @import "../mixins";
 
-.ilo--formgroup {
-  &--legend {
-    display: block;
-    font-family: $fonts-display;
-    font-weight: map-get($type, "weights", "label");
-    @include font-styles("legend");
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-5"),
-      "legend",
-      "display",
-      "label-small",
-      "display"
-    );
+.ilo--form {
+  .right-to-left & {
+    direction: rtl;
   }
 }

package/scss/components/_hero.scss

@@ -4,8 +4,28 @@
 
 .ilo--hero {
   background: map-get($color, "ux", "pagination", "default", "background");
+  display: block;
+  width: 100%;
 
   &--home {
+    .ilo--image {
+      &::before {
+        background: linear-gradient(
+            360deg,
+            rgba($brand-ilo-black, 0.3) 0%,
+            rgba($brand-ilo-black, 0) 24.88%
+          ),
+          transparent;
+        content: "";
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 2;
+      }
+    }
+
     @include breakpoint("large") {
       position: relative;
     }
@@ -15,6 +35,9 @@
     position: relative;
 
     @include breakpoint("large") {
+      margin-bottom: 80px;
+      padding-top: 170px;
+
       .ilo--image {
         height: calc(100% - 80px);
         left: 0;
@@ -39,6 +62,10 @@
           width: 100%;
         }
       }
+
+      .ilo--hero-card {
+        top: 80px;
+      }
     }
   }
 

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

@@ -22,16 +22,19 @@
 
   &--menu {
     @include dataurlicon("burger", $brand-ilo-white);
+    align-self: center;
     background-color: transparent;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 32px;
     border: none;
     cursor: pointer;
+    height: 32px;
     overflow: hidden;
     position: relative;
     text-indent: -999%;
     transition: all 150ms ease-out;
+    width: 32px;
 
     &:hover,
     &:focus {
@@ -87,6 +90,10 @@
     &-link {
       display: block;
       padding: 16px 0;
+
+      @include breakpoint("large") {
+        padding: 0 0 24px;
+      }
     }
   }
 
@@ -443,6 +450,17 @@
     }
   }
 
+  &--search {
+    .ilo--searchfield {
+      max-width: 618px;
+      width: 100%;
+    }
+
+    .ilo--fieldset {
+      width: 100%;
+    }
+  }
+
   @include breakpoint("large") {
     display: none;
   }
@@ -726,6 +744,15 @@
     justify-content: center;
     padding: 80px 20px;
   }
+
+  .ilo--searchfield {
+    max-width: 618px;
+    width: 100%;
+  }
+
+  .ilo--fieldset {
+    width: 100%;
+  }
 }
 
 .ilo--search {

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;
@@ -108,6 +94,7 @@
 
   .ilo--fieldset--label {
     font-weight: 400;
+    margin-bottom: 0;
     margin-left: px-to-rem($spacing-padding-1);
     margin-top: 2px;
     order: 2;
@@ -118,4 +105,13 @@
     order: 3;
     width: 100%;
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--fieldset--label {
+      margin-left: 0;
+      margin-right: px-to-rem($spacing-padding-1);
+    }
+  }
 }

package/scss/components/_richtext.scss

@@ -387,4 +387,58 @@
       }
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    figcaption {
+      border-left: none;
+      border-right: 3px solid #b8c4cc;
+      padding-left: 0;
+      padding-right: px-to-rem(map-get($spacing, "padding-1"));
+    }
+
+    ul,
+    ol {
+      li {
+        &::before {
+          left: auto;
+          right: px-to-rem(-12px);
+          @include dataurlicon("listarrowreverse");
+        }
+        margin-left: 0;
+        margin-right: px-to-rem(12px);
+        padding-left: 0;
+        padding-right: px-to-rem(12px);
+      }
+    }
+
+    blockquote {
+      background-position: -1px -1px;
+      padding: px-to-rem(54px) px-to-rem(map-get($spacing, "padding-4"))
+        px-to-rem(34px) 0;
+      @include dataurlicon("trianglereverse", $color-ux-background-default);
+
+      p {
+        padding: 0 0 0 px-to-rem(map-get($spacing, "padding-6"));
+
+        &:after {
+          left: 0;
+          right: auto;
+          transform: scaleX(1);
+        }
+      }
+
+      &:before {
+        left: auto;
+        right: 0;
+        transform: scaleX(-1);
+      }
+
+      @include breakpoint("medium") {
+        padding: px-to-rem(62px) px-to-rem(map-get($spacing, "padding-6"))
+          px-to-rem(map-get($spacing, "padding-6")) 0;
+      }
+    }
+  }
 }