Skip to content

Commit 15b52dc

Browse files
authored
Update README.md
1 parent db0b8ce commit 15b52dc

File tree

1 file changed

+14
-97
lines changed

1 file changed

+14
-97
lines changed

README.md

Lines changed: 14 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,15 @@ Checkbox markup,
5858
<label><i class="mdi mdi-check"></i> Primary</label>
5959
</div>
6060
```
61+
Color variants: `primary` `success` `warning` `info` `danger`
6162
##### Outline Checkbox color
6263
```html
6364
<div class="pretty inline outline-primary">
6465
<input type="checkbox"/>
6566
<label><i class="mdi mdi-check"></i> Outline primary</label>
6667
</div>
6768
```
69+
Color variants: `outline-primary` `outline-success` `outline-warning` `outline-info` `outline-danger`
6870
##### Without border - plain checkbox
6971
```html
7072
<div class="pretty inline outline-success plain">
@@ -131,63 +133,10 @@ Checkbox markup,
131133
<label><i class="mdi mdi-gender-female"></i> Female</label>
132134
</div>
133135
```
134-
##### Boxed radio
135-
```html
136-
<div class="pretty inline">
137-
<input type="radio" name="radio2">
138-
<label><i class="mdi mdi-check"></i> Check</label>
139-
</div>
136+
All the features in the checkbox is supported for radio buttons. It includes
137+
`Boxed radio button` `Solid Color radio` `Outline Color radio` `Radio button without border` `Animated radio button` `Disabled radio button` `Toggle radio button`.
140138

141-
```
142-
##### Solid Color radio
143-
```html
144-
<div class="pretty inline circle primary">
145-
<input type="radio" name="radio3">
146-
<label><i class="mdi mdi-check"></i> Primary</label>
147-
</div>
148139

149-
```
150-
##### Outline Color radio
151-
```html
152-
<div class="pretty inline circle outline-primary">
153-
<input type="radio" name="radio4">
154-
<label><i class="mdi mdi-check"></i> $10</label>
155-
</div>
156-
```
157-
##### Radio button without border
158-
```html
159-
<div class="pretty inline circle plain outline-primary">
160-
<input type="radio" name="radio5">
161-
<label><i class="mdi mdi-human"></i> Single</label>
162-
</div>
163-
```
164-
##### Animated radio button
165-
```html
166-
<div class="pretty inline circle smooth outline-primary">
167-
<input type="radio" name="radio44">
168-
<label><i class="mdi mdi-emoticon-cool"></i> Cool</label>
169-
</div>
170-
```
171-
##### Disabled radio button
172-
```html
173-
<div class="pretty inline circle">
174-
<input type="radio" name="radio6" disabled>
175-
<label><i class="mdi mdi-gender-male"></i> Today</label>
176-
</div>
177-
```
178-
##### Toggle radio button
179-
```html
180-
<div class="pretty inline circle plain toggle">
181-
<input type="radio" name="radio8">
182-
<label><i class="mdi mdi-bluetooth-off"></i> Bluetooth</label>
183-
<label><i class="mdi mdi-bluetooth success"></i> Bluetooth</label>
184-
</div>
185-
<div class="pretty inline circle plain toggle">
186-
<input type="radio" name="radio8">
187-
<label><i class="mdi mdi-wifi-off"></i> Wifi</label>
188-
<label><i class="mdi mdi-wifi info"></i> Wifi</label>
189-
</div>
190-
```
191140
##### Toggle radio button without labels
192141
```html
193142
<div class="pretty inline circle plain toggle">
@@ -203,48 +152,16 @@ Checkbox markup,
203152
```
204153

205154
### Custom font library
206-
##### Font awesome
207-
```html
208-
<div class="pretty inline success smooth">
209-
<input type="checkbox">
210-
<label><i class="fa fa-check"></i> fa-check</label>
211-
</div>
212-
```
213-
##### Glyphicon
214-
```html
215-
<div class="pretty inline success smooth">
216-
<input type="checkbox">
217-
<label><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</label>
218-
</div>
219-
```
220-
##### Material Design icons (mdi)
221-
```html
222-
<div class="pretty inline success smooth">
223-
<input type="checkbox">
224-
<label><i class="mdi mdi-check"></i> mdi-check</label>
225-
</div>
226-
```
227-
##### Material Design icons (zmdi)
228-
```html
229-
<div class="pretty inline success smooth">
230-
<input type="checkbox">
231-
<label><i class="zmdi zmdi-check"></i> zmdi-check</label>
232-
</div>
233-
```
234-
##### Typicons
235-
```html
236-
<div class="pretty inline success smooth">
237-
<input type="checkbox">
238-
<label><i class="typcn typcn-tick"></i>typcn-tick</label>
239-
</div>
240-
```
241-
##### Ionicons
242-
```html
243-
<div class="pretty inline success smooth">
244-
<input type="checkbox">
245-
<label><i class="ion-checkmark-round"></i> ion-checkmark-round</label>
246-
</div>
247-
```
155+
156+
This library supports wide variety of font icon libraries. Currently tested with `FontAwesome` ,`Bootstrap Glyphicon` `Material Design icons (mdi)` `Material Design icons (zmdi)` `Typicons` `Ionicons`.
157+
158+
### What else
159+
160+
- Scalable. can be used in any font sizes
161+
- Used in frameworks like bootstrap, foundation, sematic UI
162+
- Supported in all mordern browsers, including mobile devices
163+
- Customizable. see the demo for `sass` settings
164+
- MIT Licence
248165

249166
Thats all, folks!
250167

0 commit comments

Comments
 (0)