@ilo-org/styles 0.1.0 → 0.1.2

package/scss/components/_footer.scss

@@ -1,12 +1,15 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "../animations";
 @import "../mixins";
 
 .ilo--footer {
+  border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
+
   &--main {
     background-color: $color-base-blue-dark;
     border-bottom: px-to-rem(6px) solid $color-base-red-medium;
-    padding: 0 px-to-rem(32px);
+    padding: px-to-rem(40px) px-to-rem(32px) 0 px-to-rem(32px);
     position: relative;
 
     & > * {
@@ -15,21 +18,31 @@
     }
 
     &:after {
-      background-color: $color-base-blue-medium;
-      clip-path: polygon(63.75% 0%, 100% 63.75%, 100% 0);
+      background-size: contain;
+      background-repeat: no-repeat;
+      bottom: 0;
       content: "";
       height: 100%;
-      left: 0;
+      min-width: 409.5px;
+      right: 0;
       position: absolute;
-      top: 0;
-      width: 100%;
+      transform: scaleY(-1);
+      width: 28.8%;
       z-index: 0;
+      @include dataurlicon("footertriangle", $color-base-blue-medium);
     }
   }
 
+  &--logo {
+    max-width: 100%;
+  }
+
   &--secondary {
     background-color: $color-base-neutrals-white;
     padding: px-to-rem(36px) px-to-rem(16px) 0 px-to-rem(16px);
+    min-height: px-to-rem(
+      map-get($spacing, "ux", "readmore", "default", "height")
+    );
   }
 
   &--headline {
@@ -90,17 +103,6 @@
     margin-bottom: px-to-rem(45px);
   }
 
-  .social--links--item {
-    height: px-to-rem(16px);
-    margin-right: px-to-rem(20px);
-    position: relative;
-    width: px-to-rem(16px);
-
-    &:last-of-type {
-      margin-right: none;
-    }
-  }
-
   .social--links--link {
     background-repeat: no-repeat;
     background-size: contain;
@@ -131,6 +133,45 @@
     }
   }
 
+  .social--links--item {
+    align-items: center;
+    background-color: transparent;
+    border-radius: px-to-rem(3px);
+    display: flex;
+    height: px-to-rem(24px);
+    justify-content: center;
+    margin-right: px-to-rem(20px);
+    position: relative;
+    width: px-to-rem(24px);
+
+    &:last-of-type {
+      margin-right: none;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $color-base-blue-light;
+
+      .social--links--link {
+        &.facebook {
+          @include dataurlicon("facebook", $color-base-blue-medium);
+        }
+
+        &.instagram {
+          @include dataurlicon("instagram", $color-base-blue-medium);
+        }
+
+        &.twitter {
+          @include dataurlicon("twitter", $color-base-blue-medium);
+        }
+
+        &.youtube {
+          @include dataurlicon("youtube", $color-base-blue-medium);
+        }
+      }
+    }
+  }
+
   .legal,
   .secondarylinks {
     color: $color-base-neutrals-medium;
@@ -153,23 +194,28 @@
 
   .secondarylinks--list--item a {
     color: $color-base-neutrals-medium;
+    @include globaltransition("color, border-color");
 
     &:visited {
       color: map-get($color, "link", "text-footer", "visited");
+      @include globaltransition("color, border-color");
     }
 
     &:hover {
       color: map-get($color, "link", "text-footer", "hover");
+      @include globaltransition("color, border-color");
     }
 
     &:active {
       color: map-get($color, "link", "text-footer", "active");
       outline: none;
+      @include globaltransition("color, border-color");
     }
 
     &:focus {
       color: map-get($color, "link", "text-footer", "focus");
       outline: none;
+      @include globaltransition("color, border-color");
     }
   }
 
@@ -208,8 +254,7 @@
       border-bottom: 0.1071811361rem solid $color-base-blue-medium;
       color: $color-ux-labels-hover;
       cursor: pointer;
-      transition: background 150ms linear, border 150ms linear,
-        color 150ms linear;
+      @include globaltransition("color, background-color, border-color");
 
       &:after {
         @include dataurlicon("arrow", $color-ux-labels-hover);
@@ -286,6 +331,13 @@
         "site-info address connect"
         "site-info links connect";
       padding: px-to-rem(56px) px-to-rem(70px) px-to-rem(64px) px-to-rem(70px);
+
+      &:after {
+        background-position: right top;
+        bottom: auto;
+        top: 0;
+        transform: scaleY(1);
+      }
     }
 
     &--logo {
@@ -326,4 +378,61 @@
       top: 0;
     }
   }
+
+  .right-to-left & {
+    * {
+      text-align: right;
+    }
+
+    .social--links {
+      flex-direction: row-reverse;
+    }
+
+    .social--links--link {
+      text-indent: 999em;
+    }
+
+    &--main {
+      &:after {
+        bottom: 0;
+        left: 0;
+        right: auto;
+        top: auto;
+        transform: scale(-1, -1);
+      }
+    }
+
+    @include breakpoint("medium") {
+      &--main {
+        grid-template-areas:
+          "address site-info"
+          "links site-info"
+          "connect site-info";
+      }
+    }
+
+    @include breakpoint("large") {
+      &--main {
+        grid-template-columns: calc(32.5% + 64px) 25.1% 19.2%;
+        grid-template-areas:
+          "connect address site-info"
+          "connect links site-info";
+
+        &:after {
+          left: 0;
+          right: auto;
+          transform: scale(-1, 1);
+        }
+      }
+
+      .connect {
+        grid-template-columns: 60%, minmax(0, 40%);
+        margin: 0 calc(18.9% + 64px) 0 0;
+      }
+
+      .ilo--button {
+        justify-self: end;
+      }
+    }
+  }
 }

