223 lines
4.0 KiB
Sass
223 lines
4.0 KiB
Sass
@use "../../app" as *
|
|
|
|
// GENERAL STYLES FOR FORMS
|
|
|
|
// FORM GROUPS
|
|
.form-section-title
|
|
color: var(--color-fontsec)
|
|
margin: 0
|
|
|
|
+ .form-group
|
|
margin-top: 11px
|
|
|
|
.form-group
|
|
position: relative
|
|
display: flex
|
|
display: grid
|
|
grid-template-columns: 1fr 3fr
|
|
grid-gap: 5px
|
|
justify-content: flex-start
|
|
align-items: flex-start
|
|
|
|
+ .form-group, + .form-section-legend, + .form-section-notification
|
|
margin-top: 11px
|
|
|
|
+ .form-section-title
|
|
margin-top: 40px
|
|
|
|
.form-section-legend
|
|
@extend .explanation
|
|
margin: 7px 0
|
|
|
|
.form-group__hint, .form-section-title__hint
|
|
color: var(--color-fontsec)
|
|
font-size: 0.9rem
|
|
font-weight: 600
|
|
|
|
.form-section-title__hint
|
|
margin-top: 7px
|
|
|
|
+ .form-group
|
|
margin-top: 11px
|
|
|
|
.form-group-label
|
|
font-weight: 600
|
|
padding-top: 6px
|
|
|
|
.form-group-label__hint
|
|
margin-top: 7px
|
|
color: var(--color-fontsec)
|
|
font-size: 0.9rem
|
|
|
|
.form-group--required .form-group-label__caption::after, .form-group__required-marker::before
|
|
content: ' *'
|
|
color: var(--color-error)
|
|
font-weight: 600
|
|
font-style: normal
|
|
|
|
.form-group--submit .form-group__input
|
|
grid-column: 2
|
|
|
|
@media (max-width: 768px)
|
|
.form-group--submit .form-group__input
|
|
grid-column: 1
|
|
|
|
.form-group--has-error
|
|
background-color: rgba(140, 7, 7, 0.05)
|
|
|
|
.form-group-label
|
|
border-left: 2px solid var(--color-error)
|
|
align-self: stretch
|
|
padding-left: 7px
|
|
|
|
input, textarea
|
|
border-color: var(--color-error) !important
|
|
|
|
.form-error
|
|
display: block
|
|
font-weight: 600
|
|
color: var(--color-error)
|
|
margin: 7px 0
|
|
|
|
.form-error
|
|
display: none
|
|
|
|
@media (max-width: 768px)
|
|
.form-group
|
|
grid-template-columns: 1fr
|
|
align-items: baseline
|
|
margin-top: 17px
|
|
flex-direction: column
|
|
|
|
// TEXT INPUTS
|
|
input[type='text'],
|
|
input[type='search'],
|
|
input[type='password'],
|
|
input[type='url'],
|
|
input[type='number'],
|
|
input[type='email'],
|
|
input[type*='date'],
|
|
input[type*='time'],
|
|
select
|
|
// from bulma.css
|
|
color: #363636
|
|
border-color: #dbdbdb
|
|
background-color: #f3f3f3
|
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
|
width: 100%
|
|
max-width: 600px
|
|
align-items: center
|
|
border: 1px solid transparent
|
|
border-radius: 4px
|
|
font-size: 1rem
|
|
font-family: var(--font-base)
|
|
line-height: 1.5
|
|
padding: 4px 13px
|
|
|
|
input[type='number']
|
|
width: 100px
|
|
|
|
input[type*='date'],
|
|
input[type*='time'],
|
|
.flatpickr-input[type='text']
|
|
width: 50%
|
|
width: 250px
|
|
|
|
// BUTTON STYLE SEE default-layout.lucius
|
|
|
|
// TEXTAREAS
|
|
textarea
|
|
width: 100%
|
|
height: 170px
|
|
max-width: 600px
|
|
line-height: 1.5
|
|
color: #363636
|
|
background-color: #f3f3f3
|
|
padding: 4px 13px
|
|
font-size: 1rem
|
|
font-family: var(--font-base)
|
|
appearance: none
|
|
border: 1px solid #dbdbdb
|
|
border-radius: 2px
|
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
|
vertical-align: top
|
|
|
|
// SHARED STATE RELATED STYLES
|
|
|
|
input,
|
|
select,
|
|
textarea
|
|
&:focus
|
|
border-color: #3273dc
|
|
box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25)
|
|
outline: 0
|
|
|
|
&[disabled]
|
|
background-color: #f3f3f3
|
|
color: #7a7a7a
|
|
box-shadow: none
|
|
border-color: #dbdbdb
|
|
|
|
&[readonly]
|
|
background-color: #f5f5f5
|
|
border-color: #dbdbdb
|
|
|
|
// OPTIONS
|
|
|
|
select[size="1"], select:not([size])
|
|
appearance: menulist
|
|
|
|
select,
|
|
option
|
|
font-size: 1rem
|
|
line-height: 1.5
|
|
padding: 4px 13px
|
|
border: 1px solid #dbdbdb
|
|
border-radius: 2px
|
|
outline: 0
|
|
color: #363636
|
|
min-width: 250px
|
|
width: auto
|
|
background-color: #f3f3f3
|
|
box-shadow: inset 0 1px 2px 1px rgba(50, 50, 50, 0.05)
|
|
|
|
@media (max-width: 425px)
|
|
select, option
|
|
width: 100%
|
|
|
|
// FILE INPUT
|
|
.file-input
|
|
display: none
|
|
|
|
.file-input__label
|
|
cursor: pointer
|
|
display: inline-block
|
|
background-color: var(--color-primary)
|
|
color: white
|
|
padding: 10px 17px
|
|
border-radius: 3px
|
|
|
|
.file-input__info
|
|
font-size: .9rem
|
|
font-style: italic
|
|
margin: 10px 0
|
|
color: var(--color-fontsec)
|
|
|
|
.file-input__list
|
|
margin-left: 40px
|
|
margin-top: 10px
|
|
font-weight: 600
|
|
|
|
// PREVIOUSLY UPLOADED FILES
|
|
|
|
.file-uploads-label
|
|
margin-bottom: 10px
|
|
|
|
.file-container
|
|
display: flex
|
|
align-items: center
|
|
margin-bottom: 10px
|
|
|
|
.checkbox
|
|
margin-left: 12px
|