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

//
// Forms
// ---
// bigchain.io
//

.form-control {
    @extend .transition;
    display: block;
    width: 100%;
    appearance: none;
    padding: $input-padding-x $input-padding-y;
    font-family: $input-font;
    font-weight: $font-weight-bold;
    font-size: $font-size-base;
    line-height: $line-height;
    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;
    }

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


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

    // 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;

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

.form-control {
    // 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(.75);
        transform-origin: left top;
    }
}


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


//
// Form Validation States
//
.form-control {

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

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


//
// 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); }
}