@ilo-org/styles 0.9.2 → 0.10.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.9.2",
+  "version": "0.10.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.4.0"
+    "@ilo-org/themes": "0.5.1"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_container.scss

@@ -0,0 +1,11 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../animations";
+@import "../mixins";
+
+.ilo--container {
+  margin: auto;
+  max-width: $layout-max-width;
+  padding: 0 px-to-rem($layout-padding);
+  width: 100%;
+}

package/scss/components/_file-upload.scss

@@ -78,10 +78,14 @@
 
   &--list {
     order: 4;
+    display: flex;
+    flex-flow: column;
+    padding-top: px-to-rem($spacing-padding-1);
+    gap: px-to-rem($spacing-padding-1);
   }
 
   &--list-item {
-    display: inline-block;
+    display: block;
     background-color: $color-formelements-uploadedfile-default-background;
     @include bordervalues("uploadedfile", "formelements", "default");
     box-sizing: border-box;
@@ -91,7 +95,6 @@
     height: px-to-rem(
       map-get($spacing, "formelements", "uploadedfile", "default", "height")
     );
-    @include spacingvalues("margin", "uploadedfile", "formelements");
     outline: none;
     @include spacingvalues("padding", "uploadedfile", "formelements");
   }

package/scss/components/_footer.scss

@@ -3,33 +3,89 @@
 @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: &;
+
   border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
+  background-color: $color-base-blue-dark;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
 
   &--main {
-    background-color: $color-base-blue-dark;
-    border-bottom: px-to-rem(6px) solid $color-base-red-medium;
-    padding: px-to-rem(40px) px-to-rem(32px) 0 px-to-rem(32px);
+    padding: px-to-rem(40px) px-to-rem(32px);
     position: relative;
 
-    & > * {
-      position: relative;
-      z-index: 1;
-    }
+    @include footer-triangle(bottom-right);
 
     &:after {
-      background-size: contain;
-      background-repeat: no-repeat;
-      bottom: 0;
       content: "";
-      height: 100%;
-      min-width: 409.5px;
-      right: 0;
+      border-bottom: px-to-rem(6px) solid $color-base-red-medium;
+      width: 200vw;
       position: absolute;
-      transform: scaleY(-1);
-      width: 28.8%;
-      z-index: 0;
-      @include dataurlicon("footertriangle", $color-base-blue-medium);
+      bottom: 0;
+      left: -100vw;
+    }
+
+    & > * {
+      position: relative;
+      z-index: 1;
     }
   }
 
@@ -39,8 +95,8 @@
   }
 
   &--secondary {
-    background-color: $color-base-neutrals-white;
-    padding: px-to-rem(36px) px-to-rem(16px) 0 px-to-rem(16px);
+    background-color: $color-base-neutrals-lighter;
+    padding-top: px-to-rem(36px);
     min-height: px-to-rem(
       map-get($spacing, "ux", "readmore", "default", "height")
     );
@@ -60,7 +116,7 @@
       "body-xxs",
       "display"
     );
-    @include textmargin("margin-top", 22px, "body-small", "display", 0, 0);
+    margin-top: px-to-rem(22px);
   }
 
   &--subhead {
@@ -70,11 +126,11 @@
     margin-top: px-to-rem(10px);
     @include font-styles("body-xxs");
     line-height: px-to-rem(18.56px);
-    @include textmargin("margin-bottom", 28px, "body-xxs", "display", 0, 0);
+    margin-bottom: px-to-rem(45px);
   }
 
   .address {
-    margin-bottom: px-to-rem(42px);
+    margin-bottom: px-to-rem(39px);
   }
 
   .address--line {
@@ -112,9 +168,10 @@
     list-style: none;
   }
 
-  .secondarylinks--list--item:not(first-child) {
+  .secondarylinks--list--item {
     &:before {
-      content: " | ";
+      content: "|";
+      margin: px-to-rem(4px);
     }
   }
 
@@ -146,31 +203,32 @@
   }
 
   .anchorlink {
-    background: map-get($color, "ux", "readmore", "default", "background");
-    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    // General Styles
+    display: flex;
+    flex-flow: row nowrap;
     color: $color-ux-labels-actionable;
-    display: block;
     font-family: $fonts-display;
-    height: px-to-rem(map-get($spacing, "ux", "readmore", "default", "height"));
-    margin: px-to-rem(12px) auto 0 auto;
-    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-4)
-      px-to-rem($spacing-padding-2) 0;
+    @include font-styles("label-medium");
     position: relative;
-    text-align: left;
     text-decoration: none;
-    @include font-styles("label-medium");
     width: max-content;
 
