szurubooru/client/css/forms.styl

@import colors

form
    display: block
    width: 20em

    ul
        list-style-type: none
        margin: 0
        padding: 0
        li
            margin-top: 1.2em
        label
            display: block
            padding: 0.3em 0
    .input
        margin-bottom: 1em
    .buttons
        margin-top: 1.5em
    .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
    .input li:first-child
        padding-top: 0
        margin-top: 0
    .hint
        margin-top: 0.5em
        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: middle
        margin: 0
        padding: 0
        input
            vertical-align: middle
    .buttons
        margin-right: 0.5em



/*
 * 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
    top: 50%
    left: 0
    display: block
    margin-top: -10px
    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
    top: 50%
    left: 5px
    display: block
    margin-top: -5px
    width: 10px
    height: 10px
    border-radius: 50%
    content: ''
    opacity: 0

.checkbox:after
    transition: opacity 0.1s linear
    position: absolute
    top: 50%
    left: 6px
    display: block
    margin-top: -7px
    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



/*
 * Regular inputs
 */
select,
textarea,
input[type=text],
input[type=email],
input[type=password]
    vertical-align: top
    font-family: 'Droid Sans', sans-serif
    font-size: 100%
    padding: 0.25em 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

div.tag-input
    li
        transition: background-color 0.5s linear
        &.implication
            background: $implied-tag-background-color
            color: $implied-tag-text-color
        &.new
            background: $new-tag-background-color
            color: $new-tag-text-color
        &.duplicate
            background: $duplicate-tag-background-color
            color: $duplicate-tag-text-color
    ul
        margin-top: 0.2em

ul.compact-tags
    line-height: 130%
    word-break: break-all
    li
        margin: 0
    i
        padding-right: 0.4em
    .count
        color: $inactive-link-color
        padding-left: 0.7em
        font-size: 90%

div.tag-relations
    font-size: 80%
    ul
        display: inline
        margin: 0
        padding: 0
        &.tag-siblings li:first-child:before
            content: 'Siblings: '
        &.tag-suggestions li:first-child:before
            content: 'Suggestions: '
        &:before, &:after
            height: 0.25em
            content: ' '
            display: block
        li
            display: inline
            margin: 0
            padding: 0
            a
                display: inline-block
                margin: 0 0 0 1em

label.color
    position: relative
    input[type=text]
        text-align: center
        pointer-events: none
    input[type=color]
        position: absolute
        opacity: 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%
    line-height: 150%
    padding: 0 0.7em
    border: 2px solid $button-enabled-background-color
    background: $button-enabled-background-color
    color: $button-enabled-text-color
    outline: 0 /* something on Chrome */

    &: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
    background: white
    border: 3px dashed #eee
    padding: 0.3em 0.5em
    line-height: 140%
    text-align: center
    cursor: pointer
    word-wrap: break-word

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: white
    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