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

    .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(.7);
        transform-origin: left;
        color: $input-border-focus;
    }
}


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


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

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

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-bottom: -0.25rem;
    margin-left: -1.25rem;
    margin-right: 0.25rem;

    // reset styling, then style
    -webkit-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;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 0;
    margin-left: 0.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;
    }
}

// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
    &.disabled {
        cursor: not-allowed;
    }
}

// These classes are used on elements with <label> descendants
.radio,
.checkbox {
    &.disabled {
        label {
            cursor: not-allowed;
        }
    }
}


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