fix(checkbox): Remove tap highlight and fix checkbox appearance in Fi…

…refox, closes #496
ionic-team · Apr 7, 2014 · b0b446d · b0b446d
1 parent 757f181
commit b0b446d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/js/ext/angular/src/directive/ionicCheckbox.js b/js/ext/angular/src/directive/ionicCheckbox.js
@@ -34,8 +34,9 @@ angular.module('ionic.ui.checkbox', [])
     transclude: true,
 
     template: '<label class="item item-checkbox">' +
-                '<div class="checkbox">' +
+                '<div class="checkbox checkbox-input-hidden">' +
                   '<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()">' +
+                  '<div class="checkbox-handle"></div>' +
                 '</div>' +
                 '<div class="item-content disable-pointer-events" ng-transclude></div>' +
               '</label>',

diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss
@@ -42,7 +42,12 @@
   }
 }
 
-.checkbox input {
+.checkbox-input-hidden input {
+  display: none;
+}
+
+.checkbox input,
+.checkbox .checkbox-handle {
   position: relative;
   width: $checkbox-width;
   height: $checkbox-height;
@@ -64,7 +69,8 @@
 }
 
 /* the checkmark within the box */
-.checkbox input:after {
+.checkbox input:after,
+.checkbox .checkbox-handle:after {
   @include transition(opacity .05s ease-in-out);
   @include rotate(-45deg);
   position: absolute;
@@ -80,7 +86,8 @@
   opacity: 0;
 }
 
-.grade-c .checkbox input:after {
+.grade-c .checkbox input:after,
+.grade-c .checkbox .checkbox-handle:after {
   @include rotate(0);
   top: 3px;
   left: 4px;
@@ -92,7 +99,8 @@
 }
 
 /* what the checkmark looks like when its checked */
-.checkbox input:checked:after {
+.checkbox input:checked:after,
+.checkbox input:checked + .checkbox-handle:after {
   opacity: 1;
 }
 

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -126,12 +126,14 @@
 // --------------------------------------------------
 
 @mixin checkbox-style($off-border-color, $on-bg-color) {
-  & input:before {
+  & input:before,
+  & .checkbox-handle:before {
     border: $checkbox-border-width solid $off-border-color;
   }
 
   // what the background looks like when its checked
-  & input:checked:before {
+  & input:checked:before,
+  & input:checked + .checkbox-handle:before {
     background: $on-bg-color;
   }
 }