introduction docs

docs/examples/introduction/stopwatch.css

@@ -0,0 +1,56 @@
+Stopwatch {
+    layout: horizontal;
+    background: $panel-darken-1;
+    height: 5;
+    min-width: 50;
+    margin: 1;
+    padding: 1 1;
+    transition: background 300ms linear;
+}
+
+Stopwatch.started {   
+    text-style: bold;
+    background: $success;
+    color: $text-success;
+}
+
+
+TimeDisplay {
+    content-align: center middle;
+    opacity: 60%;
+    height: 3;
+}
+
+Stopwatch.started TimeDisplay {
+    opacity: 100%;
+}
+
+Button {
+    width: 16;    
+}
+
+#start {
+    dock: left;
+}
+
+#stop {
+    dock: left;
+    display: none;
+}
+
+#reset {
+    dock: right;
+}
+
+Stopwatch.started #start {
+    display: none
+}
+
+Stopwatch.started #stop {
+    display: block
+}
+
+Stopwatch.started #reset {
+    visibility: hidden
+}
+