From 080878523421803ebb8137a6ac07293ef0586c8c Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 27 Jul 2015 22:36:32 -0500
Subject: [PATCH] checkbox updates

---
 ionic/components/app/structure.scss           |  5 +-
 ionic/components/button/button.scss           |  2 +-
 ionic/components/checkbox/checkbox.scss       | 17 +++--
 ionic/components/checkbox/checkbox.ts         |  6 +-
 ionic/components/checkbox/extensions/ios.scss | 37 ++++++++---
 .../checkbox/extensions/material.scss         | 57 ++++++++--------
 .../components/checkbox/test/basic/main.html  | 65 ++++++++++++-------
 ionic/components/form/input.scss              |  5 ++
 ionic/components/tabs/tabs.scss               |  2 +-
 ionic/util/mixins.scss                        | 12 ++++
 10 files changed, 129 insertions(+), 79 deletions(-)

diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index c9e3b1238f..95b0a6683c 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -27,10 +27,7 @@ body {
   text-size-adjust: none;
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  @include user-select-none();
 }
 
 ion-app,
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 09836b457e..8845f5be72 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -52,7 +52,7 @@ button,
   overflow: hidden;
 
   cursor: pointer;
-  user-select: none;
+  @include user-select-none();
 
   border: 1px solid #ccc;
   padding: $button-padding;
diff --git a/ionic/components/checkbox/checkbox.scss b/ionic/components/checkbox/checkbox.scss
index f133008f5e..30dabefa0b 100644
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -4,21 +4,24 @@
 
 
 .checkbox {
+  position: relative;
   display: block;
   cursor: pointer;
-  user-select: none;
+  @include user-select-none();
 }
 
 .checkbox input {
-  position: relative;
-  left: -9999px;
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  border: none;
+  @include appearance(none);
 }
 
 .checkbox[aria-disabled=true] {
   opacity: 0.5;
   color: gray;
-
-  .media-checkbox {
-    color: inherit;
-  }
 }
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index f7e36a50d0..a705ea12a2 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -21,15 +21,11 @@ import {Icon} from '../icon/icon';
     '[class.item]': 'item',
     '[attr.aria-checked]': 'input.checked'
   }
