From 0e0c0df733e367ca4a629ab00b78d5859d41cb73 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Wed, 25 Mar 2015 22:33:29 -0500
Subject: [PATCH] checkbox

---
 src/components/app/ionic.scss                 |  1 +
 src/components/checkbox/checkbox.scss         | 24 +++++++
 .../checkbox/test/checkbox-default/index.html | 70 ++++++++++++++++---
 src/components/item/item.scss                 | 10 +++
 4 files changed, 96 insertions(+), 9 deletions(-)

diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index b043e39ec6..3f1454e14d 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -24,6 +24,7 @@
 @import
   "../aside/aside",
   "../button/button",
+  "../checkbox/checkbox",
   "../content/content",
   "../item/item",
   "../list/list",
diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index e69de29bb2..7e7e699e34 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -0,0 +1,24 @@
+
+// Checkbox
+// --------------------------------------------------
+
+
+.checkbox-on {
+  display: none;
+}
+
+.checkbox-off {
+  display: block;
+}
+
+.checkbox[aria-checked=true] {
+
+  .checkbox-on {
+    display: block;
+  }
+
+  .checkbox-off {
+    display: none;
+  }
+
+}
diff --git a/src/components/checkbox/test/checkbox-default/index.html b/src/components/checkbox/test/checkbox-default/index.html
index cf7f0831d0..c71a566d49 100644
--- a/src/components/checkbox/test/checkbox-default/index.html
+++ b/src/components/checkbox/test/checkbox-default/index.html
@@ -1,16 +1,68 @@
 
-<div class="item checkbox"
-     role="checkbox"
-     aria-label="Airplane Mode"
-     aria-checked="true"
-     aria-invalid="false">
+<div class="pane">
 
-  <div class="item-container">
+  <div class="pane-container">
 
-    <div class="item-media"></div>
+    <div class="bar">
+      Checkbox Default CSS Tests
+    </div>
+
+    <div class="content">
+
+      <div class="list">
+
+        <div class="list-content">
+
+
+
+          <div class="item checkbox"
+               role="checkbox"
+               aria-checked="true"
+               aria-invalid="false">
+
+            <div class="item-media">
+              <div class="checkbox-off">Off</div>
+              <div class="checkbox-on">On</div>
+            </div>
+
+            <div class="item-content">
+
+              <div class="item-title">
+                I am pleased
+              </div>
+
+            </div>
+
+          </div>
+
+
+
+          <div class="item checkbox"
+               role="checkbox"
+               aria-checked="false"
+               aria-invalid="false">
+
+            <div class="item-media">
+              <div class="checkbox-off">Off</div>
+              <div class="checkbox-on">On</div>
+            </div>
+
+            <div class="item-content">
+
+              <div class="item-title">
+                Hello
+              </div>
+
+            </div>
+
+          </div>
+
+
+
+        </div>
+
+      </div>
 
-    <div class="item-content">
-      Airplane Mode
     </div>
 
   </div>
diff --git a/src/components/item/item.scss b/src/components/item/item.scss
index 502ef21545..9573255ab6 100644
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -47,6 +47,16 @@ $item-padding-left:       15px !default;
   padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
 }
 
+.item-media {
+  @include flex-display();
+  @include flex-shrink(0);
+  @include flex-wrap(nowrap);
+  @include flex-align-items(center);
+
+  padding-top: 7px;
+  padding-bottom: 8px;
+}
+
 .item-title {
   position: relative;