Fix Search Icon during hover (#134)

This fixes the issue where a disabled textfield still get a hover color for the magnifier because order matters when specificity collides
adobe · Dec 19, 2019 · 8d701b3 · 8d701b3
1 parent df1d49b
commit 8d701b3
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/packages/@adobe/spectrum-css-temp/components/search/skin.css b/packages/@adobe/spectrum-css-temp/components/search/skin.css
@@ -15,12 +15,6 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Search-input {
-  &:disabled {
-    & ~ .spectrum-Search-icon {
-      color: var(--spectrum-textfield-text-color-disabled);
-    }
-  }
-
   /* The value of color is identical for hover/active/focus-ring, but we repeat it here in case one is changed in the future */
   &:hover {
     & ~ .spectrum-Search-icon {
@@ -39,4 +33,10 @@ governing permissions and limitations under the License.
       color: var(--spectrum-search-icon-color-key-focus);
     }
   }
+
+  &:disabled {
+    & ~ .spectrum-Search-icon {
+      color: var(--spectrum-textfield-text-color-disabled);
+    }
+  }
 }