initial

2026-03-17 13:24:22 +03:00
commit 82e5ac9d81
554 changed files with 29637 additions and 0 deletions
--- a/layers/ui/styles/mixins/input.scss
+++ b/layers/ui/styles/mixins/input.scss
@@ -0,0 +1,200 @@
+//@use '../variables' as *;
+//@use 'typography' as *;
+//@use 'element-variant' as *;
+//
+////noinspection ALL
+//@mixin input(
+//  $namespace,
+//  $flexWrapper: true,
+//  $placeholderSelector: '__control::placeholder',
+//  $withValidationIcons: true,
+//  $clearAppearance: true,
+//  $focusedSelector: '&:focus-within, &.is-filled'
+//) {
+//  $self: &;
+//
+//  position: relative;
+//  width: var(--#{$namespace}-width, 100%);
+//  text-align: left;
+//
+//  &__label {
+//    @include txt-s-m(#{$namespace}-label);
+//
+//    display: block;
+//    background: var(--#{$namespace}-label-background);
+//    color: var(--#{$namespace}-label-color);
+//    margin: var(--#{$namespace}-label-margin, 0 0 8px);
+//    transition: 0.2s ease-out;
+//    transition-property: opacity, color;
+//  }
+//
+//  &__wrapper {
+//    @if $flexWrapper {
+//      display: flex;
+//      align-items: center;
+//      width: var(--#{$namespace}-control-width, 100%);
+//      height: var(--#{$namespace}-control-height, 40px);
+//    }
+//
+//    position: relative;
+//    background: var(--#{$namespace}-background);
+//    border-radius: var(--#{$namespace}-border-radius, 16px);
+//    border: var(--#{$namespace}-border, 1px solid var(--#{$namespace}-border-color));
+//    padding: var(--#{$namespace}-wrapper-padding, 0 15px 0 19px);
+//    color: var(--#{$namespace}-color);
+//    transition: 0.2s ease-out;
+//    transition-property: border-color, border-radius, background-color, color;
+//
+//    > *:not(:first-child) {
+//      margin-left: var(--#{$namespace}-icons-gap, 8px);
+//    }
+//  }
+//
+//  &__control {
+//    @if $flexWrapper {
+//      flex: 1;
+//      height: 100%;
+//    }
+//
+//    @include txt-i-m(#{$namespace}-control);
+//
+//    width: 100%;
+//    color: var(--#{$namespace}-control-color);
+//    border: none;
+//    background: transparent;
+//    padding: var(--#{$namespace}-control-padding, 9px 0);
+//    caret-color: var(--#{$namespace}-caret-color);
+//
+//    @if $clearAppearance {
+//      appearance: none;
+//    }
+//
+//    &:focus {
+//      outline: none;
+//    }
+//  }
+//
+//  &#{$placeholderSelector} {
+//    @include txt-i-m(#{$namespace}-placeholder);
+//
+//    color: var(--#{$namespace}-placeholder-color, var(--#{$namespace}-control-color));
+//  }
+//
+//  &__loader {
+//    --spinner-color: var(--#{$namespace}-color);
+//  }
+//
+//  @if $withValidationIcons {
+//    &__valid-icon,
+//    &__invalid-icon {
+//      pointer-events: none;
+//    }
+//  }
+//
+//  &__bottom {
+//    display: flex;
+//    justify-content: flex-end;
+//    margin: var(--#{$namespace}-bottom-margin, 8px 0 0);
+//  }
+//
+//  &__validation-message {
+//    //color: var(--#{$namespace}-validation-message-color, $clr-red-500);
+//    flex: 1;
+//  }
+//
+//  &__extra {
+//    margin-left: 8px;
+//  }
+//
+//  &.is-loading {
+//    #{$self}__wrapper,
+//    #{$self}__control {
+//      cursor: wait;
+//    }
+//  }
+//
+//  &.is-filled {
+//    --#{$namespace}-label-color: var(--#{$namespace}-filled-label-color);
+//  }
+//
+//  &.is-invalid {
+//    --#{$namespace}-border-color: var(--#{$namespace}-invalid-border-color);
+//  }
+//
+//  &:focus-within:not(.is-readonly):not(.is-disabled):not(.is-loading) {
+//    --#{$namespace}-border-color: var(--#{$namespace}-focus-border-color);
+//    --#{$namespace}-label-color: var(--#{$namespace}-focus-label-color);
+//  }
+//
+//  &.is-disabled {
+//    opacity: var(--#{$namespace}--disabled-opacity, 0.56);
+//
+//    #{$self}__wrapper,
+//    #{$self}__label,
+//    #{$self}__control {
+//      cursor: not-allowed;
+//    }
+//  }
+//
+//  &.is-readonly {
+//    #{$self}__wrapper,
+//    #{$self}__control {
+//      cursor: default;
+//    }
+//  }
+//
+//  @content;
+//
+//  &--secondary,
+//  &--tertiary {
+//
+//    #{$self}__label {
+//      opacity: 0;
+//      position: absolute;
+//      z-index: 1;
+//    }
+//
+//    #{$focusedSelector} {
+//      #{$self}__label {
+//        opacity: 1;
+//      }
+//    }
+//
+//    #{$self}__wrapper:hover:not(.is-readonly):not(.is-disabled):not(.is-loading) {
+//      --#{$namespace}-border-color: var(--#{$namespace}-hover-border-color);
+//    }
+//  }
+//
+//  &--tertiary {
+//    --#{$namespace}-wrapper-padding: 0 15px;
+//    --#{$namespace}-control-height: 48px;
+//
+//    #{$focusedSelector} {
+//      --#{$namespace}-control-padding: 19px 0 7px;
+//    }
+//
+//    #{$self}__label {
+//      left: 16px;
+//      top: 8px;
+//    }
+//  }
+//
+//  &--large {
+//    --#{$namespace}-control-height: 48px;
+//    --#{$namespace}-control-padding: 13px 0;
+//  }
+//
+//  @include element-variant($namespace, '', (
+//    'background': ($clr-white-100, $clr-black-300),
+//    'border-color': ($clr-white-700, $clr-black-200),
+//    'label-color': ($clr-black-150, $clr-black-100),
+//    'color': ($clr-black-500, $clr-white-100),
+//    'placeholder-color': ($clr-black-100, $clr-black-150),
+//    'hover-border-color': ($clr-purple-500, $clr-purple-400),
+//    'focus-border-color': ($clr-purple-500, $clr-purple-400),
+//    'focus-label-color': ($clr-black-150, $clr-black-100),
+//    'filled-label-color': ($clr-black-150, $clr-black-100),
+//    'invalid-border-color': $clr-red-500,
+//    'caret-color': $clr-purple-500,
+//  ));
+//}