Rewrite SMS ratio form to cope with 3 providers

This replaces the slider with an integer input for each provider.
Unfortunately showing a variable number of inputs isn't easy to
achieve in WTForms [^1], but we think this is the least worst way
to do it vs e.g. not using WTForms at all.

[^1]: https://github.com/wtforms/wtforms/issues/736
This commit is contained in:
Ben Thorner
2022-04-06 15:08:28 +01:00
parent 01389b5edf
commit 7f333ba5fe
5 changed files with 46 additions and 132 deletions

View File

@@ -29,67 +29,4 @@ $item-top-padding: govuk-spacing(3);
display: block;
color: $secondary-text-colour;
}
&-percentage {
$axis-thickness: 2px;
border-bottom: $axis-thickness solid $black;
position: relative;
margin-bottom: 35px;
height: 35px;
&:before,
&:after {
content: "";
position: absolute;
bottom: -6px;
left: 0;
height: 10px;
width: $axis-thickness;
background: $black;
}
&:after {
left: auto;
right: 0;
}
&-without-border {
position: relative;
padding-top: 35px;
}
&-marker {
$size: 20px;
$border-thickness: 7px;
$text-width: 100px;
display: block;
width: $size;
height: $size;
position: absolute;
top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
margin-left: 0 - ($size / 2) - $border-thickness;
background: $black;
border-radius: $size;
border: $border-thickness solid $white;
}
&-left-label,
&-right-label {
width: 100%;
position: absolute;
top: 0;
}
&-left-label {
left: 0;
}
&-right-label {
right: 0;
text-align: right;
}
}
}