Files
notifications-admin/app/assets/stylesheets/components/checkboxes.scss
2020-05-14 16:59:34 +01:00

93 lines
1.6 KiB
SCSS

.selection-summary {
.selection-summary__text {
@include core-19($tabular-numbers: true);
padding: 5px 0 0 0;
margin-bottom: govuk-spacing(3);
&:focus {
outline: none;
}
}
.selection-summary__text--folders {
padding: 10px 15px 5px 51px;
background-image: file-url('folder-black.svg');
background-repeat: no-repeat;
background-size: 39px auto;
background-position: 0px 4px;
}
}
.checkboxes-nested {
margin-bottom: 10px;
.multiple-choice {
$circle-diameter: 39px;
$border-thickness: 4px;
$border-indent: ($circle-diameter / 2) - ($border-thickness / 2);
$border-colour: $border-colour;
float: none;
position: relative;
&:before {
content: "";
position: absolute;
bottom: 0;
left: $border-indent;
width: $border-thickness;
height: 100%;
background: $border-colour;
}
label {
float: none;
}
[type=checkbox]+label::before {
// To overlap the grey inset line
background: $white;
}
ul {
// To equalise the spacing between the line and the top/bottom of
// the radio
margin-top: 5px;
margin-bottom: -5px;
padding-left: 12px;
}
}
}
.selection-content {
margin-bottom: govuk-spacing(4);
.checkboxes-nested {
margin-bottom: 0;
}
}
.selection-footer {
clear: both;
}
.selection-footer__button {
// revert full-width button for smaller screens
display: inline-block;
width: auto;
}
// styles specific to the collapsible checkboxes module
.selection-wrapper {
fieldset:focus {
outline: none;
}
}