@ilo-org/styles 1.8.5 → 1.10.0

package/scss/components/navigation/{mobile → internal/mobile}/_nav-mobile.scss

@@ -1,7 +1,7 @@
-@use "../../../tokens" as *;
-@use "../../../functions" as *;
-@import "../../../mixins";
-@import "../../../config";
+@use "../../../../tokens" as *;
+@use "../../../../functions" as *;
+@import "../../../../mixins";
+@import "../../../../config";
 
 .ilo--nav-mobile {
   &__branding {
@@ -20,6 +20,10 @@
   }
 
   &__widgets {
+    display: flex;
+    flex-direction: column;
+    margin: px-to-rem(2px);
+
     &-search {
       padding: spacing(4) 0;
       display: flex;
@@ -43,6 +47,23 @@
       }
     }
 
+    &-search-input {
+      // Form control overrides can be deleted when form control hides label conditionally
+      .ilo--fieldset {
+        width: 100%;
+      }
+
+      .ilo--form-control {
+        width: 100%;
+        display: inline;
+      }
+      .ilo--form-control--label {
+        display: none;
+      }
+
+      padding-block: spacing(5);
+    }
+
     &-link {
       @include typography("highlight-medium");
       padding: spacing(4) 0;

package/scss/theme/_typography.scss

@@ -1,16 +1,14 @@
 :root {
   // Display Font Families
   --ilo-fonts-display: Overpass, Noto Sans, sans-serif;
-
-  // Chinese and Japanese system fonts
+  --ilo-fonts-display-ar: Vazirmatn, sans-serif;
   --ilo-fonts-display-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
   --ilo-fonts-display-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans,
     TakaoPGothic, sans-serif;
 
   // Copy font families
   --ilo-fonts-copy: Noto Sans, sans-serif;
-
-  // Chinese and Japanese system fonts
+  --ilo-fonts-copy-ar: Vazirmatn, sans-serif;
   --ilo-fonts-copy-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
   --ilo-fonts-copy-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans, TakaoPGothic,
     sans-serif;

package/css/components/credit.css

@@ -1 +0,0 @@
-@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--credit{color:#fff;display:inline-block;font-size:11.94px;height:1.2861736334rem;letter-spacing:-.02em;line-height:16.24px;padding:0;position:relative}.ilo--credit--label{background-color:#2d2d2d;padding:4px 8px 4px 12px}.ilo--credit:after{background-position:100% 0;background-repeat:no-repeat;background-size:contain;content:"";height:1.2861736334rem;left:100%;position:absolute;top:-.2143622722rem;width:1.2861736334rem}@media screen and (max-width:1023px){.ilo--credit{width:75%}.ilo--credit--label{bottom:calc(100% + 1px);display:none;left:0;margin-bottom:.6430868167rem;position:absolute}.ilo--credit--label:after{background-position:0 0;background-size:contain;bottom:-.6430868167rem;height:.6430868167rem;left:.32154rem;width:.6430868167rem}.ilo--credit--label:after,.ilo--credit:before{background-repeat:no-repeat;content:"";position:absolute}.ilo--credit:before{background-color:#2d2d2d;background-position:calc(100% - 4px);background-size:.6430868167rem .6430868167rem;height:1.2861736334rem;left:0;top:0;width:1.5541264737rem}.ilo--credit:after{left:1.5541264737rem;top:0}.ilo--credit:hover .ilo--credit--label{display:inline-block}}[dir=rtl] .ilo--credit:after{background-position:0 0;left:auto;right:100%;transform:scaleX(-1)}@media screen and (max-width:1023px){[dir=rtl] .ilo--credit--label{left:auto;right:0}[dir=rtl] .ilo--credit--label:after{background-position:100% 0;left:auto;right:.32154rem}[dir=rtl] .ilo--credit:before{background-position:4px;left:auto;right:0}[dir=rtl] .ilo--credit:after{left:auto;right:1.5541264737rem}}

package/css/components/heading.css

@@ -1 +0,0 @@
-.ilo--h1,.ilo--h2,.ilo--h3,.ilo--h4,.ilo--h5,.ilo--h6{color:inherit;font-family:var(--ilo-fonts-display);font-weight:700}.ilo--h1--default,.ilo--h2--default,.ilo--h3--default,.ilo--h4--default,.ilo--h5--default,.ilo--h6--default{color:#2d2d2d}.ilo--h1--actionable,.ilo--h2--actionable,.ilo--h3--actionable,.ilo--h4--actionable,.ilo--h5--actionable,.ilo--h6--actionable{color:#960a55}.ilo--h1--light,.ilo--h2--light,.ilo--h3--light,.ilo--h4--light,.ilo--h5--light,.ilo--h6--light{color:#fff}.ilo--h1{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}@media screen and (min-width:610px){.ilo--h1{font-size:56.95px;letter-spacing:-.035em;line-height:65.49px}}.ilo--h2{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}@media screen and (min-width:610px){.ilo--h2{font-size:45.56px;letter-spacing:-.035em;line-height:52.39px}}.ilo--h3{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}@media screen and (min-width:610px){.ilo--h3{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}}.ilo--h4{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}@media screen and (min-width:610px){.ilo--h4{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}}.ilo--h5{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h5{font-size:23.32px;letter-spacing:-.035em;line-height:29.15px}}.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}@media screen and (min-width:610px){.ilo--h6{font-size:18.66px;letter-spacing:-.035em;line-height:24.26px}}

package/scss/components/_credit.scss

@@ -1,112 +0,0 @@
-@use "../tokens" as *;
-@import "../functions";
-@import "../mixins";
-@import "../animations";
-
-.ilo--credit {
-  color: #ffffff;
-  display: inline-block;
-  height: px-to-rem($spacing-ux-credit-height);
-  padding: 0;
-  position: relative;
-  @include font-styles("image-credit");
-
-  &--label {
-    background-color: $color-ux-credit-background;
-    @include boxpadding("credit", "large");
-  }
-
-  &:after {
-    background-position: top right;
-    background-repeat: no-repeat;
-    background-size: contain;
-    content: "";
-    height: px-to-rem($spacing-ux-credit-height);
-    position: absolute;
-    left: 100%;
-    top: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
-    width: px-to-rem($spacing-ux-credit-height);
-  }
-
-  @include breakpoint("lg", true) {
-    width: 75%;
-
-    &--label {
-      bottom: calc(100% + 1px);
-      display: none;
-      left: 0;
-      margin-bottom: px-to-rem(map-get($spacing, "padding-1-5"));
-      position: absolute;
-
-      &:after {
-        background-position: top left;
-        background-repeat: no-repeat;
-        background-size: contain;
-        content: "";
-        height: px-to-rem(map-get($spacing, "padding-1-5"));
-        position: absolute;
-        left: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
-        bottom: -#{px-to-rem(map-get($spacing, "padding-1-5"))};
-        width: px-to-rem(map-get($spacing, "padding-1-5"));
-      }
-    }
-
-    &:before {
-      background-color: $color-base-neutrals-dark;
-      background-position: calc(100% - 4px) center;
-      background-repeat: no-repeat;
-      background-size: px-to-rem(map-get($spacing, "padding-1-5"))
-        px-to-rem(map-get($spacing, "padding-1-5"));
-      content: "";
-      height: px-to-rem(map-get($spacing, "padding-3"));
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: px-to-rem(29px);
-    }
-
-    &:after {
-      left: px-to-rem(29px);
-      top: 0;
-    }
-
-    &:hover {
-      .ilo--credit--label {
-        display: inline-block;
-      }
-    }
-  }
-
-  [dir="rtl"] & {
-    &:after {
-      background-position: top left;
-      left: auto;
-      right: 100%;
-      transform: scaleX(-1);
-    }
-
-    @include breakpoint("lg", true) {
-      &--label {
-        left: auto;
-        right: 0;
-
-        &:after {
-          background-position: top right;
-          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/_heading.scss

@@ -1,74 +0,0 @@
-@use "../tokens" as *;
-@use "../functions" as *;
-@import "../mixins";
-
-.ilo--h1,
-.ilo--h2,
-.ilo--h3,
-.ilo--h4,
-.ilo--h5,
-.ilo--h6 {
-  color: inherit;
-  font-family: var(--ilo-fonts-display);
-  font-weight: 700;
-
-  &--default {
-    color: $color-font-base;
-  }
-
-  &--actionable {
-    color: $color-base-purple-medium;
-  }
-
-  &--light {
-    color: $color-base-neutrals-white;
-  }
-}
-
-.ilo--h1 {
-  @include font-styles("headline-2");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-1");
-  }
-}
-
-.ilo--h2 {
-  @include font-styles("headline-3");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-2");
-  }
-}
-
-.ilo--h3 {
-  @include font-styles("headline-4");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-3");
-  }
-}
-
-.ilo--h4 {
-  @include font-styles("headline-5");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-4");
-  }
-}
-
-.ilo--h5 {
-  @include font-styles("headline-6");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-5");
-  }
-}
-
-.ilo--h6 {
-  @include font-styles("headline-6");
-
-  @include breakpoint("md") {
-    @include font-styles("headline-6");
-  }
-}