@ilo-org/styles 0.0.1

package/scss/components/_textarea.scss

@@ -0,0 +1,89 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--textarea {
+  -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-display;
+  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");
+  max-width: map-get($spacing, "formelements", "input", "default", "width");
+  min-height: px-to-rem($spacing-padding-15);
+  min-width: map-get($spacing, "formelements", "input", "default", "width");
+  outline: none;
+  position: relative;
+  @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
+    );
+  }
+
+  &: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,
+      "formelements",
+      "input",
+      "focus",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "focus");
+    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+  }
+
+  &:disabled {
+    opacity: 45%;
+    pointer-events: none;
+  }
+
+  &:invalid,
+  &.error,
+  .error & {
+    background-color: map-get(
+      $color,
+      "formelements",
+      "input",
+      "error",
+      "background"
+    );
+    @include bordervalues("input", "formelements", "error");
+  }
+}

package/scss/components/_tooltip.scss

@@ -0,0 +1,198 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--tooltip {
+  @include font-styles("body-xs");
+  background: map-get($color, "tooltip", "default", "background");
+  border: none;
+  border-radius: px-to-rem(2px);
+  display: inline-block;
+  filter: drop-shadow(
+      0 px-to-rem(0.8px) px-to-rem(1.6px)
+        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.038)
+    )
+    drop-shadow(
+      0 px-to-rem(2.7) px-to-rem(5.4px)
+        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.054)
+    )
+    drop-shadow(
+      0 px-to-rem(12px) px-to-rem(24px)
+        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.12)
+    );
+  color: map-get($color, "tooltip", "default", "text");
+  opacity: 0;
+  padding: map-get($spacing, "ui-padding");
+  position: absolute;
+  transition: opacity 0.15s ease-in-out;
+  visibility: hidden;
+  width: auto;
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+    z-index: 2;
+  }
+
+  &--wrapper {
+    display: inline-block;
+    position: relative;
+
+    &.has-icon {
+      background-repeat: no-repeat;
+      background-size: cover;
+      height: px-to-rem($spacing-padding-2);
+      min-width: px-to-rem($spacing-padding-2);
+      @include dataurlicon("info", $color-ux-labels-actionable);
+    }
+  }
+
+  &--arrow {
+    border-color: transparent;
+    border-right-color: transparent;
+    border-style: solid;
+    border-width: 0;
+    height: 0;
+    margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+    position: absolute;
+    width: 0;
+  }
+
+  &--alignment-top {
+    left: 0;
+    top: calc(-100% + map-get($spacing, "tooltip", "tooltip-arrow-height"));
+
+    .ilo--tooltip--arrow {
+      border-top-color: map-get($color, "tooltip", "default", "background");
+      border-width: map-get($spacing, "tooltip", "tooltip-arrow-height")
+        map-get($spacing, "tooltip", "tooltip-arrow-width") 0
+        map-get($spacing, "tooltip", "tooltip-arrow-width");
+      bottom: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      left: 50%;
+      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+      top: auto;
+
+      &--placement-negative {
+        left: 10%;
+      }
+
+      &--placement-positive {
+        left: auto;
+        right: 10%;
+      }
+
+      &--placement-center {
+        left: 50%;
+      }
+    }
+  }
+
+  &--alignment-right {
+    left: calc(100% + map-get($spacing, "padding-4"));
+    top: calc(50% - map-get($spacing, "tooltip", "tooltip-arrow-width"));
+
+    .ilo--tooltip--arrow {
+      border-right-color: map-get($color, "tooltip", "default", "background");
+      border-width: map-get($spacing, "tooltip", "tooltip-arrow-width")
+        map-get($spacing, "tooltip", "tooltip-arrow-height")
+        map-get($spacing, "tooltip", "tooltip-arrow-width") 0;
+      left: 0;
+      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      top: 50%;
+
+      &--placement-negative {
+        margin-top: 0;
+        top: 10%;
+      }
+
+      &--placement-positive {
+        top: auto;
+        bottom: 10%;
+      }
+
+      &--placement-center {
+        top: 50%;
+      }
+    }
+  }
+
+  &--alignment-left {
+    right: calc(100% + map-get($spacing, "padding-4"));
+    top: calc(50% - map-get($spacing, "tooltip", "tooltip-arrow-width"));
+
+    .ilo--tooltip--arrow {
+      border-left-color: map-get($color, "tooltip", "default", "background");
+      border-width: map-get($spacing, "tooltip", "tooltip-arrow-width") 0
+        map-get($spacing, "tooltip", "tooltip-arrow-width")
+        map-get($spacing, "tooltip", "tooltip-arrow-height");
+      left: auto;
+      margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+      right: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      top: 50%;
+
+      &--placement-negative {
+        margin-top: 0;
+        top: 10%;
+      }
+
+      &--placement-positive {
+        top: auto;
+        bottom: 10%;
+      }
+
+      &--placement-center {
+        top: 50%;
+      }
+    }
+  }
+
+  &--alignment-bottom {
+    left: 0;
+    top: calc(100% + map-get($spacing, "tooltip", "tooltip-arrow-height"));
+
+    .ilo--tooltip--arrow {
+      border-width: 0 map-get($spacing, "tooltip", "tooltip-arrow-width")
+        map-get($spacing, "tooltip", "tooltip-arrow-height")
+        map-get($spacing, "tooltip", "tooltip-arrow-width");
+      left: 50%;
+      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+      margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      top: 0;
+      border-bottom-color: map-get($color, "tooltip", "default", "background");
+
+      &--placement-negative {
+        left: 10%;
+      }
+
+      &--placement-positive {
+        left: auto;
+        right: 10%;
+      }
+
+      &--placement-center {
+        left: 50%;
+      }
+    }
+  }
+
+  &--dark {
+    background: map-get($color, "tooltip", "dark", "background");
+    color: map-get($color, "tooltip", "dark", "text");
+
+    &.ilo--tooltip--alignment-bottom .ilo--tooltip--arrow {
+      border-bottom-color: map-get($color, "tooltip", "dark", "background");
+    }
+
+    &.ilo--tooltip--alignment-top .ilo--tooltip--arrow {
+      border-top-color: map-get($color, "tooltip", "dark", "background");
+    }
+
+    &.ilo--tooltip--alignment-left .ilo--tooltip--arrow {
+      border-left-color: map-get($color, "tooltip", "dark", "background");
+    }
+
+    &.ilo--tooltip--alignment-right .ilo--tooltip--arrow {
+      border-right-color: map-get($color, "tooltip", "dark", "background");
+    }
+  }
+}