site/_src/_assets/styles/bigchain/_forms.scss

//
// Forms
// ---
// bigchaindb.com
//
.form {
    padding: $spacer;
    background: $gray-dark;
    border-radius: $border-radius;
    margin-bottom: $spacer;

    @media ($screen-sm) {
        padding: ($spacer * 1.5) ($spacer * 2.5);
    }
}

.form-control {
    @extend .transition;
    display: block;
    width: 100%;
    appearance: none;
    padding: $input-padding-x $input-padding-y;
    font-family: $input-font;
    font-weight: $input-font-weight;
    font-size: $font-size-base;
    color: $input-color;
    background: none;
    border: none;
    border-bottom: 2px solid $input-border-color;
    border-radius: 0;

    &:focus {
        outline: 0;
        border-color: $input-border-focus;
    }

    // Placeholder
    &::placeholder {
        color: $input-color-placeholder;

        // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
        opacity: 1;
    }

    // Disabled and read-only inputs
    //
    // HTML5 says that controls under a fieldset > legend:first-child won't be
    // disabled if the fieldset is disabled. Due to implementation difficulty, we
    // don't honor that edge case; we style them as disabled anyway.
    &:disabled,
    &[readonly] {
        background-color: $input-bg-disabled;

        // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
        opacity: 1;
    }

    &:disabled {
        cursor: disabled;
    }

    //
    // required indicator after the label
    //
    &:required,
    &[required] {
        + .form-label,
        + .select2-container--bigchaindb + .form-label {
            &:after {
                @extend .required;
                content: '*';
            }
        }
    }

    // the active state
    &:focus ~ .form-label,
    &:valid:not(.is-empty) ~ .form-label,
    &:invalid:not(.is-empty) ~ .form-label,
    //&.parsley-error ~ .form-label,
    &.parsley-success ~ .form-label {
        transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
        color: $input-border-focus;
    }


    //
    // Form Validation States
    //

    // Success style
    &:valid:not(.is-empty):not(select),
    &.parsley-success {
        &,
        &:focus {
            border-color: $brand-success;
        }
    }

    // Error style
    &:invalid:not(.is-empty),
    &.parsley-error {
        &,
        &:focus {
            border-color: $brand-danger;
            color: $brand-danger;
        }
    }

    .background--photo & {
        border-bottom-color: rgba(#fff, .5);
    }
}

.form-control--sm {
    padding: $input-padding-x-sm $input-padding-y-sm;
    font-size: $font-size-sm;
}


//
// required indicator
//
.required {
    color: $brand-main-violet;
    padding-left: .1rem;
    padding-right: .1rem;
}


//
// Floating placeholder labels
//
.form-label {
    position: absolute;
    top: $input-padding-x;
    left: $input-padding-y;
    right: $input-padding-y;
    transition: .15s ease-out;
    user-select: none;
    cursor: text;

    // style like placeholder
    font-family: $input-font;
    font-weight: $input-font-weight;
    font-size: $font-size-base;
    line-height: $line-height;
    color: $input-color-placeholder;
    transform-origin: left;

    // hide on selects
    select + & {
        visibility: hidden;
    }

    .background--photo & {
        color: rgba(#fff, .5);
    }
}


//
// Form groups
//
.form-group {
    margin-bottom: $spacer;
    position: relative;
    // make room for floating labels
    margin-top: $spacer;

    &:last-of-type {
        .btn {
            margin-top: $spacer;
        }
    }
}


//
// Text areas
//
textarea.form-control {
    // Leave resizing to js
    // https://github.com/CodingAspect/Textarea-Autogrow#usage
    resize: none;
    box-sizing: content-box;
}


//
// Selects
//
select.form-control {
    color: $input-color-placeholder;
    font-weight: $input-font-weight;

    &:focus::-ms-value {
        color: $input-color;
        background-color: $input-bg;
    }
}


//
// Checkboxes and radios
//
.radio,
.checkbox {
    position: relative;
    display: block;
    margin-bottom: ($spacer * .75);

    label {
        padding-left: 1.75rem;
        margin-bottom: 0;
        cursor: pointer;
        // When there's no labels, don't position the input.
        input:only-child {
            position: static;
        }
    }

    &.disabled {
        label {
            cursor: not-allowed;
        }
    }
}

.radio input[type='radio'],
.radio-inline input[type='radio'],
.checkbox input[type='checkbox'],
.checkbox-inline input[type='checkbox'] {
    position: absolute;
    margin-bottom: -.25rem;
    margin-left: -1.75rem;
    margin-right: .25rem;

    // reset styling, then style
    appearance: button;
    background: none;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: $border-radius;
    border: 2px solid $input-border-color;
    outline: none;

    &:focus {
        border-color: $input-border-focus;
    }

    &:checked {
        background: $brand-primary;
        border-color: $input-border-focus;
    }
}

.radio input[type='radio'],
.radio-inline input[type='radio'] {
    border-radius: 50%;
}

.radio + .radio,
.checkbox + .checkbox {
    // Move up sibling radios or checkboxes for tighter spacing
    margin-top: -.25rem;
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
    position: relative;
    display: inline-block;
    padding-left: 1.25rem;
    margin-bottom: 0;
    vertical-align: middle;
    cursor: pointer;

    &.disabled {
        cursor: not-allowed;
    }
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: .75rem;
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type='radio'],
input[type='checkbox'] {
    &:disabled,
    &.disabled {
        cursor: not-allowed;
    }
}


//
// Error messages
//
.form-group,
.input-group { position: relative; }

.parsley-errors-list {
    @extend .list-unstyled;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: $font-size-xs;

    &,
    li { color: $brand-danger; }

    &.filled {
        animation: errors-list-show .2s $timing-bounce forwards;
    }
}

@keyframes errors-list-show {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, ( $font-size-sm + ($spacer / 4)), 0); }
}