awesome-bootstrap-checkbox - npm Package Compare versions

Comparing version 0.3.6 to 0.3.7

bower.json

@@ -7,3 +7,3 @@ {
   ],
-  "version": "0.3.5",
+  "version": "0.3.7",
   "homepage": "https://github.com/flatlogic/awesome-bootstrap-checkbox",
@@ -10,0 +10,0 @@ "authors": [

package.json

 {
   "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.",
@@ -5,0 +5,0 @@ "main": "awesome-bootstrap-checkbox.css",

README.md

 Awesome Bootstrap Checkbox
 ==========================
 
-Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
+[![NPM version](https://img.shields.io/npm/v/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![NPM downloads](https://img.shields.io/npm/dm/awesome-bootstrap-checkbox.svg?style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![Dependency Status](https://img.shields.io/david/dev/flatlogic/awesome-bootstrap-checkbox.svg?branch=master&style=flat)](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
+[![Join the chat at https://gitter.im/flatlogic/awesome-bootstrap-checkbox](https://badges.gitter.im/flatlogic/awesome-bootstrap-checkbox.svg)](https://gitter.im/flatlogic/awesome-bootstrap-checkbox?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-**[Demo](http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/)**
+[Font Awesome][] [Bootstrap][] Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. **No Javascript!**
 
+For **[Bootstrap 4][]** checkout [v1.0.0-alpha.1][] tag!
+
+**[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:
 
@@ -86,9 +93,68 @@ ````html
 
-`checkbox-single` and `radio-single` for inputs without label text.
+Inputs without label text:
 
-Glyphicons way (Opt-out Font Awesome)
+````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
 ------------
 
-If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
+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):
 ````css
+input[type="checkbox"].styled:checked + label:after,
+input[type="radio"].styled:checked + label:after,
 .checkbox input[type=checkbox]:checked + label:after {
@@ -98,2 +164,5 @@ font-family: 'Glyphicons Halflings';
 }
+
+input[type="checkbox"].styled:checked label:after,
+input[type="radio"].styled:checked label:after,
 .checkbox label:after {
@@ -106,19 +175,16 @@ padding-left: 4px;
 
-Using SASS
-----------
+Credits
+------------
 
-As per example in the `demo` folder, to use these **awesome** you'll have to `@import` the following library parts:
+Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [Font Awesome][].
 
-````scss
-@import "../bootstrap/bootstrap/variables";
-@import "../bootstrap/bootstrap/mixins";
 
-@import "../font-awesome/variables";
-````
-
-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).
+[Demo]: http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
+[Bootstrap]: http://getbootstrap.com/
+[Bootstrap 4]: https://v4-alpha.getbootstrap.com/
+[v1.0.0-alpha.1]: https://github.com/flatlogic/awesome-bootstrap-checkbox/releases/tag/v1.0.0-alpha.1
+[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/

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

194292

increased by0.36%

Lines of code

7336

increased by1.55%

Number of lines in readme file

188

increased by54.1%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes