fronend/scss/_inputformgroup.scss

.input-group {
    width: 100%;
    margin-bottom: 20px;

    .form-line {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #ddd;
        position: relative;

        &:after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            bottom: -2px;
            @include transform(scaleX(0));
            @include transition(0.25s ease-in);
            border-bottom: 2px solid #1f91f3;
        }

        + .input-group-addon {
            padding-right: 0;
            padding-left: 10px;
        }
    }

    .help-info {
        float: right;
        font-size: 12px;
        margin-top: 5px;
        color: #999;
    }

    label.error {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        font-weight: normal;
        color: #F44336;
    }

    .form-line.error {
        &:after {
            border-bottom: 2px solid #F44336;
        }
    }

    .form-line.success {
        &:after {
            border-bottom: 2px solid #4CAF50;
        }
    }

    .form-line.warning {
        &:after {
            border-bottom: 2px solid #FFC107;
        }
    }

    .form-line.focused {
        &:after {
            @include transform(scaleX(1));
        }

        .form-label {
            bottom: 25px;
            left: 0;
            font-size: 12px;
        }
    }

    .input-group-addon {
        border: none;
        background-color: transparent;
        padding-left: 0;
        font-weight: bold;

        .material-icons {
            font-size: 18px;
            color: #555;
        }
    }

    input[type="text"],
    .form-control {
        border: none;
        box-shadow: none;
        padding-left: 0;
    }

    .form-control {
        &:focus {
            @include box-shadow(none !important);
        }
    }
}

.input-group.input-group-sm {
    .input-group-addon {
        i {
            font-size: 14px;
        }
    }

    .form-control {
        font-size: 12px;
    }
}

.input-group.input-group-lg {

    .input-group-addon {
        i {
            font-size: 26px;
        }
    }

    .form-control {
        font-size: 18px;
    }
}

.form-control-label {
    text-align: right;

    label {
        margin-top: 8px;
    }
}

.form-horizontal {
    .form-group {
        margin-bottom: 0;
    }
}

.form-group {
    width: 100%;
    margin-bottom: 25px;

    .form-control {
        width: 100%;
        border: none;
        box-shadow: none;
        // border-bottom: 1px solid #ddd;
        @include border-radius(0);
        padding-left: 0;
    }

    .help-info {
        float: right;
        font-size: 12px;
        margin-top: 5px;
        color: #999;
    }

    label.error {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        font-weight: normal;
        color: #F44336;
    }

    .form-line {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #ddd;

        &:after {
            content: '';
            position: absolute;
            left: 0;
            width: 100%;
            height: 0;
            bottom: -1px;
            @include transform(scaleX(0));
            @include transition(0.25s ease-in);
            border-bottom: 2px solid #1f91f3;
        }

        .form-label {
            font-weight: normal;
            color: #aaa;
            position: absolute;
            top: 10px;
            left: 0;
            cursor: text;
            @include transition(0.2s);
        }
    }

    .form-line.error {
        &:after {
            border-bottom: 2px solid #F44336;
        }
    }

    .form-line.success {
        &:after {
            border-bottom: 2px solid #4CAF50;
        }
    }

    .form-line.warning {
        &:after {
            border-bottom: 2px solid #FFC107;
        }
    }

    .form-line.focused {
        &:after {
            @include transform(scaleX(1));
        }

        .form-label {
            top: -10px;
            left: 0;
            font-size: 12px;
        }
    }
}

.form-group-sm {
    .form-label {
        font-size: 12px;
    }

    .form-line.focused {
        .form-label {
            bottom: 20px;
            font-size: 10px;
        }
    }
}

.form-group-lg {
    .form-label {
        font-size: 18px;
    }

    .form-line.focused {
        .form-label {
            bottom: 35px;
            font-size: 12px;
        }
    }
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: transparent;
}