├── .npmignore ├── .gitignore ├── img ├── mg1.gif ├── mg2.gif └── mg3.gif ├── renovate.json ├── .github ├── FUNDING.yml └── workflows │ └── ci.yml ├── package.json ├── lib ├── mixins.styl └── magic-input.styl ├── README.md ├── dist ├── magic-input.min.css └── magic-input.css └── index.html /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /img/mg1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaywcjlove/magic-input/HEAD/img/mg1.gif -------------------------------------------------------------------------------- /img/mg2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaywcjlove/magic-input/HEAD/img/mg2.gif -------------------------------------------------------------------------------- /img/mg3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jaywcjlove/magic-input/HEAD/img/mg3.gif -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": [ 4 | "config:base" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: [jaywcjlove] 4 | # patreon: # Replace with a single Patreon username 5 | # open_collective: # Replace with a single Open Collective username 6 | # ko_fi: # Replace with a single Ko-fi username 7 | # tidelift: npm/xxx 8 | # community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | custom: https://jaywcjlove.github.io/#/sponsor 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "magic-input", 3 | "version": "2.0.1", 4 | "description": "CSS3 Styles for Checkbox and Radio Button inputs look prettier.", 5 | "homepage": "https://jaywcjlove.github.io/magic-input", 6 | "funding": "https://jaywcjlove.github.io/#/sponsor", 7 | "main": "index.js", 8 | "scripts": { 9 | "test": "echo \"Error: no test specified\" && exit 1", 10 | "build:min": "stylus -u autoprefixer-stylus lib/magic-input.styl -o dist/magic-input.min.css -c", 11 | "build:css": "stylus -u autoprefixer-stylus lib/magic-input.styl -o dist/magic-input.css", 12 | "build": "npm run build:css | npm run build:min", 13 | "watch": "stylus -u autoprefixer-stylus -w lib/magic-input.styl -o dist/magic-input.min.css -c " 14 | }, 15 | "keywords": [ 16 | "input", 17 | "checkbox", 18 | "radio", 19 | "stylus" 20 | ], 21 | "files": [ 22 | "dist", 23 | "lib" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/jaywcjlove/magic-input.git" 28 | }, 29 | "author": "kenny wang ", 30 | "license": "MIT", 31 | "devDependencies": { 32 | "autoprefixer-stylus": "~1.0.0", 33 | "stylus": "~0.59.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /lib/mixins.styl: -------------------------------------------------------------------------------- 1 | input-checkbox(){ 2 | position relative 3 | width 16px 4 | height 16px 5 | background-clip border-box 6 | appearance none 7 | margin -0.15px 0.6px 0 0 8 | vertical-align text-bottom 9 | border-radius 3px 10 | transition background-color .25s 11 | &:checked{ 12 | &:after{ 13 | content '' 14 | display block 15 | height 4px 16 | width 7px 17 | border 0 solid #333 18 | border-width 0 0 2px 2px 19 | transform rotate(-45deg) 20 | position absolute 21 | top 3px 22 | left 3px 23 | } 24 | } 25 | &:disabled{ 26 | opacity 0.65 27 | } 28 | &:focus{ 29 | outline none 30 | box-shadow inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0px 2px rgb(56, 167, 255) 31 | } 32 | } 33 | input-checkbox-color($check-background,$check-border-color,$border-color){ 34 | background-color #FFFFFF 35 | border 1px solid #d7d7d7 36 | &:checked{ 37 | background-color $check-background 38 | border-color $check-border-color 39 | &:after{ 40 | border-color $border-color 41 | } 42 | } 43 | } 44 | 45 | input-radio(){ 46 | position relative 47 | width 16px 48 | height 16px 49 | background-clip border-box 50 | appearance none 51 | margin -0.15px 0.6px 0 0 52 | vertical-align text-bottom 53 | border-radius 50% 54 | &:disabled{ 55 | opacity 0.65 56 | } 57 | &:before{ 58 | content '' 59 | display block 60 | height 0px 61 | width 0px 62 | transition width .25s,height .25s 63 | } 64 | &:checked{ 65 | &:before{ 66 | height 8px 67 | width 8px 68 | border-radius 50% 69 | margin 3px 0 0 3px 70 | } 71 | } 72 | &:focus{ 73 | outline none 74 | box-shadow inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0px 2px rgb(56, 167, 255) 75 | } 76 | 77 | } 78 | 79 | input-radio-color($check-background,$check-border-color){ 80 | background-color #FFFFFF 81 | border 1px solid #d7d7d7 82 | &:checked{ 83 | border 1px solid $check-border-color 84 | &:before{ 85 | background-color $check-border-color 86 | } 87 | } 88 | 89 | } -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: 5 | - master 6 | 7 | jobs: 8 | build-deploy: 9 | runs-on: ubuntu-latest 10 | permissions: 11 | contents: write 12 | id-token: write 13 | steps: 14 | - uses: actions/checkout@v3 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: 18 18 | registry-url: 'https://registry.npmjs.org' 19 | 20 | - run: npm install 21 | - run: npm run build 22 | 23 | - name: Deploy 24 | uses: peaceiris/actions-gh-pages@v3 25 | with: 26 | github_token: ${{ secrets.GITHUB_TOKEN }} 27 | exclude_assets: '.github,img,node_modules,.npmignore,.gitignore,renovate.json,package-lock.json,.nojekyll' 28 | publish_dir: ./ 29 | 30 | - name: Create Tag 31 | id: create_tag 32 | uses: jaywcjlove/create-tag-action@main 33 | with: 34 | package-path: ./package.json 35 | 36 | - name: get tag version 37 | id: tag_version 38 | uses: jaywcjlove/changelog-generator@main 39 | 40 | - name: Generate Changelog 41 | id: changelog 42 | uses: jaywcjlove/changelog-generator@main 43 | with: 44 | head-ref: ${{steps.create_tag.outputs.version}} 45 | filter-author: (renovate-bot|Renovate Bot) 46 | filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}' 47 | 48 | - name: Create Release 49 | uses: ncipollo/release-action@v1 50 | if: steps.create_tag.outputs.successful 51 | with: 52 | name: ${{ steps.create_tag.outputs.version }} 53 | tag: ${{ steps.create_tag.outputs.version }} 54 | token: ${{ secrets.GITHUB_TOKEN }} 55 | body: | 56 | [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) [![](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/magic-input@${{steps.changelog.outputs.version}}/file/README.md) 57 | 58 | ${{ steps.changelog.outputs.compareurl }} 59 | 60 | ${{ steps.changelog.outputs.changelog }} 61 | 62 | 63 | - name: 📦 magic-input publish to NPM 64 | run: npm publish --access public --provenance 65 | continue-on-error: true 66 | env: 67 | NODE_AUTH_TOKEN: '${{ secrets.NPM_TOKEN }}' -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # magic-input 3 | 4 | [![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) 5 | [![Downloads](https://img.shields.io/npm/dm/magic-input.svg?style=flat)](https://www.npmjs.com/package/magic-input) 6 | [![CI](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/magic-input/actions/workflows/ci.yml) 7 | 8 | 9 | CSS3 Styles for Checkbox and Radio Button inputs look prettier. with only one element. [Live demo](https://jaywcjlove.github.io/magic-input) 10 | 11 | 12 | # Usage 13 | 14 | ```bash 15 | $ npm install magic-input 16 | ``` 17 | 18 | Include `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` 19 | 20 | ```js 21 | import 'magic-input/dist/magic-input.min.css'; 22 | // or 23 | import 'magic-input/lib/magic-input.styl'; 24 | ``` 25 | 26 | Or manually download and link magic-input in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/magic-input/dist/): 27 | 28 | ```html 29 | 30 | ``` 31 | 32 | ## Checkbox iPhone Style 33 | 34 | ![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg1.gif) 35 | 36 | ```html 37 | 38 | 39 | 40 | ``` 41 | 42 | ## Checkbox 43 | 44 | ![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg2.gif) 45 | 46 | ```html 47 | Default 48 | Primary 49 | Success 50 | Info 51 | Warning 52 | Danger 53 | ``` 54 | 55 | 56 | ## Radios 57 | 58 | ![](https://raw.githubusercontent.com/jaywcjlove/magic-input/gh-pages/img/mg3.gif) 59 | 60 | ```html 61 | Default 62 | Primary 63 | Success 64 | Info 65 | Warning 66 | Danger 67 | ``` 68 | 69 | ## Sizing Class 70 | 71 | `sm` for `small` , `lg` for `large` 72 | 73 | **For Checkbox** 74 | 75 | `mgc-sm` `mgc-lg` 76 | 77 | **For Radio Button** 78 | 79 | `mgr-sm` `mgr-lg` 80 | 81 | 82 | ## Colorize Class 83 | 84 | **For Checkbox** 85 | 86 | `mgc-primary` `mgc-info` `mgc-success` `mgc-warning` `mgc-danger` 87 | 88 | **For Radio Button** 89 | 90 | `mgr-primary` `mgr-info` `mgr-success` `mgr-warning` `mgr-danger` -------------------------------------------------------------------------------- /lib/magic-input.styl: -------------------------------------------------------------------------------- 1 | @import './mixins' 2 | 3 | .mgc{ 4 | input-checkbox() 5 | input-checkbox-color(#fff,#d7d7d7,#414141) 6 | } 7 | .mgc-primary{ 8 | input-checkbox-color(#337ab7,#337ab7,#fff) 9 | } 10 | .mgc-success{ 11 | input-checkbox-color(#5cb85c,#5cb85c,#fff) 12 | } 13 | .mgc-info{ 14 | input-checkbox-color(#5bc0de,#5bc0de,#fff) 15 | } 16 | .mgc-warning{ 17 | input-checkbox-color(#f0ad4e,#f0ad4e,#fff) 18 | } 19 | .mgc-danger{ 20 | input-checkbox-color(#cf3b3a,#cf3b3a,#fff) 21 | } 22 | .mgc-circle{ 23 | border-radius 50% 24 | } 25 | 26 | .mgc-sm{ 27 | width 12px 28 | height 12px 29 | &:checked:after{ 30 | top 2px 31 | left 1px 32 | height 3px 33 | width 6px 34 | } 35 | } 36 | .mgc-lg{ 37 | width 19px 38 | height 19px 39 | &:checked:after{ 40 | top 3px 41 | left 3px 42 | height 5px 43 | width 10px 44 | } 45 | } 46 | 47 | 48 | input[type="radio"].mgr{ 49 | input-radio() 50 | input-radio-color(#fff,#555555) 51 | } 52 | .mgr-primary{ 53 | input-radio-color(#337ab7,#337ab7) 54 | } 55 | .mgr-success{ 56 | input-radio-color(#5cb85c,#5cb85c) 57 | } 58 | .mgr-info{ 59 | input-radio-color(#5bc0de,#5bc0de) 60 | } 61 | .mgr-warning{ 62 | input-radio-color(#f0ad4e,#f0ad4e) 63 | } 64 | .mgr-danger{ 65 | input-radio-color(#cf3b3a,#cf3b3a) 66 | } 67 | .mgr-sm{ 68 | width 12px 69 | height 12px 70 | &:checked:before{ 71 | height 6px 72 | width 6px 73 | border-radius 50% 74 | margin 2px 0 0 2px 75 | } 76 | } 77 | .mgr-lg{ 78 | width 19px 79 | height 19px 80 | &:checked:before{ 81 | height 11px 82 | width 11px 83 | border-radius 50% 84 | margin 3px 0 0 3px 85 | } 86 | } 87 | 88 | 89 | $mgcSwitchHeight ?= 24px; 90 | .mgc-switch{ 91 | appearance: none; 92 | position: relative; 93 | width: 41px; 94 | height: $mgcSwitchHeight; 95 | border: 1px solid #DFDFDF; 96 | outline: 0; 97 | border-radius: 16px; 98 | box-sizing: border-box; 99 | background: #DFDFDF; 100 | &:before,&:after{ 101 | content: " "; 102 | position: absolute; 103 | top: 0; 104 | left: 0; 105 | border-radius: 15px; 106 | transition:transform .3s; 107 | } 108 | &:before{ 109 | width: 39px; 110 | height: $mgcSwitchHeight - 2; 111 | background-color: #FDFDFD; 112 | } 113 | &:after{ 114 | width: $mgcSwitchHeight - 2; 115 | height: $mgcSwitchHeight - 2; 116 | background-color: #FFFFFF; 117 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 118 | } 119 | &:checked{ 120 | border-color: #04BE02; 121 | background-color: #04BE02; 122 | &:before{ 123 | transform: scale(0); 124 | } 125 | &:after{ 126 | transform: translateX(17px); 127 | } 128 | } 129 | &:focus{ 130 | outline: 0; 131 | } 132 | } 133 | 134 | $mgcSwitchHeight =20px 135 | .mgc-sm.mgc-switch{ 136 | height: $mgcSwitchHeight; 137 | width: 32px; 138 | &:before{ 139 | height: $mgcSwitchHeight - 2; 140 | width: 30px; 141 | } 142 | &:after{ 143 | width: $mgcSwitchHeight - 2; 144 | height: $mgcSwitchHeight - 2; 145 | } 146 | &:checked{ 147 | &:after{ 148 | top: 0px; 149 | left: 2px; 150 | transform: translateX(10px); 151 | } 152 | } 153 | } 154 | 155 | $mgcSwitchHeight =32px 156 | .mgc-lg.mgc-switch{ 157 | height: $mgcSwitchHeight; 158 | width: 52px; 159 | &:before{ 160 | height: $mgcSwitchHeight - 2; 161 | width: 50px; 162 | } 163 | &:after{ 164 | width: $mgcSwitchHeight - 2; 165 | height: $mgcSwitchHeight - 2; 166 | } 167 | &:checked{ 168 | &:after{ 169 | top: 0px; 170 | left: 2px; 171 | transform: translateX(18px); 172 | } 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /dist/magic-input.min.css: -------------------------------------------------------------------------------- 1 | .mgc{position:relative;width:16px;height:16px;background-clip:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:-.15px .6px 0 0;vertical-align:text-bottom;border-radius:3px;transition:background-color .25s;background-color:#fff;border:1px solid #d7d7d7}.mgc:checked:after{content:'';display:block;height:4px;width:7px;border:0 solid #333;border-width:0 0 2px 2px;transform:rotate(-45deg);position:absolute;top:3px;left:3px}.mgc:disabled{opacity:.65}.mgc:focus{outline:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.075),0 0 2px #38a7ff}.mgc:checked{background-color:#fff;border-color:#d7d7d7}.mgc:checked:after{border-color:#414141}.mgc-primary{background-color:#fff;border:1px solid #d7d7d7}.mgc-primary:checked{background-color:#337ab7;border-color:#337ab7}.mgc-primary:checked:after{border-color:#fff}.mgc-success{background-color:#fff;border:1px solid #d7d7d7}.mgc-success:checked{background-color:#5cb85c;border-color:#5cb85c}.mgc-success:checked:after{border-color:#fff}.mgc-info{background-color:#fff;border:1px solid #d7d7d7}.mgc-info:checked{background-color:#5bc0de;border-color:#5bc0de}.mgc-info:checked:after{border-color:#fff}.mgc-warning{background-color:#fff;border:1px solid #d7d7d7}.mgc-warning:checked{background-color:#f0ad4e;border-color:#f0ad4e}.mgc-warning:checked:after{border-color:#fff}.mgc-danger{background-color:#fff;border:1px solid #d7d7d7}.mgc-danger:checked{background-color:#cf3b3a;border-color:#cf3b3a}.mgc-danger:checked:after{border-color:#fff}.mgc-circle{border-radius:50%}.mgc-sm{width:12px;height:12px}.mgc-sm:checked:after{top:2px;left:1px;height:3px;width:6px}.mgc-lg{width:19px;height:19px}.mgc-lg:checked:after{top:3px;left:3px;height:5px;width:10px}input[type="radio"].mgr{position:relative;width:16px;height:16px;background-clip:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:-.15px .6px 0 0;vertical-align:text-bottom;border-radius:50%;background-color:#fff;border:1px solid #d7d7d7}input[type="radio"].mgr:disabled{opacity:.65}input[type="radio"].mgr:before{content:'';display:block;height:0;width:0;transition:width .25s,height .25s}input[type="radio"].mgr:checked:before{height:8px;width:8px;border-radius:50%;margin:3px 0 0 3px}input[type="radio"].mgr:focus{outline:none;box-shadow:inset 0 1px 1px rgba(255,255,255,0.075),0 0 2px #38a7ff}input[type="radio"].mgr:checked{border:1px solid #555}input[type="radio"].mgr:checked:before{background-color:#555}.mgr-primary{background-color:#fff;border:1px solid #d7d7d7}.mgr-primary:checked{border:1px solid #337ab7}.mgr-primary:checked:before{background-color:#337ab7}.mgr-success{background-color:#fff;border:1px solid #d7d7d7}.mgr-success:checked{border:1px solid #5cb85c}.mgr-success:checked:before{background-color:#5cb85c}.mgr-info{background-color:#fff;border:1px solid #d7d7d7}.mgr-info:checked{border:1px solid #5bc0de}.mgr-info:checked:before{background-color:#5bc0de}.mgr-warning{background-color:#fff;border:1px solid #d7d7d7}.mgr-warning:checked{border:1px solid #f0ad4e}.mgr-warning:checked:before{background-color:#f0ad4e}.mgr-danger{background-color:#fff;border:1px solid #d7d7d7}.mgr-danger:checked{border:1px solid #cf3b3a}.mgr-danger:checked:before{background-color:#cf3b3a}.mgr-sm{width:12px;height:12px}.mgr-sm:checked:before{height:6px;width:6px;border-radius:50%;margin:2px 0 0 2px}.mgr-lg{width:19px;height:19px}.mgr-lg:checked:before{height:11px;width:11px;border-radius:50%;margin:3px 0 0 3px}.mgc-switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:41px;height:24px;border:1px solid #dfdfdf;outline:0;border-radius:16px;box-sizing:border-box;background:#dfdfdf}.mgc-switch:before,.mgc-switch:after{content:" ";position:absolute;top:0;left:0;border-radius:15px;transition:transform .3s}.mgc-switch:before{width:39px;height:22px;background-color:#fdfdfd}.mgc-switch:after{width:22px;height:22px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.4)}.mgc-switch:checked{border-color:#04be02;background-color:#04be02}.mgc-switch:checked:before{transform:scale(0)}.mgc-switch:checked:after{transform:translateX(17px)}.mgc-switch:focus{outline:0}.mgc-sm.mgc-switch{height:20px;width:32px}.mgc-sm.mgc-switch:before{height:18px;width:30px}.mgc-sm.mgc-switch:after{width:18px;height:18px}.mgc-sm.mgc-switch:checked:after{top:0;left:2px;transform:translateX(10px)}.mgc-lg.mgc-switch{height:32px;width:52px}.mgc-lg.mgc-switch:before{height:30px;width:50px}.mgc-lg.mgc-switch:after{width:30px;height:30px}.mgc-lg.mgc-switch:checked:after{top:0;left:2px;transform:translateX(18px)} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | magic-input 6 | 7 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |

