fix(datepicker,select): arrow button consistency (angular#9807)

* Fixes the datepicker's arrow being off a few pixels inside `md-input-container`, as well as being too close to the bottom when not in a `md-input-container`.
* Fixes the select's arrow icon being too dark, because it inherits from the closest `color` rule.

Relates to angular#9798.

Author: crisbeto

src/components/datepicker/datePicker.scss

@@ -194,10 +194,10 @@ md-datepicker {
 .md-datepicker-triangle-button {
   position: absolute;
   @include rtl-prop(right, left, 0, auto);
-  top: $md-date-arrow-size;
+  bottom: -$md-date-arrow-size / 2;
 
   // TODO(jelbourn): This position isn't great on all platforms.
-  @include rtl(transform, translateY(-25%) translateX(45%), translateY(-25%) translateX(-45%));
+  @include rtl(transform, translateX(45%), translateX(-45%));
 }
 
 // Need crazy specificity to override .md-button.md-icon-button.

src/components/select/select-theme.scss

@@ -94,6 +94,14 @@ md-select.md-THEME_NAME-theme {
       }
     }
   }
+
+  .md-select-icon {
+    color: '{{foreground-3}}';
+
+    &:hover {
+      color: '{{foreground-2}}';
+    }
+  }
 }
 
 md-select-menu.md-THEME_NAME-theme {