Prepare to change Bootstrap version to 4.0.0alpha2

Author: shoudaos

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][]**
+**[Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)**
 
 Use
 ------------
 
-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:
+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:
 
 ````html
 <form role="form">
@@ -83,96 +83,39 @@ You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style ch
 
 `checkbox-circle` is for rounded checkboxes.
 
-Inputs without label text:
+`checkbox-single` and `radio-single` for inputs without label text.
 
-````html
-<div class="checkbox">
-  <input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
-  <label></label>
-</div>
-````
-
-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
+Glyphicons way (Opt-out Font Awesome)
 ------------
 
-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;
-}
-````
-
-or for Less:
-````less
-@font-family-icon: 'Glyphicons Halflings';
-@check-icon: "\e013";
-
-// Same styles as the Sass example...
-````
-
-Or for plain CSS, override the `.checkbox` class (and `.styled` class for Opera):
+If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
 ````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";
 }
-
-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;
 }
 ````
 
-Credits
-------------
+Using SASS
+----------
 
-Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
+As per example in the `demo` folder, to use these **awesome** you'll have to `@import` the following library parts:
 
+````scss
+@import "../bootstrap/scss/variables";
+@import "../bootstrap/scss/mixins";
+
+@import "../Font-Awesome/scss/variables";
+````
+
+Adjust this to the path where your bootstrap and font-awesome files are located.
+
+Credits
+------------
 
-[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/
+Based on the [Bootstrap 4][http://getbootstrap.com/] and the awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).

awesome-bootstrap-checkbox.less

@@ -1,3 +1,29 @@
+//
+// Mixins
+// --------------------------------------------------
+
+
+@mixin scale($ratio...) {
+  -webkit-transform: scale($ratio);
+  -ms-transform: scale($ratio); // IE9 only
+  -o-transform: scale($ratio);
+  transform: scale($ratio);
+}
+
+@mixin transition-transform($transition...) {
+  -webkit-transition: -webkit-transform $transition;
+  -moz-transition: -moz-transform $transition;
+  -o-transition: -o-transform $transition;
+  transition: transform $transition;
+}
+
+@mixin transition($transition...) {
+  -webkit-transition: $transition;
+  -o-transition: $transition;
+  transition: $transition;
+}
+
+
 //
 // Checkboxes
 // --------------------------------------------------
@@ -38,7 +64,7 @@ $check-icon: $fa-var-check !default;
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid $input-border;
+      border: 1px solid $input-border-color;
       border-radius: 3px;
       background-color: #fff;
       @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
@@ -138,7 +164,7 @@ $check-icon: $fa-var-check !default;
       height: 17px;
       left: 0;
       margin-left: -20px;
-      border: 1px solid $input-border;
+      border: 1px solid $input-border-color;
       border-radius: 50%;
       background-color: #fff;
       @include transition(border 0.15s ease-in-out);