From 92be3c5974f086e24f9e8c8e8eea76f03776875d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 17 Oct 2013 14:52:39 -0500
Subject: [PATCH] align left checkboxes

---
 dist/css/ionic-scoped.css  | 19 ++++++++++++-----
 dist/css/ionic.css         | 21 ++++++++++++++-----
 scss/ionic/_checkbox.scss  | 21 +++++++++++++++----
 scss/ionic/_variables.scss |  2 +-
 test/input-checkbox.html   | 42 ++++++++++++++++++++++++++++----------
 5 files changed, 79 insertions(+), 26 deletions(-)

diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 1ab4f21b66..cf0d388c7a 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -180,6 +180,8 @@
   /* the checkmark within the box */
   /* what the background looks like when its checked */
   /* what the checkmark looks like when its checked */
+  /* make sure list item content have enough padding on left to fit the checkbox */
+  /* position the checkbox to the left within a list item */
   /* the overall container of the toggle */
   /* the handle (circle) thats inside the toggle's track area */
   /* also the appearance when the handle is "off" */
@@ -2128,14 +2130,14 @@
       transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
-    top: 37%;
+    top: 34%;
     left: 26%;
     display: table;
     width: 14px;
-    height: 7px;
-    border: 1px solid white;
-    border-top: none;
-    border-right: none;
+    height: 10.33333px;
+    border: 3px solid white;
+    border-top: 0;
+    border-right: 0;
     content: ' ';
     opacity: 0;
     transition: opacity 0.05s ease-in-out;
@@ -2146,6 +2148,13 @@
     background: #049cdb; }
   .ionic .checkbox input:checked:after {
     opacity: 1; }
+  .ionic .checkbox-item .list-item-content {
+    padding-left: 58px; }
+  .ionic .checkbox-item .checkbox {
+    position: absolute;
+    top: 1px;
+    left: 7.5px;
+    z-index: 3; }
   .ionic .toggle {
     position: relative;
     display: inline-block; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 929e364825..88818109de 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2597,14 +2597,14 @@ input[type="checkbox"][readonly] {
 /* the checkmark within the box */
 .checkbox input:after {
   position: absolute;
-  top: 37%;
+  top: 34%;
   left: 26%;
   display: table;
   width: 14px;
-  height: 7px;
-  border: 1px solid white;
-  border-top: none;
-  border-right: none;
+  height: 10.33333px;
+  border: 3px solid white;
+  border-top: 0;
+  border-right: 0;
   content: ' ';
   opacity: 0;
   transition: opacity 0.05s ease-in-out;
@@ -2620,6 +2620,17 @@ input[type="checkbox"][readonly] {
 .checkbox input:checked:after {
   opacity: 1; }
 
+/* make sure list item content have enough padding on left to fit the checkbox */
+.checkbox-item .list-item-content {
+  padding-left: 58px; }
+
+/* position the checkbox to the left within a list item */
+.checkbox-item .checkbox {
+  position: absolute;
+  top: 1px;
+  left: 7.5px;
+  z-index: 3; }
+
 /* the overall container of the toggle */
 .toggle {
   position: relative;
diff --git a/scss/ionic/_checkbox.scss b/scss/ionic/_checkbox.scss
index d29b3d971e..977f03978c 100644
--- a/scss/ionic/_checkbox.scss
+++ b/scss/ionic/_checkbox.scss
@@ -31,14 +31,14 @@
 /* the checkmark within the box */
 .checkbox input:after {
   position: absolute;
-  top: 37%;
+  top: 34%;
   left: 26%;
   display: table;
   width: $checkbox-width / 2;
-  height: $checkbox-width / 4;
+  height: ($checkbox-width / 3) + 1;
   border: $checkbox-check-width solid $checkbox-check-color;
-  border-top: none;
-  border-right: none;
+  border-top: 0;
+  border-right: 0;
   content: ' ';
   opacity: 0;
   transition: opacity .05s ease-in-out;
@@ -57,3 +57,16 @@
 .checkbox input:checked:after {
   opacity: 1;
 }
+
+/* make sure list item content have enough padding on left to fit the checkbox */
+.checkbox-item .list-item-content {
+  padding-left: ($list-item-padding * 2) + $checkbox-width;
+}
+
+/* position the checkbox to the left within a list item */
+.checkbox-item .checkbox {
+  position: absolute;
+  top: 1px;
+  left: $list-item-padding / 2;
+  z-index: 3;
+}
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index cbe49c7d38..166294dd5f 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -177,7 +177,7 @@ $checkbox-off-border-color:       #049cdb;
 $checkbox-on-bg-color:            #049cdb;
 $checkbox-on-border-color:        #049cdb;
 
-$checkbox-check-width:            1px;
+$checkbox-check-width:            3px;
 $checkbox-check-color:            #fff;
 
 
diff --git a/test/input-checkbox.html b/test/input-checkbox.html
index 8c146febf6..017adcf362 100644
--- a/test/input-checkbox.html
+++ b/test/input-checkbox.html
@@ -17,18 +17,38 @@
 
       <main class="content has-header">
         
-        <ul class="list">
-          <li class="list-item">
-            Airplane Mode
-            <div class="checkbox" id="airplaneMode">
-               <input type="checkbox" name="airplaneMode">
-            </div>
+        <ul class="padding">
+          <li class="list-item checkbox-item">
+             <div class="list-item-content">
+              Flux Capacitor
+             </div>
+             <label class="checkbox">
+               <input type="checkbox" checked>
+             </label>
           </li>
-          <li class="list-item">
-            Do Not Disturb
-            <div class="checkbox" id="doNotDisturb">
-               <input type="checkbox" name="doNotDisturb" checked="checked">
-            </div>
+          <li class="list-item checkbox-item">
+             <div class="list-item-content">
+              1.21 Gigawatts
+             </div>
+             <label class="checkbox">
+               <input type="checkbox" checked>
+             </label>
+          </li>
+          <li class="list-item checkbox-item">
+             <div class="list-item-content">
+              88 MPH
+             </div>
+             <label class="checkbox">
+               <input type="checkbox" checked>
+             </label>
+          </li>
+          <li class="list-item checkbox-item">
+             <div class="list-item-content">
+              Plutonium Resupply
+             </div>
+             <label class="checkbox">
+               <input type="checkbox">
+             </label>
           </li>
         </ul>