fix(checkbox): added css support for disabled states

Close #888.
angular · Dec 11, 2014 · d192083 · d192083
1 parent da77970
commit d192083
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/components/radioButton/demoBasicUsage/index.html b/src/components/radioButton/demoBasicUsage/index.html
@@ -18,6 +18,7 @@
 
         <md-radio-button ng-repeat="d in radioData"
                          ng-value="d.value"
+                         ng-disabled=" d.isDisabled "
                          aria-label="{{ d.label }}">
             {{ d.label }}
         </md-radio-button>

diff --git a/src/components/radioButton/demoBasicUsage/script.js b/src/components/radioButton/demoBasicUsage/script.js
@@ -5,13 +5,14 @@ angular.module('radioDemo1', ['ngMaterial'])
 
   $scope.data = {
     group1 : 'Banana',
-    group2 : '3'
+    group2 : '2'
   };
 
   $scope.radioData = [
     { label: '1', value: '1' },
     { label: '2', value: '2' },
-    { label: '3', value: '3' }
+    { label: '3', value: '3', isDisabled: true },
+    { label: '4', value: '4' }
   ];
 
   $scope.addItem = function() {

diff --git a/src/components/radioButton/radio-button-theme.scss b/src/components/radioButton/radio-button-theme.scss
@@ -3,18 +3,14 @@ $radio-on-background-color: rgba(map-get($radio-color-palette, '400'), 0.87) !de
 $radio-ripple-color: map-get($radio-color-palette, '600') !default;
 $radio-off-border-color: $foreground-secondary-color !default;
 $radio-group-focus-border-color: $foreground-primary-color !default;
+$radio-disabled-border-color: $input-disabled-border-color !default;
 
 md-radio-button.md-#{$theme-name}-theme,
 md-switch.md-#{$theme-name}-theme .md-switch-thumb {
-  .md-container .md-ripple {
-    color: $radio-ripple-color;
-  }
-
   .md-off {
     border-color: $radio-off-border-color;
   }
 
-
   .md-on {
     background-color: $radio-on-background-color;
   }
@@ -26,8 +22,24 @@ md-switch.md-#{$theme-name}-theme .md-switch-thumb {
   &.md-checked .md-ink-ripple {
     color: $radio-on-background-color;
   }
+
+  .md-container .md-ripple {
+    color: $radio-ripple-color;
+  }
+
+  &[disabled] {
+    .md-container .md-off {
+      border-color: $radio-disabled-border-color;
+    }
+
+    .md-container .md-on {
+      border-color: $radio-disabled-border-color;
+    }
+  }
+
 }
 
+
 md-radio-group.md-#{$theme-name}-theme:focus {
   border-color: $radio-group-focus-border-color;
 }