140 lines
3.1 KiB
SCSS
140 lines
3.1 KiB
SCSS
@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
|
|
))
|
|
}
|