fix(select): support for md-inline-form, more configurable SCSS

Create better flexibility for manipulating select while still
following Material Design spec

 - Add `md-inline-form` support
 - Add alignment math to SCSS
 - Support custom margin and padding for `md-select`
 - Dynamically adjust bottom margin to allow denser layouts

Fixes #8712. Closes #8716.

Author: clshortfuse

package-lock.json

@@ -2067,7 +2067,7 @@ 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;
 

src/components/select/select.js

@@ -6,9 +6,23 @@ $select-option-height: 48px !default;
 $select-option-padding: 16px !default;
 $select-container-padding: 16px !default;
 $select-container-transition-duration: 350ms !default;
+$select-value-padding-top: 6px;
+$select-value-padding-bottom: 4px;
 
 $select-max-visible-options: 5 !default;
 
+// from input.scss
+$input-container-margin-top: 18px !default;
+$input-container-padding-top: 2px !default;
+$input-padding-top: 2px !default;
+$input-padding-bottom: 1px !default;
+
+$input-alignment: ($input-padding-top + $input-padding-bottom)
+                   - ($select-value-padding-top + $select-value-padding-bottom);
+$md-inline-alignment: ($input-container-margin-top + $input-container-padding-top)
+                      + ($input-padding-top + $input-padding-bottom)
+                      - ($select-value-padding-top + $select-value-padding-bottom);
+
 // Fixes the animations with the floating label when select is inside an input container
 md-input-container {
   &:not([md-no-float]) {
@@ -20,7 +34,7 @@ md-input-container {
   &.md-input-focused {
     &:not([md-no-float]) {
       .md-select-placeholder span:first-child {
-        transform: translateY(-22px) translateX(-2px) scale(0.75);
+        transform: translate(-2px, -22px) scale(0.75);
       }
     }
   }
@@ -47,7 +61,6 @@ md-input-container {
     margin: 3*$baseline-grid auto !important;
   }
 
-
   // enter: md-select scales in, then options fade in.
   &.md-active {
     display: block;
@@ -72,11 +85,19 @@ md-input-container {
   }
 }
 
-md-input-container > md-select {
-  margin: 0;
-  order: 2;
+.md-inline-form md-select {
+  margin-top: $md-inline-alignment;
 }
 
+md-input-container {
+  > md-select,
+  .md-inline-form & > md-select {
+    margin-top: $input-alignment;
+  }
+  > md-select {
+    order: 2;
+  }
+}
 
 // Show the asterisk on the placeholder if the element is required
 //
@@ -103,7 +124,6 @@ md-input-container.md-input-invalid {
 
 md-select {
   display: flex;
-  margin: 2.5*$baseline-grid 0 3*$baseline-grid + 2 0;
 
   &[required], &.ng-required {
     &.ng-empty.ng-invalid:not(.md-no-asterisk) {
@@ -124,6 +144,12 @@ md-select {
     // to create a dotted line under the input.
     background-size: 4px 1px;
     background-repeat: repeat-x;
+    // Add to padding-bottom to keep dotted line aligned with other bottom borders
+    // Sub from padding-top to keep height consistent
+    // Translate text 1px up to keep in alignment
+    padding-bottom: $select-value-padding-bottom + 1;
+    padding-top: $select-value-padding-top - 1;
+    transform: translateY(1px);
   }
 
   &:focus {
@@ -138,20 +164,14 @@ md-select {
     }
     &.ng-invalid.ng-touched {
       .md-select-value {
-        border-bottom-style: solid;
-        padding-bottom: 1px;
+        border-bottom: 2px solid;
       }
     }
     &:focus {
       .md-select-value {
         border-bottom-width: $select-border-width-default + 1px;
         border-bottom-style: solid;
-        padding-bottom: 0;
-      }
-      &.ng-invalid.ng-touched {
-        .md-select-value {
-          padding-bottom: 0;
-        }
+        padding-bottom: $select-value-padding-bottom - 1;
       }
     }
   }
@@ -187,17 +207,19 @@ md-input-container md-select {
 .md-select-value {
   display: flex;
   align-items: center;
-  padding-top: 2px;
-  padding-bottom: 1px;
+  padding-top: $select-value-padding-top;
+  padding-bottom: $select-value-padding-bottom;
   @include rtl(padding-left, 0, $input-container-padding);
   @include rtl(padding-right, $input-container-padding, 0);
   border-bottom-width: $select-border-width-default;
   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;
 
   > span:not(.md-select-icon) {
@@ -217,8 +239,7 @@ md-input-container md-select {
     @include rtl(align-items, flex-end, flex-start);
     @include rtl(text-align, right, left);
     width: 3 * $baseline-grid;
-    margin: 0 .5 * $baseline-grid;
-    transform: translate3d(0, -2px, 0);
+    transform: translateY(-2px);
     font-size: 1.2rem;
   }
 
@@ -227,9 +248,11 @@ md-input-container md-select {
     content: '\25BC';
     position: relative;
     top: 2px;
+    @include rtl(right, -4px, auto);
+    @include rtl(left, auto, -4px);
     speak: none;
-    font-size: 13px;
-    transform: scaleY(0.5) scaleX(1);
+    font-size: 16px;
+    transform: scaleY(0.5);
   }
 
   &.md-select-placeholder {