Sky color chooser example

sky/examples/color/color-picker.sky

Index: sky/examples/color/color-picker.sky
diff --git a/sky/examples/color/color-picker.sky b/sky/examples/color/color-picker.sky
new file mode 100644
index 0000000000000000000000000000000000000000..d96040615a0b347cbfb9c8131cce11e51f41f296
--- /dev/null
+++ b/sky/examples/color/color-picker.sky
@@ -0,0 +1,29 @@
+#!mojo mojo:sky_viewer
+<sky>

[abarth-chromium, 2015/01/31 03:20:18]

Please add a copyright block.

[hansmuller1, 2015/02/02 16:32:30]

Done.

+<import src="../../framework/sky-box.sky"/>
+<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />

[abarth-chromium, 2015/01/31 03:20:18]

We usually include the framework as a root-relative path from the examples:

<import src="/sky/framework/sky-box.sky"/>

[hansmuller1, 2015/02/02 16:32:30]

Done.

+<import src="color-wheel.sky" />
+<sky-element name="color-picker-root">
+<template>

[abarth-chromium, 2015/01/31 03:20:18]

Two space indent please.

[hansmuller1, 2015/02/02 16:32:30]

Done.

+<style>
+.color-sample {

[abarth-chromium, 2015/01/31 03:20:18]

.color-sample  ->   #color-sample

We usually use IDs inside components.  IDs are scoped to components, so there's
no risk of a naming collision.

[hansmuller1, 2015/02/02 16:32:30]

Done.

+  height: 100px;
+  margin-top: 10px;
+  background-color: {{ inputColor }};
+}
+</style>
+<sky-box title='Choose a Color'>
+  <color-wheel color="{{ inputColor }}"/>
+  <div class="color-sample"></div>
+</sky-box>
+</template>
+<script>
+(class extends SkyElement {
+  created() {
+    this.inputColor = "#FFFFFF";
+  }
+}).register();
+</script>
+</sky-element>
+<color-picker-root />

[abarth-chromium, 2015/01/31 03:20:18]

I'd probably put the color-picker component in its own sky file and have the
root file just import it an have the <color-picker /> element.

+</sky>