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

Ensure consistent input heights in flex/grid containers (#1915)

Browse Source 
* apply flex rules to `form-control` parts

* prevent input heights from growing in flex containers

* change approach: ignore `form-control` wrapper for styling
This commit is contained in:
Lindsay M
2025-12-31 11:35:37 -05:00
committed by GitHub
parent ede1f0725d
commit f3de45803f
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webawesome/src/components/input/input.styles.ts
View File

@@ -6,7 +6,6 @@ export default css`
} }
.text-field { .text-field {
flex: auto;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: start; justify-content: start;

5
packages/webawesome/src/styles/component/form-control.styles.ts
View File

@@ -6,6 +6,11 @@ export default css`
flex-direction: column; flex-direction: column;
} }
/* Treat wrapped labels, inputs, and hints as direct children of the host element */
[part~='form-control'] {
display: contents;
}
/* Label */ /* Label */
:is([part~='form-control-label'], [part~='label']):has(*:not(:empty)), :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)),
:is([part~='form-control-label'], [part~='label']).has-label { :is([part~='form-control-label'], [part~='label']).has-label {