sass-custom-box
BEM-compatible SASS mixins for styling radioboxes and checkboxes
Install
Via NPM:
$ npm i sass-custom-box
Usage
For checkboxes:
HTML:
Label
SCSS:
;
For radioboxes:
HTML:
LabelLabel
SCSS:
;
Customization
This library comes with a predefined theme. To customize (parts of) this theme pass a scss map to the set-custom-box-theme()
mixin as follows:
;
Below is the scss map which contains the default theme. Each of these items can be customized using the set-custom-box-theme()
mixin.
// default theme(container: (_checked: (background-color: #b3e5fc,border: 1px solid #01579b),_focus: (box-shadow: 0 0 5px #01579b),background-color: #b3e5fc,border: 1px solid #01579b,border-radius: .25rem,height: 1.25rem,margin: 0 .5rem 0 0,transition: all .1s ease-in-out,width: 1.25rem),tick: (background-color: #01579b,transition: all .1s ease-in-out))
Customize checkbox styling
In order to change checkbox specific styling pass an scss map with your desired items to the set-custom-box-checkbox-theme()
mixin.
You can override any of the default checkbox items, the default checkbox theme is the default theme as shown above appended with the following scss map:
// default checkbox theme, appended to the default theme(tick: (border-width: .2em,height: .6em,left: .075em,top: .2em,width: .4em))
Customize radiobox styling
In order to change radiospecific styling pass an scss map with your desired items to the set-custom-box-radiobox-theme()
mixin.
You can override any of the default radiobox items, the default radiobox theme is the default theme as shown above appended with the following scss map:
// default radiobox theme, appended to the default theme(container: (border-radius: 50%,),tick: (border-radius: 50%,height: .75rem,left: .25rem,top: .25rem,width: .75rem))
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 security@swis.nl instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.
SWIS ❤️ Open Source
SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.