mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-06 19:48:25 -04:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user