Refactor --dragging button styles in File Upload

alphagov · Feb 10, 2025 · 8fec1e1 · 8fec1e1
1 parent 1b25638
commit 8fec1e1
Showing 1 changed file with 19 additions and 15 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss b/packages/govuk-frontend/src/govuk/components/file-upload/_index.scss
@@ -195,24 +195,28 @@
     }
   }
 
-  .govuk-file-upload-button--dragging.govuk-file-upload-button {
-    background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
-  }
+  .govuk-file-upload-button--dragging {
+    // extra specificity to apply when
+    // empty
+    &.govuk-file-upload-button {
+      background-color: govuk-tint(govuk-colour("mid-grey"), 20%);
+    }
 
-  .govuk-file-upload-button--dragging.govuk-file-upload-button--empty {
-    background-color: govuk-colour("light-grey");
-  }
+    &.govuk-file-upload-button--empty {
+      background-color: govuk-colour("light-grey");
+    }
 
-  .govuk-file-upload-button--dragging:not(:disabled) {
-    border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
-  }
+    &:not(:disabled) {
+      border-color: govuk-shade(govuk-colour("mid-grey"), 20%);
 
-  .govuk-file-upload-button--dragging:not(:disabled) .govuk-file-upload-button__pseudo-button {
-    background-color: govuk-shade(govuk-colour("light-grey"), 10%);
-  }
+      .govuk-file-upload-button__pseudo-button {
+        background-color: govuk-shade(govuk-colour("light-grey"), 10%);
+      }
+    }
 
-  .govuk-file-upload-button--empty.govuk-file-upload-button--dragging:not(:disabled) .govuk-file-upload-button__status,
-  .govuk-file-upload-button--empty.govuk-file-upload-button--dragging .govuk-file-upload-button__pseudo-button {
-    background-color: govuk-colour("white");
+    &.govuk-file-upload-button--empty:not(:disabled) .govuk-file-upload-button__status,
+    &.govuk-file-upload-button--empty .govuk-file-upload-button__pseudo-button {
+      background-color: govuk-colour("white");
+    }
   }
 }