| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 // Copyright 2014 The Chromium Authors. All rights reserved. | 2 // Copyright 2014 The Chromium Authors. All rights reserved. |
| 3 // Use of this source code is governed by a BSD-style license that can be | 3 // Use of this source code is governed by a BSD-style license that can be |
| 4 // found in the LICENSE file. | 4 // found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" /> | 6 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" /> |
| 7 | 7 |
| 8 <sky-element name="sky-checkbox" attributes="checked:boolean"> | 8 <sky-element |
| 9 name="sky-checkbox" |
| 10 attributes="checked:boolean" |
| 11 on-mouseup="handleMouseUp"> |
| 9 <template> | 12 <template> |
| 10 <style> | 13 <style> |
| 11 :host { | 14 :host { |
| 12 display: flex; | 15 display: flex; |
| 13 justify-content: center; | 16 justify-content: center; |
| 14 align-items: center; | 17 align-items: center; |
| 15 -webkit-user-select: none; | 18 -webkit-user-select: none; |
| 16 cursor: pointer; | 19 cursor: pointer; |
| 17 width: 30px; | 20 width: 30px; |
| 18 height: 30px; | 21 height: 30px; |
| (...skipping 29 matching lines...) Expand all Loading... |
| 48 <div id="check" class="{{ checkStyle }}" /> | 51 <div id="check" class="{{ checkStyle }}" /> |
| 49 </div> | 52 </div> |
| 50 </template> | 53 </template> |
| 51 <script> | 54 <script> |
| 52 module.exports = class extends SkyButton { | 55 module.exports = class extends SkyButton { |
| 53 created() { | 56 created() { |
| 54 super.created(); | 57 super.created(); |
| 55 | 58 |
| 56 this.containerStyle = ''; | 59 this.containerStyle = ''; |
| 57 this.checkStyle = ''; | 60 this.checkStyle = ''; |
| 58 | |
| 59 this.addEventListener('mouseup', function() { | |
| 60 this.checked = !this.checked; | |
| 61 }); | |
| 62 } | 61 } |
| 63 checkedChanged(oldValue, newValue) { | 62 checkedChanged(oldValue, newValue) { |
| 64 this.checkStyle = newValue ? 'checked' : ''; | 63 this.checkStyle = newValue ? 'checked' : ''; |
| 65 } | 64 } |
| 66 highlightChanged(oldValue, newValue) { | 65 highlightChanged(oldValue, newValue) { |
| 67 this.containerStyle = newValue ? 'highlight' : ''; | 66 this.containerStyle = newValue ? 'highlight' : ''; |
| 68 } | 67 } |
| 68 handleMouseUp() { |
| 69 this.checked = !this.checked; |
| 70 } |
| 69 }.register(); | 71 }.register(); |
| 70 </script> | 72 </script> |
| 71 </sky-element> | 73 </sky-element> |
| OLD | NEW |