szurubooru/client/css/forms.styl

@import mixins
@import colors

form
    display: block
    width: 20em

    ul
        list-style-type: none
        margin: 0 0 1em 0
        padding: 0
        li
            margin-top: 1.2em
        label
            display: block
            padding: 0.3em 0
    .input
        margin-bottom: 2em
    .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.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: 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],
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

div.tag-input
    position: relative
    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

    .tag-suggestions
        position: absolute
        z-index: 5
        top: 0
        left: 100%

        &:not(.shown)
            display: none

        &.translucent
            opacity: .5

        &:before
            margin-left: 0.5em
            margin-top: 0.5em
            position: absolute
            display: block
            background: $tag-suggestions-header-color
            border-left: 1px solid $tag-suggestions-border-color
            border-bottom: 1px solid $tag-suggestions-border-color
            width: 0.707107em
            height: 0.707107em
            content: ' '
            transform: rotate(45deg)
            transform-origin: 0 0%

        .buttons
            float: right
            a
                margin-left: 1em
                color: $inactive-link-color

        .wrapper
            margin-left: 0.5em
            background: $tag-suggestions-background-color
            border: 1px solid $tag-suggestions-border-color
            width: 15em
            word-break: break-all
            p
                background: $tag-suggestions-header-color
                padding: 0.2em 1em
                margin: 0
            ul
                margin: 0
                overflow-y: auto
                overflow-x: none
                max-height: 20em
                padding: 0.5em 1em 0 1em
                li:last-child
                    border-bottom: 0.5em solid alpha($tag-suggestions-background-color, 0)
                li
                    margin: 0
                    font-size: 90%
                    line-height: 1.3
                    a, span
                        display: inline-block
                        vertical-align: bottom
                    .add-tag
                        white-space: nowrap
                        overflow: hidden
                        max-width: 10em
                        text-overflow: ellipsis
                    .tag-weight
                        margin: 0 1em 0 0
            p
                margin: 0

        .append
            color: $inactive-link-color
            margin-left: 0.7em
            font-size: 90%
            unselectable()

ul.compact-tags
    line-height: 130%
    width: 100%
    li
        margin: 0
        width: 100%
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
        a
            display: inline
    i
        padding-right: 0.4em
    .append
        color: $inactive-link-color
        margin-left: 0.7em
        font-size: 90%
        unselectable()

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%
    padding: 0.2em 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: $window-color
    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: $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