{"id":15112242,"url":"https://github.com/swisnl/sass-custom-box","last_synced_at":"2026-01-18T23:02:19.792Z","repository":{"id":84710818,"uuid":"136914589","full_name":"swisnl/sass-custom-box","owner":"swisnl","description":"BEM-compatible SASS mixins for styling radioboxes and checkboxes","archived":false,"fork":false,"pushed_at":"2022-01-11T15:25:01.000Z","size":160,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-12-03T11:41:28.800Z","etag":null,"topics":["bem-css","checkboxes","hacktoberfest","radiobox","sass","sass-mixins"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swisnl.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-11T11:04:55.000Z","updated_at":"2021-10-07T12:49:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"cf18da2d-3058-4a45-8434-7c84de8d8e05","html_url":"https://github.com/swisnl/sass-custom-box","commit_stats":null,"previous_names":["roachmech/sass-custom-box"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/swisnl/sass-custom-box","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fsass-custom-box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fsass-custom-box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fsass-custom-box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fsass-custom-box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swisnl","download_url":"https://codeload.github.com/swisnl/sass-custom-box/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swisnl%2Fsass-custom-box/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28553055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T20:59:07.572Z","status":"ssl_error","status_checked_at":"2026-01-18T20:59:02.799Z","response_time":98,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem-css","checkboxes","hacktoberfest","radiobox","sass","sass-mixins"],"created_at":"2024-09-26T00:43:13.412Z","updated_at":"2026-01-18T23:02:19.776Z","avatar_url":"https://github.com/swisnl.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass-custom-box\n[![Build Status][ico-travis]][link-travis]\n[![Software License][ico-license]](LICENSE.md)\n[![Buy us a tree][ico-treeware]][link-treeware]\n[![Made by SWIS][ico-swis]][link-swis]\n\nBEM-compatible SASS mixins for styling radioboxes and checkboxes\n\n## Install\n\nVia NPM:\n\n``` bash\n$ npm i sass-custom-box\n```\n\n## Usage\n\n### For checkboxes:\n\nHTML:\n\n``` html\n\u003cdiv class=\"my-checkbox\"\u003e\n    \u003cinput type=\"checkbox\" id=\"my_checkbox\" name=\"checkbox_field\" class=\"my-checkbox__input\"/\u003e\n    \u003clabel for=\"my_checkbox\" class=\"my-checkbox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n```\n\nSCSS:\n\n``` scss\n@include custom-box(my-checkbox) {\n    @include custom-box-input();\n    @include custom-box-label();\n};\n```\n\n### For radioboxes:\n\nHTML:\n\n``` html\n\u003cdiv class=\"my-radiobox\"\u003e\n    \u003cinput type=\"radio\" id=\"my_radiobox1\" name=\"radiobox_field\" class=\"my-radiobox__input\"/\u003e\n    \u003clabel for=\"my_radiobox1\" class=\"my-radiobox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n\u003cdiv class=\"my-radiobox\"\u003e\n    \u003cinput type=\"radio\" id=\"my_radiobox2\" name=\"radiobox_field\" class=\"my-radiobox__input\"/\u003e\n    \u003clabel for=\"my_radiobox2\" class=\"my-radiobox__label\"\u003eLabel\u003c/label\u003e\n\u003c/div\u003e\n```\n\nSCSS:\n\n``` scss\n@include custom-box(my-radiobox, radiobox) {\n    @include custom-box-input();\n    @include custom-box-label();\n};\n```\n\n### Customization\n\nThis 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:\n\n``` scss\n$my-theme: (\n    container: (\n        background-color: red,\n        border: 1px solid black    \n    )\n);\n\n@include set-custom-box-theme($my-theme);\n```\n\nBelow is the scss map which contains the default theme. Each of these items can be customized using the `set-custom-box-theme()` mixin.\n\n``` scss\n// default theme\n\n(\n    container: (\n        _checked: (\n            background-color: #b3e5fc,\n            border: 1px solid #01579b\n        ),\n        _focus: (\n            box-shadow: 0 0 5px #01579b\n        ),\n        background-color: #b3e5fc,\n        border: 1px solid #01579b,\n        border-radius: .25rem,\n        height: 1.25rem,\n        margin: 0 .5rem 0 0,\n        transition: all .1s ease-in-out,\n        width: 1.25rem\n    ),\n    tick: (\n        background-color: #01579b,\n        transition: all .1s ease-in-out\n    )\n)\n```\n\n#### Customize checkbox styling\n\nIn order to change checkbox specific styling pass an scss map with your desired items to the `set-custom-box-checkbox-theme()` mixin. \nYou 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:\n\n``` scss\n// default checkbox theme, appended to the default theme\n\n(\n    tick: (\n        border-width: .2em,\n        height: .6em,\n        left: .075em,\n        top: .2em,\n        width: .4em\n    )\n)\n```\n\n#### Customize radiobox styling\n\nIn order to change radiospecific styling pass an scss map with your desired items to the `set-custom-box-radiobox-theme()` mixin. \nYou 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:\n\n``` scss\n// default radiobox theme, appended to the default theme\n\n(\n    container: (\n        border-radius: 50%,\n    ),\n    tick: (\n        border-radius: 50%,\n        height: .75rem,\n        left: .25rem,\n        top: .25rem,\n        width: .75rem\n    )\n)\n```\n\n## Change log\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Testing\n\n``` bash\n$ npm run test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) and [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) for details.\n\n## Security\n\nIf you discover any security related issues, please email security@swis.nl instead of using the issue tracker.\n\n## Credits\n\n- [RoachMech][link-author]\n- [All Contributors][link-contributors]\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n## SWIS :heart: Open Source\n\n[SWIS][link-swis] is a web agency from Leiden, the Netherlands. We love working with open source software. \n\n[ico-travis]: https://travis-ci.org/swisnl/sass-custom-box.svg?branch=master\n[ico-license]: https://img.shields.io/badge/license-MIT-brightgreen.svg\n[ico-treeware]: https://img.shields.io/badge/Treeware-%F0%9F%8C%B3-lightgreen.svg\n[ico-swis]: https://img.shields.io/badge/%F0%9F%9A%80-made%20by%20SWIS-%230737A9.svg\n\n[link-travis]: https://travis-ci.org/swisnl/sass-custom-box\n[link-author]: https://github.com/RoachMech\n[link-contributors]: ../../contributors\n[link-treeware]: https://plant.treeware.earth/swisnl/sass-custom-box\n[link-swis]: https://www.swis.nl\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswisnl%2Fsass-custom-box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswisnl%2Fsass-custom-box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswisnl%2Fsass-custom-box/lists"}