Add a border for each question in the poll form

This way polls look more similar to the way they did when the answers
were buttons instead of checkboxes or radio buttons.

Note the styling is tricky because we need to add a `float` property to
the legend so it's actually inside the fieldset. This forces us to add a
`::before` pseudo-element in order to add margin between the legend and
the first label. Another option would be:

```
legend {
  &:has(+ label) {
    margin-bottom: calc($line-height / 2);
  }

  + label {
    clear: $global-left;
  }
}
```

But the `:has` pseudo-class isn't universally supported yet, and we'd
still have to add `margin-top` to the first label when it comes after a
`.help-text` element.

Due to the presence of the border, we're increasing the margin between
elements a little bit.

Note that adding a pseudoelement to the label is a consequence of adding
the `float` property to the legend, so we're changing the order of the
code so the styles for `legend` appear before the styles in `label`.
This commit is contained in:
Javi Martín
2025-08-12 15:16:59 +02:00
parent 8deb1964bd
commit 4b7700b6f5
2 changed files with 35 additions and 8 deletions

View File

@@ -1,11 +1,8 @@
.poll-form {
label {
@include radio-or-checkbox-and-label-alignment;
font-weight: normal;
&:first-of-type {
margin-top: calc($line-height / 2);
}
fieldset {
border: 1px solid $border;
border-radius: $global-radius;
padding: $line-height;
}
fieldset + fieldset {
@@ -14,15 +11,45 @@
legend {
@include header-font-size(h3);
float: $global-left;
margin-bottom: 0;
+ * {
clear: $global-left;
}
}
label {
@include radio-or-checkbox-and-label-alignment;
font-weight: normal;
&:first-of-type::before {
content: "\A";
margin-top: calc($line-height / 2);
white-space: pre;
}
}
.help-text {
display: block;
font-size: 1em;
font-style: normal;
font-weight: bold;
}
.read-more-links {
margin-top: calc($line-height / 2);
* {
margin-bottom: 0;
}
* + * {
margin-top: calc($line-height / 4);
}
}
[type=submit] {
margin-top: calc($line-height * 3 / 4);
}

View File

@@ -14,7 +14,7 @@
<% end %>
<% if question.options_with_read_more? %>
<div>
<div class="read-more-links">
<p><%= t("poll_questions.read_more_about") %></p>
<p><%= options_read_more_links %></p>
</div>