OLD | NEW |
1 <!-- | 1 <!-- |
2 // Copyright 2015 The Chromium Authors. All rights reserved. | 2 // Copyright 2015 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 <sky> | |
7 <import src="/sky/framework/sky-box.sky"/> | |
8 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> | 6 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" /> |
9 <import src="color-wheel.sky" /> | 7 <import src="color-sample.sky" /> |
10 <sky-element name="color-picker"> | 8 |
| 9 <sky-element name="color-samples"> |
11 <template> | 10 <template> |
12 <style> | 11 <style> |
13 #color-sample { | 12 :host { |
14 height: 100px; | 13 display: flex; |
15 margin-top: 10px; | 14 } |
16 background-color: {{ inputColor }}; | 15 color-sample { |
17 } | 16 height: 100%; |
| 17 flex: 1; |
| 18 margin-left: 2px; |
| 19 margin-right: 2px; |
| 20 } |
18 </style> | 21 </style> |
19 <sky-box title='Choose a Color'> | 22 <template repeat="{{ colors }}"> |
20 <color-wheel color="{{ inputColor }}"/> | 23 <color-sample color="{{ cssColor }}" /> |
21 <div id="color-sample"></div> | 24 </template> |
22 </sky-box> | |
23 </template> | 25 </template> |
24 <script> | 26 <script> |
25 module.exports = class extends SkyElement { | 27 module.exports = class extends SkyElement { |
26 created() { | 28 created() { |
27 this.inputColor = "#FFFFFF"; | 29 this.colors = []; |
28 } | 30 } |
29 }.register(); | 31 }.register(); |
30 </script> | 32 </script> |
31 </sky-element> | 33 </sky-element> |
32 </sky> | |
OLD | NEW |