feat(checkbox): add disabled and emotion styles to ion-checkbox. Closes

#1683 and #1509
ionic-team · Jul 10, 2014 · 79fb1e4 · 79fb1e4
1 parent fd75abd
commit 79fb1e4
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 29 deletions.
diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss
@@ -12,36 +12,46 @@
   display: inline-block;
   padding: ($checkbox-height / 4) ($checkbox-width / 4);
   cursor: pointer;
+}
+.checkbox-light  {
+  @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
+}
+.checkbox-stable  {
+  @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
+}
+.checkbox-positive  {
+  @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
+}
+.checkbox-calm  {
+  @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
+}
+.checkbox-assertive  {
+  @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
+}
+.checkbox-balanced  {
+  @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
+}
+.checkbox-energized{
+  @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
+}
+.checkbox-royal  {
+  @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
+}
+.checkbox-dark  {
+  @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
+}
 
-  &.checkbox-light  {
-    @include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light);
-  }
-  &.checkbox-stable  {
-    @include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable);
-  }
-  &.checkbox-positive  {
-    @include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive);
-  }
-  &.checkbox-calm  {
-    @include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm);
-  }
-  &.checkbox-assertive  {
-    @include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive);
-  }
-  &.checkbox-balanced  {
-    @include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced);
-  }
-  &.checkbox-energized  {
-    @include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized);
-  }
-  &.checkbox-royal  {
-    @include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal);
-  }
-  &.checkbox-dark  {
-    @include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark);
-  }
+.checkbox input:disabled:before,
+.checkbox input:disabled + .checkbox-icon:before {
+  border-color: $checkbox-off-border-light;
 }
 
+.checkbox input:disabled:checked:before,
+.checkbox input:disabled:checked + .checkbox-icon:before {
+  background: $checkbox-on-bg-light;
+}
+
+
 .checkbox.checkbox-input-hidden input {
   display: none !important;
 }

diff --git a/test/css/input-checkbox.html b/test/css/input-checkbox.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html ng-app="ionic">
+<html ng-app="ionicApp">
   <head>
     <script src="../../dist/js/ionic.bundle.js"></script>
     <meta charset="utf-8">
@@ -20,7 +20,7 @@ <h1 class="title">Input: Checkbox</h1>
 
     <main class="content has-header">
 
-      <ul class="list">
+      <ul class="list" ng-controller="MainCtrl">
         <li class="item item-checkbox">
            <label class="checkbox">
              <input type="checkbox" checked>
@@ -51,9 +51,34 @@ <h1 class="title">Input: Checkbox</h1>
            </label>
            Right side checkbox
         </li>
+        <li class="item item-checkbox">
+          <label class="checkbox">
+            <input type="checkbox" disabled="disabled">
+          </label>
+          Disabled Checkbox
+        </li>
+        <li class="item-divider">Directives</li>
+        <ion-checkbox ng-model="test" ng-checked="test" ng-disabled="test">Disabled Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-light">Light Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-stable">Stable Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-positive">Positive Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-calm">Calm Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-assertive">Assertive Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-balanced">Balanced Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-energized">Energized Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-royal">Royal Directive</ion-checkbox>
+        <ion-checkbox ng-model="test" ng-checked="test" class="checkbox-dark">Dark Directive</ion-checkbox>
       </ul>
 
     </main>
+    <script type="text/javascript">
+      angular.module('ionicApp', ['ionic'])
+
+          .controller('MainCtrl', function($scope) {
+
+            $scope.test = true;
 
+          });
+    </script>
   </body>
 </html>