@ilo-org/styles 0.11.3-next.3 → 0.12.0

package/scss/components/_navigation.scss

@@ -123,7 +123,7 @@
       background: $brand-ilo-blue;
       display: flex;
       justify-content: space-between;
-      padding: 0 20px;
+      padding: 0 spacing(5);
 
       .ilo--language-switcher {
         display: none;
@@ -141,7 +141,7 @@
           cursor: pointer;
           font-family: $fonts-display;
           font-weight: 500;
-          padding: 16px 16px 16px 36px;
+          padding: spacing(4) spacing(4) spacing(4) spacing(9);
           text-decoration: none;
           transition: all 150ms ease-out;
           width: 100%;
@@ -157,7 +157,7 @@
             color: $brand-ilo-blue;
           }
 
-          .right-to-left & {
+          [dir="rtl"] {
             @include dataurlicon("arrowright", $brand-ilo-white);
             background-position: calc(100% - 16px) 50%;
             padding: 16px 36px 16px 16px;
@@ -195,10 +195,6 @@
       &--local {
         justify-content: space-between;
       }
-
-      .right-to-left & {
-        flex-direction: row-reverse;
-      }
     }
   }
 
@@ -208,10 +204,6 @@
     // padding: 0 16px;
     // width: 100%;
 
-    .right-to-left & {
-      direction: rtl;
-    }
-
     .ilo--subnav--open & {
       visibility: hidden;
     }
@@ -219,7 +211,7 @@
     @include breakpoint("large") {
       display: flex;
       justify-content: space-between;
-      padding: 0 20px;
+      padding: 0 spacing(5);
 
       .ilo--subnav--open & {
         visibility: visible;
@@ -266,13 +258,9 @@
     display: none;
     font-family: $fonts-display;
     font-weight: 700;
-    padding: 16px 0;
+    padding: spacing(4) 0;
     text-align: right;
 
-    .right-to-left & {
-      text-align: left;
-    }
-
     @include breakpoint("large") {
       display: block;
     }
@@ -322,7 +310,7 @@
       align-items: center;
 
       &:first-of-type {
-        margin-left: -20px;
+        margin-left: -#{spacing(5)};
       }
     }
   }
