| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 Polymer('paper-checkbox', { | 3 Polymer('paper-checkbox', { |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * Fired when the checked state changes due to user interaction. | 6 * Fired when the checked state changes due to user interaction. |
| 7 * | 7 * |
| 8 * @event change | 8 * @event change |
| 9 */ | 9 */ |
| 10 | 10 |
| 11 /** | 11 /** |
| 12 * Fired when the checked state changes. | 12 * Fired when the checked state changes. |
| 13 * | 13 * |
| 14 * @event core-change | 14 * @event core-change |
| 15 */ | 15 */ |
| 16 | 16 |
| 17 toggles: true, | 17 toggles: true, |
| 18 | 18 |
| 19 checkedChanged: function() { | 19 checkedChanged: function() { |
| 20 var cl = this.$.checkbox.classList; | 20 this.$.checkbox.classList.toggle('checked', this.checked); |
| 21 cl.toggle('checked', this.checked); | |
| 22 cl.toggle('unchecked', !this.checked); | |
| 23 cl.toggle('checkmark', !this.checked); | |
| 24 cl.toggle('box', this.checked); | |
| 25 this.setAttribute('aria-checked', this.checked ? 'true': 'false'); | 21 this.setAttribute('aria-checked', this.checked ? 'true': 'false'); |
| 22 this.$.checkmark.classList.toggle('hidden', !this.checked); |
| 26 this.fire('core-change'); | 23 this.fire('core-change'); |
| 27 }, | 24 }, |
| 28 | 25 |
| 29 checkboxAnimationEnd: function() { | 26 checkboxAnimationEnd: function() { |
| 30 var cl = this.$.checkbox.classList; | 27 var cl = this.$.checkmark.classList; |
| 31 cl.toggle('checkmark', this.checked && !cl.contains('checkmark')); | 28 cl.toggle('hidden', !this.checked && cl.contains('hidden')); |
| 32 cl.toggle('box', !this.checked && !cl.contains('box')); | |
| 33 } | 29 } |
| 34 | 30 |
| 35 }); | 31 }); |
| 36 | 32 |
| OLD | NEW |