@@ -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
249166Thats all, folks!
250167
0 commit comments