└── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | Custom Animated Checkboxes
 2 | ==========================
 3 | 
 4 | You should watch the [20min video tutorial on YouTube!](http://youtu.be/oh2JLo2yxCM)
 5 | 
 6 | ---
 7 | 
 8 | **HTML Markup**
 9 | 
10 | ```
11 | <form>
12 |   
13 |   <h5>Custom Checkboxes</h5>
14 |   
15 |   <label>
16 |   
17 |     <!-- Keep the input inside the label -->
18 |     <input type="checkbox">
19 |     
20 |     <!-- make sure the .label-text is right next to the input-->
21 |     <span class="label-text">Item One</span>
22 |     
23 |   </label>
24 |   
25 |   <label>
26 |     <input type="checkbox" disabled>
27 |     <span class="label-text">Item Two</span>
28 |   </label>
29 |   
30 |   <label>
31 |     <input type="checkbox" disabled>
32 |     <span class="label-text">Item Three</span>
33 |   </label>
34 | 
35 | </form>
36 | ```
37 | 
38 | 
39 | **SASS Styles**
40 | ```
41 | // Import FontAwesome
42 | @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
43 | 
44 | label
45 |   cursor: pointer
46 |   color: #666
47 |   
48 |   // Remove the default checkbox
49 |   input[type="checkbox"] 
50 |     display: none
51 |     
52 |     // Insert the new checkbox from FontAwesome
53 |     + .label-text:before
54 |       content: "\f096"
55 |       font-family: "FontAwesome"
56 |       speak: none
57 |       font-style: normal
58 |       font-weight: normal
59 |       font-variant: normal
60 |       text-transform: none
61 |       line-height: 1
62 |       -webkit-font-smoothing: antialiased
63 |       width: 1em
64 |       display: inline-block
65 |       margin-right: 5px
66 |     
67 |     // When the checkbox is checked...
68 |     &:checked + .label-text:before
69 |       content: "\f14a"
70 |       color: #06a3e9
71 |       +animation(tick 180ms ease-in)
72 |     
73 |     // When the checkbox is disabled...
74 |     &:disabled + .label-text
75 |       color: #aaa
76 |       
77 |       &:before
78 |         content: "\f0c8"
79 |         color: #ccc
80 |         
81 | 
82 | // Bounce the checked checkbox
83 | +keyframes(tick)
84 |   0%
85 |     +transform(scale(0))
86 |   
87 |   90%
88 |     +transform(scale(1.4))
89 |   
90 |   100%
91 |     +transform(scale(1))
92 |   
93 | ```
94 | 


--------------------------------------------------------------------------------