Merge pull request #3535 from alphagov/try-introducing-govuk-checkboxes-again

Try introducing govuk checkboxes again
This commit is contained in:
Tom Byers
2020-08-04 14:39:54 +01:00
committed by GitHub
31 changed files with 1036 additions and 395 deletions
@@ -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);
+31 -22
View File
@@ -24,10 +24,13 @@
}
}
$govuk-checkboxes-size: 40px;
$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
$message-type-bottom-spacing: govuk-spacing(4);
.message {
&-name {
@include bold-24;
margin: 0;
a {
@@ -63,37 +66,20 @@
}
&-type {
color: $secondary-text-colour;
margin: 0 0 govuk-spacing(4) 0;
color: $govuk-secondary-text-colour;
margin: 0 0 $message-type-bottom-spacing 0;
padding-left: 0;
pointer-events: none;
}
}
#template-list {
margin-top: govuk-spacing(6);
&.top-gutter-5px {
margin-top: 5px;
}
}
.template-list {
&-item {
&-with-checkbox {
position: relative;
padding-left: govuk-spacing(9);
.multiple-choice {
position: absolute;
left: 0;
}
padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
}
&-hidden-by-default {
@@ -123,6 +109,29 @@
}
&-label {
position: absolute;
left: 0;
width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
height: 100%;
padding: 0;
}
// Fix for GOVUK Frontend selector with high precendence
// https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/hint/_hint.scss
&-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.template-list-item-hint {
margin-bottom: $message-type-bottom-spacing;
}
&-hint {
padding-left: 0;
}
}
&-folder,
&-template {
@include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
}
&-folder {