rename .checkbox-handle to .checkbox-icon

ionic-team · Apr 7, 2014 · dfbb376 · dfbb376
1 parent b0b446d
commit dfbb376
Show file tree

Hide file tree

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

diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss
@@ -42,35 +42,43 @@
   }
 }
 
-.checkbox-input-hidden input {
-  display: none;
+.checkbox.checkbox-input-hidden input {
+  display: none !important;
 }
 
 .checkbox input,
-.checkbox .checkbox-handle {
+.checkbox-icon {
   position: relative;
   width: $checkbox-width;
   height: $checkbox-height;
+  display: block;
   border: 0;
   background: transparent;
   cursor: pointer;
   -webkit-appearance: none;
 
   &:before {
-    /* what the checkbox looks like when its not checked */
+    // what the checkbox looks like when its not checked
     display: table;
     width: 100%;
     height: 100%;
+    border-width: $checkbox-border-width;
+    border-style: solid;
     border-radius: $checkbox-border-radius;
     background: $checkbox-off-bg-color;
     content: ' ';
     transition: background-color .1s ease-in-out;
   }
 }
 
-/* the checkmark within the box */
+.checkbox input:checked:before,
+input:checked + .checkbox-icon:before {
+  border-width: $checkbox-border-width + 1;
+}
+
+// the checkmark within the box
 .checkbox input:after,
-.checkbox .checkbox-handle:after {
+.checkbox-icon:after {
   @include transition(opacity .05s ease-in-out);
   @include rotate(-45deg);
   position: absolute;
@@ -87,7 +95,7 @@
 }
 
 .grade-c .checkbox input:after,
-.grade-c .checkbox .checkbox-handle:after {
+.grade-c .checkbox-icon:after {
   @include rotate(0);
   top: 3px;
   left: 4px;
@@ -98,13 +106,13 @@
   font-size: 20px;
 }
 
-/* what the checkmark looks like when its checked */
+// what the checkmark looks like when its checked
 .checkbox input:checked:after,
-.checkbox input:checked + .checkbox-handle:after {
+input:checked + .checkbox-icon:after {
   opacity: 1;
 }
 
-/* make sure item content have enough padding on left to fit the checkbox */
+// make sure item content have enough padding on left to fit the checkbox
 .item-checkbox {
   padding-left: ($item-padding * 2) + $checkbox-width;
 
@@ -113,7 +121,7 @@
   }
 }
 
-/* position the checkbox to the left within an item */
+// position the checkbox to the left within an item
 .item-checkbox .checkbox {
   position: absolute;
   top: 50%;

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