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

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules/
2-
test/
2+
test/
3+
yarn.lock

‎README.md

Lines changed: 21 additions & 109 deletions
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

‎package.json

Lines changed: 1 addition & 1 deletion
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": {},

‎src/pretty.css

Lines changed: 36 additions & 37 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy