RSGCheckbox added

README.md

@@ -80,4 +80,9 @@ Update: ``` RSGProgressBar ```
 
 * 2.0.12 <br>
 YouTube tutorial - [https://www.youtube.com/playlist?list=PLBKNj-_iswgrl1XNhpfgGKwfrP_hEoZ2x](https://www.youtube.com/playlist?list=PLBKNj-_iswgrl1XNhpfgGKwfrP_hEoZ2x) </br>
-Please subscribe for my channel: [http://youtube.com/c/RadiCho](http://youtube.com/c/RadiCho)
+Please subscribe for my channel: [http://youtube.com/c/RadiCho](http://youtube.com/c/RadiCho)
+
+* 2.0.13 <br>
+``` RSGCheckbox ``` <br> ![Checkbox image](https://raw.githubusercontent.com/Devs123/rsg-components/master/images/Checkboxes.png)
+<br> You can use this http://codepen.io/radicho/pen/jBJjPb without ```rsg-components``` More info:
+https://medium.com/@radicho/customized-checkboxes-9190f969b681

lib/RSGCheckbox.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var React = require('react');
+
+var RSGCheckbox = React.createClass({
+  displayName: 'RSGCheckbox',
+
+  render: function render() {
+    var classes = "switch";
+    if(this.props.RSGType && this.props.RSGType === "lg"){
+      classes += " switch-lg"
+    }
+
+    var input = React.DOM.input(
+      Object.assign(
+        {type: 'checkbox', key: 1}, 
+        _.omit(this.props, ['type'])
+      )
+    );
+
+    var span = React.DOM.span({key: 2});
+    var style1 = this.props.style1;
+
+    var label = React.DOM.label(
+      Object.assign(
+        {className: classes, style: style1}, 
+        _.omit(this.props, ['className'])
+      ),
+      [
+        input,
+        span
+      ]
+    );
+
+    return label;
+
+  }
+});
+
+exports['RSGCheckbox'] = RSGCheckbox;
+module.exports = exports['RSGCheckbox'];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsg-components",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "Some React.js components with beautiful styles and modified props",
   "main": "rsg-components.js",
   "scripts": {

rsg-components.js

@@ -6,3 +6,4 @@ exports.RSGLabel = require('./lib/RSGLabel');
 exports.RSGFormBasic = require('./lib/RSGFormBasic');
 exports.RSGTransition = require('./lib/RSGTransition');
 exports.RSGProgressBar = require('./lib/RSGProgressBar');
+exports.RSGCheckbox = require('./lib/RSGCheckbox');

src/checkbox/checkbox.css

@@ -0,0 +1,50 @@
+.switch input:checked+span {
+  background-color: #5d9cec;
+  border-color: #5d9cec;
+  transition: all .5s;
+}
+.switch.switch-lg span {
+  width: 50px;
+  height: 25px;
+}
+.switch span {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 100px;
+  transition: all .5s;
+  box-shadow: 1px 2px 3px rgba(0,0,0,.1) inset;
+  vertical-align: middle;
+}
+.switch * {
+  cursor: pointer;
+}
+.switch span:after {
+  content: "";
+  position: absolute;
+  background-color: #fff;
+  top: 0;
+  left: 0;
+  height: 18px;
+  width: 18px;
+  border: 1px solid #ddd;
+  border-radius: 400px;
+  box-shadow: 1px 1px 3px rgba(0,0,0,.1);
+  -webkit-transition: all .2s;
+}
+.switch input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.switch input:checked+span:after {
+  left: 50%;
+  transition: all .2s;
+}
+.switch.switch-lg span:after {
+  height: 23px;
+  width: 23px;
+}