awesome-bootstrap-checkbox
Advanced tools
Comparing version 0.3.7 to 1.0.0-alpha.1
@@ -7,3 +7,3 @@ { | ||
], | ||
"version": "0.3.7", | ||
"version": "1.0.0-alpha.1", | ||
"homepage": "https://github.com/flatlogic/awesome-bootstrap-checkbox", | ||
@@ -20,5 +20,5 @@ "authors": [ | ||
"devDependencies": { | ||
"bootstrap-sass-official": "3.3.3", | ||
"font-awesome-sass": "4.3.1" | ||
"bootstrap": "4.0.0-alpha.2", | ||
"font-awesome-sass": "4.5.0" | ||
} | ||
} |
{ | ||
"name": "awesome-bootstrap-checkbox", | ||
"version": "0.3.7", | ||
"version": "1.0.0-alpha.1", | ||
"description": "Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.", | ||
@@ -16,4 +16,3 @@ "main": "awesome-bootstrap-checkbox.css", | ||
"font-awesome", | ||
"scss", | ||
"less" | ||
"scss" | ||
], | ||
@@ -30,5 +29,4 @@ "author": "contact@flatlogic.com (http://flatlogic.com)", | ||
"awesome-bootstrap-checkbox.scss", | ||
"awesome-bootstrap-checkbox.less", | ||
"bower.json" | ||
] | ||
} |
Awesome Bootstrap Checkbox | ||
========================== | ||
[![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) | ||
[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][]** | ||
@@ -18,3 +14,3 @@ | ||
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. | ||
First just include **awesome-bootstrap-checkbox.css** somewhere in your HTML, or add the equivalent files to your [Sass](#using-sass) configuration. | ||
Next, everything is based on code convention. Here is checkbox markup from Bootstrap site: | ||
@@ -38,3 +34,3 @@ | ||
... | ||
<div class="checkbox"> | ||
<div class="checkbox abc-checkbox"> | ||
<input type="checkbox" id="checkbox1"> | ||
@@ -72,3 +68,3 @@ <label for="checkbox1"> | ||
... | ||
<div class="radio"> | ||
<div class="radio abc-radio"> | ||
<input type="radio" name="radio2" id="radio3" value="option1"> | ||
@@ -79,3 +75,3 @@ <label for="radio3"> | ||
</div> | ||
<div class="radio"> | ||
<div class="radio abc-radio"> | ||
<input type="radio" name="radio2" id="radio4" value="option2" checked> | ||
@@ -93,12 +89,14 @@ <label for="radio4"> | ||
You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors. | ||
You may use `abc-checkbox-primary`, `abc-checkbox-danger`, `abc-radio-info`, etc to style checkboxes and radios with brand bootstrap colors. | ||
`checkbox-circle` is for rounded checkboxes. | ||
`abc-checkbox-circle` is for rounded checkboxes. | ||
`abc-checkbox-single` and `abc-radio-single` for inputs without label text. | ||
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 class="checkbox abc-checkbox"> | ||
<input type="checkbox" class="styled" id="singleCheckbox" value="option1" aria-label="Single checkbox One"> | ||
<label for="singleCheckbox"></label> | ||
</div> | ||
@@ -123,16 +121,2 @@ ```` | ||
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 | ||
@@ -146,3 +130,3 @@ ------------ | ||
.checkbox label:after { | ||
.abc-checkbox label:after { | ||
padding-left: 4px; | ||
@@ -154,15 +138,7 @@ padding-top: 2px; | ||
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): | ||
Or for plain CSS, override the `.abc-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 { | ||
.abc-checkbox input[type=checkbox]:checked + label:after { | ||
font-family: 'Glyphicons Halflings'; | ||
@@ -174,3 +150,3 @@ content: "\e013"; | ||
input[type="radio"].styled:checked label:after, | ||
.checkbox label:after { | ||
.abc-checkbox label:after { | ||
padding-left: 4px; | ||
@@ -190,4 +166,2 @@ padding-top: 2px; | ||
[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 | ||
@@ -194,0 +168,0 @@ [Font Awesome]: https://github.com/FortAwesome/Font-Awesome |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
43308
9
464
162
1