@ilo-org/styles 0.8.3 → 0.9.0

package/scss/components/_hero.scss

@@ -18,6 +18,7 @@
   // CSS vars can be changed
   --corner-cut-height: #{$corner-cut-sm};
 
+  width: 100%;
   display: grid;
   position: relative;
   grid-template-rows:

package/scss/components/_navigation.scss

@@ -367,6 +367,7 @@
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
     background-size: 24px;
+    background-position-y: center;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
@@ -374,6 +375,7 @@
     font-family: $fonts-display;
     font-weight: 500;
     padding: 16px 36px 16px 8px;
+    line-height: 24px;
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;
@@ -554,6 +556,7 @@
     background-position: calc(100% - 16px) 55%;
     background-repeat: no-repeat;
     background-size: 16px;
+    background-position-y: center;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
@@ -561,6 +564,7 @@
     font-family: $fonts-display;
     font-weight: 500;
     padding: 16px 36px 16px 8px;
+    line-height: 16px;
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;

package/scss/components/_radio.scss

@@ -3,16 +3,14 @@
 @import "../mixins";
 
 .ilo--radio {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   border: none;
   display: grid;
   height: px-to-rem(24px);
   margin: 0;
-  order: 1;
   position: relative;
   place-content: center;
   width: px-to-rem(24px);
+  cursor: pointer;
 
   &:before {
     content: "";
@@ -25,6 +23,7 @@
     top: px-to-rem(3px);
     width: px-to-rem(18px);
     z-index: 1;
+    pointer-events: none;
   }
 
   &:after {
@@ -37,6 +36,7 @@
     top: 0;
     width: px-to-rem(24px);
     z-index: 0;
+    pointer-events: none;
   }
 
   &:checked {
@@ -54,13 +54,6 @@
     &:after {
       background-color: $color-base-yellow;
     }
-
-    &:checked {
-      &:before {
-        border-color: $color-base-blue-dark;
-      }
-    }
-
     outline: none;
   }
 
@@ -70,8 +63,7 @@
   }
 
   &:invalid,
-  &.error,
-  .error & {
+  &__error {
     &:after {
       background-color: $color-base-red-medium;
     }
@@ -83,43 +75,3 @@
     }
   }
 }
-
-.ilo--fieldset--input--radio {
-  align-items: center;
-  clear: both;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: px-to-rem(22px);
-
-  .ilo--fieldset--label {
-    color: $color-base-neutrals-black;
-    font-family: $fonts-copy;
-    font-weight: 400;
-    font-size: 14.9px;
-    margin-bottom: 0;
-    margin-left: px-to-rem($spacing-padding-1);
-    margin-top: 2px;
-    order: 2;
-
-    .right-to-left & {
-      margin-left: 0;
-      margin-right: px-to-rem($spacing-padding-1);
-    }
-  }
-
-  .ilo--fieldset--error,
-  .ilo--fieldset--helper {
-    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/_textarea.scss

@@ -48,8 +48,8 @@
   }
 
   &:invalid,
-  &.error,
-  .error & {
+  &__error,
+  &__error & {
     background-color: map-get(
       $color,
       "formelements",

package/scss/components/_textinput.scss

@@ -0,0 +1,65 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--text-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: map-get(
+    $color,
+    "formelements",
+    "input",
+    "default",
+    "background"
+  );
+  @include bordervalues("input", "formelements");
+  box-sizing: border-box;
+  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")
+  );
+  @include spacingvalues("margin", "input", "formelements");
+  outline: none;
+  @include spacingvalues("padding", "input", "formelements");
+  width: map-get($spacing, "formelements", "input", "default", "width");
+
+  &:focus {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "focus",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "focus");
+    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 45%;
+    pointer-events: none;
+  }
+
+  &:invalid,
+  &__error {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "error",
+      "background"
+    );
+  }
+
+  &:invalid {
+    @include bordervalues("input", "formelements", "invalid");
+  }
+
+  &__error {
+    @include bordervalues("input", "formelements", "error");
+  }
+}

package/scss/components/_toggle.scss

@@ -0,0 +1,135 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../animations";
+
+.ilo--input--toggle {
+  $c: &;
+
+  grid-area: input;
+  position: relative;
+  display: inline-block;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+
+  --base-toggle-width: #{px-to-rem(
+      map-get($spacing, "formelements", "toggle", "base", "width")
+    )};
+
+  --base-toggle-height: #{px-to-rem(
+      map-get($spacing, "formelements", "toggle", "base", "height")
+    )};
+
+  &__size__small {
+    --toggle-width: var(--base-toggle-width);
+    --toggle-height: var(--base-toggle-height);
+  }
+
+  &__size__medium {
+    --toggle-width: calc(var(--base-toggle-width) * 1.5);
+    --toggle-height: calc(var(--base-toggle-height) * 1.5);
+  }
+
+  &__size__large {
+    --toggle-width: calc(var(--base-toggle-width) * 2);
+    --toggle-height: calc(var(--base-toggle-height) * 2);
+  }
+
+  &__disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &__error {
+    #{$c}--slider {
+      outline-color: map-get(
+        $color,
+        "formelements",
+        "toggle",
+        "error",
+        "border"
+      ) !important;
+      outline-width: calc(var(--toggle-height) / 8);
+      outline-style: solid;
+    }
+  }
+
+  input[type="checkbox"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &--slider {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: map-get(
+      $color,
+      "formelements",
+      "toggle",
+      "unchecked",
+      "background"
+    );
+    border-radius: calc(var(--toggle-height) / 2);
+    @include globaltransition("background");
+
+    &::before {
+      position: absolute;
+      content: "";
+      height: calc(var(--toggle-height) - var(--toggle-height) / 3);
+      width: calc(var(--toggle-height) - var(--toggle-height) / 3);
+      left: calc(var(--toggle-height) / 6);
+      bottom: calc(var(--toggle-height) / 6);
+      background-color: map-get(
+        $color,
+        "formelements",
+        "toggle",
+        "unchecked",
+        "slider",
+        "color"
+      );
+      border-radius: 50%;
+      @include globaltransition("transform, background");
+    }
+  }
+
+  input[type="checkbox"]:checked + &--slider {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "toggle",
+      "checked",
+      "background"
+    );
+  }
+
+  input[type="checkbox"]:focus + &--slider {
+    outline-color: map-get(
+      $color,
+      "formelements",
+      "toggle",
+      "active",
+      "border"
+    );
+    outline-width: calc(var(--toggle-height) / 8);
+    outline-style: solid;
+  }
+
+  input:checked + &--slider:before {
+    transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
+    background-color: map-get(
+      $color,
+      "formelements",
+      "toggle",
+      "checked",
+      "slider",
+      "color"
+    );
+  }
+}

package/scss/components/index.scss

@@ -21,7 +21,7 @@
 @use "fieldset";
 @use "file-upload";
 @use "form";
-@use "formgroup";
+@use "formcontrol";
 @use "footer";
 @use "heading";
 @use "hero";
@@ -48,6 +48,8 @@
 @use "tableofcontents";
 @use "textarea";
 @use "tag";
+@use "textinput";
+@use "toggle";
 @use "tooltip";
 @use "video";
 @use "socialmedia";