feat(select): add styles for invalid

closes #1843, references #1722, references #1581

src/components/input/input-theme.scss

@@ -16,6 +16,10 @@ md-input-container.md-THEME_NAME-theme {
     color: '{{foreground-3}}';
   }
 
+  div[ng-messages] {
+    color: '{{warn-500}}'
+  }
+
 
   &:not(.md-input-invalid) {
     &.md-input-has-value {

src/components/input/input.scss

@@ -63,7 +63,7 @@ md-input-container {
   }
 
   label:not(.md-no-float),
-  .md-placeholder {
+  .md-placeholder:not(.md-select-label) {
     order: 1;
     pointer-events: none;
     -webkit-font-smoothing: antialiased;
@@ -73,7 +73,7 @@ md-input-container {
     transform-origin: left top;
     transition: transform $swift-ease-out-timing-function 0.25s;
   }
-  .md-placeholder {
+  .md-placeholder:not(.md-select-label) {
     position: absolute;
     top: 0;
     opacity: 0;

src/components/select/demoValidations/index.html

@@ -0,0 +1,17 @@
+<div ng-app="selectDemoBasic" ng-controller="AppCtrl" layout="column" layout-align="center center" style="min-height: 300px;">
+  <form name="myForm">
+    <p>Note that invalid styling only applies if invalid and dirty</p>
+    <md-input-container>
+      <md-select name="myModel" placeholder="Pick" ng-model="myModel" required>
+        <md-option value="1">One</md-option>
+        <md-option value="2">Two</md-option>
+      </md-select>
+      <div class="errors" ng-messages="myForm.myModel.$error" ng-if="myForm.$dirty">
+        <div ng-message="required">Required</div>
+      </div>
+    </md-input-container>
+    <div layout="row">
+      <md-button ng-click="clearValue()" ng-disabled="!myModel" style="margin-right: 20px;">Clear</md-button>
+      <md-button ng-click="save()" ng-disabled="myForm.$invalid" class="md-primary" layout layout-align="center end">Save</md-button>
+    </div>
+</div>

src/components/select/demoValidations/script.js

@@ -0,0 +1,9 @@
+angular.module('selectDemoBasic', ['ngMaterial', 'ngMessages'])
+.controller('AppCtrl', function($scope) {
+  $scope.clearValue = function() {
+    $scope.myModel = undefined;
+  };
+  $scope.save = function() {
+    alert('Form was valid!');
+  };
+});

src/components/select/demoValidations/style.css

@@ -0,0 +1,14 @@
+p {
+  padding: 0 20px;
+  text-align: center;
+}
+
+p.result {
+  font-size: 0.8em;
+  color: #777;
+}
+
+
+.demo-content  {
+    min-height: 348px;
+}

src/components/select/select-theme.scss

@@ -1,4 +1,10 @@
 md-select.md-THEME_NAME-theme {
+  &.ng-invalid.ng-dirty {
+    .md-select-label {
+      color: '{{warn-500}}' !important;
+      border-bottom-color: '{{warn-500}}' !important;
+    }
+  }
   &:not([disabled]):focus {
     .md-select-label {
       border-bottom-color: '{{primary-color}}';

src/components/select/select.scss

@@ -56,6 +56,12 @@ md-select {
     &:hover {
       cursor: pointer
     }
+    &.ng-invalid.ng-dirty {
+      .md-select-label {
+        padding-bottom: 7px;
+        border-bottom: 2px solid;
+      }
+    }
     &:focus {
       .md-select-label {
         border-bottom: 2px solid;