Emi Matchu
6dc5aa28a4
If the screen is narrow, many of the bubbles will wrap their text onto two lines, but "Unconverted" won't. Give it equal height to the rest anyway, for visual consistency!
102 lines
1.7 KiB
Sass
102 lines
1.7 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, > .field_with_errors label
|
|
display: block
|
|
font-weight: bold
|
|
|
|
.field_with_errors
|
|
> label
|
|
color: $error-color
|
|
|
|
input[type=text], input[type=url]
|
|
border-color: $error-border-color
|
|
color: $error-color
|
|
|
|
&[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
|
|
|
|
li
|
|
display: flex
|
|
align-items: stretch // Give the bubbles equal heights!
|
|
|
|
label
|
|
display: flex
|
|
align-items: center
|
|
gap: .5em
|
|
padding: .5em 1em
|
|
border: 1px solid $soft-border-color
|
|
border-radius: 1em
|
|
flex: 1 1 auto
|
|
|
|
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
|
|
|
|
.go-to-next
|
|
display: flex
|
|
align-items: center
|
|
gap: .25em
|
|
font-size: .85em
|
|
font-style: italic
|