From b437d364ffe23bff711cddd597e1eae32008a693 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 9 Feb 2017 13:02:29 -0800
Subject: [PATCH 1/4] fix(select): change styling to always center select value
 text

---
 src/lib/select/select.scss | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index b95435bb562e..304c9e42c2d5 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -78,13 +78,16 @@ $mat-select-trigger-font-size: 16px !default;
   // position. This has been fixed for Firefox 52, slated for early 2017.
   // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=874718
   //
-  // In the meantime, we must adjust the left position to 0 to mimic where it
-  // would be if it were correctly taken out of the flex flow. It's also necessary
-  // to adjust the top value because absolutely positioned elements should not be
-  // affected by the flex container's "align-items" property either. To center the text,
-  // we must offset by 6px (6px top + 6px bottom + 18px text height = 30px total height).
+  // In the meantime, we must adjust the position to fit the top and left edge of the
+  // containing element with a height matching the trigger container.
+  // In doing so, we can use align-items: center to allow the text to
+  // correctly position itself in the middle of the container.
+  top: 0;
   left: 0;
-  top: 6px;
+  height: $mat-select-trigger-height;
+
+  display: flex;
+  align-items: center;
 
   [dir='rtl'] & {
     left: auto;

From 6d234d4e5549f4c548ce28b46a7b88f67c6db33e Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 9 Feb 2017 14:00:39 -0800
Subject: [PATCH 2/4] move border to its own div; make value ellipsis

---
 src/lib/select/_select-theme.scss | 15 ++++++++++++---
 src/lib/select/select.html        |  5 ++++-
 src/lib/select/select.scss        | 29 ++++++++++++++++++++++-------
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 5cc54c91fe63..a7d2c7415e32 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -9,16 +9,25 @@
 
   .mat-select-trigger {
     color: mat-color($foreground, hint-text);
-    border-bottom: 1px solid mat-color($foreground, divider);
 
     .mat-select:focus:not(.mat-select-disabled) & {
       color: mat-color($primary);
-      border-bottom: 1px solid mat-color($primary);
     }
 
     .mat-select.ng-invalid.ng-touched:not(.mat-select-disabled) & {
       color: mat-color($warn);
-      border-bottom: 1px solid mat-color($warn);
+    }
+  }
+
+  .mat-select-border {
+    background-color: mat-color($foreground, divider);
+
+    .mat-select:focus:not(.mat-select-disabled) & {
+      background-color: mat-color($primary);
+    }
+
+    .mat-select.ng-invalid.ng-touched:not(.mat-select-disabled) & {
+      background-color: mat-color($warn);
     }
   }
 
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index ca7ae280db9f..5fc618a68193 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -1,8 +1,11 @@
 <div class="mat-select-trigger" cdk-overlay-origin (click)="toggle()" #origin="cdkOverlayOrigin" #trigger>
   <span class="mat-select-placeholder" [class.mat-floating-placeholder]="this.selected"
    [@transformPlaceholder]="_placeholderState" [style.width.px]="_selectedValueWidth"> {{ placeholder }} </span>
-  <span class="mat-select-value" *ngIf="selected"> {{ selected?.viewValue }} </span>
+  <span class="mat-select-value" *ngIf="selected">
+    <span class="mat-select-value-text">{{ selected?.viewValue }}</span>
+  </span>
   <span class="mat-select-arrow"></span>
+  <span class="mat-select-border"></span>
 </div>
 
 <template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 304c9e42c2d5..7b29a96da8a3 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -29,14 +29,26 @@ $mat-select-trigger-font-size: 16px !default;
   font-size: $mat-select-trigger-font-size;
 
   [aria-disabled='true'] & {
-    @include mat-control-disabled-underline();
-    border-bottom: transparent;
     background-position: 0 bottom;
     cursor: default;
     user-select: none;
   }
 }
 
