Merge pull request flatlogic#55 from vdh/variable_fix

Variable defaults, and a fix for the Opera styles

Author: gaykov

README.md

@@ -1,15 +1,15 @@
 Awesome Bootstrap Checkbox
 ==========================
 
-Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
+[Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
 
-**[Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)**
+**[Demo][]**
 
 Use
 ------------
 
-First just include **awesome-bootstrap-checkbox.css** somewhere in your html. Or **awesome-bootstrap-checkbox.scss** if you use sass.
-Next everything is based on code convention. Here is checkbox markup from Bootstrap site:
+First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) / [Less](#using-less) configuration.
+Next, everything is based on code convention. Here is checkbox markup from Bootstrap site:
 
 ````html
 <form role="form">
@@ -85,37 +85,87 @@ You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style ch
 
 `checkbox-single` and `radio-single` for inputs without label text.
 
-Glyphicons way (Opt-out Font Awesome)
+Using [Sass][]
+----------
+
+As per example in the `demo` folder, to use Font Awesome you'll have to `@import` the following library parts:
+
+````scss
+@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
+@import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";
+
+@import "../bower_components/Font-Awesome/scss/variables";
+
+@import "../awesome-bootstrap-checkbox";
+````
+
+Adjust this to the path where your bootstrap and font-awesome files are located.
+
+Using [Less][]
+----------
+
+Just like the Sass setup, you'll have to `@import` the following library parts:
+
+````less
+@import "../bower_components/bootstrap/less/variables";
+@import "../bower_components/bootstrap/less/mixins";
+
+@import "../awesome-bootstrap-checkbox";
+
+@import "../bower_components/Font-Awesome/less/variables";
+````
+
+Custom icon font
 ------------
 
-If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
-````css
-.checkbox input[type=checkbox]:checked + label:after {
-    font-family: 'Glyphicons Halflings';
-    content: "\e013";
-}
+If you want to use another icon font instead of Font Awesome, such as [Glyphicons][], override the default variables:
+````scss
+$font-family-icon: 'Glyphicons Halflings';
+$check-icon: "\e013";
+
 .checkbox label:after {
     padding-left: 4px;
     padding-top: 2px;
     font-size: 9px;
 }
 ````
 
-Using SASS
-----------
+or for Less:
+````less
+@font-family-icon: 'Glyphicons Halflings';
+@check-icon: "\e013";
 
-As per example in the `demo` folder, to use these **awesome** you'll have to `@import` the following library parts:
+// Same styles as the Sass example...
+````
 
-````scss
-@import "../bootstrap/bootstrap/variables";
-@import "../bootstrap/bootstrap/mixins";
+Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
+````css
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after,
+.checkbox input[type=checkbox]:checked + label:after {
+    font-family: 'Glyphicons Halflings';
+    content: "\e013";
+}
 
-@import "../font-awesome/variables";
+input[type="checkbox"].styled:checked label:after,
+input[type="radio"].styled:checked label:after,
+.checkbox label:after {
+    padding-left: 4px;
+    padding-top: 2px;
+    font-size: 9px;
+}
 ````
 
-Adjust this to the path where your bootstrap and font-awesome files are located.
-
 Credits
 ------------
 
-Based on [Official Bootstrap Sass port](https://github.com/twbs/bootstrap-sass) and awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
+Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
+
+
+[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
+[Bootstrap]: http://getbootstrap.com/
+[Bootstrap Sass]: https://github.com/twbs/bootstrap-sass
+[Font Awesome]: https://github.com/FortAwesome/Font-Awesome
+[Glyphicons]: http://getbootstrap.com/components/#glyphicons
+[Sass]: http://sass-lang.com/
+[Less]: http://lesscss.org/

awesome-bootstrap-checkbox.less

@@ -3,6 +3,8 @@
 // --------------------------------------------------
 
 @font-family-icon: 'FontAwesome';
+@fa-var-check: "\f00c";
+@check-icon: @fa-var-check;
 
 .checkbox-variant(@parent, @color) {
   .@{parent} input[type="checkbox"]:checked + label,
@@ -67,7 +69,7 @@
 
     &:checked + label::after{
       font-family: @font-family-icon;
-      content: @fa-var-check;
+      content: @check-icon;
     }
 
     &:disabled + label{
@@ -195,8 +197,8 @@
 input[type="checkbox"],
 input[type="radio"] {
   &.styled:checked + label:after {
-    font-family: 'FontAwesome';
-    content: "\f00c";
+    font-family: @font-family-icon;
+    content: @check-icon;
   }
   & .styled:checked + label {
     &::before {

awesome-bootstrap-checkbox.scss

@@ -4,6 +4,8 @@
 
 
 $font-family-icon: 'FontAwesome' !default;
+$fa-var-check: "\f00c" !default;
+$check-icon: $fa-var-check !default;
 
 @mixin checkbox-variant($parent, $color) {
   #{$parent} input[type="checkbox"]:checked + label,
@@ -68,7 +70,7 @@ $font-family-icon: 'FontAwesome' !default;
 
     &:checked + label::after{
       font-family: $font-family-icon;
-      content: $fa-var-check;
+      content: $check-icon;
     }
 
     &:disabled + label{
@@ -197,8 +199,8 @@ $font-family-icon: 'FontAwesome' !default;
 input[type="checkbox"],
 input[type="radio"] {
   &.styled:checked + label:after {
-    font-family: 'FontAwesome';
-    content: "\f00c";
+    font-family: $font-family-icon;
+    content: $check-icon;
   }
   .styled:checked + label {
     &::before {

bower.json

@@ -4,7 +4,7 @@
     "awesome-bootstrap-checkbox.css",
     "awesome-bootstrap-checkbox.scss"
   ],
-  "version": "0.3.5",
+  "version": "0.3.7",
   "homepage": "https://github.com/flatlogic/awesome-bootstrap-checkbox",
   "authors": [
     "okendoken flatlogic.com"

demo/build.less

@@ -1,6 +1,6 @@
 @import "../bower_components/bootstrap/less/variables";
 @import "../bower_components/bootstrap/less/mixins";
 
-@import "../bower_components/Font-Awesome/less/variables";
+@import "../awesome-bootstrap-checkbox";
 
-@import "../awesome-bootstrap-checkbox";
+@import "../bower_components/Font-Awesome/less/variables";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "awesome-bootstrap-checkbox",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.",
   "main": "awesome-bootstrap-checkbox.css",
   "scripts": {