app/assets/stylesheets/forms/_forms.sass
$form-spacing-horizontal: 9px
#disclaimer, .alert
@include css4
background: var(--alert--background)
color: var(--alert--text)
border: 1px solid var(--alert--border)
margin: 5px auto 55px auto
padding: 18px 35px
line-height: 1.4
border-radius: 3px
box-shadow: 0 6px 35px rgba(0, 0, 0, .1)
@media screen and (max-width: 400px)
margin: -10px -10px 35px -10px
padding: 13px 29px
.section-title
margin: 12px 0 5px
#disclaimer.alert
border: 2px solid var(--alert--border)
fieldset
margin: 25px 0 0
border: 1px solid #aaa
padding: 0.25em 1.5em 0.5em
outline: none
@media screen and (max-width: 400px)
margin-left: -10px
margin-right: -10px
legend
@include css4
background: var(--black)
color: var(--white)
width: 100%
text-align: center
padding: 0.5em
hr
border: none
@include css4
border-top: 1px solid var(--input--border-color)
margin: 35px 0 40px
width: 80px
.alert
@include css4
color: var(--alert--text--error)
background: var(--alert--background--error)
border-color: var(--alert--border--error)
.form-container, .cancel_btn_wrap
margin: 0 auto
max-width: 670px
padding-left: 5px
padding-right: 5px
// custom styles
.form-container.login, .form-container.signup, .form-container.password
max-width: 360px
.btn
margin-bottom: 30px
.text-overflow-center
text-align: center
display: flex
justify-content: center
.simple_form
@include css4
color: var(--grey)
.error
display: inline-block
width: 100%
@include css4
background: var(--input--error--background)
color: var(--input--error--text)
font-size: 0.74rem
padding: 6px 9px
flex: 1 1 100%
abbr
text-decoration: none
position: absolute
margin-left: -16px
@include css4
color: var(--input--required-star)
align-self: flex-start
.form-inputs
display: flex
flex-flow: row wrap
justify-content: stretch
margin-left: -1 * $form-spacing-horizontal
margin-right: -1 * $form-spacing-horizontal
.actions
display: flex
justify-content: flex-end
.input
flex: 1 1 600px
display: flex
flex-flow: row wrap
margin-left: $form-spacing-horizontal
margin-right: $form-spacing-horizontal
margin-bottom: 15px
position: relative
text-align: left
align-items: flex-start
align-content: flex-start
.input--half
flex-basis: 220px
label
display: flex
align-items: center
width: 100%
flex-shrink: 0
@include css4
font-weight: var(--font-light)
padding-top: 5px
padding-bottom: 8px
text-align: left
// all form input types
input[type=text], input[type=email], input[type=tel], input[type=date], input[type="url"], input[type=password], input[type=file], input[type=checkbox], input[type=radio], textarea, select
@include css4
background: var(--input--background)
color: var(--input--text)
font-family: var(--font-body-family)
font-weight: var(--font-reg)
border: 1px solid var(--input--border-color)
font-size: 100%
margin-bottom: 5px
outline: none
padding: 9px 14px
width: 100%
@include transition(150ms, border-color, ease-out, 0ms)
@include css4
@include placeholder-color(var(--input--text--placeholder))
&:focus
@include css4
color: var(--input--text--focus)
background-color: var(--input--background--focus)
border-color: var(--input--border-color--focus)
border-width: 2px
padding: 8px 13px
// just selects
select
@include appearance (none)
@include css4
background: asset-url("arrow_down_hover.svg"), var(--input--background)
background-repeat: no-repeat
background-position: right
background-size: auto 100%
font-size: 100%
border-radius: 0
&:hover
background-image: asset-url("arrow_down.svg")
&:focus
background-image: asset-url("arrow_down.svg")
&.date:nth-child(2)
flex: 3 0 120px
margin-right: 2 * $form-spacing-horizontal
&.date:nth-child(3)
flex: 1 1 65px
margin-right: 2 * $form-spacing-horizontal
&.date:nth-child(4)
flex: 1 1 85px
// checkbox
input[type=checkbox]
@include appearance (none)
width: 22px
height: 22px
padding: 1px
margin: 0 10px 0 0
&::after
// Begin FontAwesome's .fa class
font: normal normal normal 14px/1 FontAwesome
text-rendering: auto
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
// end .fa
content: ""
@include css4
color: var(--primary)
font-size: 25px
margin-left: 2px
margin-top: -4px
display: block
opacity: 0
&:hover
background: #eee
&:checked
&::after
opacity: 1
&:focus
padding: 0
// radio
.radio
min-width: 170px
.radio_buttons_vertical .radio
min-width: 100%
// checkbox
input[type=radio]
@include appearance(none)
width: 22px
height: 22px
padding: 1px
margin: 0 10px 0 0
@include border-radius(50%)
&:hover
background: #eee
&:checked
&::after
content: ""
@include css4
background: var(--primary)
display: block
width: 100%
height: 100%
transform: scale(0.8)
@include border-radius(50%)
&:focus
padding: 0
input[type=radio]
margin-right: 10px
//Submit
input[type=submit]
margin: 10px 0
//cancel button area on edit participant
.cancel_btn_wrap
text-align: center
// Resume Upload
.participant_resume
margin-top: 20px
.field_with_errors
@include css4
color: var(--red) !important
.hint
@include css4
color: var(--input--hint)
font-style: italic
width: 100%
.supporting-text
@include css4
color: var(--input--hint)
line-height: 1.5
margin-left: $form-spacing-horizontal
margin-right: $form-spacing-horizontal
margin-bottom: 3px
// form wizard
.wizard-stage
display: none
.wizard-current
display: block
// selectize
.selectize
width: 100%
.diagonal
z-index: 1
position: relative
.diagonal:before
position: absolute
content: ''
.diagonal:before
-webkit-transform: rotate(-2deg)
transform: rotate(-2deg)
-webkit-transform-origin: 2% 0
transform-origin: 2% 0
top: 0
left: -25%
z-index: -1
width: 150%
height: 75%
background: inherit
.formatted_boolean
flex-flow: row wrap
align-items: center
label
flex: 1
max-width: 350px
padding-right: 10px
input[type=checkbox]
margin-right: 0
@media (max-width: 680px)
label
width: 220px
.deletable_attachment
justify-content: space-between
input[type=file]
flex: 1
min-width: 200px
max-width: 450px
.deletable_attachment_input
margin: 0
flex: 1
max-width: fit-content
label
justify-content: flex-end
@media (max-width: 500px)
justify-content: flex-start