@ilo-org/styles 0.1.0 → 0.1.1

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

@@ -78,6 +78,11 @@
 
   &--logo {
     display: block;
+    max-width: 150px;
+
+    @include breakpoint("large") {
+      max-width: 200px;
+    }
 
     &-link {
       display: block;

package/scss/components/_notification.scss

@@ -27,13 +27,23 @@
   }
 
   &--inline {
-    width: 100%;
+    max-width: 340px;
 
     .ilo--notification--content {
-      align-items: center;
-      display: flex;
-      justify-items: space-between;
-      padding: px-to-rem(14px) px-to-rem($spacing-padding-3);
+      padding: calc(px-to-rem($spacing-padding-3) + 2px)
+        px-to-rem($spacing-padding-3);
+    }
+
+    @include breakpoint("medium") {
+      max-width: 100%;
+      width: 100%;
+
+      .ilo--notification--content {
+        align-items: center;
+        display: flex;
+        justify-items: space-between;
+        padding: px-to-rem(14px) px-to-rem($spacing-padding-3);
+      }
     }
   }
 
@@ -54,8 +64,10 @@
       width: px-to-rem($spacing-padding-5);
       top: 0;
 
-      .ilo--notification--inline & {
-        background-position: center;
+      @include breakpoint("medium") {
+        .ilo--notification--inline & {
+          background-position: center;
+        }
       }
 
       .icon--error & {
@@ -84,8 +96,12 @@
     font-weight: 700;
     @include font-styles("body-small");
 
-    .ilo--notification--dialog & {
-      margin-bottom: px-to-rem($spacing-padding-1-5);
+    margin-bottom: px-to-rem($spacing-padding-1-5);
+
+    @include breakpoint("medium") {
+      .ilo--notification--inline & {
+        margin-bottom: 0;
+      }
     }
   }
 
@@ -93,20 +109,23 @@
     font-weight: 400;
     @include font-styles("body-xs");
 
-    .ilo--notification--inline & {
-      margin-left: px-to-rem($spacing-padding-3);
+    @include breakpoint("medium") {
+      .ilo--notification--inline & {
+        margin-left: px-to-rem($spacing-padding-3);
+      }
     }
 
     &:not(:last-child) {
-      .ilo--notification--dialog & {
-        margin-bottom: px-to-rem($spacing-padding-3);
-      }
+      margin-bottom: px-to-rem($spacing-padding-3);
 
-      .ilo--notification--inline & {
-        max-width: 24%;
+      @include breakpoint("medium") {
+        .ilo--notification--inline & {
+          margin-bottom: 0;
+          max-width: 24%;
 
-        @include breakpoint("large") {
-          max-width: 40%;
+          @include breakpoint("large") {
+            max-width: 40%;
+          }
         }
       }
     }
@@ -118,20 +137,28 @@
     font-weight: 400;
     @include font-styles("body-xs");
 
-    .ilo--notification--inline & {
-      margin-left: px-to-rem($spacing-padding-2);
+    @include breakpoint("medium") {
+      .ilo--notification--inline & {
+        margin-left: px-to-rem($spacing-padding-2);
+      }
     }
 
     &:not(:last-child) {
-      .ilo--notification--dialog & {
-        margin-bottom: px-to-rem(19px);
+      margin-bottom: px-to-rem(19px);
+    }
+
+    @include breakpoint("medium") {
+      .ilo--notification--inline & {
+        margin-bottom: 0;
       }
     }
   }
 
   &--cta {
-    .ilo--notification--inline & {
-      margin-left: px-to-rem($spacing-padding-3);
+    @include breakpoint("medium") {
+      .ilo--notification--inline & {
+        margin-left: px-to-rem($spacing-padding-3);
+      }
     }
   }
 

package/scss/components/_table.scss

@@ -48,6 +48,7 @@
       font-family: $fonts-display;
       font-weight: 700;
       @include font-styles("body-xs");
+      letter-spacing: -0.02em;
       padding: $spacing-ux-table-head-padding-top
         $spacing-ux-table-head-padding-right
         $spacing-ux-table-head-padding-bottom
@@ -55,6 +56,13 @@
       pointer-events: none;
       text-align: left;
 
+      .ilo--table--small & {
+        padding: $spacing-ux-table-smallhead-padding-top
+          $spacing-ux-table-smallhead-padding-right
+          $spacing-ux-table-smallhead-padding-bottom
+          $spacing-ux-table-smallhead-padding-left;
+      }
+
       &:first-of-type {
         border-left: none;
       }
@@ -113,6 +121,13 @@
         $spacing-ux-table-cell-padding-left;
       position: relative;
 
+      .ilo--table--small & {
+        padding: $spacing-ux-table-smallcell-padding-top
+          $spacing-ux-table-smallcell-padding-right
+          $spacing-ux-table-smallcell-padding-bottom
+          $spacing-ux-table-smallcell-padding-left;
+      }
+
       &:first-of-type {
         border-left: none;
       }
@@ -121,10 +136,17 @@
         text-align: right;
       }
 
+      &:hover {
+        background-color: $color-ux-table-selected-background;
+        border-bottom: 2px solid $color-ux-labels-hover;
+        color: $color-ux-labels-hover;
+      }
+
       &.selected {
         background-color: $color-ux-table-selected-background;
         border-bottom: 2px solid $color-ux-labels-hover;
         color: $color-ux-labels-hover;
+        cursor: pointer;
       }
 
       &.column--selected {
@@ -145,6 +167,7 @@
   }
 
   &--description {
+    color: $color-base-neutrals-medium;
     font-family: $fonts-copy;
     font-weight: 400;
     @include font-styles("body-xxs");
@@ -167,11 +190,20 @@
         border-left: px-to-rem(1px) solid $color-base-neutrals-white;
 
         &:hover,
-        &:focus,
-        &.selected {
+        &:focus {
           background-color: $color-ux-table-selected-background;
         }
       }
+
+      &.selected {
+        .ilo--table--body--cell {
+          background-color: $color-ux-table-hover-background;
+
+          &.selected {
+            background-color: $color-ux-table-selected-background;
+          }
+        }
+      }
     }
   }
 }