mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-24 01:49:15 -04:00
33d074c00a
Expands the API of the macro to allow nested checkboxes to have a summary tracking the current selection, the fieldset to expand/collapse and buttons to be added to allow jumping between states. Includes making 'Done' button inline on mobile. Helps differentiate it form the form submit.
97 lines
1.7 KiB
SCSS
97 lines
1.7 KiB
SCSS
.selection-summary {
|
|
|
|
.selection-summary__text {
|
|
display: inline-block;
|
|
padding: .526315em .789473em .263157em 40px;
|
|
padding-left: 40px;
|
|
background-image: file-url('folder-black-bold.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: auto 20px;
|
|
background-position: 0px 8px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
@include ie-lte(8) {
|
|
background-image: file-url('folder-blue-bold.png');
|
|
}
|
|
|
|
// revert full-width button for smaller screens
|
|
.button {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
}
|
|
|
|
.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-footer {
|
|
clear: both;
|
|
padding-top: $gutter / 6;
|
|
|
|
@include media(tablet) {
|
|
padding-top: $gutter / 3;
|
|
}
|
|
|
|
.button-secondary {
|
|
// revert full-width button for smaller screens
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// styles specific to the collapsible checkboxes module
|
|
[data-module=collapsible-checkboxes] {
|
|
|
|
fieldset:focus {
|
|
outline: none;
|
|
}
|
|
|
|
}
|