mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-11 09:28:27 -04:00
64c6d1fbc7
Clicking the 'Done' button resets the module to its default state. 'Done' implies you've completed your selection so this doesn't make sense. This changes it so any selection made will be confirmed when 'Done' is clicked.
120 lines
2.0 KiB
SCSS
120 lines
2.0 KiB
SCSS
.radio-select {
|
||
|
||
min-height: 39px;
|
||
|
||
&-column {
|
||
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
.multiple-choice {
|
||
padding-right: 10px;
|
||
padding-left: 54px - 10px;
|
||
}
|
||
|
||
}
|
||
|
||
.js-done-button,
|
||
.js-category-button,
|
||
.js-reset-button {
|
||
|
||
@include button($grey-3);
|
||
margin-right: $gutter-half;
|
||
|
||
}
|
||
|
||
.js-done-button-block {
|
||
|
||
display: block;
|
||
clear: both;
|
||
margin: 0 0 $gutter 0;
|
||
position: relative;
|
||
top: $gutter-half;
|
||
|
||
&:active {
|
||
top: $gutter-half + 2px;
|
||
}
|
||
|
||
}
|
||
|
||
.js-enabled & {
|
||
|
||
overflow: visible;
|
||
|
||
.multiple-choice {
|
||
display: none;
|
||
}
|
||
|
||
.js-multiple-choice {
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.radios-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=radio]+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;
|
||
}
|
||
|
||
.block-label-hint {
|
||
&:after {
|
||
// Adds an little extra segment of line alongside the ‘current folder’
|
||
// hint so that it extends all the way down to the next radio
|
||
content: "";
|
||
position: absolute;
|
||
top: $circle-diameter + 5px;
|
||
left: $border-indent;
|
||
width: $border-thickness;
|
||
height: 25px;
|
||
background: $border-colour;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.conditional-radio-panel {
|
||
border-left: 4px solid $border-colour;
|
||
margin: -20px 0 0 17px;
|
||
padding: 10px 0 0 28px;
|
||
}
|