fix(select, input): asterisk should be always red.

Commit 024e979 added support for asterisks for the `md-select`, but also removed the red styling for the asterisk.
As per specs, the asterisk should be always red, except when the input is blurred and not invalid.

This commit makes the asterisk always red and makes the `md-select` asterisk consistent to the inputs.

Closes #9224

Author: devversion

src/components/input/input-theme.scss

@@ -14,10 +14,8 @@ md-input-container.md-THEME_NAME-theme {
     color: '{{foreground-3}}';
   }
 
-  &.md-input-invalid {
-    label.md-required:after {
-      color: '{{warn-A700}}'
-    }
+  label.md-required:after {
+    color: '{{warn-A700}}'
   }
 
   &:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {

src/components/select/select-theme.scss

@@ -1,13 +1,27 @@
 md-input-container {
-  &.md-input-focused {
-    &:not(.md-input-has-value) {
-      md-select.md-THEME_NAME-theme {
-        .md-select-value {
-          color: '{{primary-color}}';
-          &.md-select-placeholder {
-            color: '{{primary-color}}';
-          }
-        }
+
+  // The asterisk of the select should always use the warn color.
+  md-select.md-THEME_NAME-theme .md-select-value {
+    span:first-child:after {
+      color: '{{warn-A700}}'
+    }
+  }
+
+  // When the select is blurred and not invalid then the asterisk should use the foreground color.
+  &:not(.md-input-focused):not(.md-input-invalid) {
+    md-select.md-THEME_NAME-theme .md-select-value {
+      span:first-child:after {
+        color: '{{foreground-3}}';
+      }
+    }
+  }
+
+  &.md-input-focused:not(.md-input-has-value) {
+    md-select.md-THEME_NAME-theme .md-select-value {
+      color: '{{primary-color}}';
+
+      &.md-select-placeholder {
+        color: '{{primary-color}}';
       }
     }
   }
@@ -22,6 +36,7 @@ md-input-container {
       border-bottom-color: transparent !important;
     }
   }
+
 }
 
 md-select.md-THEME_NAME-theme {
@@ -31,10 +46,15 @@ md-select.md-THEME_NAME-theme {
     background-image: -ms-linear-gradient(left, transparent 0%, '{{foreground-3}}' 100%);
   }
   .md-select-value {
+    border-bottom-color: '{{foreground-4}}';
+
     &.md-select-placeholder {
       color: '{{foreground-3}}';
     }
-    border-bottom-color: '{{foreground-4}}';
+
+    span:first-child:after {
+      color: '{{warn-A700}}'
+    }
   }
   &.md-no-underline .md-select-value {
     border-bottom-color: transparent !important;