Bootswatch Cosmo theme applied: no adjusting is required
Bootswatch Sketchy theme applied; additional adjusting is required:
// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
cssPatch : {
picks_focus: {boxShadow:"0px 0px 0px 0.2rem rgba(51,51,51,0.25)" , borderColor:"#333"},
picks_disabled: {backgroundColor: "#f7f7f9"},
// theme breaks "text-primary bg-light" (used as hover on menu items) so I need to replace them with own styling
choice_hover: { classes: "" /* remove default "text-primary bg-light" */, styles: { backgroundColor: "rgb(168, 168, 168)"}}
}
);
Bootswatch Materia theme applied; additional adjusting is required.
// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
cssPatch: {
picks_disabled: {backgroundColor: "transparent", color:"#ddd", borderColor: 'transparent'},
picks_focus: { boxShadow: 'inset 0 -2px 0 #2196F3'},
picks_focus_valid: {boxShadow: null},
picks_focus_invalid: {boxShadow: null},
picks: { boxShadow: 'inset 0 -1px 0 #ddd'}
}
);
Bootswatch Darkly theme applied; additional adjusting is required.
// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
cssPatch: {
picks_disabled: {backgroundColor:"rgb(235, 235, 235)"},
pickButton: {color: 'black'},
picks_focus: {borderColor: '#739ac2', boxShadow: '0 0 0 0.2rem rgba(55, 90, 127, 0.25)'}
}
);
Bootswatch Minty theme applied; additional adjusting is required: