From 8371f3fcf42339c1c0438c81eac5364a89785ef3 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 30 May 2017 21:28:11 +0200
Subject: [PATCH] fix(input,select): set disabled underline color based on
 theme

* Fixes the disabled underline blending in with the background in dark themes.
* Increases the opacity of the disabled underline from 26% to 38% to make a bit more visible against the background.
---
 src/lib/core/style/_form-common.scss | 12 ++++--------
 src/lib/input/_input-theme.scss      |  6 ++++++
 src/lib/input/input-container.scss   |  2 --
 src/lib/select/_select-theme.scss    |  9 ++++++++-
 src/lib/select/select.scss           |  2 --
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/lib/core/style/_form-common.scss b/src/lib/core/style/_form-common.scss
index a46e2e0b9f34..19d0cee24698 100644
--- a/src/lib/core/style/_form-common.scss
+++ b/src/lib/core/style/_form-common.scss
@@ -1,12 +1,8 @@
-
-// Gradient for showing the dashed line when the input is disabled.
+// Renders a gradient for showing the dashed line when the input is disabled.
 // Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
 // to match the Material Design spec.
-$mat-underline-disabled-background-image:
-        linear-gradient(to right, rgba(0, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.26) 33%, transparent 0%);
-
-@mixin mat-control-disabled-underline {
-  background-image: $mat-underline-disabled-background-image;
+@mixin mat-control-disabled-underline($color) {
+  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
   background-size: 4px 1px;
   background-repeat: repeat-x;
-}
\ No newline at end of file
+}
diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index 82e9dd7f0e4a..48e3ad09f240 100644
--- a/src/lib/input/_input-theme.scss
+++ b/src/lib/input/_input-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/form-common';
 
 
 @mixin mat-input-theme($theme) {
@@ -52,6 +53,11 @@
 
   .mat-input-underline {
     border-color: $input-underline-color;
+
+    &.mat-disabled {
+      // Since this is a dotted line, we need to make it slightly darker to get it to stand out.
+      @include mat-control-disabled-underline(rgba($input-underline-color, 0.38));
+    }
   }
 
   .mat-input-ripple {
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss
index b365bb600a29..80c87bdeb507 100644
--- a/src/lib/input/input-container.scss
+++ b/src/lib/input/input-container.scss
@@ -1,6 +1,5 @@
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
-@import '../core/style/form-common';
 
 
 $mat-input-floating-placeholder-scale-factor: 0.75 !default;
@@ -206,7 +205,6 @@ $mat-input-underline-disabled-background-image:
   border-top-style: solid;
 
   &.mat-disabled {
-    @include mat-control-disabled-underline();
     border-top: 0;
     background-position: 0;
   }
diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 9a4efc1cad41..8f0739ca343d 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -1,5 +1,6 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
+@import '../core/style/form-common';
 
 @mixin _mat-select-inner-content-theme($palette) {
   $color: mat-color($palette);
@@ -19,6 +20,7 @@
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
   $warn: map-get($theme, warn);
+  $underline-color: mat-color($foreground, divider);
 
   .mat-select-trigger,
   .mat-select-arrow {
@@ -26,7 +28,12 @@
   }
 
   .mat-select-underline {
-    background-color: mat-color($foreground, divider);
+    background-color: $underline-color;
+  }
+
+  [aria-disabled='true'] .mat-select-underline {
+    // Since this is a dotted line, we need to make it slightly darker to get it to stand out.
+    @include mat-control-disabled-underline(rgba($underline-color, 0.38));
   }
 
   .mat-select-disabled .mat-select-value,
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 9d7fcc1c2c12..dca6d65b4e81 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -1,6 +1,5 @@
 @import '../core/style/menu-common';
 @import '../core/style/list-common';
-@import '../core/style/form-common';
 @import '../core/style/variables';
 @import '../core/style/vendor-prefixes';
 @import '../core/a11y/a11y';
@@ -42,7 +41,6 @@ $mat-select-trigger-font-size: 16px !default;
   height: 1px;
 
   [aria-disabled='true'] & {
-    @include mat-control-disabled-underline();
     background-color: transparent;
     background-position: 0 bottom;
   }