started checkbox

dist/css/ionic-ios7.css

@@ -181,7 +181,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1381,7 +1381,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -1468,7 +1468,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1483,7 +1483,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 /* hide a radio button's icon by default */
 .radio-item [class^="icon-"],
@@ -1708,7 +1708,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px #fff;
+      text-shadow: 0px 0px 10px white;
       box-shadow: none;
       background: none; }
 
@@ -1891,7 +1891,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #ddd; }
+  border: 1px solid #dddddd; }
 
 .card-header {
   padding: 10px;

dist/css/ionic.css

@@ -1245,7 +1245,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -2468,7 +2468,7 @@ select:focus,
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
-  outline: thin dotted #333;
+  outline: thin dotted #333333;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px; }
 
@@ -2515,6 +2515,18 @@ input[type="radio"][readonly],
 input[type="checkbox"][readonly] {
   background-color: transparent; }
 
+.checkbox {
+  /* what the checkbox looks like when its not checked */
+  /* what it looks like when it is checked */ }
+  .checkbox input {
+    display: none; }
+  .checkbox .handle {
+    width: 30px;
+    height: 30px;
+    background: red; }
+  .checkbox input:checked + .handle {
+    background: green; }
+
 /* the overall container of the toggle */
 .toggle {
   display: inline-block; }
@@ -2790,7 +2802,7 @@ input[type="checkbox"][readonly] {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px #fff;
+      text-shadow: 0px 0px 10px white;
       box-shadow: none;
       background: none; }
 
@@ -2973,7 +2985,7 @@ a.button {
   width: 100%;
   background-color: white;
   border-radius: 2px;
-  border: 1px solid #ddd; }
+  border: 1px solid #dddddd; }
 
 .card-header {
   padding: 10px;

dist/js/ionic-angular.js

@@ -7,6 +7,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',
                             'ionic.ui.list',
+                            'ionic.ui.checkbox',
                             'ionic.ui.toggle'
                            ]);
 
@@ -154,6 +155,46 @@ angular.module('ionic.ui.actionSheet', [])
   }
 });
 ;
+angular.module('ionic.ui.checkbox', [])
+
+
+.directive('checkbox', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '?ngModel',
+    scope: true,
+    template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
+
+    link: function($scope, $element, $attr, ngModel) {
+      var checkbox, handle;
+
+      if(!ngModel) { return; }
+
+      checkbox = $element.children().eq(0);
+      handle = $element.children().eq(1);
+
+      if(!checkbox.length || !handle.length) { return; }
+
+      $scope.checkbox = new ionic.views.Checkbox({ 
+        el: $element[0],
+        checkbox: checkbox[0],
+        handle: handle[0]
+      });
+
+      $element.bind('click', function(e) {
+        $scope.checkbox.tap(e);
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      });
+
+      ngModel.$render = function() {
+        $scope.checkbox.val(ngModel.$viewValue);
+      };
+    }
+  }
+});
 angular.module('ionic.ui.content', [])
 
 // The content directive is a core scrollable content area

dist/js/ionic.js

@@ -1750,6 +1750,32 @@ window.ionic = {
 })(ionic);
 ;
 
+(function(ionic) {
+
+  ionic.views.Checkbox = function(opts) {
+    this.el = opts.el;
+    this.checkbox = opts.checkbox;
+    this.handle = opts.handle;
+  };
+
+  ionic.views.Checkbox.prototype = {
+
+    tap: function(e) {
+      this.val( !this.checkbox.checked );
+    },
+
+    val: function(value) {
+      if(value === true || value === false) {
+        this.checkbox.checked = value;
+      }
+      return this.checkbox.checked;
+    }
+
+  };
+
+})(ionic);
+;
+
 (function(ionic) {
 
   ionic.views.HeaderBar = function(opts) {

js/ext/angular/src/directive/ionicCheckbox.js

@@ -0,0 +1,40 @@
+angular.module('ionic.ui.checkbox', [])
+
+
+.directive('checkbox', function() {
+  return {
+    restrict: 'E',
+    replace: true,
+    require: '?ngModel',
+    scope: true,
+    template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
+
+    link: function($scope, $element, $attr, ngModel) {
+      var checkbox, handle;
+
+      if(!ngModel) { return; }
+
+      checkbox = $element.children().eq(0);
+      handle = $element.children().eq(1);
+
+      if(!checkbox.length || !handle.length) { return; }
+
+      $scope.checkbox = new ionic.views.Checkbox({ 
+        el: $element[0],
+        checkbox: checkbox[0],
+        handle: handle[0]
+      });
+
+      $element.bind('click', function(e) {
+        $scope.checkbox.tap(e);
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      });
+
+      ngModel.$render = function() {
+        $scope.checkbox.val(ngModel.$viewValue);
+      };
+    }
+  }
+})

js/ext/angular/src/ionicAngular.js

@@ -7,6 +7,7 @@ angular.module('ionic.ui', ['ionic.ui.content',
                             'ionic.ui.nav',
                             'ionic.ui.sideMenu',
                             'ionic.ui.list',
+                            'ionic.ui.checkbox',
                             'ionic.ui.toggle'
                            ]);
 

js/ext/angular/test/checkbox.html

@@ -0,0 +1,45 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Checkbox</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
+  </head>
+  <body>
+
+    <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
+      <p><checkbox ng-model="data.isLovely"></checkbox></p>
+      <button type="submit" class="button button-danger" ng-click="setToTrue()">Set to true</button>
+      <button type="submit" class="button button-danger" ng-click="setToFalse()">Set to false</button>
+      <button type="submit" class="button button-danger" ng-click="getValue()">Get Value</button>
+    </content>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('navTest', ['ionic.ui.checkbox', 'ionic.ui.content', 'ngAnimate', 'ngTouch'])
+
+      .controller('TestCtrl', function($scope) {
+        $scope.data = {};
+        $scope.getValue = function() {
+          console.log('Get Value', $scope.data);
+        }
+        $scope.setToTrue = function() {
+          $scope.data.isLovely = true;
+          return false;
+        }
+        $scope.setToFalse = function() {
+          $scope.data.isLovely = false;
+          return false;
+        }
+      });
+
+    </script>
+  </body>
+</html>
+

js/views/checkboxView.js

@@ -0,0 +1,25 @@
+
+(function(ionic) {
+
+  ionic.views.Checkbox = function(opts) {
+    this.el = opts.el;
+    this.checkbox = opts.checkbox;
+    this.handle = opts.handle;
+  };
+
+  ionic.views.Checkbox.prototype = {
+
+    tap: function(e) {
+      this.val( !this.checkbox.checked );
+    },
+
+    val: function(value) {
+      if(value === true || value === false) {
+        this.checkbox.checked = value;
+      }
+      return this.checkbox.checked;
+    }
+
+  };
+
+})(ionic);

scss/ionic/_checkbox.scss

@@ -0,0 +1,20 @@
+
+.checkbox {
+
+  input {
+    display: none;
+  }
+
+  /* what the checkbox looks like when its not checked */
+  .handle {
+    width: 30px;
+    height: 30px;
+    background: red;
+  }
+
+  /* what it looks like when it is checked */
+  input:checked + .handle {
+    background: green;
+  }
+
+}

scss/ionic/ionic.scss

@@ -25,6 +25,7 @@
 
   // Forms
   "form",
+  "checkbox",
   "toggle",
   "radio",