search

Wikiki / bulma-checkradio

Bulma's extension to display better checkbox and radio imputs
MIT License
71 stars 43 forks source link

checkradio not reading bulma color overrides #27

Closed robjac closed 5 years ago

robjac commented 5 years ago

I have overridden bulma's $success to be a different shade of green, to be used with the .is-success class, which works on other elements in my app.

.is-checkradio does not seem to adhere to that override.

I've placed my imports in the correct order. 

@import "colorsAndVariableOverrides.scss";
@import "../node_modules/bulma/bulma.sass";
@import '~bulma-checkradio';

seems that all the color modifier classes on .is-checkradio elements always reads Bulma's original colors. for example : background-color: #23d160 !important;.

Where are colors coming from? I expect this extension to follow my own bulma overrides.

Additionally, it seems that the internal styles from checkradio use unquoted attribute selectors:

.is-checkradio[type=checkbox].is-success:checked.has-background-color + label::before, .is-checkradio[type=checkbox].is-success:checked.has-background-color + label:before

Which is more specific, and takes priority over any overrides written in scss/css with quoted attrbitutes: 

.is-checkradio[type="checkbox"].is-success:checked.has-background-color + label::before, .is-checkradio[type="checkbox"].is-success:checked.has-background-color + label:before

is this by design? I can't ever seem to get priority over that if using a bulma color modifier.

I have been successful in changing the checkbox color explicitly, just not with the .is-sucess, .is-primary, etc. classes.

It's like it ignores all bulma specific overrides.

Wikiki commented 5 years ago

Hi,

first please try to specify that you want to work with the sass file and not the css in your import

@import "../node_modules/bulma-checkradio/dist/bulma-checkradio.sass"

and tell me if it's working.

For the missing of quotes it's not intended to be more prior to non-quoted rules (I didn't know there was a priority rule between them).

robjac commented 5 years ago

To be fair, I didn't know there was a priority rule for non-quotes either!

it seems that specifically importing the .sass file works!

Thank you for your quick reply.

Out of curiosity, what is the difference between these imports? :

@import "~bulma-checkradio";
@import "../node_modules/bulma-checkradio/dist/bulma-checkradio.sass"
Wikiki commented 5 years ago

the first import will use the file defined as main file in package.json and the default one is the compiled css version. To be able to override style you must use the sass file (the one inside dist folder is a copy of the one in source directory).

robjac commented 5 years ago

Thanks for the explanation! Much appreciated.

On Tue, Nov 13, 2018 at 1:14 PM Wikiki notifications@github.com wrote:

the first import will use the file defined as main file in package.json and the default one is the compiled css version. To be able to override style you must use the sass file (the one inside dist folder is a copy of the one in source directory).

— You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub https://github.com/Wikiki/bulma-checkradio/issues/27#issuecomment-438379096, or mute the thread https://github.com/notifications/unsubscribe-auth/AB5WfKhjDkSSEkAY72ZJdS6jkWXzlnA9ks5uuwwHgaJpZM4YcGa9 .