parttio / parity-theme

Parity theme for Vaadin
The Unlicense
6 stars 2 forks source link

Readonly TextField border dimension inconsitency #5

Open mrgreywater opened 1 year ago

mrgreywater commented 1 year ago

The height of the border of a TextField seems to change visually by 2px depending on if the field is readonly or not. A readonly TextField appears smaller which looks weird in a Form. This can be seen in the Parity-Theme Live Demo. The style also doesn't match the GS Design, I think the GS Read Only state behaviour looks worse though. See https://design.gs.com/components/input

image

mrgreywater commented 1 year ago

Something like this would fix it

*[readonly]::part(input-field) {
    border: 1px dashed var(--lumo-contrast-30pct);
}

::part(input-field)::after {
    border: unset;
}