mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-02 15:38:19 -04:00
4e42fa6f5d
We use collapsible checkboxes when setting which folders team members can see (on the manage folder page and on the edit team member page).
93 lines
1.6 KiB
SCSS
93 lines
1.6 KiB
SCSS
.selection-summary {
|
|
|
|
.selection-summary__text {
|
|
@include core-19($tabular-numbers: true);
|
|
padding: 5px 0 0 0;
|
|
margin-bottom: $gutter / 2;
|
|
|
|
&: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: ($gutter / 3) * 2;
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|