js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use 100% width for text field and select labels (#599)

Browse Source
This commit is contained in:
Lindsay M
2025-01-27 09:49:35 -05:00
committed by GitHub
parent 3d35f5d4e0
commit 0cb72adb28
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/styles/native/forms.css
View File

@@ -5,11 +5,30 @@ label {
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
position: relative;
}
label + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
label > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
margin-block-start: var(--wa-space-xs);
&:has(
input:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
),
textarea,
select
) {
width: 100%;
}
& + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
& > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
margin-block-start: var(--wa-space-xs);
}
}
/* Fieldsets */

2
src/styles/shadow/form-control.css
View File

@@ -1,6 +1,6 @@
/* Label */
:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)) {
display: block;
display: inline-block;
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);