Emi Matchu
661a5385f4
Most notable change here is extracting the pose option bubbles into a `data-type="radio-grid"`, and pulling that into the `.support-form` CSS. My rationale is that, unlike most fields, this field benefits from being 100%-width, and I don't want to specify that as an override if I can avoid it, because that's fragile-y. Instead, I extract this into a generic type of field that `.support-form` can use (it feels pretty reusable anyway!), and require the caller to specify how many columns they want as `--num-columns`.
85 lines
1.4 KiB
Sass
85 lines
1.4 KiB
Sass
@import "../partials/clean/constants"
|
|
|
|
.support-form
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 1em
|
|
align-items: flex-start
|
|
|
|
.fields
|
|
list-style-type: none
|
|
display: flex
|
|
flex-direction: column
|
|
gap: .75em
|
|
width: 100%
|
|
|
|
> li
|
|
display: flex
|
|
flex-direction: column
|
|
gap: .25em
|
|
max-width: 60ch
|
|
|
|
> label
|
|
display: block
|
|
font-weight: bold
|
|
|
|
&[data-type=radio-grid] // Set the `--num-columns` property to configure!
|
|
max-width: none
|
|
|
|
ul
|
|
list-style-type: none
|
|
display: grid
|
|
grid-template-columns: repeat(var(--num-columns, 1), 1fr)
|
|
gap: .25em
|
|
|
|
label
|
|
display: flex
|
|
align-items: center
|
|
gap: .5em
|
|
padding: .5em 1em
|
|
border: 1px solid $soft-border-color
|
|
border-radius: 1em
|
|
|
|
input
|
|
margin: 0
|
|
|
|
&:has(:checked)
|
|
background: $module-bg-color
|
|
border-color: $module-border-color
|
|
|
|
input[type=text], input[type=url]
|
|
width: 100%
|
|
min-width: 10ch
|
|
box-sizing: border-box
|
|
|
|
.thumbnail-input
|
|
display: flex
|
|
align-items: center
|
|
gap: .25em
|
|
|
|
img
|
|
width: 40px
|
|
height: 40px
|
|
|
|
fieldset
|
|
display: flex
|
|
flex-direction: column
|
|
gap: .25em
|
|
|
|
legend
|
|
font-weight: bold
|
|
|
|
.field_with_errors
|
|
display: contents
|
|
|
|
.actions
|
|
display: flex
|
|
align-items: center
|
|
gap: 1em
|
|
|
|
label
|
|
display: flex
|
|
align-items: center
|
|
gap: .25em
|
|
font-size: .85em
|
|
font-style: italic
|