@ilo-org/styles 0.1.2 → 0.1.3

package/scss/components/_credit.scss

@@ -79,4 +79,41 @@
       }
     }
   }
+
+  .right-to-left & {
+    &:after {
+      background-position: top left;
+      left: auto;
+      right: 100%;
+      transform: scaleX(-1);
+    }
+
+    @include breakpoint("large", true) {
+      &--label {
+        left: auto;
+        right: 0;
+
+        &:after {
+          background-position: top right;
+          @include dataurlicon(
+            "equilateraltriangle",
+            $color-base-neutrals-dark
+          );
+          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/_dropdown.scss

@@ -16,12 +16,10 @@
   @include bordervalues("input", "formelements");
   border-radius: 0;
   box-sizing: content-box;
-  font-family: $fonts-display;
+  font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
-  height: px-to-rem(
-    map-get($spacing, "formelements", "input", "default", "height")
-  );
+  height: px-to-rem(45px);
   @include spacingvalues("margin", "input", "formelements");
   outline: none;
   overflow: hidden;
@@ -33,9 +31,9 @@
   white-space: nowrap;
   width: calc(100% - 78px);
 
-  background-position: calc(100% - 14px) center;
+  background-position: calc(100% - 14px) center, 100% center;
   background-repeat: no-repeat;
-  background-size: 24px 24px, 72px 100%;
+  background-size: 24px 24px, 102px 100%;
   background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-actionable)}"),
     linear-gradient(
       to right,
@@ -43,8 +41,8 @@
       transparent calc(50% - 0.81px),
       $color-formelements-input-default-border-left calc(50% - 0.8px),
       $color-formelements-input-default-border-left calc(50% + 0.8px),
-      transparent calc(50% + 0.81px),
-      transparent 100%
+      rgba(237, 240, 242, 1) calc(50% + 0.81px),
+      rgba(237, 240, 242, 1) 100%
     );
 
   option {
@@ -95,6 +93,23 @@
       );
   }
 
+  &:active {
+    background-position: calc(100% - 14px) center, 100% center;
+    background-repeat: no-repeat;
+    background-size: 24px 24px, 102px 100%;
+    background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-actionable)}"),
+      linear-gradient(
+        to right,
+        transparent 0%,
+        transparent calc(50% - 0.81px),
+        $color-formelements-input-default-border-left calc(50% - 0.8px),
+        $color-formelements-input-default-border-left calc(50% + 0.8px),
+        rgba(237, 240, 242, 1) calc(50% + 0.81px),
+        rgba(237, 240, 242, 1) 100%
+      );
+    @include bordervalues("input", "formelements");
+  }
+
   &:disabled {
     opacity: 45%;
     pointer-events: none;

package/scss/components/_fieldset.scss

@@ -18,6 +18,7 @@
   }
 
   &--helper {
+    color: $color-base-neutrals-medium;
     font-family: $fonts-copy;
     @include font-styles("body-xxs");
     @include textmargin(

package/scss/components/_footer.scss

@@ -34,7 +34,9 @@
   }
 
   &--logo {
+    min-width: 200px;
     max-width: 100%;
+    width: 35%;
   }
 
   &--secondary {
@@ -294,7 +296,7 @@
     }
 
     &--logo {
-      width: 100%;
+      width: 25%;
     }
 
     &--secondary {

package/scss/components/_image.scss

@@ -39,4 +39,18 @@
       bottom: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
     }
   }
+
+  .right-to-left & {
+    .ilo--image--caption {
+      border-left: none;
+      border-right: 3px solid #b8c4cc;
+      padding-left: 0;
+      padding-right: px-to-rem(map-get($spacing, "padding-1"));
+    }
+
+    .ilo--credit {
+      left: auto;
+      right: 0;
+    }
+  }
 }

package/scss/components/_input.scss

@@ -15,7 +15,7 @@
   );
   @include bordervalues("input", "formelements");
   box-sizing: border-box;
