mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-22 00:49:23 -04:00
1c3095329b
Adds ability to have inline radio buttons using the fieldset.inline functionality from gov.uk elements. Then implements this for the radio buttons for choosing postage class. Also overrides the gov uk elements styling for the inline radio buttons to place them slightly closer together as this looks better.
120 lines
1.9 KiB
SCSS
120 lines
1.9 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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.inline {
|
||
.multiple-choice {
|
||
margin-right: 15px;
|
||
}
|
||
}
|