move border to its own div; make value ellipsis

Author: andrewseguin

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);
     }
   }
 

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()"

src/lib/select/select.scss

@@ -22,17 +22,28 @@ $mat-select-panel-max-height: 256px !default;
   min-width: $mat-select-trigger-min-width;
   cursor: pointer;
   position: relative;
-  box-sizing: border-box;
 
   [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;
@@ -65,7 +76,6 @@ $mat-select-panel-max-height: 256px !default;
 }
 
 .mat-select-value {
-  @include mat-truncate-line();
   position: absolute;
   max-width: calc(100% - #{$mat-select-arrow-size * 2});
 
@@ -74,13 +84,12 @@ $mat-select-panel-max-height: 256px !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;
@@ -91,6 +100,11 @@ $mat-select-panel-max-height: 256px !default;
   }
 }
 
+.mat-select-value-text {
+  @include mat-truncate-line();
+  line-height: $mat-select-trigger-height;
+}
+
 .mat-select-arrow {
   width: 0;
   height: 0;