unkn0wn/nova-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update textField styles

Browse Source
This commit is contained in:
unkn0wn
2026-06-23 07:55:38 +02:00
parent 08a6e82760
commit c4eb4cc507
1 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/textField/_textField.scss
+52 -18
View File
@@ -1,30 +1,64 @@
@use '../../styles/tokens/typography' as *; @use "../../styles/tokens/typography" as *;
.textField { .textField {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--nds-spacing-xs); gap: var(--nds-spacing-2xs);
& label {
@include text-label;
color: var(--nds-text);
}
&__input,
&__textarea { &__textarea {
background-color: var(--nds-color-background); background-color: var(--nds-surface);
border: var(--nds-border-width-thin) solid var(--nds-text); border: var(--nds-border-width-thin) solid var(--nds-border-strong);
border-radius: var(--nds-radius-sm); border-radius: var(--nds-radius-md);
padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ; padding: 0 var(--nds-spacing-sm);
@include text-base; @include text-base;
color: var(--nds-text); color: var(--nds-text);
min-height: 50px; transition:
max-width: 100%; border-color 130ms ease,
box-shadow 130ms ease;
&::placeholder {
color: var(--nds-neutral);
}
&:hover {
border-color: var(--nds-neutral);
}
&:focus {
outline: none;
border-color: var(--nds-primary);
box-shadow: 0 0 0 3px var(--nds-ring);
}
&:disabled {
opacity: 0.55;
cursor: not-allowed;
}
}
&__input {
height: 38px;
}
&__textarea {
min-height: 84px;
padding: var(--nds-spacing-sm);
resize: vertical;
line-height: 1.5;
} }
&__charCount { &__charCount {
@include text-sm; @include text-sm;
color: var(--nds-text-muted); color: var(--nds-neutral);
text-align: left; text-align: right;
} }
&__input { &__error {
background-color: var(--nds-color-background); @include text-sm;
border: var(--nds-border-width-thin) solid var(--nds-text); color: var(--nds-error-medium);
border-radius: var(--nds-radius-sm);
padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
@include text-base;
color: var(--nds-text);
} }
} &--invalid &__input,
&--invalid &__textarea {
border-color: var(--nds-error-medium);
&:focus {
box-shadow: 0 0 0 3px
color-mix(in srgb, var(--nds-error-medium) 35%, transparent);
}
}
}