+.mat-select-border {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+
+  [aria-disabled='true'] & {
+    @include mat-control-disabled-underline();
+    background-color: transparent;
+    background-position: 0 bottom;
+  }
+}
+
 .mat-select-placeholder {
   position: relative;
   padding: 0 2px;
@@ -69,7 +81,6 @@ $mat-select-trigger-font-size: 16px !default;
 }
 
 .mat-select-value {
-  @include mat-truncate-line();
   position: absolute;
   max-width: calc(100% - #{$mat-select-arrow-size * 2});
 
@@ -78,13 +89,12 @@ $mat-select-trigger-font-size: 16px !default;
   // position. This has been fixed for Firefox 52, slated for early 2017.
   // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=874718
   //
-  // In the meantime, we must adjust the position to fit the top and left edge of the
-  // containing element with a height matching the trigger container.
-  // In doing so, we can use align-items: center to allow the text to
+  // In the meantime, we must adjust the position to fit the top, left, and bottom edge of the
+  // containing trigger element. In doing so, we can use align-items: center to allow the text to
   // correctly position itself in the middle of the container.
   top: 0;
   left: 0;
-  height: $mat-select-trigger-height;
+  bottom: 0;
 
   display: flex;
   align-items: center;
@@ -95,6 +105,11 @@ $mat-select-trigger-font-size: 16px !default;
   }
 }
 
+.mat-select-value-text {
+  @include mat-truncate-line();
+  line-height: $mat-select-trigger-height;
+}
+
 .mat-select-arrow {
   width: 0;
   height: 0;

From 44b4e1864aa00f8035e0a567840cf2c1db7a80fa Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 9 Feb 2017 15:15:54 -0800
Subject: [PATCH 3/4] add more room for arrow, account for margin

---
 src/lib/select/select.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 7b29a96da8a3..383a91f50f59 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -29,7 +29,6 @@ $mat-select-trigger-font-size: 16px !default;
   font-size: $mat-select-trigger-font-size;
 
   [aria-disabled='true'] & {
-    background-position: 0 bottom;
     cursor: default;
     user-select: none;
   }
@@ -82,7 +81,7 @@ $mat-select-trigger-font-size: 16px !default;
 
 .mat-select-value {
   position: absolute;
-  max-width: calc(100% - #{$mat-select-arrow-size * 2});
+  max-width: calc(100% - #{($mat-select-arrow-size + $mat-select-arrow-margin) * 2});
 
   // Firefox and some versions of IE incorrectly keep absolutely
   // positioned children of flex containers in the flex flow when calculating

From 18586092e132f251a5b85b3f09fbdb8d7a3beca2 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewjs@google.com>
Date: Thu, 9 Feb 2017 16:04:35 -0800
Subject: [PATCH 4/4] minor fixes

---
 src/lib/select/_select-theme.scss | 2 +-
 src/lib/select/select.html        | 2 +-
 src/lib/select/select.scss        | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index a7d2c7415e32..3b009f5306ba 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -19,7 +19,7 @@
     }
   }
 
-  .mat-select-border {
+  .mat-select-underline {
     background-color: mat-color($foreground, divider);
 
     .mat-select:focus:not(.mat-select-disabled) & {
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 5fc618a68193..4e36b2187800 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -5,7 +5,7 @@
     <span class="mat-select-value-text">{{ selected?.viewValue }}</span>
   </span>
   <span class="mat-select-arrow"></span>
-  <span class="mat-select-border"></span>
+  <span class="mat-select-underline"></span>
 </div>
 
 <template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 383a91f50f59..e024c72e12ec 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -19,7 +19,6 @@ $mat-select-trigger-font-size: 16px !default;
 
 .mat-select-trigger {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   height: $mat-select-trigger-height;
   min-width: $mat-select-trigger-min-width;
@@ -34,7 +33,7 @@ $mat-select-trigger-font-size: 16px !default;
   }
 }
 
-.mat-select-border {
+.mat-select-underline {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -52,6 +51,7 @@ $mat-select-trigger-font-size: 16px !default;
   position: relative;
   padding: 0 2px;
   transform-origin: left top;
+  flex-grow: 1;
 
   // These values are duplicated from animation code in order to
   // allow placeholders to sometimes float without animating,
@@ -82,6 +82,7 @@ $mat-select-trigger-font-size: 16px !default;
 .mat-select-value {
   position: absolute;
   max-width: calc(100% - #{($mat-select-arrow-size + $mat-select-arrow-margin) * 2});
+  flex-grow: 1;
 
   // Firefox and some versions of IE incorrectly keep absolutely
   // positioned children of flex containers in the flex flow when calculating