feat: apply hover effects anywhere on the component

BrightspaceUI · Jun 29, 2023 · cbaebd6 · cbaebd6
1 parent 7579dfc
commit cbaebd6
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/components/inputs/input-styles.js b/components/inputs/input-styles.js
@@ -43,15 +43,19 @@ export const inputStyles = css`
 		font-size: 0.8rem;
 		font-weight: 400;
 	}
-	.d2l-input:hover,
+	:host(:hover) .d2l-input,
 	.d2l-input:focus,
 	.d2l-input-focus {
-		border-color: var(--d2l-color-celestine);
 		border-width: 2px;
 		outline-style: none;
 		outline-width: 0;
 		padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px));
 	}
+	:host(:hover) .d2l-input:not([aria-invalid="true"]),
+	.d2l-input:focus,
+	.d2l-input-focus {
+		border-color: var(--d2l-color-celestine);
+	}
 	[aria-invalid="true"].d2l-input {
 		border-color: var(--d2l-color-cinnabar);
 	}