css3 checkbox

dist/css/ionic-ios7.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
 * Adapted from normalize.css and some reset.css. We don't care even one
 * bit about old IE, so we don't need any hacks for that in here.

dist/css/ionic.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: 'ionicons';
   src: url("fonts/ionicons.eot");
@@ -2516,16 +2517,40 @@ input[type="checkbox"][readonly] {
   background-color: transparent; }
 
 .checkbox {
+  position: relative;
+  display: inline-block;
+  padding: 7px 7px;
+  cursor: pointer;
   /* what the checkbox looks like when its not checked */
+  /* the checkmark within the box */
   /* what it looks like when it is checked */ }
   .checkbox input {
     display: none; }
   .checkbox .handle {
-    width: 30px;
-    height: 30px;
-    background: red; }
+    width: 28px;
+    height: 28px;
+    border: 1px solid #049cdb;
+    border-radius: 50%;
+    background: white;
+    transition: background-color 0.1s ease-in-out; }
+  .checkbox .handle:after {
+    position: absolute;
+    top: 16px;
+    left: 14px;
+    width: 14px;
+    height: 7px;
+    border: 1px solid white;
+    border-top: none;
+    border-right: none;
+    content: '';
+    opacity: 0;
+    transition: opacity 0.1s ease-in-out;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg); }
   .checkbox input:checked + .handle {
-    background: green; }
+    background: #049cdb; }
+    .checkbox input:checked + .handle:after {
+      opacity: 1; }
 
 /* the overall container of the toggle */
 .toggle {

scss/ionic/_checkbox.scss

@@ -1,5 +1,9 @@
 
 .checkbox {
+  position: relative;
+  display: inline-block;
+  padding: ($checkbox-height / 4) ($checkbox-width / 4);
+  cursor: pointer;
 
   input {
     display: none;
@@ -7,14 +11,39 @@
 
   /* what the checkbox looks like when its not checked */
   .handle {
-    width: 30px;
-    height: 30px;
-    background: red;
+    width: $checkbox-width;
+    height: $checkbox-height;
+    border: $checkbox-border-width solid $checkbox-off-border-color;
+    border-radius: $checkbox-border-radius;
+    background: $checkbox-off-bg-color;
+    transition: background-color .1s ease-in-out;
+  }
+
+  /* the checkmark within the box */
+  .handle:after {
+    position: absolute;
+    top: ($checkbox-height / 2) + 2;
+    left: $checkbox-width / 2;
+    width: $checkbox-width / 2;
+    height: $checkbox-height / 4;
+    border: $checkbox-check-width solid $checkbox-check-color;
+    border-top: none;
+    border-right: none;
+    content: '';
+    opacity: 0;
+    transition: opacity .1s ease-in-out;
+
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
   }
 
   /* what it looks like when it is checked */
   input:checked + .handle {
-    background: green;
+    background: $checkbox-on-bg-color;
+
+    &:after {
+      opacity: 1;
+    }
   }
 
 }

scss/ionic/_variables.scss

@@ -161,6 +161,24 @@ $toggle-handle-on-bg-color:       $toggle-handle-off-bg-color;
 $toggle-transition-duration:      .1s;
 
 
+// Checkbox
+// -------------------------------
+
+$checkbox-width:                  28px;
+$checkbox-height:                 28px;
+$checkbox-border-radius:          50%;
+$checkbox-border-width:           1px;
+
+$checkbox-off-bg-color:           #fff;
+$checkbox-off-border-color:       #049cdb;
+
+$checkbox-on-bg-color:            #049cdb;
+$checkbox-on-border-color:        #049cdb;
+
+$checkbox-check-width:            1px;
+$checkbox-check-color:            #fff;
+
+
 // Range
 // -------------------------------
 
@@ -289,6 +307,7 @@ $bar-dark-border-color:       $button-dark-border;
 
 // Tabs
 // -------------------------------
+
 $tabs-height:                 49px !default;
 
 $tabs-default-bg:              $brand-default;
@@ -356,19 +375,24 @@ $menu-inset-border-color:   #bbb;
 $menu-width:               270px;
 $menu-animation-speed:     200ms;
 
+
 // Modals
 // -------------------------------
 
 $modal-bg-color:              #fff !default;
 
+
 // Action Sheets
 // -------------------------------
+
 $sheet-bg-color:              rgba(255, 255, 255, 0.6) !default;
 $sheet-opacity:               0.95 !default;
 $sheet-border-radius:         3px !default;
 
+
 // Badges
 // -------------------------
+
 $badge-color:                 #fff !default;
 $badge-link-hover-color:      #fff !default;
 $badge-bg:                    $gray-light !default;
@@ -381,7 +405,6 @@ $badge-line-height:           1 !default;
 $badge-border-radius:         10px !default;
 
 
-
 // Media queries breakpoints
 // -------------------------------
 
@@ -407,30 +430,7 @@ $screen-sm-max:              ($screen-md - 1) !default;
 $screen-md-max:              ($screen-lg - 1) !default;
 
 
-// Grid system
-// -------------------------------
-
-// Number of columns in the grid system
-$grid-columns:              12 !default;
-// Padding, to be divided by two and applied to the left and right of all columns
-$grid-gutter-width:         30px !default;
-// Point at which the navbar stops collapsing
-$grid-float-breakpoint:     $screen-tablet !default;
-
-
-// Container sizes
-// -------------------------------
-
-// Small screen / tablet
-$container-tablet:            ((720px + $grid-gutter-width)) !default;
-
-// Medium screen / desktop
-$container-desktop:           ((940px + $grid-gutter-width)) !default;
-
-// Large screen / wide desktop
-$container-lg-desktop:        ((1140px + $grid-gutter-width)) !default;
-
-
 // Z-Indexes
+// -------------------------------
 
 $zindex-modal: 10;