Skip to content

Commit ebedab3

Browse files
okendokenokendoken
committed
less version
1 parent 418f426 commit ebedab3

File tree

4 files changed

+381
-3
lines changed

4 files changed

+381
-3
lines changed

‎awesome-bootstrap-checkbox.less

+177
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
//
2+
// Checkboxes
3+
// --------------------------------------------------
4+
5+
.checkbox-variant(@parent, @color) {
6+
.@{parent} input[type="checkbox"]:checked + label {
7+
&::before {
8+
background-color: @color;
9+
border-color: @color;
10+
}
11+
&::after {
12+
color: #fff;
13+
}
14+
}
15+
}
16+
17+
18+
.checkbox{
19+
padding-left: 20px;
20+
21+
label{
22+
display: inline-block;
23+
position: relative;
24+
padding-left: 5px;
25+
26+
&::before{
27+
content: "";
28+
display: inline-block;
29+
position: absolute;
30+
width: 17px;
31+
height: 17px;
32+
left: 0;
33+
margin-left: -20px;
34+
border: 1px solid @input-border;
35+
border-radius: 3px;
36+
background-color: #fff;
37+
.transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
38+
}
39+
40+
&::after{
41+
display: inline-block;
42+
position: absolute;
43+
width: 16px;
44+
height: 16px;
45+
left: 0;
46+
top: 0;
47+
margin-left: -20px;
48+
padding-left: 3px;
49+
padding-top: 1px;
50+
font-size: 11px;
51+
color: @gray;
52+
}
53+
}
54+
55+
input[type="checkbox"]{
56+
display: none;
57+
58+
&:checked + label::after{
59+
font-family: 'FontAwesome';
60+
content: @fa-var-check;
61+
}
62+
63+
&:disabled + label{
64+
opacity: 0.65;
65+
66+
&::before{
67+
background-color: @gray-lighter;
68+
cursor: not-allowed;
69+
}
70+
}
71+
72+
}
73+
74+
&.checkbox-circle label::before{
75+
border-radius: 50%;
76+
}
77+
78+
&.checkbox-inline{
79+
margin-top: 0;
80+
}
81+
}
82+
83+
.checkbox-variant(checkbox-primary, @brand-primary);
84+
.checkbox-variant(checkbox-danger, @brand-danger);
85+
.checkbox-variant(checkbox-info, @brand-info);
86+
.checkbox-variant(checkbox-warning, @brand-warning);
87+
.checkbox-variant(checkbox-success, @brand-success);
88+
89+
//
90+
// Radios
91+
// --------------------------------------------------
92+
93+
.radio-variant(@parent, @color) {
94+
.@{parent} input[type="radio"]{
95+
& + label{
96+
&::after{
97+
background-color: @color;
98+
}
99+
}
100+
&:checked + label{
101+
&::before {
102+
border-color: @color;
103+
}
104+
&::after{
105+
background-color: @color;
106+
}
107+
}
108+
}
109+
}
110+
111+
.radio{
112+
padding-left: 20px;
113+
114+
label{
115+
display: inline-block;
116+
position: relative;
117+
padding-left: 5px;
118+
119+
&::before{
120+
content: "";
121+
display: inline-block;
122+
position: absolute;
123+
width: 17px;
124+
height: 17px;
125+
left: 0;
126+
margin-left: -20px;
127+
border: 1px solid @input-border;
128+
border-radius: 50%;
129+
background-color: #fff;
130+
.transition(border 0.15s ease-in-out);
131+
}
132+
133+
&::after{
134+
display: inline-block;
135+
position: absolute;
136+
content: " ";
137+
width: 11px;
138+
height: 11px;
139+
left: 3px;
140+
top: 3px;
141+
margin-left: -20px;
142+
border-radius: 50%;
143+
background-color: @gray;
144+
.scale(0, 0);
145+
146+
.transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
147+
//curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
148+
}
149+
}
150+
151+
input[type="radio"]{
152+
display: none;
153+
154+
&:checked + label::after{
155+
.scale(1, 1);
156+
}
157+
158+
&:disabled + label{
159+
opacity: 0.65;
160+
161+
&::before{
162+
cursor: not-allowed;
163+
}
164+
}
165+
166+
}
167+
168+
&.radio-inline{
169+
margin-top: 0;
170+
}
171+
}
172+
173+
.radio-variant(radio-primary, @brand-primary);
174+
.radio-variant(radio-danger, @brand-danger);
175+
.radio-variant(radio-info, @brand-info);
176+
.radio-variant(radio-warning, @brand-warning);
177+
.radio-variant(radio-success, @brand-success);

‎bower.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "awesome-bootstrap-checkbox",
33
"main": ["awesome-bootstrap-checkbox.css", "awesome-bootstrap-checkbox.scss"],
4-
"version": "0.1.2",
4+
"version": "0.2.1",
55
"authors": [
66
"okendoken flatlogic.com"
77
],
@@ -11,7 +11,5 @@
1111
"bower_components"
1212
],
1313
"dependencies": {
14-
"bootstrap-sass-official": "3.2.0+1",
15-
"Font-Awesome": "~4.1.0"
1614
}
1715
}

‎demo/build.less

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "../bower_components/bootstrap/less/variables";
2+
@import "../bower_components/bootstrap/less/mixins";
3+
4+
@import "../bower_components/Font-Awesome/less/variables";
5+
6+
@import "../awesome-bootstrap-checkbox";

0 commit comments

Comments
 (0)