{"id":15639638,"url":"https://github.com/jaywcjlove/magic-input","last_synced_at":"2025-04-12T23:36:41.248Z","repository":{"id":54749581,"uuid":"57224690","full_name":"jaywcjlove/magic-input","owner":"jaywcjlove","description":"CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element.","archived":false,"fork":false,"pushed_at":"2024-10-21T05:11:42.000Z","size":205,"stargazers_count":85,"open_issues_count":3,"forks_count":45,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T11:10:43.295Z","etag":null,"topics":["checkbox","css3-styles","radio-buttons"],"latest_commit_sha":null,"homepage":"https://jaywcjlove.github.io/magic-input","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaywcjlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"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},"funding":{"custom":"https://jaywcjlove.github.io/#/sponsor"}},"created_at":"2016-04-27T15:31:15.000Z","updated_at":"2024-10-03T18:58:05.000Z","dependencies_parsed_at":"2022-08-14T01:40:21.755Z","dependency_job_id":"5630d5fc-8742-4ba3-a480-e4ef96473c25","html_url":"https://github.com/jaywcjlove/magic-input","commit_stats":{"total_commits":31,"total_committers":4,"mean_commits":7.75,"dds":0.09677419354838712,"last_synced_commit":"102a48caba5bb0f650b5208ba3dacf357751b68b"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fmagic-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fmagic-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fmagic-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2Fmagic-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/magic-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248644023,"owners_count":21138544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["checkbox","css3-styles","radio-buttons"],"created_at":"2024-10-03T11:26:45.503Z","updated_at":"2025-04-12T23:36:41.218Z","avatar_url":"https://github.com/jaywcjlove.png","language":"HTML","funding_links":["https://jaywcjlove.github.io/#/sponsor"],"categories":[],"sub_categories":[],"readme":"\n# magic-input\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Downloads](https://img.shields.io/npm/dm/magic-input.svg?style=flat)](https://www.npmjs.com/package/magic-input)\n[![CI](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml)\n\n\nCSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. [Live demo](https://jaywcjlove.github.io/magic-input)\n\n\n# Usage\n\n```bash\n$ npm install magic-input\n```\n\nInclude `dist/magic-input.css` or `dist/magic-input.min.css` in your html. If your use [Stylus](https://github.com/stylus/stylus) use `magic-input.styl`\n\n```js\nimport 'magic-input/dist/magic-input.min.css';\n// or\nimport 'magic-input/lib/magic-input.styl';\n```\n\nOr manually download and link magic-input in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/magic-input/dist/):\n\n```html \n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/magic-input/dist/magic-input.min.css\"\u003e\n```\n\n## Checkbox iPhone Style\n\n![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg1.gif)\n\n```html \n\u003cinput type=\"checkbox\" class=\"mgc-switch mgc-sm\" checked /\u003e\n\u003cinput type=\"checkbox\" class=\"mgc-switch\"  /\u003e\n\u003cinput type=\"checkbox\" class=\"mgc-switch mgc-lg\" checked /\u003e\n```\n\n## Checkbox\n\n![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg2.gif)\n\n```html \n\u003cinput type=\"checkbox\" class=\"mgc\" checked/\u003e Default\n\u003cinput type=\"checkbox\" class=\"mgc mgc-primary\" checked /\u003e Primary\n\u003cinput type=\"checkbox\" class=\"mgc mgc-success\" /\u003e Success\n\u003cinput type=\"checkbox\" class=\"mgc mgc-info\" checked /\u003e Info\n\u003cinput type=\"checkbox\" class=\"mgc mgc-warning\" checked /\u003e Warning\n\u003cinput type=\"checkbox\" class=\"mgc mgc-danger\" checked /\u003e Danger\n```\n\n\n## Radios\n\n![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg3.gif)\n\n```html \n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-sm\"/\u003e Default\n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-primary\" /\u003e Primary\n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-success mgr-lg\" checked/\u003e Success\n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-info mgr-sm\" /\u003e Info\n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-warning\" /\u003e Warning\n\u003cinput type=\"radio\" name=\"radio3\" class=\"mgr mgr-danger mgr-lg\" /\u003e Danger\n```\n\n## Sizing Class\n\n`sm` for `small` , `lg` for `large`\n\n**For Checkbox**\n\n`mgc-sm` `mgc-lg`\n\n**For Radio Button**\n\n`mgr-sm` `mgr-lg`\n\n\n## Colorize Class\n\n**For Checkbox**\n\n`mgc-primary` `mgc-info` `mgc-success` `mgc-warning` `mgc-danger`\n\n**For Radio Button**\n\n`mgr-primary` `mgr-info` `mgr-success` `mgr-warning` `mgr-danger`","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fmagic-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2Fmagic-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2Fmagic-input/lists"}