From d19208397c946222c28ce1d6644930bb1c255e83 Mon Sep 17 00:00:00 2001
From: Thomas Burleson <ThomasBurleson@Gmail.com>
Date: Thu, 11 Dec 2014 16:14:56 -0600
Subject: [PATCH] fix(checkbox): added css support for disabled states

Close #888.
---
 .../radioButton/demoBasicUsage/index.html     |  1 +
 .../radioButton/demoBasicUsage/script.js      |  5 +++--
 .../radioButton/radio-button-theme.scss       | 22 ++++++++++++++-----
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/radioButton/demoBasicUsage/index.html b/src/components/radioButton/demoBasicUsage/index.html
index 6a0f81b31e1..c0fa71bc34a 100644
--- 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
index c5c1531cdcb..32d9740c7b9 100644
--- 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
index 40e580e2e93..dd951f088c2 100644
--- 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;
 }