darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add govukCollapsibleNestedCheckboxesField

Browse Source 
Includes:
1. changes to make NestedFieldMixin work
  with new fields and CSS for nested checkboxes
2. adds custom version of GOVUK checkboxes
  component to allow us to:
  - add classes to elements currently inaccessible
  - wrap the checkboxes in a list
  - add child checkboxes to each checkbox (making
    tree structures possible through recursion

Change 2. should be pushed upstream to the GOVUK
Design System as a proposal for changes to the
GOVUK Checkboxes component.
This commit is contained in:
Tom Byers
2020-04-23 12:15:24 +01:00
parent e6e81ec2fe
commit e0cd3c5efb
4 changed files with 241 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/assets/stylesheets/components/checkboxes.scss
View File

@@ -1,3 +1,7 @@
// Taken from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/checkboxes/_checkboxes.scss
$govuk-touch-target-size: 44px;
$govuk-checkboxes-size: 40px;
.selection-summary {
.selection-summary__text {
@@ -65,6 +69,30 @@
}
.govuk-form-group--nested {
$border-thickness: $govuk-touch-target-size - $govuk-checkboxes-size;
$border-indent: $govuk-touch-target-size / 2;
position: relative;
// To equalise the spacing between the line and the top/bottom of
// the radio
margin-top: govuk-spacing(1) + ($border-thickness / 2);
margin-bottom: govuk-spacing(1) * -1;
padding-left: govuk-spacing(2) + 2;
&:before {
content: "";
position: absolute;
bottom: 0;
left: $border-indent * -1;
width: $border-thickness;
height: 100%;
background: $govuk-border-colour;
}
}
.selection-content {
margin-bottom: govuk-spacing(4);