opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-29 17:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Buttons: Improves button styles to make them perfectly symmetrical (#40977)

Browse Source 
* Buttons: Improves button styles to make them perfectly symmetrical

* Fixed icon vertical centering
This commit is contained in:
Torkel Ödegaard
2021-10-28 09:31:45 +02:00
committed by GitHub
parent 963544ffe6
commit 6a2dc11545
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -115,8 +115,8 @@ export const getButtonStyles = (props: StyleProps) => {
const { height, padding, fontSize } = getPropertiesForButtonSize(size, theme);
const variantStyles = getPropertiesForVariant(theme, variant, fill);
const disabledStyles = getPropertiesForDisabled(theme, variant, fill);
const focusStyle = getFocusStyles(theme);
const paddingMinusBorder = theme.spacing.gridSize * padding - 1;
return {
button: css({
@ -126,7 +126,7 @@ export const getButtonStyles = (props: StyleProps) => {
fontSize: fontSize,
fontWeight: theme.typography.fontWeightMedium,
fontFamily: theme.typography.fontFamily,
padding: theme.spacing(0, padding),
padding: `0 ${paddingMinusBorder}px`,
height: theme.spacing(height),
// Deduct border from line-height for perfect vertical centering on windows and linux
lineHeight: `${theme.spacing.gridSize * height - 2}px`,
@ -150,10 +150,15 @@ export const getButtonStyles = (props: StyleProps) => {
height: 16px;
margin: ${theme.spacing(0, 1, 0, 0.5)};
`,
icon: css`
margin-right: ${theme.spacing((iconOnly ? -padding : padding) / 2)};
margin-left: ${theme.spacing(-padding / 2)};
`,
icon: iconOnly
? css({
// Important not to set margin bottom here as it would override internal icon bottom margin
marginRight: theme.spacing(-padding / 2),
marginLeft: theme.spacing(-padding / 2),
})
: css({
marginRight: theme.spacing(padding / 2),
}),
content: css`
display: flex;
flex-direction: row;