QOLDEV-62 make checkbox styling consistent #734
Conversation
- default, focus, active, hover, disabled
…b-template into QOLDEV-62-radio-button-colours
- use a black tick on a white background with order, regardless of browser defaults
ThrawnCA
requested review from
duttonw,
kundupz,
chris-randall-qol and
RossWebsterWork
|
Comparing Chromatic to Figma, the checkboxes seem a little off-centre compared to their labels, the checkbox outline is a little different and the checkmark seems to be rotated, otherwise it looks good. |
Yeah, I wasn't able to perfectly replicate the Figma design. I figured it's still closer than the status quo. |
- use a black circle on a white background - make outline circular
- Tweak polygon definition to use 45-degree angles and thickness equivalent to 16% of the element length
|
@RossWebsterWork Okay, I've adjusted the polygon definition, so the check mark should be closer to Figma now. |
|
Chromatic shows the radio button outlines being square, but local testing with both Firefox and Chrome shows them as circular. |
- Add the '-moz-outline-radius' property for Firefox versions too old to apply 'border-radius' to outlines.
|
Looks like Chromatic is using older browser versions, see https://www.chromatic.com/docs/infrastructure-release-notes |
Compare to designs on Figma: https://www.figma.com/file/5BrkUy62yKzGbRJnrUcLLM/Form-control-inputs%3A-Radio-and-checkbox?node-id=19%3A1893