package/scss/components/_hero.scss

@@ -3,6 +3,8 @@
 @import "../mixins";
 
 .ilo--hero {
+  background: map-get($color, "ux", "pagination", "default", "background");
+
   &--home {
     @include breakpoint("large") {
       position: relative;
@@ -13,8 +15,6 @@
     position: relative;
 
     @include breakpoint("large") {
-      padding-top: 128px;
-
       .ilo--image {
         height: calc(100% - 80px);
         left: 0;
@@ -41,7 +41,7 @@
       }
     }
   }
-  background: map-get($color, "ux", "pagination", "default", "background");
+
   &--article {
     background: map-get($color, "hero", "article");
     padding: 88px 0 0 0;
@@ -108,11 +108,10 @@
     background-color: map-get($color, "hero", "image");
 
     @include breakpoint("large") {
-      padding-top: 128px;
-
       .ilo--image {
         height: 100%;
         max-height: 592px;
+        overflow: hidden;
         width: 100%;
       }
 

package/scss/components/_linklist.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "../animations";
 @import "../mixins";
 
 .ilo--link-list {
@@ -82,11 +83,13 @@
 
     &:visited {
       color: map-get($color, "link", "text", "default");
+      @include globaltransition("color");
     }
 
     &:active {
       color: map-get($color, "link", "text", "active");
       outline: none;
+      @include globaltransition("color");
     }
 
     &:hover,
@@ -97,6 +100,17 @@
       color: map-get($color, "link", "text", "hover");
       outline: none;
       @include dataurlicon("arrowright", $color-link-text-hover);
+      @include globaltransition("color, background-color, border-color");
+    }
+
+    .right-to-left & {
+      background-position: $spacing-padding-0-5 center;
+      @include dataurlicon("arrowleft", $color-link-text-default);
+
+      &:hover,
+      &:focus {
+        @include dataurlicon("arrowleft", $color-link-text-hover);
+      }
     }
   }
 
@@ -123,6 +137,7 @@
       &:visited {
         .ilo--link-list--label {
           color: $color-base-neutrals-white;
+          @include globaltransition("color");
         }
       }
 
@@ -131,6 +146,7 @@
 
         .ilo--link-list--label {
           color: map-get($color, "link", "text", "active");
+          @include globaltransition("color");
         }
       }
 
@@ -141,8 +157,25 @@
 
         .ilo--link-list--label {
           color: $color-base-blue-medium;
+          @include globaltransition("color");
         }
       }
+
+      .right-to-left & {
+        background-position: $spacing-padding-0-5 center;
+        @include dataurlicon("arrowleft", $color-base-neutrals-white);
+
+        &:hover,
+        &:focus {
+          @include dataurlicon("arrowleft", $color-base-blue-medium);
+        }
+      }
+    }
+  }
+
+  .right-to-left & {
+    * {
+      text-align: right;
     }
   }
 }

package/scss/components/_navigation.scss

@@ -4,7 +4,7 @@
 
 .ilo--header {
   $self: &;
-  overflow-x: hidden;
+  overflow: hidden;
   position: relative;
   z-index: 4;
 
@@ -78,6 +78,11 @@
 
   &--logo {
     display: block;
+    max-width: 150px;
+
+    @include breakpoint("large") {
+      max-width: 200px;
+    }
 
     &-link {
       display: block;
@@ -112,6 +117,10 @@
       &--local {
         justify-content: space-between;
       }
+
+      .right-to-left & {
+        flex-direction: row-reverse;
+      }
     }
   }
 
@@ -121,6 +130,10 @@
     padding: 0 16px;
     width: 100%;
 
+    .right-to-left & {
+      direction: rtl;
+    }
+
     @include breakpoint("large") {
       display: flex;
       justify-content: space-between;
@@ -157,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;
     }
@@ -231,7 +249,7 @@
 
       &:hover,
       &:focus {
-        background: $brand-ilo-white;
+        background: $brand-ilo-light-blue;
         color: $brand-ilo-blue;
         text-decoration: none;
       }
@@ -244,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;
@@ -265,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");
@@ -292,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;
+        }
+      }
     }
   }
 
@@ -334,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;
   }
@@ -351,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%);
@@ -361,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 {
@@ -380,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;
@@ -409,6 +523,8 @@
 
 .ilo--subnav {
   background: $brand-ilo-white;
+  height: 100%;
+  left: 0;
   padding: 0 0 32px;
   position: absolute;
   top: 0;
@@ -420,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;
@@ -495,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;
@@ -510,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") {
@@ -546,6 +694,7 @@
 
 .ilo--search-box {
   background: $brand-ilo-white;
+  left: 0;
   position: absolute;
   top: 0;
   transform: translateX(100%);
@@ -557,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;
@@ -605,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;
@@ -613,7 +765,7 @@
 
       &:hover,
       &:focus {
-        @include dataurlicon("add", $brand-ilo-blue);
+        @include dataurlicon("close", $brand-ilo-blue);
         background-color: $brand-ilo-light-blue;
       }
     }