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

38
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
View File

@@ -1,59 +1,55 @@
.container { .container {
align-content: center; align-content: center;
background-color: var(--Main-Grey-White); background-color: var(--Surface-Primary-Default);
border-color: var(--Scandic-Beige-40); border-color: var(--Border-Interactive-Default);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
display: grid; display: grid;
min-width: 0; /* allow shrinkage */ min-width: 0; /* allow shrinkage */
height: 60px; height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2); padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease; transition: border-color 200ms ease;
} }
.container:has(.input:focus) { .container:has(.input:focus) {
border-color: var(--Scandic-Blue-90); border-color: var(--Border-Interactive-Focus);
} }
.container:has(.input:disabled) { .container:has(.input:disabled) {
background-color: var(--Main-Grey-10); background-color: var(--Surface-Primary-Disabled);
border: none; border: none;
color: var(--Main-Grey-40); color: var(--Text-Interactive-Disabled);
} }
.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) { .container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
border-color: var(--Scandic-Red-60); border-color: var(--Border-Interactive-Error);
&:focus-within {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Error);
}
} }
.input { .input {
background: none; background: none;
border: none; border: none;
color: var(--Main-Grey-100); color: var(--Text-Default);
height: 18px; height: 1px;
margin: 0; margin: 0;
order: 2; order: 2;
overflow: visible; overflow: visible;
padding: 0; padding: 0;
}
.container:has(.input:placeholder-shown) {
align-content: space-around;
gap: var(--Spacing-x-half);
}
.input:not(:focus):not(:placeholder-shown) {
height: 1px;
transition: height 150ms ease; transition: height 150ms ease;
} }
.input:focus, .input:focus,
.input:focus:placeholder-shown { .input:placeholder-shown,
.input[value]:not([value=""]) {
height: 18px; height: 18px;
transition: height 150ms ease;
outline: none; outline: none;
} }
.input:disabled { .input:disabled {
color: var(--Main-Grey-40); color: var(--Text-Interactive-Disabled);
} }

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

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