From 08e76618b43dd46824f5cbf5ecf02c73bae3a64d Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Wed, 5 Jul 2017 18:24:11 +0200
Subject: [PATCH] fix(select): bigger height for underline on focus

* On focus the underline height should be as twice as big as the normal height. This is similar to the input component of Angular Material.
* Replaces the `aria-disabled` attribute selectors with the `mat-select-disabled` class.

Fixes #5499
---
 src/lib/select/select.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index d7ca055905d9..faf2b83c03e1 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -10,6 +10,7 @@ $mat-select-trigger-min-width: 112px !default;
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
+$mat-select-trigger-underline-height: 1px !default;
 
 .mat-select {
   display: inline-block;
@@ -25,7 +26,7 @@ $mat-select-panel-max-height: 256px !default;
   position: relative;
   box-sizing: border-box;
 
-  [aria-disabled='true'] & {
+  .mat-select-disabled & {
     @include user-select(none);
     cursor: default;
   }
@@ -36,9 +37,13 @@ $mat-select-panel-max-height: 256px !default;
   bottom: 0;
   left: 0;
   right: 0;
-  height: 1px;
+  height: $mat-select-trigger-underline-height;
 
-  [aria-disabled='true'] & {
+  .mat-select:focus & {
+    height: $mat-select-trigger-underline-height * 2;
+  }
+
+  .mat-select-disabled & {
     @include mat-control-disabled-underline();
     background-color: transparent;
     background-position: 0 bottom;