From 234ab90fd0eff70bde8e45720761557cca89ed25 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Wed, 3 Feb 2016 12:10:26 -0500
Subject: [PATCH] docs(demos): prettify label demo

---
 demos/label/ionic.svg | 19 ++++++++++++
 demos/label/main.html | 70 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 72 insertions(+), 17 deletions(-)
 create mode 100644 demos/label/ionic.svg

diff --git a/demos/label/ionic.svg b/demos/label/ionic.svg
new file mode 100644
index 0000000000..d8008379ff
--- /dev/null
+++ b/demos/label/ionic.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+<![CDATA[
+	.st0{fill:#4E8EF7;}
+]]>
+</style>
+<g>
+	<path class="st0" d="M434.6,121.3c4.5-5.4,7.2-12.4,7.2-20c0-17.3-14-31.3-31.3-31.3c-7.6,0-14.5,2.7-20,7.2
+		C353,48.8,306.3,32,255.8,32c-123.5,0-224,100.5-224,224c0,123.5,100.5,224,224,224s224-100.5,224-224
+		C479.8,205.4,463,158.8,434.6,121.3z M255.8,471c-118.6,0-215-96.5-215-215c0-118.6,96.5-215,215-215c48.2,0,92.8,16,128.7,42.8
+		c-3.4,5-5.3,11-5.3,17.5c0,17.3,14,31.3,31.3,31.3c6.5,0,12.5-2,17.5-5.3c26.9,35.9,42.8,80.5,42.8,128.7
+		C470.8,374.5,374.3,471,255.8,471z"/>
+	<ellipse class="st0" cx="255.8" cy="256" rx="96.2" ry="96.1"/>
+</g>
+</svg>
diff --git a/demos/label/main.html b/demos/label/main.html
index 8b7c54c4ad..6bf2cc2b70 100644
--- a/demos/label/main.html
+++ b/demos/label/main.html
@@ -2,31 +2,67 @@
   <ion-title>Label</ion-title>
 </ion-navbar>
 
-<ion-content>
-  <ion-row>
-    <ion-item>
-      <ion-input placeholder="Placeholder Label"></ion-input>
+<ion-content class="label-demo">
+  <ion-list>
+    <ion-item no-lines>
+      <ion-avatar item-left>
+        <img src="ionic.svg">
+      </ion-avatar>
+      <ion-label>Ionic</ion-label>
     </ion-item>
-  </ion-row>
 
-  <ion-row>
+    <!-- TODO the styling of the icons can be removed when #5319 is done -->
     <ion-item>
-      <ion-label fixed>Fixed Label</ion-label>
-      <ion-input type="text" value=""></ion-input>
+      <ion-label stacked primary>Mobile</ion-label>
+      <ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
+      <ion-icon primary item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
+      <ion-icon primary item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
     </ion-item>
-  </ion-row>
 
-  <ion-row>
     <ion-item>
-      <ion-label floating>Floating Label</ion-label>
-      <ion-input type="text" value=""></ion-input>
+      <ion-label stacked primary>Email</ion-label>
+      <ion-input type="email" value="hi@ionic.io"></ion-input>
     </ion-item>
-  </ion-row>
 
-  <ion-row>
     <ion-item>
-      <ion-label stacked>Stacked Label</ion-label>
-      <ion-input type="text" value=""></ion-input>
+      <ion-label stacked primary>Birthday</ion-label>
+      <ion-input type="text" value="November 21, 2013"></ion-input>
     </ion-item>
-  </ion-row>
+
+    <ion-item>
+      <ion-label stacked primary>Address</ion-label>
+      <ion-textarea
+        value="121 S Pinckney St
+Madison WI 53703
+United States">
+      </ion-textarea>
+    </ion-item>
+
+    <ion-item>
+      <ion-label stacked dark>Notes</ion-label>
+      <ion-textarea></ion-textarea>
+    </ion-item>
+
+    <button ion-item detail-none>
+      <ion-label primary>Send Message</ion-label>
+    </button>
+    <button ion-item detail-none>
+      <ion-label primary>Share Contact</ion-label>
+    </button>
+    <button ion-item detail-none>
+      <ion-label primary>Add to Favorites</ion-label>
+    </button>
+  </ion-list>
 </ion-content>
+
+<style>
+  .label-demo .mobile1, .label-demo .mobile2 {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+  }
+
+  .label-demo .mobile1 {
+    right: 35px;
+  }
+</style>