sass-custom-box

sass-custom-box

BEM-compatible SASS mixins for styling radioboxes and checkboxes

Install

Via NPM:

$ npm i sass-custom-box

Usage

For checkboxes:

HTML:

<div class="my-checkbox">
    <input type="checkbox" id="my_checkbox" name="checkbox_field" class="my-checkbox__input"/>
    <label for="my_checkbox" class="my-checkbox__label">Label</label>
</div>

SCSS:

@include custom-box(my-checkbox) {
    @include custom-box-input();
    @include custom-box-label();
};

For radioboxes:

HTML:

<div class="my-radiobox">
    <input type="radio" id="my_radiobox1" name="radiobox_field" class="my-radiobox__input"/>
    <label for="my_radiobox1" class="my-radiobox__label">Label</label>
</div>
<div class="my-radiobox">
    <input type="radio" id="my_radiobox2" name="radiobox_field" class="my-radiobox__input"/>
    <label for="my_radiobox2" class="my-radiobox__label">Label</label>
</div>

SCSS:

@include custom-box(my-radiobox, radiobox) {
    @include custom-box-input();
    @include custom-box-label();
};

Change log

Please see CHANGELOG for more information on what has changed recently.

Testing

$ npm run test

Contributing

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

• RoachMech
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

SWIS :heart: Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.