hunzaboy / cool-checkboxes-for-bulma.io

Cool CSS based checkbox for Bulma.io

Hi, I am Aslam 👋

On github i create awesome stuff to make my life and others easy. I love playing and working with CSS. I like contributing to opensource too.

Other ✨✨✨✨

• Currenlty working on Codedmails
• If you like giving Kudos, checkout 🥁 Online Kudos Creator - share love and appreciation 💌💌💌
• Checkout cool stuff i built on Codepen 🖊️🖊️🖊️
• Read some of my articles on DEV ✍🏾✍🏾✍🏾
• Co-authored a book on Bulma.io 📗📗📗
• Helping community on Stackoverflow 🤝🤝🤝

cool-checkboxes-for-bulma.io's Issues

cool-checkboxes usage

I'm not sure but to make my project work with cool-checkboxes-for-bulma.io I added :
@import '~cool-checkboxes-for-bulma.io/dist/css/bulma-radio-checkbox.css';
to my main styles.css file. Is this normal because I can't find something in the documentation saying we have to do so to make it work.
Moreover, I want to remove the outline when I click on the checkbox, is there a way I can work this out?

Overwritten modifier classes with Sass

Hi, i've overwritten the is-primary class to a different color in sass before importing bulma. Your css has hardcoded it to the default color. Any idea how i can gracefully combine the two, besides overwriting your css? Maybe provide a sass file for this package?

"tick" icon is not displayed

Hello.
I have an issue as my cool-checkbox doesn't display "tick" icon like this.

my code:
<div class="column"> <p class="title is-4">Cool Checkboxes</p> <div class="field"> <div class="b-checkbox"> <input id="checkbox1" class="styled" checked type="checkbox"> <label for="checkbox1"> Is Default </label> </div> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-primary"> <input id="checkbox2" class="styled" checked type="checkbox"> <label for="checkbox2"> Is Primary </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-success"> <input id="checkbox3" class="styled" checked type="checkbox"> <label for="checkbox3"> Is Success </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-danger"> <input id="checkbox4" class="styled" checked type="checkbox"> <label for="checkbox4"> Is Danger </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-info"> <input id="checkbox5" class="styled" checked type="checkbox"> <label for="checkbox5"> Is Info </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-warning"> <input id="checkbox6" class="styled" checked type="checkbox"> <label for="checkbox6"> Is Warning </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-dark"> <input id="checkbox7" class="styled" checked type="checkbox"> <label for="checkbox7"> Is Dark </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-black"> <input id="checkbox8" class="styled" checked type="checkbox"> <label for="checkbox8"> Is Black </label> </div> </p> </div> </div>

Please, help.
Thanks. 😃

Needs updating to use Font Awesome 5

Font Awesome 5 (which is included with Bulma) uses a different font-family name.

Problem with icon visibility

Downloaded project by .zip file. Can't see the checkbox icon. I have access to internet.

Check Icon on checkbox checked not showing

checkbox checked but icon not showing

NPM package.json

Thank you for your work on this.

I really like this stylesheet, but I'd like to be able to manage it as a dependency through npm or yarn instead of having to clone it and include it directly in my project's repository.

I would submit a PR for this, but I don't want to make any assumptions about your preferred package.json parameters.