+    // Mobile styles
+    justify-content: center;
+    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    margin: px-to-rem(12px) auto 0 auto;
+    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-2)
+      px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-2);
+
     &:after {
       background-repeat: no-repeat;
       content: "";
-      display: inline-block;
       height: px-to-rem(24px);
-      position: absolute;
-      right: px-to-rem(2px);
-      top: 50%;
-      transform: translateY(-50%) rotateX(180deg);
-      transform-origin: center center;
+      position: relative;
+      margin-left: px-to-rem(8px);
+      bottom: px-to-rem(3px);
+      transform: rotateX(180deg);
+      transform-origin: center;
       width: px-to-rem(24px);
       @include dataurlicon("arrow", $color-ux-labels-actionable);
     }
@@ -196,10 +254,11 @@
       grid-template-areas:
         "site-info address"
         "site-info links"
-        "site-info connect";
+        "site-info connect"
+        "site-info subscribe";
       align-content: start;
       align-items: start;
-      padding: px-to-rem(40px) px-to-rem(32px) px-to-rem(40px) px-to-rem(32px);
+      padding: px-to-rem(40px) px-to-rem(20px);
     }
 
     .site--info {
@@ -219,55 +278,54 @@
       grid-area: links;
     }
 
-    &--secondary {
-      padding: px-to-rem(18px) px-to-rem(16px);
-      position: relative;
+    .subscribe {
+      grid-area: subscribe;
     }
 
-    .legal,
-    .secondarylinks {
-      display: block;
-      float: left;
-    }
-
-    .secondarylinks {
-      margin-right: px-to-rem(126px);
+    &--secondary {
+      padding-top: px-to-rem(18px);
+      padding-bottom: px-to-rem(18px);
+      position: relative;
+      z-index: 1;
     }
 
     .anchorlink {
-      display: inline-block;
-      margin: 0;
-      position: absolute;
-      right: 16px;
-      top: 0;
+      bottom: 0;
     }
   }
 
   @include breakpoint("large") {
+    @include footer-triangle(top-right);
+
     &--main {
       display: grid;
-      grid-template-columns: 19.2% 25.1% calc(32.5% + 64px);
-      grid-template-rows: 0.6fr 1.4fr;
+      grid-template-columns: 0.25fr 0.33fr 0.09fr 0.33fr;
+      grid-template-rows: auto auto;
       gap: 0px 64px;
       grid-template-areas:
-        "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);
+        "site-info address  .  connect"
+        "site-info links    .  subscribe";
 
-      &:after {
-        background-position: right top;
-        bottom: auto;
-        top: 0;
-        transform: scaleY(1);
+      padding-top: px-to-rem(44px);
+      padding-bottom: px-to-rem(51px);
+
+      &:before {
+        content: none;
       }
     }
 
     .connect {
-      display: grid;
-      grid-template-columns: minmax(0, 40%), 60%;
-      grid-template-rows: repeat(3, minmax(0, 1fr));
       grid-area: connect;
-      margin: 0 0 0 calc(18.9% + 64px);
+      margin: 0;
+    }
+
+    .subscribe {
+      height: 100%;
+      display: flex;
+      align-items: flex-start;
+      justify-content: flex-start;
+      flex-flow: column;
+      top: 8px;
     }
 
     .ilo--button {
@@ -276,58 +334,81 @@
     }
 
     &--secondary {
-      padding: px-to-rem(18px) px-to-rem(70px);
+      padding-top: px-to-rem(18px);
+      padding-bottom: px-to-rem(18px);
       position: relative;
-    }
 
-    .secondarylinks {
-      margin-right: px-to-rem(140px);
+      [class*="container"] {
+        display: flex;
+        flex-flow: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      &--details {
+        display: flex;
+        flex-flow: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .secondarylinks--list--item {
+        &:before {
+          margin: px-to-rem(8px);
+        }
+      }
     }
 
     .anchorlink {
-      display: inline-block;
       margin: 0;
-      position: absolute;
-      right: 70px;
-      top: 0;
+      border: none;
+      padding: 0.25rem;
+
+      &:hover {
+        margin-bottom: -0.1071811361rem;
+      }
     }
   }
 
+  /* RTL Styles */
   .right-to-left & {
     * {
       text-align: right;
     }
 
-    .legal,
-    .secondarylinks {
-      display: block;
+    &--main {
+      @include footer-triangle(bottom-left);
+    }
+
+    .subscribe a {
+      align-self: flex-end;
+    }
+
+    &--secondary {
+      [class*="container"] {
+        flex-direction: row-reverse;
+      }
+
+      &--details {
+        display: flex;
+        flex-flow: row-reverse wrap;
+      }
     }
 
     .secondarylinks {
       &--list {
-        display: flex;
         flex-direction: row-reverse;
       }
     }
 
-    .secondarylinks--list--item:not(first-child) {
+    .secondarylinks--list--item {
       &:before {
         content: none;
       }
 
       &:after {
-        content: " |  ";
-        padding-right: px-to-rem(2px);
-      }
-    }
-
-    &--main {
-      &:after {
-        bottom: 0;
-        left: 0;
-        right: auto;
-        top: auto;
-        transform: scale(-1, -1);
+        content: "|";
+        margin: px-to-rem(4px);
       }
     }
 
@@ -336,47 +417,27 @@
         grid-template-areas:
           "address site-info"
           "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;
+          "connect site-info"
+          "subscribe site-info";
       }
     }
 
     @include breakpoint("large") {
+      @include footer-triangle(top-left);
+
       &--main {
-        grid-template-columns: calc(32.5% + 64px) 25.1% 19.2%;
+        grid-template-columns: 0.33fr 0.09fr 0.33fr 0.25fr;
         grid-template-areas:
-          "connect address site-info"
-          "connect links site-info";
+          "connect   . address site-info"
+          "subscribe . links   site-info";
 
-        &:after {
-          left: 0;
-          right: auto;
-          transform: scale(-1, 1);
+        &:before {
+          content: none;
         }
       }
 
       .connect {
         grid-template-columns: 60%, minmax(0, 40%);
-        margin: 0 calc(18.9% + 64px) 0 0;
       }
 
       .ilo--button {

package/scss/components/_formcontrol.scss

@@ -16,7 +16,7 @@
     // Label is to the flex start of form element
     &__start {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 1 / 2 / 2;
       }
 
@@ -26,12 +26,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 2 / 2 / 3 / 3;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 3 / 1 / 4 / 3;
       }
     }
@@ -39,7 +39,7 @@
     // Label is at the end of the form element
     &__end {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 2 / 2 / 3;
       }
 
@@ -49,20 +49,20 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 2 / 1 / 3 / 3;
       }
 
       // Upload
-      :nth-child(4) {
-        grid-area: 3 / 1 / 4 / 3;
+      [class*="file-upload--list"] {
+        grid-area: 3 / 1 / 4 / 4;
       }
     }
 
     // Label is above form element
     &__top {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 1 / 2 / 2;
       }
 
@@ -72,12 +72,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 3 / 1 / 4 / 2;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 4 / 1 / 5 / 2;
       }
     }
@@ -85,7 +85,7 @@
     // Label is below form element
     &__bottom {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 3 / 1 / 4 / 2;
       }
 
@@ -95,12 +95,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 1 / 1 / 2 / 2;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 4 / 1 / 5 / 2;
       }
     }

package/scss/components/_herocard.scss

@@ -5,15 +5,20 @@
 .ilo--hero-card {
   $c: &;
   $semi-transparent: 0.6;
-  $padding-lg: $spacing-padding-8;
-  $padding-sm: $spacing-padding-5;
+
+  // Replace with this
+  $padding-y-lg: $spacing-padding-7;
+  $padding-x-lg: $spacing-padding-9;
+
+  $padding-y-sm: $spacing-padding-5;
+  $padding-x-sm: $spacing-padding-2;
 
   height: 100%;
   position: relative;
-  padding: $padding-sm 16px;
+  padding: $padding-y-sm $padding-x-sm;
 
   @include breakpoint("large") {
-    padding: $padding-lg;
+    padding: $padding-y-lg $padding-x-lg;
   }
 
   .right-to-left & {
@@ -74,10 +79,10 @@
   }
 
   &__cornercut {
-    @include cornercut(72px, 40px);
+    @include cornercut(70px, 40px);
 
     .right-to-left & {
-      @include cornercut(72px, 40px, "left");
+      @include cornercut(720px, 40px, "left");
     }
 
     @include breakpoint("large") {

package/scss/components/_navigation.scss

@@ -205,10 +205,10 @@
   }
 
   &--inner {
-    margin: auto;
-    max-width: 1300px;
-    padding: 0 16px;
-    width: 100%;
+    // margin: auto;
+    // max-width: $layout-max-width;
+    // padding: 0 16px;
+    // width: 100%;
 
     .right-to-left & {
       direction: rtl;
@@ -605,11 +605,11 @@
 .ilo--language-switcher {
   background: $brand-ilo-dark-blue;
   display: flex;
-  padding: 0 max((100% - 1300px) / 2, 20px) 0 0;
+  padding: 0 max((100% - $layout-max-width) / 2, $layout-padding) 0 0;
   position: relative;
 
   .right-to-left & {
-    padding: 0 0 0 max((100% - 1300px) / 2, 20px);
+    padding: 0 0 0 max((100% - $layout-max-width) / 2, $layout-padding);
   }
 
   &::before {
@@ -727,10 +727,10 @@
   }
 
   &--inner {
-    margin: auto;
-    max-width: 1300px;
-    padding: 0 20px;
-    width: 100%;
+    // margin: auto;
+    // max-width: 1300px;
+    // padding: 0 20px;
+    // width: 100%;
 
     @include breakpoint("large") {
       display: flex;