scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: more input fixes for various states: placeholder shown, focus, value, error, disabled

Browse Source
This commit is contained in:
Christian Andolf
2025-06-05 09:57:33 +02:00
parent 9fb5f82d92
commit 752a93012e
2 changed files with 26 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css
View File

@@ -1,5 +1,5 @@
.label {
color: var(--UI-Grey-60);
color: var(--Text-Interactive-Placeholder);
font-family: "fira sans";
font-weight: 400;
letter-spacing: 0.03px;
@@ -20,7 +20,7 @@ span.regular {
}
span.discreet {
color: var(--Base-Text-High-contrast);
color: var(--Text-Interactive-Default);
font-weight: 500;
order: unset;
}
@@ -30,31 +30,19 @@ span.required:after {
}
/* Handle input and textarea fields */
input:placeholder-shown ~ .label,
textarea:placeholder-shown ~ .label {
display: block;
font-size: 12px;
}
input:focus ~ .label,
textarea:focus ~ .label {
font-size: 12px;
}
input:placeholder-shown ~ .label,
textarea:placeholder-shown ~ .label {
grid-row: 1/-1;
}
input:placeholder-shown:focus ~ .label,
textarea:placeholder-shown.label {
margin-bottom: var(--Spacing-x-half);
input[value]:not([value=""]) ~ .label,
textarea:focus ~ .label textarea:placeholder-shown ~ .label,
textarea[value]:not([value=""]) ~ .label {
font-size: 12px;
margin-bottom: var(--Space-x05);
}
input:disabled ~ .label,
textarea:disabled ~ .label,
:global(.select-container)[data-disabled] .label {
color: var(--Main-Grey-40);
color: var(--Text-Interactive-Disabled);
}
/* Handle select fields */
@@ -65,5 +53,5 @@ textarea:disabled ~ .label,
:global(.select-container)[data-open="true"] .label:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
font-size: 12px;
margin-bottom: var(--Spacing-x-half);
margin-bottom: var(--Space-x05);
}