Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A few fixes for components with overridden colours #377

Merged
merged 2 commits into from Dec 12, 2017

Conversation

@36degrees
Copy link
Contributor

commented Dec 12, 2017

Radio Buttons

Removes a transparent border from the radio button labels.

Before

screen shot 2017-12-12 at 11 00 25

After

screen shot 2017-12-12 at 11 00 30

Checkboxes

Removes a transparent border from the checkbox labels.

Before

screen shot 2017-12-12 at 11 00 35

After

screen shot 2017-12-12 at 11 00 36

Panel

Adds a transparent border which is made visible when users override colours.

Before

screen shot 2017-12-12 at 11 00 18

After

screen shot 2017-12-12 at 11 00 21

36degrees added some commits Dec 12, 2017

Remove transparent borders from labels
These were added to give a consistent height to the different form elements, but this causes borders to appear round labels if users choose to override their browsers colours.
Add transparent border to panel
This will give the panel importance visually when users choose to override colours in their browser.

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-377 Dec 12, 2017 Inactive

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Dec 12, 2017

How does this impact hint text?
Did that invisible border set some spacing for this components that'll be missed?

@36degrees

This comment has been minimized.

Copy link
Contributor Author

commented Dec 12, 2017

How does this impact hint text?

I don't believe it does?

Did that invisible border set some spacing for this components that'll be missed?

My understanding is that the 2px border was originally added to align components to the same height, however removing it actually improves the alignment as seen on the form-alignment example:

Before

screen shot 2017-12-12 at 11 07 56

After

screen shot 2017-12-12 at 11 08 04

@kr8n3r

This comment has been minimized.

Copy link

commented Dec 12, 2017

@nickcolley that border added part of the equalising heigh form elements a while ago. component have now changed so that is no longer relevant/workable. also looking at the firefox custom colours, it's not the best solution.

@kr8n3r

kr8n3r approved these changes Dec 12, 2017

@36degrees 36degrees merged commit fd28fcd into master Dec 12, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@36degrees 36degrees deleted the override-colours branch Dec 12, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.