mirror of
https://github.com/friendica/friendica
synced 2025-04-22 01:50:11 +00:00
first files - move to Version 0.1
This commit is contained in:
rabuzarus
parent
69865ea843
commit
65d37a8c20
257 changed files with 40746 additions and 1 deletions
21
frameworks/awesome-bootstrap-checkbox/LICENSE
Normal file
21
frameworks/awesome-bootstrap-checkbox/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
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
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
187
frameworks/awesome-bootstrap-checkbox/README.md
Normal file
187
frameworks/awesome-bootstrap-checkbox/README.md
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
Awesome Bootstrap Checkbox
|
||||
==========================
|
||||
|
||||
[](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
|
||||
[](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
|
||||
[](https://www.npmjs.com/package/awesome-bootstrap-checkbox)
|
||||
[](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][]**
|
||||
|
||||
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:
|
||||
|
||||
````html
|
||||
<form role="form">
|
||||
...
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> Check me out
|
||||
</label>
|
||||
</div>
|
||||
...
|
||||
</form>
|
||||
````
|
||||
|
||||
We have to alter it a bit:
|
||||
````html
|
||||
<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.
|
||||
|
||||
If you want to enable **Opera 12** and earlier support just add class `styled` to `input` element:
|
||||
````html
|
||||
...
|
||||
<input type="checkbox" id="checkbox1" class="styled">
|
||||
...
|
||||
````
|
||||
|
||||
Browser support
|
||||
-----------
|
||||
- Firefox (_3.6+_)
|
||||
- Chrome (_14+_)
|
||||
- IE (_9+_)
|
||||
- Opera (_11.6+_)
|
||||
- Safari (_6+_)
|
||||
|
||||
Radios
|
||||
------------
|
||||
|
||||
It's the same for radios. Markup has to be the following:
|
||||
````html
|
||||
<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 and other features
|
||||
------------
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
------------
|
||||
|
||||
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 {
|
||||
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
|
||||
------------
|
||||
|
||||
Based on the [Official Bootstrap Sass port][Bootstrap Sass] and the awesome [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/
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
.checkbox {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.checkbox label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.checkbox label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
-o-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 {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: #555555;
|
||||
}
|
||||
.checkbox input[type="checkbox"],
|
||||
.checkbox input[type="radio"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:focus + label::before,
|
||||
.checkbox input[type="radio"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:checked + label::after,
|
||||
.checkbox input[type="radio"]:checked + label::after {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f00c";
|
||||
}
|
||||
.checkbox input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox input[type="radio"]:indeterminate + label::after {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background-color: #555555;
|
||||
border-radius: 2px;
|
||||
margin-left: -16.5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:disabled + label,
|
||||
.checkbox input[type="radio"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.checkbox input[type="checkbox"]:disabled + label::before,
|
||||
.checkbox input[type="radio"]:disabled + label::before {
|
||||
background-color: #eeeeee;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.checkbox.checkbox-circle label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.checkbox.checkbox-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-primary input[type="radio"]:checked + label::before {
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.checkbox-primary input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-primary input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-danger input[type="radio"]:checked + label::before {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.checkbox-danger input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-danger input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-info input[type="radio"]:checked + label::before {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.checkbox-info input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-info input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-warning input[type="radio"]:checked + label::before {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.checkbox-warning input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-warning input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:checked + label::before,
|
||||
.checkbox-success input[type="radio"]:checked + label::before {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.checkbox-success input[type="checkbox"]:checked + label::after,
|
||||
.checkbox-success input[type="radio"]:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-primary input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #337ab7;
|
||||
border-color: #337ab7;
|
||||
}
|
||||
|
||||
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-primary input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-danger input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #d9534f;
|
||||
border-color: #d9534f;
|
||||
}
|
||||
|
||||
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-danger input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-info input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #5bc0de;
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
|
||||
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-info input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-warning input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #f0ad4e;
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-warning input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
|
||||
.checkbox-success input[type="radio"]:indeterminate + label::before {
|
||||
background-color: #5cb85c;
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
|
||||
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
|
||||
.checkbox-success input[type="radio"]:indeterminate + label::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.radio {
|
||||
padding-left: 20px;
|
||||
}
|
||||
.radio label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.radio label::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out;
|
||||
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;
|
||||
border-radius: 50%;
|
||||
background-color: #555555;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-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"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.radio input[type="radio"]:focus + label::before {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.radio input[type="radio"]:checked + label::after {
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.radio input[type="radio"]:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.radio input[type="radio"]:disabled + label::before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.radio.radio-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.radio-primary input[type="radio"] + label::after {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
.radio-primary input[type="radio"]:checked + label::before {
|
||||
border-color: #337ab7;
|
||||
}
|
||||
.radio-primary input[type="radio"]:checked + label::after {
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.radio-danger input[type="radio"] + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
.radio-danger input[type="radio"]:checked + label::before {
|
||||
border-color: #d9534f;
|
||||
}
|
||||
.radio-danger input[type="radio"]:checked + label::after {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.radio-info input[type="radio"] + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
.radio-info input[type="radio"]:checked + label::before {
|
||||
border-color: #5bc0de;
|
||||
}
|
||||
.radio-info input[type="radio"]:checked + label::after {
|
||||
background-color: #5bc0de;
|
||||
}
|
||||
|
||||
.radio-warning input[type="radio"] + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
.radio-warning input[type="radio"]:checked + label::before {
|
||||
border-color: #f0ad4e;
|
||||
}
|
||||
.radio-warning input[type="radio"]:checked + label::after {
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
.radio-success input[type="radio"] + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
.radio-success input[type="radio"]:checked + label::before {
|
||||
border-color: #5cb85c;
|
||||
}
|
||||
.radio-success input[type="radio"]:checked + label::after {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
input[type="checkbox"].styled:checked + label:after,
|
||||
input[type="radio"].styled:checked + label:after {
|
||||
font-family: 'FontAwesome';
|
||||
content: "\f00c";
|
||||
}
|
||||
input[type="checkbox"] .styled:checked + label::before,
|
||||
input[type="radio"] .styled:checked + label::before {
|
||||
color: #fff;
|
||||
}
|
||||
input[type="checkbox"] .styled:checked + label::after,
|
||||
input[type="radio"] .styled:checked + label::after {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
//
|
||||
// Checkboxes
|
||||
// --------------------------------------------------
|
||||
|
||||
@font-family-icon: 'FontAwesome';
|
||||
@fa-var-check: "\f00c";
|
||||
@check-icon: @fa-var-check;
|
||||
|
||||
.checkbox-variant(@parent, @color) {
|
||||
.@{parent} input[type="checkbox"]:checked + label,
|
||||
.@{parent} input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
&::after {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-variant-indeterminate(@parent, @color) {
|
||||
.@{parent} input[type="checkbox"]:indeterminate + label,
|
||||
.@{parent} input[type="radio"]:indeterminate + label {
|
||||
&::before {
|
||||
background-color: @color;
|
||||
border-color: @color;
|
||||
}
|
||||
&::after {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox{
|
||||
padding-left: 20px;
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
.transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
|
||||
}
|
||||
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: @input-color;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"]{
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:focus + label::before{
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
&:checked + label::after{
|
||||
font-family: @font-family-icon;
|
||||
content: @check-icon;
|
||||
}
|
||||
|
||||
&:indeterminate + label::after{
|
||||
display: block;
|
||||
content: " ";
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background-color: #555555;
|
||||
border-radius: 2px;
|
||||
margin-left: -16.5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
&:disabled + label{
|
||||
opacity: 0.65;
|
||||
|
||||
&::before{
|
||||
background-color: @input-bg-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.checkbox-circle label::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-variant(checkbox-primary, @brand-primary);
|
||||
.checkbox-variant(checkbox-danger, @brand-danger);
|
||||
.checkbox-variant(checkbox-info, @brand-info);
|
||||
.checkbox-variant(checkbox-warning, @brand-warning);
|
||||
.checkbox-variant(checkbox-success, @brand-success);
|
||||
|
||||
.checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
|
||||
.checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
|
||||
.checkbox-variant-indeterminate(checkbox-info, @brand-info);
|
||||
.checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
|
||||
.checkbox-variant-indeterminate(checkbox-success, @brand-success);
|
||||
|
||||
//
|
||||
// Radios
|
||||
// --------------------------------------------------
|
||||
|
||||
.radio-variant(@parent, @color) {
|
||||
.@{parent} input[type="radio"]{
|
||||
& + label{
|
||||
&::after{
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
&:checked + label{
|
||||
&::before {
|
||||
border-color: @color;
|
||||
}
|
||||
&::after{
|
||||
background-color: @color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio{
|
||||
padding-left: 20px;
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid @input-border;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
.transition(border 0.15s ease-in-out);
|
||||
}
|
||||
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: @input-color;
|
||||
.scale(0, 0);
|
||||
|
||||
.transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
|
||||
//curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"]{
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:focus + label::before{
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
&:checked + label::after{
|
||||
.scale(1, 1);
|
||||
}
|
||||
|
||||
&:disabled + label{
|
||||
opacity: 0.65;
|
||||
|
||||
&::before{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.radio-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-variant(radio-primary, @brand-primary);
|
||||
.radio-variant(radio-danger, @brand-danger);
|
||||
.radio-variant(radio-info, @brand-info);
|
||||
.radio-variant(radio-warning, @brand-warning);
|
||||
.radio-variant(radio-success, @brand-success);
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
&.styled:checked + label:after {
|
||||
font-family: @font-family-icon;
|
||||
content: @check-icon;
|
||||
}
|
||||
& .styled:checked + label {
|
||||
&::before {
|
||||
color: #fff;
|
||||
}
|
||||
&::after {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
//
|
||||
// Checkboxes
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
$font-family-icon: 'FontAwesome' !default;
|
||||
$fa-var-check: "\f00c" !default;
|
||||
$check-icon: $fa-var-check !default;
|
||||
|
||||
@mixin checkbox-variant($parent, $color) {
|
||||
#{$parent} input[type="checkbox"]:checked + label,
|
||||
#{$parent} input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&::after{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin checkbox-variant-indeterminate($parent, $color) {
|
||||
#{$parent} input[type="checkbox"]:indeterminate + label,
|
||||
#{$parent} input[type="radio"]:indeterminate + label {
|
||||
&::before {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
&::after{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.checkbox{
|
||||
padding-left: 20px;
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 3px;
|
||||
background-color: #fff;
|
||||
@include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
|
||||
}
|
||||
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:focus + label::before{
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
&:checked + label::after{
|
||||
font-family: $font-family-icon;
|
||||
content: $check-icon;
|
||||
}
|
||||
|
||||
&:indeterminate + label::after{
|
||||
display: block;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background-color: #555555;
|
||||
border-radius: 2px;
|
||||
margin-left: -16.5px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
&:disabled + label{
|
||||
opacity: 0.65;
|
||||
|
||||
&::before{
|
||||
background-color: $input-bg-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.checkbox-circle label::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include checkbox-variant('.checkbox-primary', $brand-primary);
|
||||
@include checkbox-variant('.checkbox-danger', $brand-danger);
|
||||
@include checkbox-variant('.checkbox-info', $brand-info);
|
||||
@include checkbox-variant('.checkbox-warning', $brand-warning);
|
||||
@include checkbox-variant('.checkbox-success', $brand-success);
|
||||
|
||||
|
||||
@include checkbox-variant-indeterminate('.checkbox-primary', $brand-primary);
|
||||
@include checkbox-variant-indeterminate('.checkbox-danger', $brand-danger);
|
||||
@include checkbox-variant-indeterminate('.checkbox-info', $brand-info);
|
||||
@include checkbox-variant-indeterminate('.checkbox-warning', $brand-warning);
|
||||
@include checkbox-variant-indeterminate('.checkbox-success', $brand-success);
|
||||
|
||||
//
|
||||
// Radios
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin radio-variant($parent, $color) {
|
||||
#{$parent} input[type="radio"]{
|
||||
+ label{
|
||||
&::after{
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
&:checked + label{
|
||||
&::before {
|
||||
border-color: $color;
|
||||
}
|
||||
&::after{
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio{
|
||||
padding-left: 20px;
|
||||
|
||||
label{
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $input-border;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
@include transition(border 0.15s ease-in-out);
|
||||
}
|
||||
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
left: 3px;
|
||||
top: 3px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: $input-color;
|
||||
@include scale(0, 0);
|
||||
|
||||
@include transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
|
||||
//curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"]{
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
|
||||
&:focus + label::before{
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
&:checked + label::after{
|
||||
@include scale(1, 1);
|
||||
}
|
||||
|
||||
&:disabled + label{
|
||||
opacity: 0.65;
|
||||
|
||||
&::before{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.radio-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include radio-variant('.radio-primary', $brand-primary);
|
||||
@include radio-variant('.radio-danger', $brand-danger);
|
||||
@include radio-variant('.radio-info', $brand-info);
|
||||
@include radio-variant('.radio-warning', $brand-warning);
|
||||
@include radio-variant('.radio-success', $brand-success);
|
||||
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
&.styled:checked + label:after {
|
||||
font-family: $font-family-icon;
|
||||
content: $check-icon;
|
||||
}
|
||||
.styled:checked + label {
|
||||
&::before {
|
||||
color: #fff;
|
||||
}
|
||||
&::after {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
22
frameworks/awesome-bootstrap-checkbox/bower.json
Normal file
22
frameworks/awesome-bootstrap-checkbox/bower.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "awesome-bootstrap-checkbox",
|
||||
"main": [
|
||||
"awesome-bootstrap-checkbox.css",
|
||||
"awesome-bootstrap-checkbox.scss"
|
||||
],
|
||||
"version": "0.3.7",
|
||||
"homepage": "https://github.com/flatlogic/awesome-bootstrap-checkbox",
|
||||
"authors": [
|
||||
"okendoken flatlogic.com"
|
||||
],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"bower_components"
|
||||
],
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"bootstrap-sass-official": "3.3.3",
|
||||
"font-awesome-sass": "4.3.1"
|
||||
}
|
||||
}
|
||||
32
frameworks/awesome-bootstrap-checkbox/package.json
Normal file
32
frameworks/awesome-bootstrap-checkbox/package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "awesome-bootstrap-checkbox",
|
||||
"version": "0.3.7",
|
||||
"description": "Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.",
|
||||
"main": "awesome-bootstrap-checkbox.css",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/flatlogic/awesome-bootstrap-checkbox.git"
|
||||
},
|
||||
"keywords": [
|
||||
"bootstrap",
|
||||
"font-awesome",
|
||||
"scss",
|
||||
"less"
|
||||
],
|
||||
"author": "contact@flatlogic.com (http://flatlogic.com)",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/flatlogic/awesome-bootstrap-checkbox/issues"
|
||||
},
|
||||
"homepage": "https://github.com/flatlogic/awesome-bootstrap-checkbox",
|
||||
"files": [
|
||||
"demo",
|
||||
"awesome-bootstrap-checkbox.css",
|
||||
"awesome-bootstrap-checkbox.scss",
|
||||
"awesome-bootstrap-checkbox.less",
|
||||
"bower.json"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue