Skip to content

Commit ed2839b

Browse files
author
lo kesh
committed
minor bug fixes and changed sass variables
1 parent 42fcb17 commit ed2839b

16 files changed

+370
-397
lines changed

Diff for: ‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
2-
test/
2+
test/
3+
yarn.lock

Diff for: ‎README.md

+21-109
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
# Pretty checkbox
22

3-
No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**!
3+
No more boring old fashioned checkboxes. New scalable CSS3 pretty checkbox and radio buttons with custom font icon library. **Only CSS**!
44

55
Check it out the [Demo](https://lokesh-coder.github.io/pretty-checkbox/) for complete documentation.
66

77
### Get started
88

9-
Install the library from `bower` or `npm` package manager
9+
Install the library from `bower` , `npm` or `yarn` package manager
1010

1111
```sh
1212
> bower install pretty-checkbox
1313
```
1414
```sh
1515
> npm install pretty-checkbox
1616
```
17+
```sh
18+
> yarn add pretty-checkbox
19+
```
1720
Add `pretty.min.css` in your html
1821

19-
From CDN,
22+
From CDN,
2023
```html
21-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.0.2/pretty.min.css"/>
24+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.1.0/pretty.min.css"/>
2225
```
2326
or from the source,
2427
```html
@@ -34,127 +37,36 @@ You can also import `pretty.scss` in your main scss file.
3437
Checkbox markup,
3538
```html
3639
<div class="pretty">
37-
<input type="checkbox"/>
40+
<input type="checkbox"/>
3841
<label><i class="mdi mdi-check"></i> Buy vegetables</label>
3942
</div>
4043
```
4144

42-
### checkbox Features
45+
### Basic examples
4346

44-
##### Inline checkbox
45-
```html
46-
<div class="pretty inline">
47-
<input type="checkbox"/>
48-
<label><i class="mdi mdi-close"></i> Buy vegetable</label>
49-
</div>
50-
```
51-
##### Rounded Checkbox
52-
```html
53-
<div class="pretty inline circle">
54-
<input type="checkbox"/>
55-
<label><i class="mdi mdi-check"></i> Monday</label>
56-
</div>
57-
```
47+
##### Checkbox
5848

59-
##### Solid Checkbox color
6049
```html
61-
<div class="pretty inline primary">
62-
<input type="checkbox"/>
50+
<div class="pretty primary">
51+
<input type="checkbox"/>
6352
<label><i class="mdi mdi-check"></i> Primary</label>
6453
</div>
6554
```
66-
Color variants: `primary` , `success` , `warning` , `info` , `danger`
67-
##### Outline Checkbox color
68-
```html
69-
<div class="pretty inline outline-primary">
70-
<input type="checkbox"/>
71-
<label><i class="mdi mdi-check"></i> Outline primary</label>
72-
</div>
73-
```
74-
Color variants: `outline-primary` , `outline-success` , `outline-warning` , `outline-info` , `outline-danger`
75-
##### Without border - plain checkbox
76-
```html
77-
<div class="pretty inline outline-success plain">
78-
<input type="checkbox"/>
79-
<label><i class="mdi mdi-check"></i> Oh, yes!</label>
80-
</div>
81-
```
82-
##### Animated checkbox
83-
```html
84-
<div class="pretty inline outline-danger smooth">
85-
<input type="checkbox">
86-
<label><i class="mdi mdi-close"></i> Smooth animation</label>
87-
</div>
88-
```
89-
##### Disabled checkbox
90-
```html
91-
<div class="pretty inline">
92-
<input type="checkbox" disabled>
93-
<label><i class="mdi mdi-check"></i> Disabled</label>
94-
</div>
95-
```
96-
##### Toggle checkbox
97-
```html
98-
<div class="pretty inline toggle">
99-
<input type="checkbox"/>
100-
<label><i class="mdi mdi-microphone"></i> ON</label>
101-
<label><i class="mdi mdi-microphone-off"></i> OFF</label>
102-
</div>
103-
```
104-
##### Toggle checkbox without border
105-
```html
106-
<div class="pretty inline plain toggle">
107-
<input type="checkbox"/>
108-
<label><i class="mdi mdi-wifi"></i> WIFI ON</label>
109-
<label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
110-
</div>
111-
```
112-
##### Toggle checkbox with colors
113-
```html
114-
<div class="pretty inline plain toggle">
115-
<input type="checkbox"/>
116-
<label><i class="mdi mdi-play"></i> Play</label>
117-
<label><i class="mdi mdi-pause success"></i> Pause</label>
118-
</div>
119-
```
120-
##### Toggle checkbox with alternative colors
121-
```html
122-
<div class="pretty inline plain toggle">
123-
<input type="checkbox"/>
124-
<label><i class="mdi mdi-thumb-up success"></i> Liked</label>
125-
<label><i class="mdi mdi-thumb-down danger"></i> Disliked</label>
126-
</div>
127-
```
128-
### Radio button Features
129-
130-
##### Basic radio
131-
```html
132-
<div class="pretty inline circle">
133-
<input type="radio" name="radio1">
134-
<label><i class="default"></i> Default</label>
135-
</div>
136-
<div class="pretty inline circle">
137-
<input type="radio" name="radio1">
138-
<label><i class="mdi mdi-check"></i> With icon</label>
139-
</div>
140-
```
141-
All the features in the checkbox is supported for radio buttons. It includes
142-
`Boxed radio button` , `Solid Color radio` , `Outline Color radio` , `Radio button without border` , `Animated radio button` , `Disabled radio button` , `Toggle radio button`.
14355

56+
##### Radio
14457

145-
##### Toggle radio button without labels
14658
```html
147-
<div class="pretty inline circle plain toggle">
148-
<input type="radio" name="radio9" checked>
149-
<label><i class="mdi mdi-microphone-off"></i></label>
150-
<label><i class="mdi mdi-microphone danger"></i></label>
59+
<div class="pretty">
60+
<input type="radio" name="radio">
61+
<label><i class="mdi mdi-check"></i> Option 1</label>
15162
</div>
152-
<div class="pretty inline circle plain toggle">
153-
<input type="radio" name="radio9">
154-
<label><i class="mdi mdi-microphone-off"></i></label>
155-
<label><i class="mdi mdi-microphone danger"></i></label>
63+
<div class="pretty">
64+
<input type="radio" name="radio">
65+
<label><i class="mdi mdi-check"></i> Option 2</label>
15666
</div>
15767
```
68+
Refer the [Documentation](https://lokesh-coder.github.io/pretty-checkbox/) for other features and sass settings.
69+
15870

15971
### Custom font library
16072

Diff for: ‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "pretty-checkbox",
3-
"version": "2.0.4",
3+
"version": "2.1.0",
44
"description": "Scalable css3 pretty checkbox and radio buttons with custom font icon library",
55
"main": "src/pretty.min.css",
66
"dependencies": {},

Diff for: ‎src/pretty.css

+36-37
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
}
120120

121121
@media print {
122-
.pretty:not(.toggle) input:not(:checked) + label i:before,
122+
.pretty :not(.toggle) input:not(:checked) + label i:before,
123123
.pretty > input[type='radio']:checked + label > i.default:before,
124124
.pretty i:after {
125125
-webkit-print-color-adjust: exact;
@@ -148,9 +148,10 @@
148148
}
149149

150150
.pretty {
151-
position: relative;
152151
line-height: 1;
153-
margin-bottom: 5px;
152+
position: relative;
153+
display: inline-block;
154+
margin: 0 10px 5px 0;
154155
}
155156

156157
.pretty label {
@@ -160,39 +161,47 @@
160161
.pretty > input[type='checkbox'],
161162
.pretty > input[type='radio'] {
162163
position: absolute;
163-
display: block;
164-
left: 0;
164+
z-index: 99999999;
165165
top: 0;
166-
height: 100%;
166+
left: 0;
167+
display: block;
167168
width: 100%;
168-
opacity: 0;
169+
height: 100%;
169170
margin: 0;
170171
cursor: pointer;
171-
z-index: 99999999;
172+
opacity: 0;
172173
}
173174

174175
.pretty i {
175176
font-size: 1em !important;
177+
position: relative;
178+
display: inline-block;
179+
box-sizing: initial;
180+
min-width: 1em;
181+
margin-right: 6px;
182+
padding: 1px;
183+
text-align: center;
176184
}
177185

178186
.pretty i:before {
179-
margin-right: 5px;
180-
vertical-align: bottom;
181-
display: inline-block;
182-
color: transparent;
183187
position: relative;
184188
z-index: 999;
185-
left: -1px;
189+
left: 0;
190+
display: inline-block;
191+
vertical-align: bottom;
192+
color: transparent;
186193
}
187194

188195
.pretty i:after {
189-
content: '\0000';
190-
border-radius: 2px;
191-
border: 1px solid #aaa;
192196
position: absolute;
197+
top: 0;
198+
left: 0;
199+
width: 100%;
200+
height: 100%;
201+
content: '\0000';
193202
color: transparent;
194-
left: -1px;
195-
top: -1px;
203+
border: 1px solid #aaa;
204+
border-radius: 2px;
196205
}
197206

198207
.pretty > input[type='checkbox']:checked + label > i:before,
@@ -201,15 +210,16 @@
201210
}
202211

203212
.pretty > input[type='radio'] + label > i.default:before {
213+
left: 0;
214+
min-width: 1em;
204215
content: '\0000';
216+
color: transparent;
205217
border-radius: 2px;
218+
background: transparent;
206219
-webkit-transform: scale(0.8);
207220
-moz-transform: scale(0.8);
208221
-o-transform: scale(0.8);
209222
transform: scale(0.8);
210-
color: transparent;
211-
background: transparent;
212-
left: 0;
213223
}
214224

215225
.pretty > input[type='radio']:checked + label > i.default:before {
@@ -224,13 +234,12 @@
224234

225235
.pretty > input[type='checkbox'][disabled] + label,
226236
.pretty > input[type='radio'][disabled] + label {
227-
opacity: 0.5;
228237
cursor: not-allowed;
238+
opacity: .5;
229239
}
230240

231-
.pretty.inline {
232-
display: inline-block;
233-
margin-right: 20px;
241+
.pretty.plain > input[type='checkbox'] + label > i:after, .pretty.plain > input[type='radio'] + label > i:after {
242+
/* border-color:transparent;*/
234243
}
235244

236245
.pretty.plain > input[type='checkbox']:checked + label > i:after,
@@ -248,8 +257,7 @@
248257
border-color: transparent;
249258
}
250259

251-
.pretty.plain.toggle > input[type='checkbox'] + label > i:after,
252-
.pretty.plain.toggle > input[type='radio'] + label > i:after {
260+
.pretty.plain.toggle > input[type='checkbox'] + label > i:after, .pretty.plain.toggle > input[type='radio'] + label > i:after {
253261
border-color: transparent;
254262
}
255263

@@ -531,8 +539,7 @@
531539
color: #d9534f !important;
532540
}
533541

534-
.pretty.toggle > input[type='checkbox'] + label > i:before,
535-
.pretty.toggle > input[type='radio'] + label > i:before {
542+
.pretty.toggle > input[type='checkbox'] + label > i:before, .pretty.toggle > input[type='radio'] + label > i:before {
536543
color: inherit;
537544
}
538545

@@ -556,14 +563,6 @@
556563
color: inherit;
557564
}
558565

559-
.zmdi {
560-
padding-left: 2px !important;
561-
}
562-
563-
i[class*="ion-"] {
564-
padding-left: 2px;
565-
}
566-
567566
.pretty.smooth i:before {
568567
-webkit-transition: all 0.5s ease;
569568
-moz-transition: all 0.5s ease;

0 commit comments

Comments
 (0)