szurubooru/client/css/core-forms.styl

@import colors

form
    display: block
    width: 20em

    .input
        list-style-type: none
        margin: 0 0 2em 0
        padding: 0
        li
            margin-top: 1.2em
        label
            display: block
            padding: 0.3em 0
    .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
    .input li:first-child
        padding-top: 0
        margin-top: 0

form:not(.horizontal)
    .hint
        margin-top: 0.2em
        margin-bottom: 0
        color: $inactive-link-color
        font-size: 80%
        line-height: 120%

form.horizontal
    display: inline-block
    margin-bottom: 1em
    .input, .buttons, ul
        display: inline-block
        vertical-align: top
        margin: 0
        padding: 0
        input
            vertical-align: top
    .buttons
        margin-right: 0.5em
    @media (max-width: 1000px)
        display: block
        .input, .buttons, ul
            display: block
            margin-top: 0.5em
            &:first-child
                margin-top: 0
        .buttons
            margin-right: 0



/*
 * Radio buttons and checkboxes
 */
input[type=radio], input[type=checkbox]
    position: absolute
    opacity: 0

.radio, .checkbox
    box-sizing: border-box
    position: relative
    display: inline-block
    padding-left: calc(20px + 0.5em) !important
    vertical-align: middle
    cursor: pointer

    &:hover:before
        border-color: $main-color

.radio:before
    border-radius: 100%

.radio:before, .checkbox:before
    transition: border-color 0.1s linear
    position: absolute
    left: 0
    top: 0.15em
    display: block
    width: 16px
    height: 16px
    background: $input-enabled-background-color
    border: 2px solid $input-enabled-border-color
    content: ''

.radio:after
    background: $main-color
    transition: opacity 0.1s linear
    position: absolute
    left: 5px
    top: 0.15em
    margin-top: 5px
    display: block
    width: 10px
    height: 10px
    border-radius: 50%
    content: ''
    opacity: 0

.checkbox:after
    transition: opacity 0.1s linear
    position: absolute
    top: 0.15em
    left: 6px
    display: block
    margin-top: 3px
    width: 5px
    height: 9px
    border-right: 3px solid $main-color
    border-bottom: 3px solid $main-color
    content: ''
    opacity: 0
    transform: rotate(45deg)


input[type=radio]:checked + .radio:before,
input[type=checkbox]:checked + .checkbox:before
    border-color: $main-color

input[type=radio]:checked + .radio:after,
input[type=checkbox]:checked + .checkbox:after
    opacity: 1

input[type=radio]:disabled + .radio:before,
input[type=checkbox]:disabled + .checkbox:before,
input[type=radio]:disabled + .radio:after,
input[type=checkbox]:disabled + .checkbox:after
    border-color: $input-disabled-text-color

input[type=radio]:disabled + .radio,
input[type=checkbox]:disabled + .checkbox
    border-color: $input-disabled-text-color

input[type=radio]:focus + .radio:before,
input[type=checkbox]:focus + .checkbox:before
    border-color: $main-color



/*
 * Date and time inputs
 */

input[type=date],
input[type=time]
    vertical-align: top
    font-family: 'Droid Sans', sans-serif
    font-size: 100%
    padding: 0.2em 0.3em
    box-sizing: border-box
    border: 2px solid $input-enabled-border-color
    background: $input-enabled-background-color
    color: $input-enabled-text-color
    box-shadow: none /* :-moz-submit-invalid on FF */
    transition: border-color 0.1s linear, background-color 0.1s linear

    &:disabled
        border: 2px solid $input-disabled-border-color
        background: $input-disabled-background-color
        color: $input-disabled-text-color

    &:focus
        border-color: $main-color

    &[readonly]
        border: 2px solid $input-disabled-border-color
        background: $input-disabled-background-color
        color: $input-disabled-text-color



/*
 * Regular inputs
 */
select,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number]
    vertical-align: top
    font-family: 'Droid Sans', sans-serif
    font-size: 100%
    padding: 0.2em 0.3em
    text-overflow: ellipsis
    width: 100%
    box-sizing: border-box
    border: 2px solid $input-enabled-border-color
    background: $input-enabled-background-color
    color: $input-enabled-text-color
    box-shadow: none /* :-moz-submit-invalid on FF */
    transition: border-color 0.1s linear, background-color 0.1s linear

    &:disabled
        border: 2px solid $input-disabled-border-color
        background: $input-disabled-background-color
        color: $input-disabled-text-color

    &:focus
        border-color: $main-color

    &[readonly]
        border: 2px solid $input-disabled-border-color
        background: $input-disabled-background-color
        color: $input-disabled-text-color

input[readonly],
input[readonly]+.radio,
input[readonly]+.checkbox,
input:disabled+.radio,
input:disabled+.checkbox,
input:disabled
    cursor: not-allowed

label.color
    white-space: nowrap
    position: relative
    display: flex
    input[type=text]
        margin-right: 0.25em
        width: auto
    .preview
        display: inline-block
        text-align: center
        padding: 0 0.5em
        border: 2px solid black
        &:after
            content: 'A'
    .background-preview
        border-right: 0
        color: transparent
    .text-preview
        border-left: 0


form.show-validation .input
    input:invalid
        outline: 0
        border: 2px solid $input-bad-border-color
        background: $input-bad-background-color
    input:valid
        outline: 0
        border: 2px solid $input-good-border-color
        background: $input-good-background-color



/*
 * Buttons
 */
button,
input[type=button],
input[type=submit]
    cursor: pointer
    font-size: 100%
    padding: 0.2em 0.7em
    border-radius: 0
    border: 2px solid $button-enabled-background-color
    background: $button-enabled-background-color
    color: $button-enabled-text-color
    outline: 0 /* something on Chrome */
    -moz-appearance: none
    -webkit-appearance: none

    &:disabled
        cursor: default
        border-color: $button-disabled-background-color
        background-color: $button-disabled-background-color
        color: $button-disabled-text-color

    &.discourage
        border-color: transparent
        background-color: transparent
        color: $button-disabled-text-color

    &:focus
        border: 2px solid $text-color

select:-moz-focusring
    text-shadow: 0

button::-moz-focus-inner,
input::-moz-focus-inner
    border: 0



/*
 * File dropper
 */
.file-dropper-holder
    .file-dropper
        display: block
        background: $window-color
        border: 3px dashed #eee
        padding: 0.3em 0.5em
        line-height: 140%
        text-align: center
        cursor: pointer
        overflow: hidden
        word-wrap: break-word
    .url-holder
        display: flex
        margin-top: 0.5em
        input, button
            min-width: 0 /* firefox being sassy */
            width: auto !important /* don't inherit anything weird */
        input
            flex: 1
        button
            margin-left: 0.5em

input[type=file]:disabled+.file-dropper
    cursor: default
    opacity: .5

input[type=file]:active+.file-dropper,
input[type=file]:focus+.file-dropper,
.file-dropper.active
    border-color: $main-color



.autocomplete
    position: absolute
    z-index: 10
    background: $window-color
    border: 2px solid $main-color
    display: none
    font-size: 0.95em
    ul
        list-style-type: none
        margin: 0
        padding: 0
        li
            margin: 0
            a
                display: block
                padding: 0.1em 0.5em
            &.active a, a:hover
                background: $button-enabled-background-color
                color: $button-enabled-text-color
                span
                    color: $button-enabled-text-color
            .disabled
                color: $inactive-link-color


.anticomplete
    display: none