-  font-family: $fonts-display;
+  font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(
@@ -26,18 +26,6 @@
   @include spacingvalues("padding", "input", "formelements");
   width: map-get($spacing, "formelements", "input", "default", "width");
 
-  &:hover {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "hover",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "hover");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
-  }
-
   &:focus {
     background-color: map-get(
       $color,

package/scss/components/_linklist.scss

@@ -78,6 +78,7 @@
     @include font-styles("body-small");
     @include textmargin("padding-bottom", 25px, "body-small", "display", 0, 0);
     @include textmargin("padding-top", 25px, "body-small", "display", 0, 0);
+    padding-right: px-to-rem($spacing-padding-4);
     text-decoration: none;
     @include dataurlicon("arrowright", $color-link-text-default);
 

package/scss/components/_modal.scss

@@ -27,7 +27,8 @@
       .ilo--modal--wrapper {
         & > * {
           opacity: 1;
-          transition: opacity 1.5s ease-out 125ms;
+          transition-delay: 125ms;
+          @include globaltransition("opacity");
         }
       }
     }
@@ -57,10 +58,17 @@
   }
 
   .modal--close {
+    height: px-to-rem(40px);
     right: 0;
     position: absolute;
     top: 0;
+    width: px-to-rem(40px);
     z-index: 10004;
+
+    .ilo--icon {
+      left: px-to-rem(3px);
+      top: px-to-rem(3px);
+    }
   }
 
   @include breakpoint("medium") {

package/scss/components/_profile.scss

@@ -1,4 +1,5 @@
 @use "../tokens" as *;
+@use "../functions" as *;
 @import "../mixins";
 
 .ilo--profile {
@@ -41,36 +42,41 @@
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "label");
     margin-left: 11px;
-    @include font-styles("body-xs");
+    @include font-styles("body-small");
   }
 
   &--role {
     display: block;
     font-family: $fonts-copy;
     margin-left: 11px;
-    @include font-styles("body-xss");
+    @include font-styles("body-xs");
   }
 
   &--description {
     clear: both;
     font-family: $fonts-copy;
     padding-top: 22px;
-    @include font-styles("body-xss");
+    @include font-styles("body-xs");
   }
 
   &--link {
+    align-items: center;
     clear: both;
     color: map-get($color, "link", "text", "default");
-    display: block;
+    display: inline-flex;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
+    height: px-to-rem(56px);
     text-decoration: none;
-    @include font-styles("body-xs");
+    @include font-styles("body-small");
 
     span {
+      align-items: center;
       background-position: calc(100% - 10px) center;
       background-repeat: no-repeat;
       background-size: 24px 24px;
+      display: inline-flex;
+      height: 24px;
       padding-right: 32px;
       @include dataurlicon("arrowright", $color-link-text-default);
     }
@@ -95,6 +101,7 @@
 
     &:hover,
     &:focus {
+      background-color: $color-base-blue-light;
       color: map-get($color, "link", "text", "hover");
       outline: none;
 
@@ -105,34 +112,14 @@
   }
 
   .ilo--profile--description + .ilo--profile--link {
-    margin-top: 28px;
+    margin-top: px-to-rem(8px);
   }
 
   .ilo--profile--role + .ilo--profile--link {
-    margin-top: 22px;
+    margin-top: px-to-rem(2px);
   }
 
   .ilo--profile--name + .ilo--profile--link {
-    margin-top: 38px;
-  }
-
-  @include breakpoint("medium") {
-    &--name {
-      @include font-styles("body-small");
-    }
-
-    &--role {
-      font-family: $fonts-copy;
-      @include font-styles("body-xs");
-    }
-
-    &--description {
-      font-family: $fonts-copy;
-      @include font-styles("body-xs");
-    }
-
-    &--link {
-      @include font-styles("body-small");
-    }
+    margin-top: px-to-rem(18px);
   }
 }

package/scss/components/_radio.scss

@@ -50,20 +50,6 @@
     }
   }
 
