checkbox

src/components/app/ionic.scss

@@ -24,6 +24,7 @@
 @import
   "../aside/aside",
   "../button/button",
+  "../checkbox/checkbox",
   "../content/content",
   "../item/item",
   "../list/list",

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;
+  }
+
+}

src/components/checkbox/test/checkbox-default/index.html

@@ -1,16 +1,68 @@
 
-<div class="item checkbox"
+<div class="pane">
-     role="checkbox"
-     aria-label="Airplane Mode"
-     aria-checked="true"
-     aria-invalid="false">
 
-  <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>

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;