From ed2839b0d2e8bc52fb65706c585e7f4a824ab2c2 Mon Sep 17 00:00:00 2001
From: lo kesh <lo kesh>
Date: Wed, 23 Nov 2016 11:36:48 +0530
Subject: [PATCH] minor bug fixes and changed sass variables

---
 .gitignore                          |   3 +-
 README.md                           | 130 +++----------------
 package.json                        |   2 +-
 src/pretty.css                      |  73 ++++++-----
 src/pretty.min.css                  |   2 +-
 src/scss/decorators/_animation.scss |  94 +++++++-------
 src/scss/decorators/_circle.scss    |  17 +--
 src/scss/decorators/_color.scss     |  92 ++++++-------
 src/scss/decorators/_core.scss      | 193 ++++++++++++++++++----------
 src/scss/decorators/_index.scss     |  13 +-
 src/scss/decorators/_inline.scss    |   4 -
 src/scss/decorators/_override.scss  |   7 +-
 src/scss/decorators/_plain.scss     |  57 ++++----
 src/scss/decorators/_toggle.scss    |  45 ++++---
 src/scss/support/_print.scss        |  16 +--
 src/scss/support/_variables.scss    |  19 ++-
 16 files changed, 370 insertions(+), 397 deletions(-)
 delete mode 100644 src/scss/decorators/_inline.scss

