fix(select): trim long labels inside md-option (#2444)

* fix(select): not trimming long labels

* Fixes long text not being trimmed inside of `md-option`, because the element is a flex container. Switches it to `display: block` and uses `line-height` to center the text.
* Fixes the selected value not being trimmed, because the element doesn't have a defined width.

Fixes #2440.

* fix: menu icon alignment

Author: crisbeto

src/demo-app/select/select-demo.ts

@@ -24,7 +24,7 @@ export class SelectDemo {
 
   drinks = [
     {value: 'coke-0', viewValue: 'Coke'},
-    {value: 'sprite-1', viewValue: 'Sprite'},
+    {value: 'long-name-1', viewValue: 'Decaf Chocolate Brownie Vanilla Gingerbread Frappuccino'},
     {value: 'water-2', viewValue: 'Water'},
     {value: 'pepper-3', viewValue: 'Dr. Pepper'},
     {value: 'coffee-4', viewValue: 'Coffee'},

src/lib/core/style/_menu-common.scss

@@ -24,9 +24,9 @@ $md-menu-side-padding: 16px !default;
 @mixin md-menu-item-base() {
   @include md-truncate-line();
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  // Needs to be a block for the ellipsis to work.
+  display: block;
+  line-height: $md-menu-item-height;
   height: $md-menu-item-height;
   padding: 0 $md-menu-side-padding;
 

src/lib/menu/_menu-theme.scss

@@ -20,6 +20,7 @@
 
     md-icon {
       color: md-color($foreground, 'icon');
+      vertical-align: middle;
     }
 
     &:hover:not([disabled]), &:focus:not([disabled]) {

src/lib/select/select.scss

@@ -65,8 +65,9 @@ md-select {
 }
 
 .md-select-value {
-  position: absolute;
   @include md-truncate-line();
+  position: absolute;
+  max-width: calc(100% - #{$md-select-arrow-size * 2});
 
   // Firefox and some versions of IE incorrectly keep absolutely
   // positioned children of flex containers in the flex flow when calculating