Split in 2 CSS classes (with one dedicated to color)?
C-Duv opened this issue · 3 comments
Could the library updated to use 2 CSS classes instead of one: one to say it's a checkbox with material design and the other to give it's color?
For example (where u-colorTeal
only contains color-ing stuff):
<div class="icheck-material u-colorTeal">
<input type="checkbox" id="someCheckboxId" />
<label for="someCheckboxId">Click to check</label>
</div>
I see some advantages:
- It's clearer (IMHO, which is just an opinion)
- It can work with CSS frameworks.
- One can change the color by simply swapping a class.
What do you think?
Hello, sorry for late reply.
It is already done with _icheck-material-base.scss
and _icheck-material-theme.scss
files
You can use icheck-material-custom.scss
to specify your colors
Thanks
All existing classes have both the notion of styling the checkbox with material design AND giving it color.
And a single class is added to the <div>
.
When I need a new color for my checkboxes I need to create a new set of CSS
- named
icheck-material-SOMETHING
- containing lots of ancestor operators and pseudo elements
What I meant in my first post was having:
- one
icheck-material
class containing all the design but no color. - a
my-app-red-theme
(no enforced namespace here) class containing only the red-tones color CSS properties. - a
my-app-pink-theme
class contraint only the pink-tone color CSS properties.
But, on a second though, looking at how CSS works I realizes it might not be feasible for this great CSS-only library.
SCSS can offer ease of use (variables and mixins to easily create new themes, even without the namespace constraint or following it but using aliases to avoid repetition): so I guess using it resolves the issues I had.
PS: the only direct advantage I can hold on is: If all checkboxes styles by this library have the icheck-material
CSS class (not icheck-material-red
or icheck-material-pink
is that selecting theses checkboxes with jQuery is easier (non-regex selector) :)
Thanks for the answer.
Thanks for explanation.
I constructed files structure that way, that with scss you be able to generate and use only colors you need in your project.
_icheck-material-base.scss
is responsible only for actual checkbox_icheck-material-theme.scss
is responsible to create a single color class
As you can see in icheck-material-custom.scss
we import both (base and theme) files, and then we create lot of color classes
About your point "When I need a new color for my checkboxes I need to create a new set of CSS" , no, you can create any number of color classes in a single file, like we did all colors in icheck-material.scss
.
For example, if you use scss, you can use icheck-material-custom.scss
, in that file I added just one .icheck-material-custom
color class, just for example, and mainly users will use once color. but you can include 2, 3, .. any number of color classes
If you want to use scss in your theme class, you can import only _icheck-material-theme.scss
in your file, can keep base in different file.
I mean if you using sass, everything is very flexible. If not, you can just remove from main css file color classes, and add them in your theme files..
About having 2 classes, I do not see if that is critical.
Again, you can simple swap one class))
If you warry about jQuery selector, you can add second class, icheck-material
, and use that. You free to add any class you want..
Or you can use starts with selector, $("[class^='icheck-material-']")