add file.

README.md

@@ -0,0 +1,67 @@
+
+# magic-input
+
+CSS3 Styles for Checkbox and Radio Button  inputs look prettier. [Live demo](#)
+
+
+# Usage
+
+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`
+
+```html 
+<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">
+```
+
+## Checkbox iPhone Style
+
+```html 
+<input type="checkbox" class="mgc-switch mgc-sm" checked />
+<input type="checkbox" class="mgc-switch"  />
+<input type="checkbox" class="mgc-switch mgc-lg" checked />
+```
+
+## Checkbox
+
+```html 
+<input type="checkbox" class="mgc" checked/> Default
+<input type="checkbox" class="mgc mgc-primary" checked /> Primary
+<input type="checkbox" class="mgc mgc-success" /> Success
+<input type="checkbox" class="mgc mgc-info" checked /> Info
+<input type="checkbox" class="mgc mgc-warning" checked /> Warning
+<input type="checkbox" class="mgc mgc-danger" checked /> Danger
+```
+
+
+## Radios
+
+```html 
+<input type="radio" name="radio3" class="mgr mgr-sm"/> Default
+<input type="radio" name="radio3" class="mgr mgr-primary" /> Primary
+<input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success
+<input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info
+<input type="radio" name="radio3" class="mgr mgr-warning" /> Warning
+<input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger
+```
+
+## Sizing Class
+
+`sm` for `small` , `lg` for `large`
+
+### For Checkbox
+
+`mgc-sm` `mgc-lg`
+
+### For Radio Button
+
+`mgr-sm` `mgr-lg`
+
+
+## Colorize Class
+
+### For Checkbox
+
+`mgc-primary` `mgc-info` `mgc-success` `mgc-warning` `mgc-danger`
+
+### For Radio Button
+
+`mgr-primary` `mgr-info` `mgr-success` `mgr-warning` `mgr-danger`

dist/magic-input.css

@@ -0,0 +1,316 @@
+.mgc {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  background-clip: border-box;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  margin: -0.15px 0.6px 0 0;
+  vertical-align: text-bottom;
+  border-radius: 3px;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.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;
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+  position: absolute;
+  top: 3px;
+  left: 3px;
+}
+.mgc:disabled {
+  opacity: 0.65;
+}
+.mgc:focus {
+  outline: none;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 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;
+}
+.mgr {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  background-clip: border-box;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  margin: -0.15px 0.6px 0 0;
+  vertical-align: text-bottom;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #d7d7d7;
+}
+.mgr:disabled {
+  opacity: 0.65;
+}
+.mgr:before {
+  content: '';
+  display: block;
+  height: 0px;
+  width: 0px;
+  -webkit-transition: width 0.25s, height 0.25s;
+  transition: width 0.25s, height 0.25s;
+}
+.mgr:checked:before {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin: 3px 0 0 3px;
+}
+.mgr:focus {
+  outline: none;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.075), 0 0px 2px #38a7ff;
+}
+.mgr:checked {
+  border: 1px solid #555;
+}
+.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;
+  -webkit-transition: -webkit-transform 0.3s;
+  transition: -webkit-transform 0.3s;
+  transition: transform 0.3s;
+  transition: transform 0.3s, -webkit-transform 0.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 {
+  -webkit-transform: scale(0);
+          transform: scale(0);
+}
+.mgc-switch:checked:after {
+  -webkit-transform: translateX(17px);
+          transform: translateX(17px);
+}
+.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: 0px;
+  left: 2px;
+  -webkit-transform: translateX(10px);
+          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: 0px;
+  left: 2px;
+  -webkit-transform: translateX(18px);
+          transform: translateX(18px);
+}