refactor(select): icon should be gray for has-focus

Author: thetaPC

core/src/components/select/select.md.outline.scss

@@ -246,11 +246,13 @@
 
 /**
  * When the select has a fill, is
- * in an item, and is expanded, then
- * the icon should take on the
+ * in an item, and is expanded or focused,
+ * then the icon should take on the
  * highlight color.
  */
 :host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,
-:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon {
+:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-outline) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid.select-fill-outline) .select-wrapper .select-icon {
   color: var(--highlight-color);
 }

core/src/components/select/select.md.scss

@@ -88,12 +88,14 @@
 
 /**
  * When the select has no fill, is
- * in an item, and is expanded, then
- * the icon should be the same color
+ * in an item, and is expanded or focused,
+ * then the icon should be the same color
  * as the text color.
  */
 :host(.in-item.select-expanded) .select-wrapper .select-icon,
-:host(.in-item.select-expanded.ion-touched.ion-invalid) .select-wrapper .select-icon {
+:host(.in-item.select-expanded.ion-touched.ion-invalid) .select-wrapper .select-icon,
+:host(.in-item.has-focus) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid) .select-wrapper .select-icon {
   color: #{$select-md-icon-color};
 }
 

core/src/components/select/select.md.solid.scss

@@ -86,11 +86,13 @@
 
 /**
  * When the select has a fill, is
- * in an item, and is expanded, then
- * the icon should take on the
+ * in an item, and is expanded or focused,
+ * then the icon should take on the
  * highlight color.
  */
 :host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,
-:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon {
+:host(.in-item.select-expanded.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.select-fill-solid) .select-wrapper .select-icon,
+:host(.in-item.has-focus.ion-touched.ion-invalid.select-fill-solid) .select-wrapper .select-icon {
   color: var(--highlight-color);
 }