Emi Matchu
8347633a84
Instead of hand-rolling HTML, this offers helpers like `f.field`, to help ensure the HTML is consistent, and to keep the templates more focused on the unique form elements.
89 lines
1.4 KiB
Sass
89 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]
|
|
ul
|
|
list-style-type: none
|
|
|
|
&[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
|