mirror of
https://github.com/flatlogic/awesome-bootstrap-checkbox.git
synced 2024-12-27 01:22:22 +01:00
rename lib, reorganize css, update readme license
This commit is contained in:
okendoken
parent
e50e1f51de
commit
e310e6e6e2
7 changed files with 155 additions and 66 deletions
2
LICENSE
2
LICENSE
|
|
@ -1,6 +1,6 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014
|
||||
Copyright (c) 2014 flatlogic.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
|
|
|||
88
README.md
88
README.md
|
|
@ -1,4 +1,88 @@
|
|||
awesome-bootstrap-checkbox
|
||||
Awesome Bootstrap Checkbox
|
||||
==========================
|
||||
|
||||
Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.
|
||||
Font Awesome Bootstrap Checkboxes & Radios plugin. Pure css way to make inputs look prettier. **No javascript**!
|
||||
|
||||
**[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:
|
||||
|
||||
<form role="form">
|
||||
...
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
...
|
||||
</form>
|
||||
|
||||
We have to alter it a bit:
|
||||
|
||||
<form role="form">
|
||||
...
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="checkbox1">
|
||||
<label for="checkbox1">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
...
|
||||
</form>
|
||||
|
||||
That's it. It will work. But it **will not** work if you nest input inside label or put label before input.
|
||||
|
||||
Radios
|
||||
------------
|
||||
|
||||
It's the same for radios. Markup has to be the following:
|
||||
|
||||
<form role="form">
|
||||
...
|
||||
<div class="radio">
|
||||
<input type="radio" name="radio2" id="radio3" value="option1">
|
||||
<label for="radio3">
|
||||
One
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<input type="radio" name="radio2" id="radio4" value="option2" checked>
|
||||
<label for="radio4">
|
||||
Two
|
||||
</label>
|
||||
</div>
|
||||
...
|
||||
</form>
|
||||
|
||||
Brand Colors
|
||||
------------
|
||||
|
||||
You may use `checkbox-primary`, `checkbox-danger`, `radio-info`, etc to style checkboxes and radios with brand bootstrap colors.
|
||||
|
||||
`checkbox-circle` is for rounded checkboxes.
|
||||
|
||||
Glyphicons way (Opt-out Font Awesome)
|
||||
------------
|
||||
|
||||
If you want to use glyphicons instead of font-awesome then override `.checkbox` class:
|
||||
|
||||
.checkbox input[type=checkbox]:checked + label:after {
|
||||
font-family: 'Glyphicons Halflings';
|
||||
content: "\e013";
|
||||
}
|
||||
.checkbox label:after {
|
||||
padding-left: 4px;
|
||||
padding-top: 2px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
Credits
|
||||
------------
|
||||
|
||||
Based on [Official Bootstrap Sass port](https://github.com/twbs/bootstrap-sass) and awesome [Font Awesome](https://github.com/FortAwesome/Font-Awesome).
|
||||
|
||||
Inspired by [Web Arch Template](http://www.revox.io/webarchv2/form_elements.html)
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
.checkbox label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px; }
|
||||
.checkbox label:before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px; }
|
||||
.checkbox label:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
|
||||
.checkbox label:after {
|
||||
.checkbox label:after {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -28,53 +28,53 @@
|
|||
font-size: 11px;
|
||||
color: #555555; }
|
||||
.checkbox input[type=checkbox] {
|
||||
display: none; }
|
||||
.checkbox input[type=checkbox]:checked + label:after {
|
||||
display: none; }
|
||||
.checkbox input[type=checkbox]:checked + label:after {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f00c"; }
|
||||
.checkbox input[type=checkbox]:disabled + label {
|
||||
.checkbox input[type=checkbox]:disabled + label {
|
||||
opacity: 0.65; }
|
||||
.checkbox input[type=checkbox]:disabled + label:before {
|
||||
background-color: #eeeeee;
|
||||
cursor: not-allowed; }
|
||||
.checkbox input[type=checkbox]:disabled + label:before {
|
||||
background-color: #eeeeee;
|
||||
cursor: not-allowed; }
|
||||
.checkbox.checkbox-circle label:before {
|
||||
border-radius: 50%; }
|
||||
border-radius: 50%; }
|
||||
|
||||
.checkbox-primary input[type=checkbox]:checked + label:before {
|
||||
background-color: #428bca;
|
||||
border-color: #428bca; }
|
||||
background-color: #428bca;
|
||||
border-color: #428bca; }
|
||||
.checkbox-primary input[type=checkbox]:checked + label:after {
|
||||
color: #fff; }
|
||||
color: #fff; }
|
||||
|
||||
.checkbox-danger input[type=checkbox]:checked + label:before {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f; }
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f; }
|
||||
.checkbox-danger input[type=checkbox]:checked + label:after {
|
||||
color: #fff; }
|
||||
color: #fff; }
|
||||
|
||||
.checkbox-info input[type=checkbox]:checked + label:before {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de; }
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de; }
|
||||
.checkbox-info input[type=checkbox]:checked + label:after {
|
||||
color: #fff; }
|
||||
color: #fff; }
|
||||
|
||||
.checkbox-warning input[type=checkbox]:checked + label:before {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e; }
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e; }
|
||||
.checkbox-warning input[type=checkbox]:checked + label:after {
|
||||
color: #fff; }
|
||||
color: #fff; }
|
||||
|
||||
.checkbox-success input[type=checkbox]:checked + label:before {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c; }
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c; }
|
||||
.checkbox-success input[type=checkbox]:checked + label:after {
|
||||
color: #fff; }
|
||||
color: #fff; }
|
||||
|
||||
.radio label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px; }
|
||||
.radio label:before {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px; }
|
||||
.radio label:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 17px;
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out; }
|
||||
.radio label:after {
|
||||
.radio label:after {
|
||||
display: inline-block;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
|
|
@ -106,47 +106,47 @@
|
|||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
|
||||
.radio input[type=radio] {
|
||||
display: none; }
|
||||
.radio input[type=radio]:checked + label:after {
|
||||
display: none; }
|
||||
.radio input[type=radio]:checked + label:after {
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
.radio input[type=radio]:disabled + label {
|
||||
.radio input[type=radio]:disabled + label {
|
||||
opacity: 0.65; }
|
||||
.radio input[type=radio]:disabled + label:before {
|
||||
cursor: not-allowed; }
|
||||
.radio input[type=radio]:disabled + label:before {
|
||||
cursor: not-allowed; }
|
||||
|
||||
.radio-primary input[type=radio] + label:after {
|
||||
background-color: #428bca; }
|
||||
background-color: #428bca; }
|
||||
.radio-primary input[type=radio]:checked + label:before {
|
||||
border-color: #428bca; }
|
||||
border-color: #428bca; }
|
||||
.radio-primary input[type=radio]:checked + label:after {
|
||||
background-color: #428bca; }
|
||||
background-color: #428bca; }
|
||||
|
||||
.radio-danger input[type=radio] + label:after {
|
||||
background-color: #d9534f; }
|
||||
background-color: #d9534f; }
|
||||
.radio-danger input[type=radio]:checked + label:before {
|
||||
border-color: #d9534f; }
|
||||
border-color: #d9534f; }
|
||||
.radio-danger input[type=radio]:checked + label:after {
|
||||
background-color: #d9534f; }
|
||||
background-color: #d9534f; }
|
||||
|
||||
.radio-info input[type=radio] + label:after {
|
||||
background-color: #5bc0de; }
|
||||
background-color: #5bc0de; }
|
||||
.radio-info input[type=radio]:checked + label:before {
|
||||
border-color: #5bc0de; }
|
||||
border-color: #5bc0de; }
|
||||
.radio-info input[type=radio]:checked + label:after {
|
||||
background-color: #5bc0de; }
|
||||
background-color: #5bc0de; }
|
||||
|
||||
.radio-warning input[type=radio] + label:after {
|
||||
background-color: #f0ad4e; }
|
||||
background-color: #f0ad4e; }
|
||||
.radio-warning input[type=radio]:checked + label:before {
|
||||
border-color: #f0ad4e; }
|
||||
border-color: #f0ad4e; }
|
||||
.radio-warning input[type=radio]:checked + label:after {
|
||||
background-color: #f0ad4e; }
|
||||
background-color: #f0ad4e; }
|
||||
|
||||
.radio-success input[type=radio] + label:after {
|
||||
background-color: #5cb85c; }
|
||||
background-color: #5cb85c; }
|
||||
.radio-success input[type=radio]:checked + label:before {
|
||||
border-color: #5cb85c; }
|
||||
border-color: #5cb85c; }
|
||||
.radio-success input[type=radio]:checked + label:after {
|
||||
background-color: #5cb85c; }
|
||||
background-color: #5cb85c; }
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
&:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $input-border;
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
|
||||
&:after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
|
|
@ -45,7 +46,6 @@
|
|||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
color: $gray;
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
}
|
||||
|
||||
.radio{
|
||||
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -113,9 +113,9 @@
|
|||
&:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $input-border;
|
||||
|
|
@ -126,13 +126,13 @@
|
|||
|
||||
&:after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: $gray;
|
||||
@include scale(0);
|
||||
|
|
@ -5,9 +5,9 @@
|
|||
.checkbox label:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
|
||||
.checkbox label:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
|
|
@ -24,7 +25,6 @@
|
|||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
color: #555555; }
|
||||
.checkbox input[type=checkbox] {
|
||||
|
|
@ -77,9 +77,9 @@
|
|||
.radio label:before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
|
|
@ -89,13 +89,13 @@
|
|||
transition: border 0.15s ease-in-out; }
|
||||
.radio label:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background-color: #555555;
|
||||
-webkit-transform: scale(0);
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
|
||||
@import "../bower_components/Font-Awesome/scss/variables";
|
||||
|
||||
@import "../font-awesome-checkbox";
|
||||
@import "../awesome-bootstrap-checkbox";
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Bootstrap checkbox demo</title>
|
||||
<title>awesome bootstrap checkbox demo</title>
|
||||
<link rel="stylesheet" href="bootstrap.css"/>
|
||||
<link rel="stylesheet" href="../bower_components/Font-Awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="build.css"/>
|
||||
|
|
@ -20,6 +20,11 @@
|
|||
<p>
|
||||
Supports bootstrap brand colors: <code>.checkbox-primary</code>, <code>.checkbox-info</code> etc.
|
||||
</p>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<input id="checkbox1" type="checkbox">
|
||||
<label for="checkbox1">
|
||||
|
|
|
|||
Loading…
Reference in a new issue