More Adaptive Formatting about jquery-minicolors HOT 2 CLOSED

I think the first step should be to provide a way for developer to tell that no styling should be applied to the input element. This way, input gets all styling for application global stylesheet and looks like all other inputs and the developer is free to style and position the swatch anyway he wants relative to the input (beside/inside etc.).

I've found a way to do it pretty easily by extracting all the current hardcoded styling of the input element into ".minicolors-default-theme" class, and setting $.minicolors.defaultSettings.classes to be that default. This way, when I specify another class or do not specify a class at all, no styling is applied to the input, and my inputs stay formatted the same as all other inputs in my page. All is left to do is to add a little styling to the swatch and that's it.

For example, in my application I'm using bootstrap, and all my inputs are styled with big padding and rounded corners. I change $.minicolors.defaultSettings.classes="minicolors-boostrap-theme", add my own styling in 'minicolors-bootstrap-theme' class to position swatch inside the input element and everything looks great.

I've created a pull request for this, hope you accept it.

from jquery-minicolors.

I've made a few more updates. classes and styles were removed from the settings in lieu of theme. The default theme is default and I've polished off and merged the custom theme (now called bootstrap) into the stylesheet. I also made it adhere to the swatchPosition and position settings.

In the future, maybe we'll see some theme contributions that we can add to the stylesheet. It would probably be most sensible to mimic themes for popular libraries (much like @alextk has done with the bootstrap theme).

Overall, this update makes it much easier to style the control. Special thanks to @alextk for his help with this. At this point, I feel like this issue is pretty much resolved, so I'm going to close it.

from jquery-minicolors.