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

fix: update design for select component and remove placeholders

Browse Source
This commit is contained in:
Christel Westerberg
2024-12-11 15:02:47 +01:00
parent 241e354fc5
commit ed3879f6d2
10 changed files with 97 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TempDesignSystem/Form/Label/label.module.css
+23 -24
View File
@@ -24,48 +24,47 @@ span.discreet {
order: unset;
}
/* Handle input and textarea fields */
input:active ~ .label,
input:not(:placeholder-shown) ~ .label {
display: block;
font-size: 12px;
}
input:focus ~ .label {
font-size: 12px;
}
input:placeholder-shown ~ .label {
grid-row: 1/-1;
}
input:placeholder-shown:focus ~ .label,
input:placeholder-shown:active ~ .label {
margin-bottom: var(--Spacing-x-half);
}
input:disabled ~ .label {
color: var(--Main-Grey-40);
}
input:not(:placeholder-shown) ~ .label,
textarea:active ~ .label,
textarea:not(: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;
}
textarea:placeholder-shown:focus ~ .label,
input:placeholder-shown:focus ~ .label,
input:placeholder-shown:active ~ .label,
textarea:placeholder-shown.label,
textarea:placeholder-shown:active ~ .label {
margin-bottom: var(--Spacing-x-half);
}
textarea:disabled ~ .label {
input:disabled ~ .label,
textarea:disabled ~ .label,
:global(.select-container)[data-disabled] .label {
color: var(--Main-Grey-40);
}
/* Handle select fields */
:global(.select-button) .label {
order: unset;
}
:global(.select-container)[data-open="true"] .label:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet),
:global(.select-button):active .label:not(.discreet) {
display: grid;
font-size: 12px;
margin-bottom: var(--Spacing-x-half);
}