-  &:hover {
-    cursor: pointer;
-
-    &:after {
-      background-color: $color-base-yellow;
-    }
-
-    &:checked {
-      &:before {
-        border-color: $color-base-blue-dark;
-      }
-    }
-  }
-
   &:focus {
     &:after {
       background-color: $color-base-yellow;

package/scss/components/_richtext.scss

@@ -387,4 +387,58 @@
       }
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    figcaption {
+      border-left: none;
+      border-right: 3px solid #b8c4cc;
+      padding-left: 0;
+      padding-right: px-to-rem(map-get($spacing, "padding-1"));
+    }
+
+    ul,
+    ol {
+      li {
+        &::before {
+          left: auto;
+          right: px-to-rem(-12px);
+          @include dataurlicon("listarrowreverse");
+        }
+        margin-left: 0;
+        margin-right: px-to-rem(12px);
+        padding-left: 0;
+        padding-right: px-to-rem(12px);
+      }
+    }
+
+    blockquote {
+      background-position: -1px -1px;
+      padding: px-to-rem(54px) px-to-rem(map-get($spacing, "padding-4"))
+        px-to-rem(34px) 0;
+      @include dataurlicon("trianglereverse", $color-ux-background-default);
+
+      p {
+        padding: 0 0 0 px-to-rem(map-get($spacing, "padding-6"));
+
+        &:after {
+          left: 0;
+          right: auto;
+          transform: scaleX(1);
+        }
+      }
+
+      &:before {
+        left: auto;
+        right: 0;
+        transform: scaleX(-1);
+      }
+
+      @include breakpoint("medium") {
+        padding: px-to-rem(62px) px-to-rem(map-get($spacing, "padding-6"))
+          px-to-rem(map-get($spacing, "padding-6")) 0;
+      }
+    }
+  }
 }

package/scss/components/_searchfield.scss

@@ -18,14 +18,14 @@
     background-size: $spacing-padding-3 $spacing-padding-3;
     @include bordervalues("inputbutton", "formelements");
     height: $spacing-padding-6;
-    width: $spacing-padding-6;
+    width: calc($spacing-padding-6 - 2px);
     text-indent: -9999px;
     @include dataurlicon(
       "search",
       $color-formelements-inputbutton-default-color
     );
 
