{"id":13716634,"url":"https://github.com/miladd3/clean-switch","last_synced_at":"2025-05-07T06:30:46.204Z","repository":{"id":42729331,"uuid":"117188075","full_name":"miladd3/clean-switch","owner":"miladd3","description":"Clean Switch - Material Inspired Pure CSS toggle switch","archived":true,"fork":false,"pushed_at":"2022-12-11T16:05:15.000Z","size":611,"stargazers_count":23,"open_issues_count":9,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-03T00:12:24.187Z","etag":null,"topics":["css","css-toggle-switch","css3","ios-toggle","material-design","switch-ellement","toggle-buttons","toggle-switches"],"latest_commit_sha":null,"homepage":"https://miladd3.github.io/clean-switch/","language":"CSS","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/miladd3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-12T03:35:16.000Z","updated_at":"2024-07-31T09:54:46.000Z","dependencies_parsed_at":"2023-01-27T02:45:44.365Z","dependency_job_id":null,"html_url":"https://github.com/miladd3/clean-switch","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fclean-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fclean-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fclean-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/miladd3%2Fclean-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/miladd3","download_url":"https://codeload.github.com/miladd3/clean-switch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224567686,"owners_count":17332829,"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":["css","css-toggle-switch","css3","ios-toggle","material-design","switch-ellement","toggle-buttons","toggle-switches"],"created_at":"2024-08-03T00:01:12.783Z","updated_at":"2025-05-07T06:30:46.197Z","avatar_url":"https://github.com/miladd3.png","language":"CSS","funding_links":[],"categories":["Frameworks / Resources"],"sub_categories":["C"],"readme":"# clean-switch\nClean Switch - Material Inspired Pure CSS toggle switch\n\n# About\n**Clean switch** is just a lightweight pure css toggle switch. witch is simillar to Material Design lite switch(MDL) But in pure css and better syntax and no dependency\n\n# How to use\n\nFirst copy `clean-switch.css` in your project. then link it to your project HTML file\n\n    \u003clink rel=\"stylesheet\" href=\"clean-switch.css\"\u003e\n\nYou can also use SCSS file `clean-switch.scss`\n\nMake HTML switch structure like this. and put it inside forms or anywhere you like and it will behave like checkboxes.\n\n    \u003clabel class=\"cl-switch\"\u003e\n        \u003cinput type=\"checkbox\" \u003e\n        \u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n        \u003cspan class=\"label\"\u003ethis is label\u003c/span\u003e\n    \u003c/label\u003e\n\n# Diffrent Sizes\n\nTo adjust size of switch just add classes to the list of classes in switch ellement\n\n    \u003clabel class=\"cl-switch cl-switch-large\"\u003e\n        \u003cinput type=\"checkbox\" \u003e\n        \u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n        \u003cspan class=\"label\"\u003ethis is large switch\u003c/span\u003e\n    \u003c/label\u003e\n\nsize classes are:\n\n* cl-switch-large\n* cl-switch-xlarge\n\n\n# Disabled\n\nto make a switch disable simply add disabled attribute to checkbox\n\n    \u003clabel class=\"cl-switch\"\u003e\n    \t\u003cinput type=\"checkbox\" disabled\u003e\n    \t\u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n    \t\u003cspan class=\"label\"\u003eDisabled\u003c/span\u003e\n    \u003c/label\u003e\n\n\n# Diffrent Colors\nTo adjust color of the switch just add classes to the list of classes in switch ellement\n\n    \u003clabel class=\"cl-switch cl-switch-red\"\u003e\n        \u003cinput type=\"checkbox\" \u003e\n        \u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n        \u003cspan class=\"label\"\u003ethis is red switch\u003c/span\u003e\n    \u003c/label\u003e\n\ncolor classes are:\n\n* cl-switch-black\n* cl-switch-red\n* cl-switch-green\n* cl-switch-orange\n\n\n# Custom Colors\n\nFor Some projects you will need custom color so you can do it with small CSS\n\n1- first you should add a class to class list of cl-switch in this example its `custom-class`\n\n    \u003clabel class=\"cl-switch custom-class\"\u003e\n        \u003cinput type=\"checkbox\" \u003e\n        \u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n        \u003cspan class=\"label\"\u003ethis is custom color switch\u003c/span\u003e\n    \u003c/label\u003e\n\n2- then you should adjust its color in your css **that is loaded after cl-switch css**\n\n    .custom-class input[type=\"checkbox\"]:checked + .switcher {\n      background: #c06651; /*this is body of switch that should be lighter color*/\n    }\n    .custom-class input[type=\"checkbox\"]:checked + .switcher:before {\n      background: #c0392b; /*this is btn of switch that should be darker color*/\n    }\n\n# iOS Style\n\nIf you are an iOS fan, you can have iOS style too\n\njust add `ios` class in label class list\n\nall sizing and colors works fine \n\n    \u003clabel class=\"cl-switch ios\"\u003e\n    \t\u003cinput type=\"checkbox\"\u003e\n    \t\u003cspan class=\"switcher\"\u003e\u003c/span\u003e\n    \t\u003cspan class=\"label\"\u003etitle\u003c/span\u003e\n    \u003c/label\u003e\n\n# licence and cast\nMIT Licence \n\n\nby [Milad Dehghan](https://dehghan.net)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladd3%2Fclean-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmiladd3%2Fclean-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmiladd3%2Fclean-switch/lists"}