.
Іконка зліва: .ds-field--icon-left +
у .ds-field__control. Пошук: .ds-field--search (лупа сама).
Специфічність підвищено префіксом html.theme-tat — щоб перебити браузерні стилі input/select/textarea без !important.
========================================================================================================== */
.ds-field {
display: block;
margin: 0 0 var(--size-16);
}
.ds-field__label {
display: block;
margin: 0 0 var(--size-6);
color: var(--ds-color-label);
font-size: var(--font-size-12);
font-weight: var(--font-weight-400);
line-height: var(--line-height-1-33);
}
.ds-field__control {
position: relative;
display: block;
}
html.theme-tat .ds-field__input {
display: block;
width: 100%;
max-width: 100%;
height: var(--ds-control-height);
margin: 0;
padding: 0 var(--size-12);
border: var(--size-1) var(--border-solid) var(--color-border-default);
border-radius: var(--radius-lg);
background-color: var(--color-white);
background-image: none;
box-shadow: none;
color: var(--text-primary);
font-family: var(--ds-font-family);
font-size: var(--font-size-14);
font-weight: var(--font-weight-400);
line-height: var(--line-height-1-43);
-webkit-appearance: none;
appearance: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
html.theme-tat .ds-field__input::placeholder {
color: var(--color-text-tertiary);
opacity: 1;
}
html.theme-tat .ds-field__input:hover {
border-color: var(--color-neutral-300);
}
html.theme-tat .ds-field__input:focus {
border-color: var(--color-main);
outline: 0;
box-shadow: none;
}
html.theme-tat .ds-field--lg .ds-field__input {
height: var(--ds-control-height-lg);
}
html.theme-tat textarea.ds-field__input {
height: auto;
min-height: var(--size-96);
padding: var(--size-8) var(--size-12);
resize: vertical;
}
html.theme-tat .ds-field__input:disabled,
html.theme-tat .ds-field__input[readonly].is-static {
background-color: var(--bg-secondary);
color: var(--color-text-tertiary);
cursor: not-allowed;
}
/* Нативний