An open API service indexing awesome lists of open source software.

https://github.com/swisnl/sass-custom-box

BEM-compatible SASS mixins for styling radioboxes and checkboxes
https://github.com/swisnl/sass-custom-box

bem-css checkboxes hacktoberfest radiobox sass sass-mixins

Last synced: 2 months ago
JSON representation

BEM-compatible SASS mixins for styling radioboxes and checkboxes

Awesome Lists containing this project

README

        

# sass-custom-box
[![Build Status][ico-travis]][link-travis]
[![Software License][ico-license]](LICENSE.md)
[![Buy us a tree][ico-treeware]][link-treeware]
[![Made by SWIS][ico-swis]][link-swis]

BEM-compatible SASS mixins for styling radioboxes and checkboxes

## Install

Via NPM:

``` bash
$ npm i sass-custom-box
```

## Usage

### For checkboxes:

HTML:

``` html



Label

```

SCSS:

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

### For radioboxes:

HTML:

``` html



Label



Label

```

SCSS:

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

### 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:

``` scss
$my-theme: (
container: (
background-color: red,
border: 1px solid black
)
);

@include set-custom-box-theme($my-theme);
```

Below is the scss map which contains the default theme. Each of these items can be customized using the `set-custom-box-theme()` mixin.

``` scss
// 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:

``` scss
// 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:

``` scss
// 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](CHANGELOG.md) for more information on what has changed recently.

## Testing

``` bash
$ npm run test
```

## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) and [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) for details.

## Security

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

## Credits

- [RoachMech][link-author]
- [All Contributors][link-contributors]

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

## SWIS :heart: Open Source

[SWIS][link-swis] is a web agency from Leiden, the Netherlands. We love working with open source software.

[ico-travis]: https://travis-ci.org/swisnl/sass-custom-box.svg?branch=master
[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen.svg
[ico-treeware]: https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg
[ico-swis]: https://img.shields.io/badge/%F0%9F%9A%80-made%20by%20SWIS-%230737A9.svg

[link-travis]: https://travis-ci.org/swisnl/sass-custom-box
[link-author]: https://github.com/RoachMech
[link-contributors]: ../../contributors
[link-treeware]: https://plant.treeware.earth/swisnl/sass-custom-box
[link-swis]: https://www.swis.nl