Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

awesome-bootstrap-checkbox

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

awesome-bootstrap-checkbox - npm Package Compare versions

Comparing version 0.3.7 to 1.0.0-alpha.1

6

bower.json

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc