Style using CSS variable

[mrleblanc101]

Style should use CSS variable so we can easily change the green accent for another background-color. Same could be said for the text color and the red used to remove a tag.

[kraxner]

you could override the default styles. It is not straight forward to see what classes have to be defined, but you can use your own naming convention for the variables. We did something like:

.multiselect,
.multiselect__single,
input#activitySel.multiselect__input,
input#locationSel,
.multiselect__tags,
.multiselect--active {
  background-color: var(--clr-secondary-light); 
  border: none;
  height: inherit;
  box-shadow: none;
  margin-bottom: 0;
  margin-top: 0;
}
.multiselect__option--highlight,
.multiselect__option--highlight::after {
  background-color: var(--clr-primary-main);
}

[mattelen]

You can write your own CSS to override the CSS of the multiselect, and as a result, use CSS variables in your own CSS There has been many discussions and chat about how best to change the styling of the mutltiselect, including in #287 - so I will close this issue as this is already requested

[mrleblanc101]

@mattelen I know it can override the style 🤦‍♂️ Thats exactly what I've done. But using CSS variable in the source code would allow me to change the primary color by overriding only one variable instead of multiple selector...

Why would you intentionally make your plugin harder to style. This plugin can be used in a variety of sites as it's not part of a library so allowing people to style it easily should be a priority.

[mrleblanc101]

@shentao Can we revisit this ? I'd be willing to open a PR. I don't think overriding all of vue-multiselect CSS is a good way to handle this as there is too many occurence of hex color. Changing the primary color from Green to Blue to fit my app style should be as single as changing a 1 or 2 CSS variables.