From 63427d39ad882ed436ecc0fbca74a766b451205d Mon Sep 17 00:00:00 2001 From: MT Lewis Date: Thu, 5 Dec 2024 13:45:41 +0000 Subject: [PATCH] canon: use inset box-shadows for button styles The use of box-shadows for button borders meant that when a button was styled with a border, it expanded by 1px. This commit retains the use of shadows for borders, but switches them to inset shadows so that the component size stays consistent between buttons with and without borders (and between the same button in hover and non-hover states). Signed-off-by: MT Lewis --- packages/canon/src/components/Button/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css index aaf1cae8bf..01f917c4b1 100644 --- a/packages/canon/src/components/Button/styles.css +++ b/packages/canon/src/components/Button/styles.css @@ -36,18 +36,18 @@ .button.primary:hover { background-color: transparent; - box-shadow: 0 0 0 1px var(--canon-outline-focus); + box-shadow: inset 0 0 0 1px var(--canon-outline-focus); color: var(--canon-text-primary); } .button.secondary { background-color: transparent; - box-shadow: 0 0 0 1px var(--canon-outline); + box-shadow: inset 0 0 0 1px var(--canon-outline); color: var(--canon-text-primary); } .button.secondary:hover { - box-shadow: 0 0 0 1px var(--canon-outline-hover); + box-shadow: inset 0 0 0 1px var(--canon-outline-hover); } .button.tertiary {