paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 44 Packages Projects Releases Wiki Activity

canon: use inset box-shadows for button styles

Browse Source 
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 <mtlewis@users.noreply.github.com>
This commit is contained in:
MT Lewis
2024-12-05 13:45:41 +00:00
parent 3f72c6c4ca
commit 63427d39ad
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/Button/styles.css
+3 -3
View File
@@ -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 {