@ilo-org/styles 0.1.3 → 0.1.5

package/scss/components/_navigation.scss

@@ -22,16 +22,19 @@
 
   &--menu {
     @include dataurlicon("burger", $brand-ilo-white);
+    align-self: center;
     background-color: transparent;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 32px;
     border: none;
     cursor: pointer;
+    height: 32px;
     overflow: hidden;
     position: relative;
     text-indent: -999%;
     transition: all 150ms ease-out;
+    width: 32px;
 
     &:hover,
     &:focus {
@@ -87,6 +90,10 @@
     &-link {
       display: block;
       padding: 16px 0;
+
+      @include breakpoint("large") {
+        padding: 0 0 24px;
+      }
     }
   }
 
@@ -443,6 +450,17 @@
     }
   }
 
+  &--search {
+    .ilo--searchfield {
+      max-width: 618px;
+      width: 100%;
+    }
+
+    .ilo--fieldset {
+      width: 100%;
+    }
+  }
+
   @include breakpoint("large") {
     display: none;
   }
@@ -726,6 +744,15 @@
     justify-content: center;
     padding: 80px 20px;
   }
+
+  .ilo--searchfield {
+    max-width: 618px;
+    width: 100%;
+  }
+
+  .ilo--fieldset {
+    width: 100%;
+  }
 }
 
 .ilo--search {

package/scss/components/_profile.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "../animations";
 @import "../mixins";
 
 .ilo--profile {
@@ -104,6 +105,7 @@
       background-color: $color-base-blue-light;
       color: map-get($color, "link", "text", "hover");
       outline: none;
+      @include globaltransition("color, background-color");
 
       span {
         @include dataurlicon("arrowright", $color-link-text-hover);

package/scss/components/_radio.scss

@@ -93,7 +93,9 @@
   margin-bottom: px-to-rem(22px);
 
   .ilo--fieldset--label {
+    font-family: $fonts-copy;
     font-weight: 400;
+    margin-bottom: 0;
     margin-left: px-to-rem($spacing-padding-1);
     margin-top: 2px;
     order: 2;
@@ -104,4 +106,13 @@
     order: 3;
     width: 100%;
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--fieldset--label {
+      margin-left: 0;
+      margin-right: px-to-rem($spacing-padding-1);
+    }
+  }
 }

package/scss/components/_readmore.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "../animations";
 @import "../mixins";
 
 .ilo--read-more {
@@ -35,8 +36,7 @@
       @include bordervalues("readmore", "ux", "hover");
       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);

package/scss/components/_richtext.scss

@@ -9,6 +9,32 @@
 
   a {
     @include linkstyles();
+    border: none;
+    text-decoration: underline;
+
+    &:visited {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "visited");
+    }
+
+    &:hover {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "hover");
+    }
+
+    &:active {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "active");
+    }
+
+    &:focus {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "focus");
+    }
   }
 
   img {

package/scss/components/_searchfield.scss

@@ -63,4 +63,15 @@
       pointer-events: none;
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--searchfield--button {
+      border-left: $spacing-formelements-inputbutton-default-borderrtl-left
+        solid $color-formelements-inputbutton-default-border-left;
+      border-right: $spacing-formelements-inputbutton-default-borderrtl-right
+        solid $color-formelements-inputbutton-default-border-right;
+    }
+  }
 }

package/scss/components/_tabs.scss

@@ -3,9 +3,9 @@
 @import "../mixins";
 
 .ilo--tabs {
-  border-bottom: px-to-rem(4px) solid $color-base-neutrals-lighter;
-  border-left: px-to-rem(4px) solid $color-base-neutrals-lighter;
-  border-right: px-to-rem(4px) solid $color-base-neutrals-lighter;
+  border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
+  border-left: px-to-rem(3px) solid $color-base-neutrals-lighter;
+  border-right: px-to-rem(3px) solid $color-base-neutrals-lighter;
 
   &:not(.tabs--js) {
     .ilo--tabs--selection {
@@ -158,7 +158,7 @@
         }
 
         &--item {
-          width: min(calc(var(--tabscount) / 1 * 100%), 25%);
+          width: min(calc(var(--tabscount) / 1 * 100%), 100%);
         }
       }
     }

package/scss/components/_tag.scss

@@ -2,9 +2,13 @@
 @use "../functions" as *;
 @use "../mixins" as *;
 
-.ilo--tag-set {
+.ilo--tags {
   list-style: none;
 
+  .right-to-left & {
+    direction: rtl;
+  }
+
   &__item {
     display: inline-block;
     margin: map-get($spacing, "horizontal-rule");

package/scss/components/_textarea.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(
@@ -30,21 +30,6 @@
   @include spacingvalues("padding", "input", "formelements");
   width: map-get($spacing, "formelements", "input", "default", "width");
 
-  &::-webkit-resizer {
-    background-size: cover;
-    background-repeat: no-repeat;
-    bottom: 2px;
-    height: 12px;
-    right: 0;
-    pointer-events: none;
-    position: absolute;
-    width: 22px;
-    @include dataurlicon(
-      "scalenerighttriangle",
-      $color-formelements-input-default-border-bottom
-    );
-  }
-
   &:focus {
     background-color: map-get(
       $color,
@@ -74,4 +59,8 @@
     );
     @include bordervalues("input", "formelements", "error");
   }
+
+  .right-to-left & {
+    direction: rtl;
+  }
 }

package/scss/components/index.scss

@@ -12,6 +12,7 @@
 @use "empty";
 @use "fieldset";
 @use "file-upload";
+@use "form";
 @use "formgroup";
 @use "footer";
 @use "heading";