-  // defaultProperties: {
-  //   'iconOff': 'ion-ios-circle-outline',
-  //   'iconOn': 'ion-ios-checkmark'
-  // }
 })
 @IonicView({
   template:
   '<div class="item-media media-checkbox">' +
-    '<div class="media-checkbox-outline"></div>' +
+    '<div class="checkbox-icon"></div>' +
   '</div>' +
   '<div class="item-content">' +
     '<content></content>' +
diff --git a/ionic/components/checkbox/extensions/ios.scss b/ionic/components/checkbox/extensions/ios.scss
index ccef6decd2..0ac8342807 100644
--- a/ionic/components/checkbox/extensions/ios.scss
+++ b/ionic/components/checkbox/extensions/ios.scss
@@ -2,20 +2,41 @@
 // iOS Checkbox
 // --------------------------------------------------
 
-$checkbox-ios-color:          #007aff;
+$checkbox-ios-icon-size:              24px !default;
+$checkbox-ios-background-color:       get-color(primary, base) !default;
+$checkbox-ios-foreground-color:       get-color(primary, inverse) !default;
 
 
 .checkbox[mode="ios"] {
 
-  .media-checkbox {
-    height: 20px;
-    min-width: 20px;
-    color: $checkbox-ios-color;
-    background-color: $checkbox-ios-color;
+  .checkbox-icon {
+    position: relative;
+    width: $checkbox-ios-icon-size;
+    height: $checkbox-ios-icon-size;
+    border-radius: $checkbox-ios-icon-size / 2;
+    background-color: $checkbox-ios-foreground-color;
+    border: 1px solid $checkbox-ios-background-color;
   }
 
-  &[aria-checked=false] .media-checkbox {
-    background-color: red;
+  &[aria-checked=true] .checkbox-icon {
+    background-color: $checkbox-ios-background-color;
+
+    &::after {
+      position: absolute;
+      border: 1px solid $checkbox-ios-foreground-color;
+      top: 3px;
+      left: 8px;
+      width: 5px;
+      height: 12px;
+      border-left: none;
+      border-top: none;
+      content: '';
+      transform: rotate(45deg);
+    }
   }
 
 }
+
+.hairlines .checkbox[mode="ios"] .checkbox-icon {
+  border-width: 0.5px;
+}
diff --git a/ionic/components/checkbox/extensions/material.scss b/ionic/components/checkbox/extensions/material.scss
index 650caa88cb..3c559cafef 100644
--- a/ionic/components/checkbox/extensions/material.scss
+++ b/ionic/components/checkbox/extensions/material.scss
@@ -1,43 +1,38 @@
 
-// iOS Checkbox
+// Material Design Checkbox
 // --------------------------------------------------
 
-$checkbox-md-color:          #007aff;
+$checkbox-md-icon-size:              24px !default;
+$checkbox-md-background-color:       get-color(primary, base) !default;
+$checkbox-md-foreground-color:       get-color(primary, inverse) !default;
 
 
 .checkbox[mode="md"] {
-  position: relative;
-  z-index: 1;
-  vertical-align: middle;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: 24px;
-  margin: 0;
-  padding: 0;
 
-  .media-checkbox-outline {
-    min-width: 20px;
-    color: $checkbox-md-color;
-    background-color: $checkbox-md-color;
-
-    position: absolute;
-    top: 3px;
-    left: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    overflow: hidden;
-    border: 2px solid rgba(0,0,0,.54);
-    border-radius: 2px;
-    z-index: 2;
+  .checkbox-icon {
+    position: relative;
+    width: $checkbox-md-icon-size;
+    height: $checkbox-md-icon-size;
+    border-radius: $checkbox-md-icon-size / 2;
+    background-color: $checkbox-md-foreground-color;
+    border: 1px solid $checkbox-md-background-color;
   }
 
-  &[aria-checked=false] .media-checkbox-outline {
-    background-color: red;
+  &[aria-checked=true] .checkbox-icon {
+    background-color: $checkbox-md-background-color;
+
+    &::after {
+      position: absolute;
+      border: 1px solid $checkbox-md-foreground-color;
+      top: 3px;
+      left: 8px;
+      width: 5px;
+      height: 12px;
+      border-left: none;
+      border-top: none;
+      content: '';
+      transform: rotate(45deg);
+    }
   }
 
 }
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index a95408f556..de3ee7aada 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -1,29 +1,50 @@
+
+<ion-toolbar><ion-title>Checkboxes</ion-title></ion-toolbar>
+
+
 <ion-content>
+
   <form (^submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
+
     <ion-list>
-      <ion-checkbox icon-on="ion-android-checkmark-circle" ng-control="appleCtrl"><label id="appleLabel">Apple</label><input checked="hello" type="checkbox"></ion-checkbox>
-      <ion-checkbox ng-control="bananaCtrl"><label>Banana</label><input value="test" type="checkbox"></ion-checkbox>
-      <ion-checkbox ng-control="cherryCtrl"><label>Cherry</label><input type="checkbox"></ion-checkbox>
-      <ion-checkbox ng-control="grapeCtrl"><label>Grape</label><input value="test" checked="blah" type="checkbox"></ion-checkbox>
+
+      <ion-checkbox ng-control="appleCtrl">
+        <label id="appleLabel">Apple</label>
+        <input checked type="checkbox">
+      </ion-checkbox>
+
+      <ion-checkbox ng-control="bananaCtrl">
+        <label>Banana</label>
+        <input value="test" type="checkbox">
+      </ion-checkbox>
+
+      <ion-checkbox ng-control="cherryCtrl">
+        <label>Cherry</label>
+        <input type="checkbox">
+      </ion-checkbox>
+
+      <ion-checkbox ng-control="grapeCtrl">
+        <label>Grape</label>
+        <input value="test" checked="checked" type="checkbox">
+      </ion-checkbox>
+
     <ion-list>
-      <button type="submit">Submit</button>
-      <br>
+
   </form>
-  appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}<br>
-  appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}<br>
-  appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}<br>
-  bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}<br>
-  bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}<br>
-  bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}<br>
-  cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}<br>
-  cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}<br>
-  cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}<br>
-  grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}<br>
-  grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}<br>
-  grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}<br>
-  <!-- <input type="checkbox" value="test" ng-control="appleCtrl">
-  <input type="checkbox" value="hello" ng-control="bananaCtrl">
-  <button type="submit">Submit</button>
-</form> -->
+
+  <p>
+    <code>appleCtrl.dirty: {{fruitsForm.controls.appleCtrl.dirty}}</code><br>
+    <code>appleCtrl.value: {{fruitsForm.controls.appleCtrl.value.value}}</code><br>
+    <code>appleCtrl.checked: {{fruitsForm.controls.appleCtrl.value.checked}}</code><br>
+    <code>bananaCtrl.dirty: {{fruitsForm.controls.bananaCtrl.dirty}}</code><br>
+    <code>bananaCtrl.value: {{fruitsForm.controls.bananaCtrl.value.value}}</code><br>
+    <code>bananaCtrl.checked: {{fruitsForm.controls.bananaCtrl.value.checked}}</code><br>
+    <code>cherry.dirty: {{fruitsForm.controls.cherryCtrl.dirty}}</code><br>
+    <code>cherry.value: {{fruitsForm.controls.cherryCtrl.value.value}}</code><br>
+    <code>cherry.checked: {{fruitsForm.controls.cherryCtrl.value.checked}}</code><br>
+    <code>grape.dirty: {{fruitsForm.controls.grapeCtrl.dirty}}</code><br>
+    <code>grape.value: {{fruitsForm.controls.grapeCtrl.value.value}}</code><br>
+    <code>grape.checked: {{fruitsForm.controls.grapeCtrl.value.checked}}</code><br>
+  </p>
 
 </ion-content>
diff --git a/ionic/components/form/input.scss b/ionic/components/form/input.scss
index abba7fa8d2..f6b1dd3332 100644
--- a/ionic/components/form/input.scss
+++ b/ionic/components/form/input.scss
@@ -29,6 +29,11 @@ focus-holder input {
   padding-top: 9px;
 }
 
+.item .item-content label.input-label {
+  margin: 0;
+  padding: 0;
+}
+
 /*ion-input {
   display: block;
 
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 789651f966..e140466421 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -72,7 +72,7 @@ button.tab-button {
 
   text-align: center;
   cursor: pointer;
-  user-select: none;
+  @include user-select-none();
 
   color: $tab-button-text-inactive;
   border: 0;
diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss
index 3fafad8f80..24b4b1b0e0 100644
--- a/ionic/util/mixins.scss
+++ b/ionic/util/mixins.scss
@@ -35,6 +35,18 @@
 
 
 
+// User Select None
+// --------------------------------------------------
+
+@mixin user-select-none() {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+
+
 // Input Placeholder
 // --------------------------------------------------