fix(select) rework select to match Material Design spec

automatic 16px horizontal margin when in row layout
add md-inline-form support

Author: clshortfuse

src/components/select/select.js

@@ -1493,9 +1493,9 @@ function SelectProvider($$interimElementProvider) {
           transformOrigin = '50% 100%';
         }
       } else {
-        left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft) + 2;
+        left = (targetRect.left + centeredRect.left - centeredRect.paddingLeft);
         top = Math.floor(targetRect.top + targetRect.height / 2 - centeredRect.height / 2 -
-            centeredRect.top + contentNode.scrollTop) + 2;
+            centeredRect.top + contentNode.scrollTop) + 1;
 
         transformOrigin = (centeredRect.left + targetRect.width / 2) + 'px ' +
           (centeredRect.top + centeredRect.height / 2 - contentNode.scrollTop) + 'px 0px';

src/components/select/select.scss

@@ -52,13 +52,13 @@ $select-max-visible-options: 5 !default;
 }
 
 md-input-container > md-select {
-  margin: 0;
   order: 2;
+  margin-top: -7px; // Align with md-input-container
 }
 
 md-select {
   display: flex;
-  margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
+  margin: 0;
   &[disabled] ._md-select-value {
     background-position: 0 bottom;
     // This background-size is coordinated with a linear-gradient set in select-theme.scss
@@ -80,14 +80,14 @@ md-select {
     &.ng-invalid.ng-dirty {
       ._md-select-value {
         border-bottom: 2px solid;
-        padding-bottom: 0;
+        padding-bottom: 5px;
       }
     }
     &:focus {
       ._md-select-value {
         border-bottom-width: 2px;
         border-bottom-style: solid;
-        padding-bottom: 0;
+        padding-bottom: 5px;
       }
     }
   }
@@ -97,14 +97,16 @@ md-select {
 ._md-select-value {
   display: flex;
   align-items: center;
-  padding: 2px 2px 1px;
+  padding: 4px 0 6px 0;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   background-color: rgba(0,0,0,0);
   position: relative;
   box-sizing: content-box;
-  min-width: 8 * $baseline-grid;
+  min-width: 11 * $baseline-grid;
   min-height: 26px;
+  margin-bottom: auto;
+  -ms-flex-item-align: start; // workaround for margin-bottom: auto
   flex-grow: 1;
 
 
@@ -134,17 +136,17 @@ md-select {
     display: block;
     content: '\25BC';
     position: relative;
-    top: 2px;
+    right: -7px;
+    top: 1px;
     speak: none;
-    transform: scaleY(0.6) scaleX(1);
+    transform: scaleY(0.5);
   }
 
   &._md-select-placeholder {
     display: flex;
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
-    padding-left: 2px;
     z-index: 1;
   }
 }
@@ -248,3 +250,20 @@ md-select-menu[multiple] {
     }
   }
 }
+
+.layout-row,
+.layout-xs-row, .layout-gt-xs-row,
+.layout-sm-row, .layout-gt-sm-row,
+.layout-md-row, .layout-gt-md-row,
+.layout-lg-row, .layout-gt-lg-row,
+.layout-xl-row {
+  & > md-select:not(:last-child), {
+    @include rtl(margin-left, 0, $select-container-padding);
+    @include rtl(margin-right, $select-container-padding, 0);
+  }
+
+  .md-inline-form & > md-select {
+    margin-top: 13px;
+    margin-bottom: auto;
+  }
+}