From c2e70d07b22e06f7153033c3b6dafe09ec0cc10d Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 25 Aug 2017 20:15:23 +0200
Subject: [PATCH] fix(autocomplete,select): inconsistent disabled option
 coloring

* Fixes a selected and disabled option in the autocomplete not showing as disabled until it is hovered.
* Fixes the disabled and selected options in `md-select` using the theme color, instead of the disabled color.
* Fixes the disabled state of an option not being passed down to its checkbox.

Fixes #6638.
---
 src/lib/autocomplete/_autocomplete-theme.scss | 17 +++++++++--------
 src/lib/core/option/_option-theme.scss        | 11 ++++++-----
 src/lib/core/option/option.html               |  4 ++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
index 7daf6f3b81fc..0572a6600ed5 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -8,14 +8,15 @@
     background: mat-color($background, card);
     color: mat-color($foreground, text);
 
-    .mat-option {
-      // Selected options in autocompletes should not be gray, but we
-      // only want to override the background for selected options if
-      // they are *not* in hover or focus state. This change has to be
-      // made here because base option styles are shared between the
-      // autocomplete and the select.
-      &.mat-selected:not(.mat-active):not(:hover) {
-        background: mat-color($background, card);
+    // Selected options in autocompletes should not be gray, but we
+    // only want to override the background for selected options if
+    // they are *not* in hover or focus state. This change has to be
+    // made here because base option styles are shared between the
+    // autocomplete and the select.
+    .mat-option.mat-selected:not(.mat-active):not(:hover) {
+      background: mat-color($background, card);
+
+      &:not(.mat-option-disabled) {
         color: mat-color($foreground, text);
       }
     }
diff --git a/src/lib/core/option/_option-theme.scss b/src/lib/core/option/_option-theme.scss
index 6a2a0fdb2587..0c423048b005 100644
--- a/src/lib/core/option/_option-theme.scss
+++ b/src/lib/core/option/_option-theme.scss
@@ -12,24 +12,25 @@
   .mat-option {
     color: mat-color($foreground, text);
 
-    &:hover:not(.mat-option-disabled), &:focus:not(.mat-option-disabled) {
+    &:hover:not(.mat-option-disabled),
+    &:focus:not(.mat-option-disabled) {
       background: mat-color($background, hover);
     }
 
-    .mat-primary &.mat-selected {
+    .mat-primary &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($primary);
     }
 
-    .mat-accent &.mat-selected {
+    .mat-accent &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($accent);
     }
 
-    .mat-warn &.mat-selected {
+    .mat-warn &.mat-selected:not(.mat-option-disabled) {
       color: mat-color($warn);
     }
 
     // In multiple mode there is a checkbox to show that the option is selected.
-    &.mat-selected:not(.mat-option-multiple) {
+    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
       background: mat-color($background, hover);
     }
 
diff --git a/src/lib/core/option/option.html b/src/lib/core/option/option.html
index 4ed75942756d..9b5b23e354b2 100644
--- a/src/lib/core/option/option.html
+++ b/src/lib/core/option/option.html
@@ -1,8 +1,8 @@
 <span [ngSwitch]="_isCompatibilityMode" *ngIf="multiple">
   <mat-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchCase="true"
-      [state]="selected ? 'checked' : ''"></mat-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''" [disabled]="disabled"></mat-pseudo-checkbox>
   <md-pseudo-checkbox class="mat-option-pseudo-checkbox" *ngSwitchDefault
-      [state]="selected ? 'checked' : ''"></md-pseudo-checkbox>
+      [state]="selected ? 'checked' : ''" [disabled]="disabled"></md-pseudo-checkbox>
 </span>
 
 <ng-content></ng-content>