Broken bootstrap's InputGroupAddon styles

[MarkEhr]

Please answer the following questions for yourself before submitting an issue.

• [X] I am running the latest version
• [X] I checked the documentation and found no answer
• [X] I checked to make sure that this issue has not already been filed
• [X] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

When using InputGroupAddon's on input groups, the addons should be the same height as the input and match the background/no background of the input

Current Behavior

Different height on addon when using anything other than an icon. When using type="append" the background is always white and text color is white as well.

Steps to Reproduce

Add this code anywhere in the template:

        <InputGroup>
            <InputGroupAddon addonType="prepend">
                <InputGroupText>$</InputGroupText>
            </InputGroupAddon>
            <Input  />
            <InputGroupAddon addonType="append">
                <InputGroupText><i className="tim-icons icon-single-02" /></InputGroupText>
            </InputGroupAddon>
        </InputGroup>

[einazare]

Hello there @MarkEhr ,

Thank you for your interest in working with our product. Please create a new scss file and import it inside our own scss main file (src/assets/scss/black-dashboard-pro-react.scss) and then add the following lines of code:

.input-group-text{
  line-height: 1;
}
.form-control + .input-group-append .input-group-text, .form-control + .input-group-prepend .input-group-text {
  background-color: transparent;
}
.input-group-append, .input-group-prepend {
  border: none;
}
.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Sorry for this inconvenience. We'll repair this on our next update.

Best, Manu