-    &:hover {
+    &:focus {
       background-color: map-get(
         $color,
         "formelements",

package/scss/components/_table.scss

@@ -29,8 +29,6 @@
 
   &--head {
     background-color: $color-ux-table-content-background;
-    border-top: px-to-rem(2px) solid $color-base-neutrals-lighter;
-    border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
     box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
       0px 10px 20px rgba(30, 45, 190, 0.08),
@@ -38,13 +36,15 @@
     left: 0;
     height: auto;
     position: sticky;
-    top: 0;
+    top: -1px;
     width: 100%;
     z-index: 2;
 
     &--cell {
       background-color: $color-ux-table-content-background;
       border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;
+      border-top: px-to-rem(2px) solid $color-base-neutrals-lighter;
+      border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
       font-family: $fonts-display;
       font-weight: 700;
       @include font-styles("body-xs");
@@ -88,8 +88,15 @@
         }
 
         &:hover {
-          background-color: $color-ux-table-selected-background;
+          background-color: $color-base-blue-light;
+          border-bottom: px-to-rem(2px) solid $color-base-blue-medium;
+          color: $color-base-blue-medium;
           cursor: pointer;
+
+          &:after {
+            background-color: $color-base-blue-light;
+            background-image: url("#{colortodataurlicon("arrow", $color-base-blue-medium)}");
+          }
         }
 
         &[aria-sort="descending"] {
@@ -160,10 +167,16 @@
   }
 
   &--headline {
+    align-items: center;
+    display: flex;
     font-family: $fonts-display;
     font-weight: 700;
     margin-bottom: px-to-rem(7px);
     @include font-styles("headline-6");
+
+    .ilo--tooltip--wrapper {
+      margin-left: px-to-rem(6px);
+    }
   }
 
   &--description {

package/scss/components/_tableofcontents.scss

@@ -1,12 +1,121 @@
 @use "../tokens" as *;
+@use "../animations" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--table-of-contents {
   background-color: $color-ux-tableofcontents-items-default-background;
+  display: none;
   min-width: 343px;
   padding: 0;
 
+  & > * {
+    opacity: 0;
+  }
+
+  &.show {
+    display: block;
+
+    &.fadein {
+      & > * {
+        opacity: 1;
+        transition-delay: 125ms;
+        @include globaltransition("opacity");
+      }
+    }
+  }
+
+  &--headline {
+    margin-bottom: px-to-rem($spacing-padding-3);
+    margin-top: px-to-rem(9px);
+    @include font-styles("base");
+    font-family: $fonts-display;
+    font-weight: 700;
+  }
+
+  &--wrapper {
+    &.show {
+      display: block;
+      height: 100vh;
+      left: 0;
+      padding: px-to-rem(26px);
+      position: fixed;
+      top: 0;
+      width: 100vw;
+      z-index: 10001;
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
+  }
+
+  &--trigger {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: px-to-rem($spacing-padding-3) auto;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  @include breakpoint("large") {
+    display: block;
+
+    & > * {
+      opacity: 1;
+    }
+
+    &--trigger {
+      display: none;
+    }
+  }
+
+  &--modal {
+    display: none;
+    position: relative;
+
+    & > * {
+      opacity: 0;
+    }
+
+    &.show {
+      display: block;
+
+      &.fadein {
+        & > * {
+          opacity: 1;
+          transition-delay: 125ms;
+          @include globaltransition("opacity");
+        }
+      }
+    }
+
+    @include breakpoint("large") {
+      display: none;
+
+      &.show {
+        display: none;
+      }
+    }
+
+    .toc--modal--close {
+      bottom: 0;
+      height: px-to-rem(40px);
+      right: 0;
+      position: absolute;
+      width: px-to-rem(40px);
+      z-index: 10004;
+
+      .ilo--icon {
+        left: px-to-rem(3px);
+        top: px-to-rem(3px);
+      }
+    }
+  }
+
   &--list,
   &--list--item {
     width: 100%;
@@ -29,6 +138,7 @@
       $spacing-ux-tableofcontents-items-padding-right
       $spacing-ux-tableofcontents-items-padding-bottom
       $spacing-ux-tableofcontents-items-padding-left;
+    position: relative;
     text-decoration: none;
     width: calc(
       100% - $spacing-ux-tableofcontents-padding-right -
@@ -36,6 +146,7 @@
     );
     @include dataurlicon("stemarrow", $color-ux-labels-actionable);
     @include font-styles("label-medium");
+    @include globaltransition("background-color, border, color");
 
     &:hover,
     &:focus {
@@ -58,14 +169,17 @@
         );
       width: 100%;
       @include dataurlicon("stemarrow", $color-ux-labels-hover);
+      @include globaltransition("background-color, border, color");
     }
 
     &:active {
       background-color: $color-ux-tableofcontents-items-active-background;
       border-bottom: $color-ux-tableofcontents-items-active-border
         $spacing-ux-tableofcontents-items-border-bottom solid;
+      border-top: $color-ux-tableofcontents-items-default-border
+        $spacing-ux-tableofcontents-items-border-bottom solid;
       color: $color-ux-tableofcontents-items-active-color;
-      margin: 0;
+      margin: -2px 0 0 0;
       outline: none;
       padding: $spacing-ux-tableofcontents-items-padding-top
         calc(
@@ -82,6 +196,7 @@
         "stemarrow",
         $color-ux-tableofcontents-items-active-icon
       );
+      z-index: 5;
     }
   }
 
@@ -95,4 +210,28 @@
       }
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--table-of-contents--link {
+      background-position: 11px center;
+
+      &:hover,
+      &:focus {
+        background-position: 19px center;
+      }
+    }
+
+    &--wrapper {
+      direction: rtl;
+    }
+
+    &--modal {
+      .toc--modal--close {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
 }