refactor(select): update the styles for no fill

Author: thetaPC

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

@@ -240,3 +240,17 @@
 :host(.label-floating.select-fill-outline) .select-outline-notch {
   border-top: none;
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded, 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 {
+  color: var(--highlight-color);
+}

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

@@ -12,14 +12,6 @@
   --highlight-height: 2px;
 }
 
-.select-icon {
-  width: $select-md-icon-size;
-
-  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
-
-  color: #{$text-color-step-500};
-}
-
 // Select Label
 // ----------------------------------------------------------------
 
@@ -77,6 +69,14 @@
 // Select Icon
 // ----------------------------------------------------------------
 
+.select-icon {
+  width: $select-md-icon-size;
+
+  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
+
+  color: #{$select-md-icon-color};
+}
+
 /**
  * This rotates the chevron icon
  * when the select is activated.
@@ -86,17 +86,24 @@
   @include transform(rotate(180deg));
 }
 
+/**
+ * When the select has no fill, is
+ * in an item, and is expanded, 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 {
+  color: #{$select-md-icon-color};
+}
+
 /**
  * When the select is focused the icon should
- * take on the highlight color when the select
- * is not in an item or when the select is in
- * an item and has a fill.
+ * take on the highlight color.
  * The icon should also take on the highlight
  * color if there is a validation state.
  */
-:host(.select-expanded:not(.in-item)) .select-wrapper .select-icon,
-:host(.in-item.select-expanded.select-fill-solid) .select-wrapper .select-icon,
-:host(.in-item.select-expanded.select-fill-outline) .select-wrapper .select-icon,
+:host(.select-expanded) .select-wrapper .select-icon,
 :host(.ion-focused.ion-valid) .select-wrapper .select-icon,
 :host(.ion-touched.ion-invalid) .select-wrapper .select-icon,
 :host(.ion-focused) .select-wrapper .select-icon {

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

@@ -80,3 +80,17 @@
    */
   max-width: calc(100% / #{$form-control-label-stacked-scale});
 }
+
+// Select Icon
+// ----------------------------------------------------------------
+
+/**
+ * When the select has a fill, is
+ * in an item, and is expanded, 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 {
+  color: var(--highlight-color);
+}

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

@@ -6,6 +6,10 @@
 
 /// @prop - Size of the select icon
 $select-md-icon-size:           dynamic-font(13px);
+
+/// @prop - Color of the select icon
+$select-md-icon-color:          $text-color-step-500;
+
 /// @prop - The amount of whitespace to display on either side of the floating label
 $select-md-floating-label-padding:         4px;