minor bug fixes and changed sass variables

Author: lo kesh

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-test/
+test/
+yarn.lock

README.md

@@ -1,24 +1,27 @@
 # Pretty checkbox
 
-No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**! 
+No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**!
 
 Check it out the [Demo](https://lokesh-coder.github.io/pretty-checkbox/) for complete documentation.
 
 ### Get started
 
-Install the library from `bower` or `npm` package manager
+Install the library from `bower` , `npm` or `yarn` package manager
 
 ```sh
 > bower install pretty-checkbox
 ```
 ```sh
 > npm install pretty-checkbox
 ```
+```sh
+> yarn add pretty-checkbox
+```
 Add `pretty.min.css` in your html
 
-From CDN, 
+From CDN,
 ```html
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.0.2/pretty.min.css"/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.1.0/pretty.min.css"/>
 ```
 or from the source,
 ```html
@@ -34,127 +37,36 @@ You can also import `pretty.scss` in your main scss file.
 Checkbox markup,
 ```html
 <div class="pretty">
-  <input type="checkbox"/> 
+  <input type="checkbox"/>
   <label><i class="mdi mdi-check"></i> Buy vegetables</label>
 </div>
 ```
 
-### checkbox Features
+### Basic examples
 
-##### Inline checkbox
-```html
-<div class="pretty inline">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-close"></i> Buy vegetable</label>
-</div>
-```
-##### Rounded Checkbox
-```html
-<div class="pretty inline circle">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-check"></i> Monday</label>
-</div>
-```
+##### Checkbox
 
-##### Solid Checkbox color
 ```html
-<div class="pretty inline primary">
-  <input type="checkbox"/> 
+<div class="pretty primary">
+  <input type="checkbox"/>
   <label><i class="mdi mdi-check"></i> Primary</label>
 </div>
 ```
-Color variants: `primary` , `success` , `warning` , `info` , `danger`
-##### Outline Checkbox color
-```html
-<div class="pretty inline outline-primary">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-check"></i> Outline primary</label>
-</div>
-```
-Color variants: `outline-primary` , `outline-success` , `outline-warning` , `outline-info` , `outline-danger`
-##### Without border - plain checkbox
-```html
-<div class="pretty inline outline-success plain">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-check"></i> Oh, yes!</label>
-</div>
-```
-##### Animated checkbox
-```html
-<div class="pretty inline outline-danger smooth">
-  <input type="checkbox"> 
-  <label><i class="mdi mdi-close"></i> Smooth animation</label>
-</div>
-```
-##### Disabled checkbox
-```html
-<div class="pretty inline">
-  <input type="checkbox" disabled> 
-  <label><i class="mdi mdi-check"></i> Disabled</label>
-</div>
-```
-##### Toggle checkbox
-```html
-<div class="pretty inline toggle">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-microphone"></i> ON</label>
-  <label><i class="mdi mdi-microphone-off"></i> OFF</label>
-</div>
-```
-##### Toggle checkbox without border
-```html
-<div class="pretty inline plain toggle">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-wifi"></i> WIFI ON</label>
-  <label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
-</div>
-```
-##### Toggle checkbox with colors
-```html
-<div class="pretty inline plain toggle">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-play"></i> Play</label>
-  <label><i class="mdi mdi-pause success"></i> Pause</label>
-</div>
-```
-##### Toggle checkbox with alternative colors
-```html
-<div class="pretty inline plain toggle">
-  <input type="checkbox"/> 
-  <label><i class="mdi mdi-thumb-up success"></i> Liked</label>
-  <label><i class="mdi mdi-thumb-down danger"></i> Disliked</label>
-</div>
-```
-### Radio button Features
-
-##### Basic radio
-```html
-<div class="pretty inline circle">
-  <input type="radio" name="radio1"> 
-  <label><i class="default"></i> Default</label>
-</div>
-<div class="pretty inline circle">
-  <input type="radio" name="radio1"> 
-  <label><i class="mdi mdi-check"></i> With icon</label>
-</div>
-```
-All the features in the checkbox is supported for radio buttons. It includes 
-`Boxed radio button` , `Solid Color radio` , `Outline Color radio` , `Radio button without border` , `Animated radio button` , `Disabled radio button` , `Toggle radio button`.
 
+##### Radio
 
-##### Toggle radio button without labels
 ```html
-<div class="pretty inline circle plain toggle">
-  <input type="radio" name="radio9" checked> 
-  <label><i class="mdi mdi-microphone-off"></i></label>
-  <label><i class="mdi mdi-microphone danger"></i></label>
+<div class="pretty">
+  <input type="radio" name="radio">
+  <label><i class="mdi mdi-check"></i> Option 1</label>
 </div>
-<div class="pretty inline circle plain toggle">
-  <input type="radio" name="radio9"> 
-  <label><i class="mdi mdi-microphone-off"></i></label>
-  <label><i class="mdi mdi-microphone danger"></i></label>
+<div class="pretty">
+  <input type="radio" name="radio">
+  <label><i class="mdi mdi-check"></i> Option 2</label>
 </div>
 ```
+Refer the [Documentation](https://lokesh-coder.github.io/pretty-checkbox/) for other features and sass settings.
+
 
 ### Custom font library
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pretty-checkbox",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
   "main": "src/pretty.min.css",
   "dependencies": {},

src/pretty.css

@@ -119,7 +119,7 @@
 }
 
 @media print {
-  .pretty:not(.toggle) input:not(:checked) + label i:before,
+  .pretty :not(.toggle) input:not(:checked) + label i:before,
   .pretty > input[type='radio']:checked + label > i.default:before,
   .pretty i:after {
     -webkit-print-color-adjust: exact;
@@ -148,9 +148,10 @@
 }
 
 .pretty {
-  position: relative;
   line-height: 1;
-  margin-bottom: 5px;
+  position: relative;
+  display: inline-block;
+  margin: 0 10px 5px 0;
 }
 
 .pretty label {
@@ -160,39 +161,47 @@
 .pretty > input[type='checkbox'],
 .pretty > input[type='radio'] {
   position: absolute;
-  display: block;
-  left: 0;
+  z-index: 99999999;
   top: 0;
-  height: 100%;
+  left: 0;
+  display: block;
   width: 100%;
-  opacity: 0;
+  height: 100%;
   margin: 0;
   cursor: pointer;
-  z-index: 99999999;
+  opacity: 0;
 }
 
 .pretty i {
   font-size: 1em !important;
+  position: relative;
+  display: inline-block;
+  box-sizing: initial;
+  min-width: 1em;
+  margin-right: 6px;
+  padding: 1px;
+  text-align: center;
 }
 
 .pretty i:before {
-  margin-right: 5px;
-  vertical-align: bottom;
-  display: inline-block;
-  color: transparent;
   position: relative;
   z-index: 999;
-  left: -1px;
+  left: 0;
+  display: inline-block;
+  vertical-align: bottom;
+  color: transparent;
 }
 
 .pretty i:after {
-  content: '\0000';
-  border-radius: 2px;
-  border: 1px solid #aaa;
   position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  content: '\0000';
   color: transparent;
-  left: -1px;
-  top: -1px;
+  border: 1px solid #aaa;
+  border-radius: 2px;
 }
 
 .pretty > input[type='checkbox']:checked + label > i:before,
@@ -201,15 +210,16 @@
 }
 
 .pretty > input[type='radio'] + label > i.default:before {
+  left: 0;
+  min-width: 1em;
   content: '\0000';
+  color: transparent;
   border-radius: 2px;
+  background: transparent;
   -webkit-transform: scale(0.8);
   -moz-transform: scale(0.8);
   -o-transform: scale(0.8);
   transform: scale(0.8);
-  color: transparent;
-  background: transparent;
-  left: 0;
 }
 
 .pretty > input[type='radio']:checked + label > i.default:before {
@@ -224,13 +234,12 @@
 
 .pretty > input[type='checkbox'][disabled] + label,
 .pretty > input[type='radio'][disabled] + label {
-  opacity: 0.5;
   cursor: not-allowed;
+  opacity: .5;
 }
 
-.pretty.inline {
-  display: inline-block;
-  margin-right: 20px;
+.pretty.plain > input[type='checkbox'] + label > i:after, .pretty.plain > input[type='radio'] + label > i:after {
+  /* border-color:transparent;*/
 }
 
 .pretty.plain > input[type='checkbox']:checked + label > i:after,
@@ -248,8 +257,7 @@
   border-color: transparent;
 }
 
-.pretty.plain.toggle > input[type='checkbox'] + label > i:after,
-.pretty.plain.toggle > input[type='radio'] + label > i:after {
+.pretty.plain.toggle > input[type='checkbox'] + label > i:after, .pretty.plain.toggle > input[type='radio'] + label > i:after {
   border-color: transparent;
 }
 
@@ -531,8 +539,7 @@
   color: #d9534f !important;
 }
 
-.pretty.toggle > input[type='checkbox'] + label > i:before,
-.pretty.toggle > input[type='radio'] + label > i:before {
+.pretty.toggle > input[type='checkbox'] + label > i:before, .pretty.toggle > input[type='radio'] + label > i:before {
   color: inherit;
 }
 
@@ -556,14 +563,6 @@
   color: inherit;
 }
 
-.zmdi {
-  padding-left: 2px !important;
-}
-
-i[class*="ion-"] {
-  padding-left: 2px;
-}
-
 .pretty.smooth i:before {
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;