@@ -330,7 +318,7 @@
   &--link {
     color: $brand-ilo-dark-blue;
     display: block;
-    padding: 16px 36px 16px 8px;
+    padding: spacing(4) spacing(9) spacing(4) spacing(2);
     text-decoration: none;
     transition: color 150ms ease-out, background 150ms ease-out;
 
@@ -345,7 +333,7 @@
       background: $brand-ilo-dark-blue;
       color: $brand-ilo-white;
       display: inline-block;
-      padding: 21.5px 24px 20.5px;
+      padding: 21.5px spacing(6) 20.5px;
 
       &:hover,
       &:focus {
@@ -372,7 +360,7 @@
     display: block;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: 16px 36px 16px 8px;
+    padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 24px;
     text-align: left;
     transition: all 150ms ease-out;
@@ -385,12 +373,12 @@
       color: $brand-ilo-blue;
     }
 
-    .right-to-left & {
+    [dir="rtl"] & {
       @include dataurlicon("arrowleft", $brand-ilo-dark-blue);
       background-color: $brand-ilo-white;
       background-position: 16px 55%;
       background-repeat: no-repeat;
-      background-size: 16px;
+      background-size: 24px;
       text-align: right;
 
       &:focus,
@@ -415,8 +403,8 @@
       cursor: pointer;
       display: inline-block;
       font-weight: 700;
-      margin-left: 20px;
-      padding: 7px 32px 5px 15px;
+      margin-left: spacing(5);
+      padding: 7px spacing(8) 5px 15px;
       text-align: center;
       transition: all 150ms ease-out;
       width: auto;
@@ -429,13 +417,13 @@
         color: $brand-ilo-blue;
       }
 
-      .right-to-left & {
+      [dir="rtl"] & {
         @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;
+        background-position: 10% 55%;
+        padding: 7px 15px 5px spacing(8);
 
         &:focus,
         &:hover {
@@ -454,9 +442,7 @@
     display: flex;
     justify-content: space-between;
 
-    .right-to-left & {
-      direction: rtl;
-
+    [dir="rtl"] {
       @include breakpoint("large") {
         padding: 0 max((100% - 1260px) / 2, 20px) 0 0;
       }
@@ -468,7 +454,7 @@
 
     &--logo-wrapper {
       display: flex;
-      padding: 16px 0;
+      padding: spacing(4) 0;
     }
 
     &--logo {
@@ -499,7 +485,7 @@
     &--link {
       background: inherit;
       color: $brand-ilo-white;
-      padding: 0 24px;
+      padding: 0 spacing(6);
       height: 100%;
       text-decoration: none;
       text-align: center;
@@ -520,8 +506,8 @@
 
 .ilo--mobile--nav {
   border-bottom: 3px solid $brand-ilo-grey-light;
-  margin-bottom: 16px;
-  padding-bottom: 16px;
+  margin-bottom: spacing(4);
+  padding-bottom: spacing(4);
 
   &--logo {
     align-items: center;
@@ -533,7 +519,7 @@
     background: $brand-ilo-white;
     left: 0;
     height: 100%;
-    padding: 0 0 px-to-rem(32px);
+    padding: 0 0 spacing(8);
     position: absolute;
     top: 0;
     transform: translateX(100%);
@@ -561,7 +547,7 @@
     display: block;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: 16px 36px 16px 8px;
+    padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 16px;
     text-align: left;
     transition: all 150ms ease-out;
@@ -574,14 +560,14 @@
       color: $brand-ilo-blue;
     }
 
-    .right-to-left & {
+    [dir="rtl"] & {
       background-position: 16px 55%;
       text-align: right;
     }
   }
 
   &--search {
-    padding: px-to-rem(32px) 0 px-to-rem(24px);
+    padding: spacing(8) 0 spacing(6);
 
     .ilo--searchfield,
     .ilo--form,
@@ -606,7 +592,7 @@
   padding: 0 max((100% - $layout-max-width) / 2, $layout-padding) 0 0;
   position: relative;
 
-  .right-to-left & {
+  [dir="rtl"] & {
     padding: 0 0 0 max((100% - $layout-max-width) / 2, $layout-padding);
   }
 
@@ -621,10 +607,10 @@
     top: 0;
     width: 32px;
 
-    .right-to-left & {
+    [dir="rtl"] & {
       clip-path: polygon(0 0, 0 100%, 100% 0);
       left: auto;
-      right: -32px;
+      right: -31px;
     }
   }
 
@@ -647,7 +633,7 @@
     display: block;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: 8px 30px 8px 40px;
+    padding: spacing(2) 30px spacing(2) spacing(10);
     transition: all 150ms ease-out;
 
     &:hover,
@@ -656,6 +642,11 @@
       background-color: $brand-ilo-light-blue;
       color: $brand-ilo-blue;
     }
+
+    [dir="rtl"] & {
+      padding: spacing(2) spacing(10) spacing(2) 30px;
+      background-position: calc(100% - 15px) center;
+    }
   }
 
   .ilo--context-menu {
@@ -687,7 +678,7 @@
   background: $brand-ilo-white;
   height: 100%;
   left: 0;
-  padding: 0 0 32px;
+  padding: 0 0 spacing(8);
   position: absolute;
   top: 0;
   transform: translateX(100%);
@@ -698,14 +689,10 @@
     transform: translateX(0);
   }
 
-  .right-to-left & {
-    direction: rtl;
-  }
-
   @include breakpoint("large") {
     height: auto;
     left: 0;
-    padding: 32px 0;
+    padding: spacing(8) 0;
     top: auto;
     transform: translateY(-100%);
     transition: transform 225ms ease-out;
@@ -755,7 +742,7 @@
     display: flex;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: 18px 8px;
+    padding: 18px spacing(2);
     text-decoration: none;
     transition: all 150ms ease-out;
 
@@ -788,7 +775,7 @@
     cursor: pointer;
     font-family: $fonts-display;
     font-weight: 500;
-    padding: 16px 16px 16px 32px;
+    padding: spacing(4) spacing(4) spacing(4) spacing(8);
     position: relative;
     transition: all 150ms ease-out;
 
@@ -807,7 +794,7 @@
       width: 24px;
     }
 
-    .right-to-left & {
+    [dir="rtl"] & {
       padding: 16px 32px 16px 16px;
 
       &::before {
@@ -832,7 +819,7 @@
         background-size: 24px;
       }
 
-      .right-to-left & {
+      [dir="rtl"] & {
         &::before {
           @include dataurlicon("arrowright", $brand-ilo-blue);
           background-position: 10% center;
@@ -853,8 +840,8 @@
     color: $brand-ilo-grey-charcoal;
     font-family: $fonts-display;
     font-weight: 700;
-    margin-bottom: 16px;
-    padding: 20px 8px;
+    margin-bottom: spacing(4);
+    padding: spacing(5) spacing(2);
     width: 100%;
   }
 }
@@ -877,7 +864,7 @@
       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;
+    padding: spacing(8) 0;
     top: auto;
     transform: translateY(-100%);
     transition: transform 225ms ease-out;
@@ -896,7 +883,7 @@
   .ilo--header--inner {
     align-items: center;
     justify-content: center;
-    padding: 80px 20px;
+    padding: spacing(20) spacing(5);
   }
 
   .ilo--form,

package/scss/components/_notification.scss

@@ -21,8 +21,7 @@
     }
 
     .ilo--notification--content {
-      padding: calc(px-to-rem($spacing-padding-3) + 2px)
-        px-to-rem($spacing-padding-3);
+      padding: spacing(6);
     }
   }
 
@@ -30,38 +29,37 @@
     max-width: 340px;
 
     .ilo--notification--content {
-      padding: calc(px-to-rem($spacing-padding-3) + 2px)
-        px-to-rem($spacing-padding-3);
+      padding: spacing(6);
     }
 
     @include breakpoint("medium") {
       max-width: 100%;
-      width: 100%;
 
       .ilo--notification--content {
-        align-items: start;
+        max-width: 100%;
         display: flex;
-        justify-items: space-between;
-        padding: px-to-rem(14px) px-to-rem($spacing-padding-3);
+        justify-content: space-evenly;
+        align-items: center;
+        padding: spacing(4) spacing(16) spacing(4) spacing(6);
       }
     }
   }
 
   &--content {
-    margin-left: px-to-rem($spacing-padding-5);
+    margin-left: spacing(10);
     position: relative;
     width: calc(100% - 40px);
 
     &:before {
-      background-position: center $spacing-padding-3;
+      background-position: center px-to-rem(24px);
       background-repeat: no-repeat;
-      background-size: px-to-rem($spacing-padding-2);
+      background-size: px-to-rem(16px);
       content: "";
       display: block;
       height: 100%;
       left: -40px;
       position: absolute;
-      width: px-to-rem($spacing-padding-5);
+      width: px-to-rem(40px);
       top: 0;
 
       @include breakpoint("medium") {
@@ -96,7 +94,7 @@
     font-weight: 700;
     @include font-styles("body-small");
 
-    margin-bottom: px-to-rem($spacing-padding-1-5);
+    margin-bottom: spacing(3);
 
     @include breakpoint("medium") {
       .ilo--notification--inline & {
@@ -111,21 +109,14 @@
 
     @include breakpoint("medium") {
       .ilo--notification--inline & {
-        margin-left: px-to-rem($spacing-padding-3);
+        margin-left: spacing(6);
       }
     }
 
     &:not(:last-child) {
-      margin-bottom: px-to-rem($spacing-padding-3);
-
       @include breakpoint("medium") {
         .ilo--notification--inline & {
-          margin-bottom: 0;
-          max-width: 24%;
-
-          @include breakpoint("large") {
-            max-width: 40%;
-          }
+          flex-grow: 1;
         }
       }
     }
@@ -139,12 +130,12 @@
 
     @include breakpoint("medium") {
       .ilo--notification--inline & {
-        margin-left: px-to-rem($spacing-padding-2);
+        margin-left: spacing(4);
       }
     }
 
     &:not(:last-child) {
-      margin-bottom: px-to-rem(19px);
+      margin-bottom: spacing(5);
     }
 
     @include breakpoint("medium") {
@@ -157,7 +148,7 @@
   &--cta {
     @include breakpoint("medium") {
       .ilo--notification--inline & {
-        margin-left: px-to-rem($spacing-padding-3);
+        margin-left: spacing(6);
       }
     }
   }
@@ -166,13 +157,13 @@
     background-color: $color-ux-background-highlight;
     background-position: center;
     background-repeat: no-repeat;
-    background-size: px-to-rem($spacing-padding-3);
+    background-size: px-to-rem(24px);
     border: none;
-    height: px-to-rem($spacing-padding-5);
+    height: px-to-rem(40px);
     position: absolute;
     right: 0;
     top: 0;
-    width: px-to-rem($spacing-padding-5);
+    width: px-to-rem(40px);
     @include dataurlicon("close", $color-ux-labels-actionable);
 
     &:hover,

package/scss/components/_pagination.scss

@@ -5,12 +5,8 @@
 .ilo--pagination {
   display: flex;
   justify-content: space-between;
-  margin-bottom: px-to-rem(
-    map-get($spacing, "ux", "pagination", "padding", "top")
-  );
-  margin-top: px-to-rem(
-    map-get($spacing, "ux", "pagination", "padding", "top")
-  );
+  margin-bottom: spacing(10);
+  margin-top: spacing(10);
   $self: &;
 
   &--link {
@@ -20,12 +16,12 @@
     color: map-get($color, "ux", "pagination", "default", "icon");
     display: inline-block;
     font-family: $fonts-display;
-    height: px-to-rem(map-get($spacing, "ux", "pagination", "width"));
+    height: px-to-rem(40px);
     overflow: hidden;
     position: relative;
     text-align: left;
     text-indent: -999%;
-    width: px-to-rem(map-get($spacing, "ux", "pagination", "width"));
+    width: px-to-rem(40px);
     @include font-styles("label-medium");
 
     &::before {
@@ -63,8 +59,7 @@
   }
 
   &--first-page {
-    margin: 0
-      px-to-rem(map-get($spacing, "ux", "pagination", "padding", "left")) 0 0;
+    margin: 0 spacing (2) 0 0;
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
 
@@ -190,8 +185,7 @@
   }
 
   &--last-page {
-    margin: 0 0 0
-      px-to-rem(map-get($spacing, "ux", "pagination", "padding", "right"));
+    margin: 0 0 0 spacing(2);
 
     &::before {
       @include dataurlicon(

package/scss/components/_profile.scss

@@ -154,7 +154,7 @@ $avatar-size-lg: $row-1-lg;
       #{$c}--avatar {
         width: px-to-rem($avatar-size-lg);
         height: px-to-rem($avatar-size-lg);
-        margin-inline-end: px-to-rem(15px);
+        margin-inline-end: spacing(4);
       }
 
       #{$c}--name {
@@ -168,12 +168,12 @@ $avatar-size-lg: $row-1-lg;
 
       #{$c}--description {
         @include font-styles("body-xs");
-        padding-block-start: px-to-rem(21px);
+        padding-block-start: spacing(5);
       }
 
       #{$c}--link {
         @include font-styles("body-small");
-        padding-block-start: px-to-rem(21px);
+        padding-block-start: spacing(6);
       }
     }
   }