suitmedia/suitcoda

// Config
// ------------------------------------------------------------------------ //

$input_border_size      : 1 * 1px;
$input_border_color     : $grey_dark;
$input_padding          : $space/3;
$input_bg               : #fff;


// Base style
// ------------------------------------------------------------------------ //

legend {
    margin-bottom: $space/2;
}

// Fix small bullet on Webkit
// http://goo.gl/WgqfpM
input[type="password"] {
    font: small-caption;
    font-size: 1em;
}

// Hide input type number spinner
// http://goo.gl/lcCQgB
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance:textfield;
}

select.form-input {
    height: 40px;
}

.form__row {
    margin-bottom: $space/2;
}

.form-label {
    display: block;
    margin-top: $space/3;
}

.form-input {
    padding: $input_padding;
    border: solid $input_border_size $input_border_color;
    border-radius: 5px;
    font-family: inherit;
    background: $input_bg;

    &:focus {
        border-color: #2669d3;
        outline: none;
    }

    &[disabled] {
        cursor: not-allowed;
    }
}


// Modifier
// ------------------------------------------------------------------------ //

.form-input--error {
    border-color: #d32c31;

    &:focus {
        border-color: #d32c31;
    }
}

.form-input--success {
    border-color: #4eb74a;

    &:focus {
        border-color: #4eb74a;
    }
}

.form-input--block {
    width: 100%;
}

.msg-error {
    font-size: 12px;
    color: $red;
}