initial

layers/ui/components/input/styles.scss

@@ -0,0 +1,139 @@
+@use '../../styles/variables' as *;
+@use '../../styles/mixins' as *;
+@use 'sass:selector';
+
+.ui-input {
+  $self: &;
+  overflow: hidden;
+
+  &__wrapper {
+    --border-color: var(--input-border-color);
+    --border-width: 1px;
+
+    display: block;
+    overflow: hidden;
+    position: relative;
+    background: var(--input-background);
+    border-radius: 12px;
+    outline: var(--border-width) solid var(--border-color);
+    outline-offset: calc(var(--border-width) * -1);
+    padding-inline: 16px;
+    transition: outline-color .2s ease-out;
+
+    #{$self}:not(.is-disabled) & {
+      cursor: text;
+    }
+
+    #{$self}:not(.is-disabled):not(.is-readonly) &:hover {
+      --border-width: 2px;
+    }
+
+    #{$self}:not(.is-readonly).is-focused & {
+      --border-width: 2px;
+      --border-color: var(--input-focused-border-color);
+    }
+
+    #{$self}.is-readonly & {
+      cursor: default;
+    }
+
+    #{$self}.is-invalid & {
+      --border-color: var(--input-invalid-border-color);
+    }
+
+    #{$self}.is-disabled & {
+      --border-color: var(--input-disabled-border-color);
+
+      background: var(--input-disabled-background);
+    }
+  }
+
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  &__control {
+    @include txt-i-m;
+
+    padding: 22px 0 8px;
+    width: 100%;
+    outline: none;
+    vertical-align: middle;
+    background-color: transparent;
+    border: none;
+    caret-color: var(--input-caret-color);
+    color: var(--input-color);
+
+    &::-ms-reveal,
+    &::-ms-clear {
+      display: none;
+    }
+
+    &:-webkit-autofill {
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: var(--input-color);
+    }
+
+    #{$self}.is-readonly & {
+      pointer-events: none;
+    }
+
+    #{$self}.is-disabled & {
+      color: var(--input-disabled-color);
+    }
+  }
+
+  &__label {
+    @include txt-i-m;
+
+    position: absolute;
+    pointer-events: none;
+    top: 15px;
+    left: 0;
+    color: var(--input-label-color);
+    transform-origin: 0 0;
+    transition-duration: .2s;
+    transition-property: transform, color;
+    transition-timing-function: linear, ease-out;
+
+    #{$self}.is-focused &,
+    #{$self}.has-value & {
+      transform: translateY(-7px) scale(0.78);
+      color: var(--input-label-filled-color);
+    }
+  }
+
+  &__bottom {
+    @include txt-s-m;
+
+    margin-top: 4px;
+    padding-inline: 16px;
+    min-height: 14px;
+  }
+
+  &__validation-message {
+    color: var(--input-validation-message-color);
+  }
+
+  &__caption {
+    color: var(--input-caption-color);
+  }
+
+  @include element-variant('input', '', (
+          'border-color': $clr-grey-300,
+          'background': $clr-white,
+          'caret-color': $clr-cyan-500,
+          'color': $clr-black,
+          'focused-border-color': $clr-cyan-500,
+          'invalid-border-color': $clr-red-500,
+          'disabled-border-color': $clr-grey-300,
+          'disabled-background': $clr-grey-100,
+          'disabled-color': $clr-grey-500,
+          'label-color': $clr-grey-400,
+          'label-filled-color': $clr-grey-500,
+          'validation-message-color': $clr-red-500,
+          'caption-color': $clr-grey-600
+  ))
+}