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.

Sign up for GitHub

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

Add smaller versions of radio buttons and checkboxes #1125

Merged
merged 23 commits into from
Apr 11, 2019
Merged

Add smaller versions of radio buttons and checkboxes #1125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
f69cf33
Add styles for small checkboxes
Dec 5, 2018
2dfb39b
Change hover to box shadow, update hover and focus combination
Dec 11, 2018
e493f45
Add styles for small radios
Jan 10, 2019
334c220
Update to use float
Feb 5, 2019
5362d16
Adjust spacing for NTA
Feb 7, 2019
e625f0e
Update spacing to stop overlap
Feb 13, 2019
d12d026
Document small checkboxes
36degrees Mar 7, 2019
7c83d7c
Simplify variable names
36degrees Mar 7, 2019
5620742
Disable hover state when checkbox is disabled
36degrees Mar 7, 2019
d16c286
Fix hint with small checkboxes
36degrees Mar 7, 2019
746f73f
Fix conditional reveals with checkboxes
36degrees Mar 7, 2019
ce82a15
Port checkbox fixes to radios, refactoring
36degrees Apr 2, 2019
3cfb4c0
Add radios examples
36degrees Apr 2, 2019
f0a9dff
Bump radio inputs to 44 x 44px
36degrees Mar 12, 2019
777de0d
Disable hover state on checkboxes and radios
36degrees Mar 12, 2019
6a0bc5c
Centre the inputs around pseudo inputs
36degrees Apr 2, 2019
384f272
Remove prefixed -ms-touch-action
36degrees Mar 12, 2019
b645ac1
Adjust dividers with small radios
36degrees Mar 13, 2019
19da14a
Improve IE8 rendering
36degrees Mar 13, 2019
971299a
Avoid hover state for coarse pointers
36degrees Mar 14, 2019
4a009e3
Add small form controls example
36degrees Mar 14, 2019
6276830
Use border for small radio buttons
36degrees Mar 18, 2019
23d0d71
Add example of form controls in all states
36degrees Mar 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
310 changes: 310 additions & 0 deletions app/views/examples/form-controls-states/index.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,310 @@
{% extends "layout.njk" %}

{% from "back-link/macro.njk" import govukBackLink %}
{% from "checkboxes/macro.njk" import govukCheckboxes %}
{% from "radios/macro.njk" import govukRadios %}

{% block beforeContent %}
{{ govukBackLink({
"href": "/"
}) }}
{% endblock %}

{% block content %}
<style>
.x-ray {
box-shadow: 0 0 0 3px rgba(175, 175, 175, 0.5);
}

.x-ray input {
opacity: 1 !important;
box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.5);
-webkit-appearance: none;
}

.x-ray label {
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.5);
}
</style>

<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<div class="govuk-form-group">
<div class="govuk-checkboxes govuk-checkboxes--small">

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo1" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo">
Unchecked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo2" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo2">
Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-checkboxes__input" id="foo3" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo3">
Hover
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-checkboxes__input" id="foo4" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo4">
Hover, Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input :focus" id="foo5" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo5">
Focus
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input :focus" id="foo6" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo6">
Focus, Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-checkboxes__input :focus" id="foo7" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo7">
Focus, Hover
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-checkboxes__input :focus" id="foo8" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo8">
Focus, Checked, Hover
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo9" name="foo" type="checkbox" value="bar" disabled>
<label class="govuk-label govuk-checkboxes__label" for="foo9">
Disabled
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo10" name="foo" type="checkbox" value="bar" disabled checked>
<label class="govuk-label govuk-checkboxes__label" for="foo10">
Disabled, Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 x-ray">
<input class="govuk-checkboxes__input" id="foox" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foox">
X-Ray
</label>
</div>
</div>
</fieldset>
</div>
</div>

<div class="govuk-grid-column-one-half">
<div class="govuk-form-group">
<div class="govuk-radios govuk-radios--small">
<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="fizz1" name="fizz1" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="fizz1">
Unchecked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="fizz2" name="fizz2" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="fizz2">
Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-radios__input" id="fizz3" name="fizz3" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="fizz3">
Hover
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-radios__input" id="fizz4" name="fizz4" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="fizz4">
Hover, Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input :focus" id="fizz5" name="fizz5" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="fizz5">
Focus
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input :focus" id="fizz6" name="fizz6" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="fizz6">
Focus, Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-radios__input :focus" id="fizz7" name="fizz7" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="fizz7">
Focus, Hover
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 :hover">
<input class="govuk-radios__input :focus" id="fizz8" name="fizz8" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="fizz8">
Focus, Checked, Hover
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="fizz9" name="fizz9" type="radio" value="" disabled>
<label class="govuk-label govuk-radios__label" for="fizz9">
Disabled
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="fizz10" name="fizz10" type="radio" value="" disabled checked>
<label class="govuk-label govuk-radios__label" for="fizz10">
Disabled, Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 x-ray">
<input class="govuk-radios__input" id="fizz10" name="fizzx" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="fizzx">
X-Ray
</label>
</div>
</div>
</div>
</div>
</div>

<hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">

<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<div class="govuk-checkboxes">
<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo1" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo">
Unchecked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo2" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo2">
Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input :focus" id="foo5" name="foo" type="checkbox" value="bar">
<label class="govuk-label govuk-checkboxes__label" for="foo5">
Focus
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input :focus" id="foo6" name="foo" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foo6">
Focus, Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo9" name="foo" type="checkbox" value="bar" disabled>
<label class="govuk-label govuk-checkboxes__label" for="foo9">
Disabled
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2">
<input class="govuk-checkboxes__input" id="foo10" name="foo" type="checkbox" value="bar" disabled checked>
<label class="govuk-label govuk-checkboxes__label" for="foo10">
Disabled, Checked
</label>
</div>

<div class="govuk-checkboxes__item govuk-!-margin-bottom-2 x-ray">
<input class="govuk-checkboxes__input" id="foox" name="foox" type="checkbox" value="bar" checked>
<label class="govuk-label govuk-checkboxes__label" for="foox">
X-Ray
</label>
</div>
</div>
</div>

<div class="govuk-grid-column-one-half">
<div class="govuk-radios">
<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="radio-large1" name="radio-large1" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="radio-large1">
Unchecked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="radio-large2" name="radio-large2" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="radio-large2">
Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input :focus" id="radio-large5" name="radio-large5" type="radio" value="">
<label class="govuk-label govuk-radios__label" for="radio-large5">
Focus
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input :focus" id="radio-large6" name="radio-large6" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="radio-large6">
Focus, Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="radio-large9" name="radio-large9" type="radio" value="" disabled>
<label class="govuk-label govuk-radios__label" for="radio-large9">
Disabled
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2">
<input class="govuk-radios__input" id="radio-large10" name="radio-large10" type="radio" value="" disabled checked>
<label class="govuk-label govuk-radios__label" for="radio-large10">
Disabled, Checked
</label>
</div>

<div class="govuk-radios__item govuk-!-margin-bottom-2 x-ray">
<input class="govuk-radios__input" id="radio-largex" name="radio-largex" type="radio" value="" checked>
<label class="govuk-label govuk-radios__label" for="radio-largex">
X-Ray
</label>
</div>
</div>
</div>
</div>

{% endblock %}
Loading