How to integrate specific input styles from bootstrap material design to existing project?

Question

I'm facing some issues while integrating only some of the styles defined in https://github.com/FezVrasta/bootstrap-material-design, namely the inputs on an existing theme with custom bootstrap styling applied.

In a less file I'm importing the input less file like this and the required variables and mixins for it to work properly:

@import '@{bower-path}/bootstrap-material-design/less/_colors.less';
@import '@{bower-path}/bootstrap-material-design/less/_mixins.less';
@import '@{bower-path}/bootstrap-material-design/less/_inputs.less';

and in a js file I'm initializing the inputs:

$.material.input();

but it doesn't display correctly, fi: it doesn't display the colored border-bottom on focus.

Any ideas to make this work properly?

Answer 1

As pointed in https://github.com/FezVrasta/bootstrap-material-design/issues/665, the issue was in the vendor prefixes which were not included in the original less files.

By adding the less autoprefixer plugin into the workflow, the issue was solved.