diff --git a/.gitignore b/.gitignore
index 41f7ade..bbe21e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-test/
\ No newline at end of file
+test/
+yarn.lock
diff --git a/README.md b/README.md
index 79e0a0d..c045060 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 # 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
@@ -14,11 +14,14 @@ Install the library from `bower` or `npm` package manager
 ```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
 
diff --git a/package.json b/package.json
index 522de4a..45f6cf1 100644
--- a/package.json
+++ b/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": {},
diff --git a/src/pretty.css b/src/pretty.css
index 599eb22..cd3a5f7 100644
--- a/src/pretty.css
+++ b/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;
diff --git a/src/pretty.min.css b/src/pretty.min.css
index cbe9855..d1b47a3 100644
--- a/src/pretty.min.css
+++ b/src/pretty.min.css
@@ -1 +1 @@
-@keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-o-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-webkit-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-moz-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-o-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@media print{.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;print-color-adjust:exact;color:transparent !important}.pretty input:checked+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact}.pretty.primary input:checked+label i:before{color:white !important}.pretty.success input:checked+label i:before{color:white !important}.pretty.info input:checked+label i:before{color:white !important}.pretty.warning input:checked+label i:before{color:white !important}.pretty.danger input:checked+label i:before{color:white !important}}.pretty{position:relative;line-height:1;margin-bottom:5px}.pretty label{font-weight:normal}.pretty>input[type='checkbox'],.pretty>input[type='radio']{position:absolute;display:block;left:0;top:0;height:100%;width:100%;opacity:0;margin:0;cursor:pointer;z-index:99999999}.pretty i{font-size:1em !important}.pretty i:before{margin-right:5px;vertical-align:bottom;display:inline-block;color:transparent;position:relative;z-index:999;left:-1px}.pretty i:after{content:'\0000';border-radius:2px;border:1px solid #aaa;position:absolute;color:transparent;left:-1px;top:-1px}.pretty>input[type='checkbox']:checked+label>i:before,.pretty>input[type='radio']:checked+label>i:before{color:inherit}.pretty>input[type='radio']+label>i.default:before{content:'\0000';border-radius:2px;-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{background-color:#aaa !important}.pretty>input[type='checkbox'][disabled],.pretty>input[type='radio'][disabled]{cursor:not-allowed;opacity:0}.pretty>input[type='checkbox'][disabled]+label,.pretty>input[type='radio'][disabled]+label{opacity:0.5;cursor:not-allowed}.pretty.inline{display:inline-block;margin-right:20px}.pretty.plain>input[type='checkbox']:checked+label>i:after,.pretty.plain>input[type='radio']:checked+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']+label+label>i:after,.pretty.plain>input[type='radio']+label+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']:checked+label+label>i:after,.pretty.plain>input[type='radio']:checked+label+label>i:after{border-color:transparent}.pretty.plain.toggle>input[type='checkbox']+label>i:after,.pretty.plain.toggle>input[type='radio']+label>i:after{border-color:transparent}.pretty.circle label i:after{border-radius:100px}.pretty.circle label i.default:before{border-radius:100px !important}.pretty.primary input:checked+label i:before{color:#fff}.pretty.primary input:checked+label i:after{background-color:#428bca !important;border-color:#428bca}.pretty.primary input[type='radio']:checked+label i.default:before{background-color:#428bca !important;color:transparent}.pretty.primary input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#428bca}.pretty.primary.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-primary input:checked+label i:before{color:#428bca}.pretty.outline-primary input:checked+label i:after{border-color:#428bca}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.success input:checked+label i:before{color:#fff}.pretty.success input:checked+label i:after{background-color:#5cb85c !important;border-color:#5cb85c}.pretty.success input[type='radio']:checked+label i.default:before{background-color:#5cb85c !important;color:transparent}.pretty.success input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5cb85c}.pretty.success.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-success input:checked+label i:before{color:#5cb85c}.pretty.outline-success input:checked+label i:after{border-color:#5cb85c}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.info input:checked+label i:before{color:#fff}.pretty.info input:checked+label i:after{background-color:#5bc0de !important;border-color:#5bc0de}.pretty.info input[type='radio']:checked+label i.default:before{background-color:#5bc0de !important;color:transparent}.pretty.info input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5bc0de}.pretty.info.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-info input:checked+label i:before{color:#5bc0de}.pretty.outline-info input:checked+label i:after{border-color:#5bc0de}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.warning input:checked+label i:before{color:#fff}.pretty.warning input:checked+label i:after{background-color:#f0ad4e !important;border-color:#f0ad4e}.pretty.warning input[type='radio']:checked+label i.default:before{background-color:#f0ad4e !important;color:transparent}.pretty.warning input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#f0ad4e}.pretty.warning.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-warning input:checked+label i:before{color:#f0ad4e}.pretty.outline-warning input:checked+label i:after{border-color:#f0ad4e}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.danger input:checked+label i:before{color:#fff}.pretty.danger input:checked+label i:after{background-color:#d9534f !important;border-color:#d9534f}.pretty.danger input[type='radio']:checked+label i.default:before{background-color:#d9534f !important;color:transparent}.pretty.danger input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#d9534f}.pretty.danger.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-danger input:checked+label i:before{color:#d9534f}.pretty.outline-danger input:checked+label i:after{border-color:#d9534f}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.toggle>input[type='checkbox']+label>i:before,.pretty.toggle>input[type='radio']+label>i:before{color:inherit}.pretty.toggle>input[type='checkbox']+label+label,.pretty.toggle>input[type='radio']+label+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label,.pretty.toggle>input[type='radio']:checked+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label+label,.pretty.toggle>input[type='radio']:checked+label+label{display:inline-block}.pretty.toggle>input[type='checkbox']:checked+label+label>i:before,.pretty.toggle>input[type='radio']:checked+label+label>i:before{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;-o-transition:all 0.5s ease;transition:all 0.5s ease;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.pretty.smooth i:after{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}.pretty.smooth>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth>input[type='radio']:checked ~ label>i:before{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.pretty.smooth>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth>input[type='radio']:checked ~ label>i:after{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:before{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:after{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.pretty.smooth.toggle i:before{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:before{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:after{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}
+@keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-moz-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-o-keyframes popIn{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-webkit-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-moz-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@-o-keyframes popOut{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}}@media print{.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;print-color-adjust:exact;color:transparent !important}.pretty input:checked+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact}.pretty.primary input:checked+label i:before{color:white !important}.pretty.success input:checked+label i:before{color:white !important}.pretty.info input:checked+label i:before{color:white !important}.pretty.warning input:checked+label i:before{color:white !important}.pretty.danger input:checked+label i:before{color:white !important}}.pretty{line-height:1;position:relative;display:inline-block;margin:0 10px 5px 0}.pretty label{font-weight:normal}.pretty>input[type='checkbox'],.pretty>input[type='radio']{position:absolute;z-index:99999999;top:0;left:0;display:block;width:100%;height:100%;margin:0;cursor:pointer;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{position:relative;z-index:999;left:0;display:inline-block;vertical-align:bottom;color:transparent}.pretty i:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'\0000';color:transparent;border:1px solid #aaa;border-radius:2px}.pretty>input[type='checkbox']:checked+label>i:before,.pretty>input[type='radio']:checked+label>i:before{color:inherit}.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)}.pretty>input[type='radio']:checked+label>i.default:before{background-color:#aaa !important}.pretty>input[type='checkbox'][disabled],.pretty>input[type='radio'][disabled]{cursor:not-allowed;opacity:0}.pretty>input[type='checkbox'][disabled]+label,.pretty>input[type='radio'][disabled]+label{cursor:not-allowed;opacity:.5}.pretty.plain>input[type='checkbox']:checked+label>i:after,.pretty.plain>input[type='radio']:checked+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']+label+label>i:after,.pretty.plain>input[type='radio']+label+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']:checked+label+label>i:after,.pretty.plain>input[type='radio']:checked+label+label>i:after{border-color:transparent}.pretty.plain.toggle>input[type='checkbox']+label>i:after,.pretty.plain.toggle>input[type='radio']+label>i:after{border-color:transparent}.pretty.circle label i:after{border-radius:100px}.pretty.circle label i.default:before{border-radius:100px !important}.pretty.primary input:checked+label i:before{color:#fff}.pretty.primary input:checked+label i:after{background-color:#428bca !important;border-color:#428bca}.pretty.primary input[type='radio']:checked+label i.default:before{background-color:#428bca !important;color:transparent}.pretty.primary input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#428bca}.pretty.primary.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-primary input:checked+label i:before{color:#428bca}.pretty.outline-primary input:checked+label i:after{border-color:#428bca}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.success input:checked+label i:before{color:#fff}.pretty.success input:checked+label i:after{background-color:#5cb85c !important;border-color:#5cb85c}.pretty.success input[type='radio']:checked+label i.default:before{background-color:#5cb85c !important;color:transparent}.pretty.success input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5cb85c}.pretty.success.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-success input:checked+label i:before{color:#5cb85c}.pretty.outline-success input:checked+label i:after{border-color:#5cb85c}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.info input:checked+label i:before{color:#fff}.pretty.info input:checked+label i:after{background-color:#5bc0de !important;border-color:#5bc0de}.pretty.info input[type='radio']:checked+label i.default:before{background-color:#5bc0de !important;color:transparent}.pretty.info input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5bc0de}.pretty.info.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-info input:checked+label i:before{color:#5bc0de}.pretty.outline-info input:checked+label i:after{border-color:#5bc0de}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.warning input:checked+label i:before{color:#fff}.pretty.warning input:checked+label i:after{background-color:#f0ad4e !important;border-color:#f0ad4e}.pretty.warning input[type='radio']:checked+label i.default:before{background-color:#f0ad4e !important;color:transparent}.pretty.warning input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#f0ad4e}.pretty.warning.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-warning input:checked+label i:before{color:#f0ad4e}.pretty.outline-warning input:checked+label i:after{border-color:#f0ad4e}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.danger input:checked+label i:before{color:#fff}.pretty.danger input:checked+label i:after{background-color:#d9534f !important;border-color:#d9534f}.pretty.danger input[type='radio']:checked+label i.default:before{background-color:#d9534f !important;color:transparent}.pretty.danger input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#d9534f}.pretty.danger.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;-moz-transform:scale(1) !important;-o-transform:scale(1) !important;transform:scale(1) !important}.pretty.outline-danger input:checked+label i:before{color:#d9534f}.pretty.outline-danger input:checked+label i:after{border-color:#d9534f}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.toggle>input[type='checkbox']+label>i:before,.pretty.toggle>input[type='radio']+label>i:before{color:inherit}.pretty.toggle>input[type='checkbox']+label+label,.pretty.toggle>input[type='radio']+label+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label,.pretty.toggle>input[type='radio']:checked+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label+label,.pretty.toggle>input[type='radio']:checked+label+label{display:inline-block}.pretty.toggle>input[type='checkbox']:checked+label+label>i:before,.pretty.toggle>input[type='radio']:checked+label+label>i:before{color:inherit}.pretty.smooth i:before{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.pretty.smooth i:after{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}.pretty.smooth>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth>input[type='radio']:checked ~ label>i:before{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.pretty.smooth>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth>input[type='radio']:checked ~ label>i:after{-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:before{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);transform:scale(0.8)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:after{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.pretty.smooth.toggle i:before{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:before{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:after{-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}
diff --git a/src/scss/decorators/_animation.scss b/src/scss/decorators/_animation.scss
index 6b41249..d25c4d1 100644
--- a/src/scss/decorators/_animation.scss
+++ b/src/scss/decorators/_animation.scss
@@ -1,44 +1,52 @@
-.#{$pretty-class-name}.smooth{ 
-	i{
-		&:before{
-			@include prefixer(transition,all 0.5s ease);
-			@include prefixer(transform,scale(0));  
-		}
-		&:after{
-			@include prefixer(transition,all 0.5s ease);
-		}
-	}
-	&>input[type='checkbox']:checked~label>i,
-	&>input[type='radio']:checked~label>i{
-		&:before{
-			@include prefixer(transform,scale(1));
-		}
-		&:after{
-			@include prefixer(transform,scale(0)); 
-		}
-	}
-	&>input[type='radio']:checked~label>i.default{
-		&:before{
-			@include prefixer(transform,scale(0.8));   
-		}
-		&:after{
-			@include prefixer(transform,scale(1));   
-		}
-	}
+.#{$pretty--class-name}.smooth {
+    i {
+        &:before {
+            @include prefixer(transition,all .5s ease);
+            @include prefixer(transform,scale(0));
+        }
+
+        &:after {
+            @include prefixer(transition,all .5s ease);
+        }
+    }
+
+    & > input[type='checkbox']:checked ~ label>i,
+    & > input[type='radio']:checked ~ label>i {
+        &:before {
+            @include prefixer(transform,scale(1));
+        }
+
+        &:after {
+            @include prefixer(transform,scale(0));
+        }
+    }
+
+    & > input[type='radio']:checked ~ label > i.default {
+        &:before {
+            @include prefixer(transform,scale(.8));
+        }
+
+        &:after {
+            @include prefixer(transform,scale(1));
+        }
+    }
+}
+
+.#{$pretty--class-name}.smooth.toggle {
+    i {
+        &:before {
+            @include prefixer(transform,none);
+        }
+    }
+
+    & > input[type='checkbox']:checked ~ label>i,
+    & > input[type='radio']:checked ~ label>i {
+        &:before {
+            @include prefixer(transform,none);
+        }
+
+        &:after {
+            @include prefixer(transform,none);
+        }
+    }
 }
-.#{$pretty-class-name}.smooth.toggle{ 
-	i{
-		&:before{
-			@include prefixer(transform,none);  
-		}
-	}
-	&>input[type='checkbox']:checked~label>i,
-	&>input[type='radio']:checked~label>i{
-		&:before{
-			@include prefixer(transform,none);
-		}
-		&:after{
-			@include prefixer(transform,none); 
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/scss/decorators/_circle.scss b/src/scss/decorators/_circle.scss
index 4881f0c..14006a5 100644
--- a/src/scss/decorators/_circle.scss
+++ b/src/scss/decorators/_circle.scss
@@ -1,8 +1,9 @@
-.#{$pretty-class-name}.circle{
-  label i:after{
-    border-radius: 100px;
-  }
-  label i.default:before{ 
-    border-radius: 100px !important;
-  }
-}
\ No newline at end of file
+.#{$pretty--class-name}.circle {
+    label i:after {
+        border-radius: 100px;
+    }
+
+    label i.default:before {
+        border-radius: 100px !important;
+    }
+}
diff --git a/src/scss/decorators/_color.scss b/src/scss/decorators/_color.scss
index 6269c9c..8b621d8 100644
--- a/src/scss/decorators/_color.scss
+++ b/src/scss/decorators/_color.scss
@@ -1,48 +1,54 @@
-@each $color in $outline-colors{
-  .#{$pretty-class-name}.#{nth($color,1)}{
-    input:checked+ label i{ 
-      &:before{
-        color:#fff; 
-      }
-      &:after{
-        background-color:nth($color,3) !important;
-        border-color:nth($color,3)
-      }
-    }
-    input[type='radio']:checked+ label i.default{ 
-      &:before{
-        background-color:nth($color,3) !important;
-        color:transparent;
-      }
-      &:after{
-        background-color: initial !important;
-        border-color:nth($color,3)
-      }
-    }
-    &.smooth{
-      input:checked ~ label i:after{ 
-        @include prefixer(transform,scale(1) !important); 
-      }
+@each $color in $outline-colors {
+    .#{$pretty--class-name}.#{nth($color,1)} {
+        input:checked+ label i {
+            &:before {
+                color: #fff;
+            }
+
+            &:after {
+                background-color: nth($color, 3) !important;
+                border-color: nth($color, 3);
+            }
+        }
+
+        input[type='radio']:checked+ label i.default {
+            &:before {
+                background-color: nth($color, 3) !important;
+                color: transparent;
+            }
+
+            &:after {
+                background-color: initial !important;
+                border-color: nth($color, 3);
+            }
+        }
+
+        &.smooth {
+            input:checked ~ label i:after {
+                @include prefixer(transform,scale(1) !important);
+            }
+        }
     }
-  }
-  .#{$pretty-class-name}.#{nth($color,2)}{
-    input:checked+label i{
-      &:before{
-        color:nth($color,3);
-      }
-      &:after{
-        border-color:nth($color,3); 
-      }
+
+    .#{$pretty--class-name}.#{nth($color,2)} {
+        input:checked+label i {
+            &:before {
+                color: nth($color, 3);
+            }
+
+            &:after {
+                border-color: nth($color, 3);
+            }
+        }
     }
-  }
-  .#{$pretty-class-name}.toggle{
-    @each $subcolor in $outline-colors{
-      i.#{nth($subcolor,1)}{  
-        &:before{
-          color:nth($subcolor,3) !important;  
+
+    .#{$pretty--class-name}.toggle {
+        @each $subcolor in $outline-colors {
+            i.#{nth($subcolor,1)} {
+                &:before {
+                    color: nth($subcolor, 3) !important;
+                }
+            }
         }
-      }
     }
-   
-  }
 }
diff --git a/src/scss/decorators/_core.scss b/src/scss/decorators/_core.scss
index 95507b9..066060c 100644
--- a/src/scss/decorators/_core.scss
+++ b/src/scss/decorators/_core.scss
@@ -1,79 +1,132 @@
-.#{$pretty-class-name}{
-  position: relative;
-  line-height: 1;
-  margin-bottom: 5px;
+.#{$pretty--class-name}
+{
+    line-height: 1;
+
+    position: relative;
+
+    display: inline-block;
+
+    margin: 0 10px 5px 0;
 }
 
+.#{$pretty--class-name}
+{
+    label
+    {
+        font-weight: normal;
+    }
+
+    & > input[type='checkbox'],
+    & > input[type='radio']
+    {
+        position: absolute;
+        z-index: 99999999;
+        top: 0;
+        left: 0;
 
-.#{$pretty-class-name}{
-  label{
-    font-weight: normal;
-  }
-  &>input[type='checkbox'],
-  &>input[type='radio']{
-    position: absolute;
-    display: block;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%; 
-    opacity: 0;
-    margin: 0;
-    cursor: pointer;
-    z-index: 99999999;
-  }
-  i{
-    font-size: 1em !important;
-    &:before{
-      margin-right: 5px;
-      vertical-align: bottom;
-      display: inline-block ; 
-      color:transparent;
-      position: relative;
-      z-index: 999;
-      left: -1px;
+        display: block;
+
+        width: 100%;
+        height: 100%;
+        margin: 0;
+
+        cursor: pointer;
+
+        opacity: 0;
     }
-    &:after{ 
-      content: '\0000';
-      border-radius: $pretty-border-radius;
-      border: 1px solid #aaa;
-      position: absolute;
-      color: transparent;
-      left: -1px;
-      top: -1px;
+
+    i
+    {
+        font-size: 1em !important;
+
+        position: relative;
+
+        display: inline-block;
+
+        box-sizing: initial;
+        min-width: 1em;
+        margin-right: 6px;
+        padding: 1px;
+
+        text-align: center;
+
+        &:before
+        {
+            position: relative;
+            z-index: 999;
+            left: 0;
+
+            display: inline-block;
+
+            vertical-align: bottom;
+
+            color: transparent;
+        }
+
+        &:after
+        {
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+
+            content: '\0000';
+
+            color: transparent;
+            border: 1px solid #aaa;
+            border-radius: $pretty--border-radius;
+        }
     }
-  }
-  &>input[type='checkbox']:checked+label>i,
-  &>input[type='radio']:checked+label>i{
-    &:before{
-      color:inherit;
+
+    & > input[type='checkbox']:checked + label > i,
+    & > input[type='radio']:checked + label > i
+    {
+        &:before
+        {
+            color: inherit;
+        }
     }
-    &:after{}
-  }
-  &>input[type='radio']+label>i.default{
-    &:before{
-      content: '\0000';
-      border-radius: 2px;
-      @include prefixer(transform,scale(0.8)); 
-      color: transparent;
-      background: transparent;
-      left: 0;
+
+    & > input[type='radio'] + label > i.default
+    {
+        &:before
+        {
+            left: 0;
+
+            min-width: 1em;
+
+            content: '\0000';
+
+            color: transparent;
+            border-radius: 2px;
+            background: transparent;
+
+            @include prefixer(transform,scale(.8));
+        }
     }
-    &:after{}
-  }
-  &>input[type='radio']:checked+label>i.default{
-    &:before{
-      background-color: #aaa !important; 
+
+    & > input[type='radio']:checked + label > i.default
+    {
+        &:before
+        {
+            background-color: #aaa !important;
+        }
     }
-    &:after{}
-  }
-  &>input[type='checkbox'][disabled],
-  &>input[type='radio'][disabled]{
-    cursor: not-allowed;
-    opacity: 0; 
-    &+label{
-      opacity: 0.5;
-      cursor: not-allowed;
+
+    & > input[type='checkbox'][disabled],
+    & > input[type='radio'][disabled]
+    {
+        cursor: not-allowed;
+
+        opacity: 0;
+
+        & + label
+        {
+            cursor: not-allowed;
+
+            opacity: .5;
+        }
     }
-  }
-}
\ No newline at end of file
+}
diff --git a/src/scss/decorators/_index.scss b/src/scss/decorators/_index.scss
index 74db4af..ec6c126 100644
--- a/src/scss/decorators/_index.scss
+++ b/src/scss/decorators/_index.scss
@@ -1,8 +1,7 @@
-@import 'core';   
-@import 'inline';
+@import 'core';
 @import 'plain';   
-@import 'circle';    
-@import 'color';   
-@import 'toggle';   
-@import 'override';    
-@import 'animation';   
\ No newline at end of file
+@import 'circle';
+@import 'color';
+@import 'toggle';
+@import 'override';
+@import 'animation';
diff --git a/src/scss/decorators/_inline.scss b/src/scss/decorators/_inline.scss
deleted file mode 100644
index 19780d8..0000000
--- a/src/scss/decorators/_inline.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.#{$pretty-class-name}.inline{
-  display: inline-block;
-  margin-right: 20px; 
-}
\ No newline at end of file
diff --git a/src/scss/decorators/_override.scss b/src/scss/decorators/_override.scss
index cfcca8b..8b13789 100644
--- a/src/scss/decorators/_override.scss
+++ b/src/scss/decorators/_override.scss
@@ -1,6 +1 @@
-.zmdi{
-	padding-left: 2px !important;
-}
-i[class*="ion-"]{
-	padding-left: 2px;
-}
\ No newline at end of file
+
diff --git a/src/scss/decorators/_plain.scss b/src/scss/decorators/_plain.scss
index 6e487b9..4f7bbfb 100644
--- a/src/scss/decorators/_plain.scss
+++ b/src/scss/decorators/_plain.scss
@@ -1,35 +1,36 @@
-.#{$pretty-class-name}.plain{
-  &>input[type='checkbox']+label,
-  &>input[type='radio']+label{
-    &>i:after{
-      // border-color:transparent;
+.#{$pretty--class-name}.plain {
+    & > input[type='checkbox'] + label, & > input[type='radio'] + label {
+        & > i:after {
+            /* border-color:transparent;*/
+        }
     }
-  }
-  &>input[type='checkbox']:checked+label,
-  &>input[type='radio']:checked+label{
-    &>i:after{
-      border-color:transparent;
+
+    & > input[type='checkbox']:checked + label,
+    & > input[type='radio']:checked + label {
+        & > i:after {
+            border-color: transparent;
+        }
     }
-  }
-  &>input[type='checkbox']+label+label,
-  &>input[type='radio']+label+label{
-    &>i:after{
-      border-color:transparent;
+
+    & > input[type='checkbox'] + label+label,
+    & > input[type='radio'] + label+label {
+        & > i:after {
+            border-color: transparent;
+        }
     }
-  }
-  &>input[type='checkbox']:checked+label+label,
-  &>input[type='radio']:checked+label+label{
-    &>i:after{
-      border-color:transparent;
+
+    & > input[type='checkbox']:checked + label+label,
+    & > input[type='radio']:checked + label+label {
+        & > i:after {
+            border-color: transparent;
+        }
     }
-  }
 }
 
-.#{$pretty-class-name}.plain.toggle{
-  &>input[type='checkbox']+label,
-  &>input[type='radio']+label{
-    &>i:after{
-      border-color:transparent;  
+.#{$pretty--class-name}.plain.toggle {
+    & > input[type='checkbox'] + label, & > input[type='radio'] + label {
+        & > i:after {
+            border-color: transparent;
+        }
     }
-  }
-}
\ No newline at end of file
+}
diff --git a/src/scss/decorators/_toggle.scss b/src/scss/decorators/_toggle.scss
index 40f8919..761cff7 100644
--- a/src/scss/decorators/_toggle.scss
+++ b/src/scss/decorators/_toggle.scss
@@ -1,23 +1,26 @@
-.#{$pretty-class-name}.toggle{
-  &>input[type='checkbox']+label,
-  &>input[type='radio']+label{
-    &>i:before{
-      color:inherit;
+.#{$pretty--class-name}.toggle {
+    & > input[type='checkbox'] + label, & > input[type='radio'] + label {
+        & > i:before {
+            color: inherit;
+        }
     }
-  }
-  &>input[type='checkbox']+label+label,
-  &>input[type='radio']+label+label{
-    display: none; 
-  }
-  &>input[type='checkbox']:checked+label,
-  &>input[type='radio']:checked+label{
-    display: none;
-  }
-  &>input[type='checkbox']:checked+label+label,
-  &>input[type='radio']:checked+label+label{
-    display: inline-block;
-    &>i:before{
-      color:inherit;
+
+    & > input[type='checkbox'] + label+label,
+    & > input[type='radio'] + label+label {
+        display: none;
     }
-  }
-}
\ No newline at end of file
+
+    & > input[type='checkbox']:checked + label,
+    & > input[type='radio']:checked + label {
+        display: none;
+    }
+
+    & > input[type='checkbox']:checked + label+label,
+    & > input[type='radio']:checked + label+label {
+        display: inline-block;
+
+        & > i:before {
+            color: inherit;
+        }
+    }
+}
diff --git a/src/scss/support/_print.scss b/src/scss/support/_print.scss
index e99a5cd..5c70a1d 100644
--- a/src/scss/support/_print.scss
+++ b/src/scss/support/_print.scss
@@ -1,20 +1,20 @@
 @media print {
-    .#{$pretty-class-name}:not(.toggle) input:not(:checked)+label i:before,
-    .#{$pretty-class-name} > input[type='radio']:checked + label > i.default:before,
-    .#{$pretty-class-name} i:after {
+    .#{$pretty--class-name} :not(.toggle) input:not(:checked)+label i:before,
+    .#{$pretty--class-name} > input[type='radio']:checked + label > i.default:before,
+    .#{$pretty--class-name} i:after {
         -webkit-print-color-adjust: exact;
-        print-color-adjust: exact;
+                print-color-adjust: exact;
         color: transparent !important;
     }
 
-    .#{$pretty-class-name} input:checked + label i:before{
+    .#{$pretty--class-name} input:checked + label i:before {
         -webkit-print-color-adjust: exact;
-        print-color-adjust: exact;
+                print-color-adjust: exact;
     }
 
     @each $color in $outline-colors {
-        .#{$pretty-class-name}.#{nth($color, 1)} input:checked + label i:before { 
+        .#{$pretty--class-name}.#{nth($color, 1)} input:checked + label i:before {
             color: white !important;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/scss/support/_variables.scss b/src/scss/support/_variables.scss
index 2c69d54..a4634ff 100644
--- a/src/scss/support/_variables.scss
+++ b/src/scss/support/_variables.scss
@@ -1,10 +1,9 @@
-$pretty-class-name:pretty !default;
-$pretty-font-family:"Material Design Icons" !default;
-$pretty-border-radius:2px !default;
-$outline-colors: (
-  primary outline-primary #428bca,
-  success outline-success #5cb85c,
-  info outline-info #5bc0de,
-  warning outline-warning #f0ad4e,
-  danger outline-danger #d9534f
-) !default; 
\ No newline at end of file
+$pretty--class-name: pretty !default;
+$pretty--font-family: 'Material Design Icons' !default;
+$pretty--border-radius: 2px !default;
+$pretty--primary-color: #428bca !default;
+$pretty--success-color: #5cb85c !default;
+$pretty--info-color: #5bc0de !default;
+$pretty--warning-color: #f0ad4e !default;
+$pretty--danger-color: #d9534f !default;
+$outline-colors: (primary outline-primary $pretty--primary-color, success outline-success $pretty--success-color, info outline-info $pretty--info-color, warning outline-warning $pretty--warning-color, danger outline-danger $pretty--danger-color);