How to style input fields with bootstrap using two different themes

时间:2019-01-09 21:55:59

标签: sass bootstrap-4 theming

I would like to style my input fields with bootstrap-4 altering the default appearance by theming. Yet on one exception of the pages I would like to use the default appearance of the input fields given by bootstrap. The same I want to do with the grid. On every page the gutter should be 50px wide except for one page where it should be only 15px wide.

I have already tried to write two different theming sheets:

themesheet1.scss:
...
$grid-gutter-width: 69px !default;
$input-bg:               transparent;
$input-placeholder-color:#ffffff80 !important;
$input-color:            white;
...

themesheet2.scss
...
$grid-gutter-width: 15px !default;
...

but since there is a lot of repetitive theming happening below and above those lines of code which is the same in both files I find this solution to be pretty unhandy since there is unnessecary code to maintain. I wonder whether it is possible to somehow freeze the class (I think it is .form-control) which styles the inputs in its default state (i.e. without the theming applied) under a different class-name e.g .form-control-default and then theme .form-control according to my needs. Thus I would be able to access both classes later on. As for the grid I am not really shure of how to accomplish what I want without writing a second theming file, since there are several classes involved.

0 个答案:

没有答案