27 | Checkbox iPhone Style 28 |

29 | 30 | 31 | 32 |
33 |
34 |

35 | Checkbox 36 |

37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 |
45 |

46 | Checkbox Circled 47 |

48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |

57 | Checkbox Disabled 58 |

59 | 60 | 61 | 62 | 63 |
64 | 65 |
66 |

67 | Checkbox Sizing 68 |

69 | 70 | 71 | 72 | 73 | 74 | 75 |
76 | 77 |
78 |

79 | Radios 80 |

81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 |

90 | Radios Disabled 91 |

92 | 93 | 94 | 95 | 96 | 97 | 98 |
99 |
100 |

101 | Radios Sizing 102 |

103 | 104 | 105 | 106 | 107 | 108 | 109 |
110 | 111 | 112 | -------------------------------------------------------------------------------- /dist/magic-input.css: -------------------------------------------------------------------------------- 1 | .mgc { 2 | position: relative; 3 | width: 16px; 4 | height: 16px; 5 | background-clip: border-box; 6 | -webkit-appearance: none; 7 | -moz-appearance: none; 8 | appearance: none; 9 | margin: -0.15px 0.6px 0 0; 10 | vertical-align: text-bottom; 11 | border-radius: 3px; 12 | transition: background-color 0.25s; 13 | background-color: #fff; 14 | border: 1px solid #d7d7d7; 15 | } 16 | .mgc:checked:after { 17 | content: ''; 18 | display: block; 19 | height: 4px; 20 | width: 7px; 21 | border: 0 solid #333; 22 | border-width: 0 0 2px 2px; 23 | transform: rotate(-45deg); 24 | position: absolute; 25 | top: 3px; 26 | left: 3px; 27 | } 28 | .mgc:disabled { 29 | opacity: 0.65; 30 | } 31 | .mgc:focus { 32 | outline: none; 33 | box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff; 34 | } 35 | .mgc:checked { 36 | background-color: #fff; 37 | border-color: #d7d7d7; 38 | } 39 | .mgc:checked:after { 40 | border-color: #414141; 41 | } 42 | .mgc-primary { 43 | background-color: #fff; 44 | border: 1px solid #d7d7d7; 45 | } 46 | .mgc-primary:checked { 47 | background-color: #337ab7; 48 | border-color: #337ab7; 49 | } 50 | .mgc-primary:checked:after { 51 | border-color: #fff; 52 | } 53 | .mgc-success { 54 | background-color: #fff; 55 | border: 1px solid #d7d7d7; 56 | } 57 | .mgc-success:checked { 58 | background-color: #5cb85c; 59 | border-color: #5cb85c; 60 | } 61 | .mgc-success:checked:after { 62 | border-color: #fff; 63 | } 64 | .mgc-info { 65 | background-color: #fff; 66 | border: 1px solid #d7d7d7; 67 | } 68 | .mgc-info:checked { 69 | background-color: #5bc0de; 70 | border-color: #5bc0de; 71 | } 72 | .mgc-info:checked:after { 73 | border-color: #fff; 74 | } 75 | .mgc-warning { 76 | background-color: #fff; 77 | border: 1px solid #d7d7d7; 78 | } 79 | .mgc-warning:checked { 80 | background-color: #f0ad4e; 81 | border-color: #f0ad4e; 82 | } 83 | .mgc-warning:checked:after { 84 | border-color: #fff; 85 | } 86 | .mgc-danger { 87 | background-color: #fff; 88 | border: 1px solid #d7d7d7; 89 | } 90 | .mgc-danger:checked { 91 | background-color: #cf3b3a; 92 | border-color: #cf3b3a; 93 | } 94 | .mgc-danger:checked:after { 95 | border-color: #fff; 96 | } 97 | .mgc-circle { 98 | border-radius: 50%; 99 | } 100 | .mgc-sm { 101 | width: 12px; 102 | height: 12px; 103 | } 104 | .mgc-sm:checked:after { 105 | top: 2px; 106 | left: 1px; 107 | height: 3px; 108 | width: 6px; 109 | } 110 | .mgc-lg { 111 | width: 19px; 112 | height: 19px; 113 | } 114 | .mgc-lg:checked:after { 115 | top: 3px; 116 | left: 3px; 117 | height: 5px; 118 | width: 10px; 119 | } 120 | input[type="radio"].mgr { 121 | position: relative; 122 | width: 16px; 123 | height: 16px; 124 | background-clip: border-box; 125 | -webkit-appearance: none; 126 | -moz-appearance: none; 127 | appearance: none; 128 | margin: -0.15px 0.6px 0 0; 129 | vertical-align: text-bottom; 130 | border-radius: 50%; 131 | background-color: #fff; 132 | border: 1px solid #d7d7d7; 133 | } 134 | input[type="radio"].mgr:disabled { 135 | opacity: 0.65; 136 | } 137 | input[type="radio"].mgr:before { 138 | content: ''; 139 | display: block; 140 | height: 0px; 141 | width: 0px; 142 | transition: width 0.25s, height 0.25s; 143 | } 144 | input[type="radio"].mgr:checked:before { 145 | height: 8px; 146 | width: 8px; 147 | border-radius: 50%; 148 | margin: 3px 0 0 3px; 149 | } 150 | input[type="radio"].mgr:focus { 151 | outline: none; 152 | box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff; 153 | } 154 | input[type="radio"].mgr:checked { 155 | border: 1px solid #555; 156 | } 157 | input[type="radio"].mgr:checked:before { 158 | background-color: #555; 159 | } 160 | .mgr-primary { 161 | background-color: #fff; 162 | border: 1px solid #d7d7d7; 163 | } 164 | .mgr-primary:checked { 165 | border: 1px solid #337ab7; 166 | } 167 | .mgr-primary:checked:before { 168 | background-color: #337ab7; 169 | } 170 | .mgr-success { 171 | background-color: #fff; 172 | border: 1px solid #d7d7d7; 173 | } 174 | .mgr-success:checked { 175 | border: 1px solid #5cb85c; 176 | } 177 | .mgr-success:checked:before { 178 | background-color: #5cb85c; 179 | } 180 | .mgr-info { 181 | background-color: #fff; 182 | border: 1px solid #d7d7d7; 183 | } 184 | .mgr-info:checked { 185 | border: 1px solid #5bc0de; 186 | } 187 | .mgr-info:checked:before { 188 | background-color: #5bc0de; 189 | } 190 | .mgr-warning { 191 | background-color: #fff; 192 | border: 1px solid #d7d7d7; 193 | } 194 | .mgr-warning:checked { 195 | border: 1px solid #f0ad4e; 196 | } 197 | .mgr-warning:checked:before { 198 | background-color: #f0ad4e; 199 | } 200 | .mgr-danger { 201 | background-color: #fff; 202 | border: 1px solid #d7d7d7; 203 | } 204 | .mgr-danger:checked { 205 | border: 1px solid #cf3b3a; 206 | } 207 | .mgr-danger:checked:before { 208 | background-color: #cf3b3a; 209 | } 210 | .mgr-sm { 211 | width: 12px; 212 | height: 12px; 213 | } 214 | .mgr-sm:checked:before { 215 | height: 6px; 216 | width: 6px; 217 | border-radius: 50%; 218 | margin: 2px 0 0 2px; 219 | } 220 | .mgr-lg { 221 | width: 19px; 222 | height: 19px; 223 | } 224 | .mgr-lg:checked:before { 225 | height: 11px; 226 | width: 11px; 227 | border-radius: 50%; 228 | margin: 3px 0 0 3px; 229 | } 230 | .mgc-switch { 231 | -webkit-appearance: none; 232 | -moz-appearance: none; 233 | appearance: none; 234 | position: relative; 235 | width: 41px; 236 | height: 24px; 237 | border: 1px solid #dfdfdf; 238 | outline: 0; 239 | border-radius: 16px; 240 | box-sizing: border-box; 241 | background: #dfdfdf; 242 | } 243 | .mgc-switch:before, 244 | .mgc-switch:after { 245 | content: " "; 246 | position: absolute; 247 | top: 0; 248 | left: 0; 249 | border-radius: 15px; 250 | transition: transform 0.3s; 251 | } 252 | .mgc-switch:before { 253 | width: 39px; 254 | height: 22px; 255 | background-color: #fdfdfd; 256 | } 257 | .mgc-switch:after { 258 | width: 22px; 259 | height: 22px; 260 | background-color: #fff; 261 | box-shadow: 0 1px 3px rgba(0,0,0,0.4); 262 | } 263 | .mgc-switch:checked { 264 | border-color: #04be02; 265 | background-color: #04be02; 266 | } 267 | .mgc-switch:checked:before { 268 | transform: scale(0); 269 | } 270 | .mgc-switch:checked:after { 271 | transform: translateX(17px); 272 | } 273 | .mgc-switch:focus { 274 | outline: 0; 275 | } 276 | .mgc-sm.mgc-switch { 277 | height: 20px; 278 | width: 32px; 279 | } 280 | .mgc-sm.mgc-switch:before { 281 | height: 18px; 282 | width: 30px; 283 | } 284 | .mgc-sm.mgc-switch:after { 285 | width: 18px; 286 | height: 18px; 287 | } 288 | .mgc-sm.mgc-switch:checked:after { 289 | top: 0px; 290 | left: 2px; 291 | transform: translateX(10px); 292 | } 293 | .mgc-lg.mgc-switch { 294 | height: 32px; 295 | width: 52px; 296 | } 297 | .mgc-lg.mgc-switch:before { 298 | height: 30px; 299 | width: 50px; 300 | } 301 | .mgc-lg.mgc-switch:after { 302 | width: 30px; 303 | height: 30px; 304 | } 305 | .mgc-lg.mgc-switch:checked:after { 306 | top: 0px; 307 | left: 2px; 308 | transform: translateX(18px); 309 | } 310 | --------------------------------------------------------------------------------