Update base button styles
- Use brightness filter for hover/focus styles - Re-add default active style
This commit is contained in:
parent
244c00c4c6
commit
f21b8d6bbd
1 changed files with 2 additions and 8 deletions
|
@ -41,8 +41,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
|||
&:not([data-disabled])&:hover {
|
||||
color: ${(props) => `var(--btn-${props.variant}-fg) !important`};
|
||||
background: ${(props) => `var(--btn-${props.variant}-bg)`};
|
||||
background-image: ${(props) =>
|
||||
props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
|
||||
filter: brightness(85%);
|
||||
border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
|
||||
|
||||
svg {
|
||||
|
@ -53,12 +52,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
|||
&:not([data-disabled])&:focus-visible {
|
||||
color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
|
||||
background: ${(props) => `var(--btn-${props.variant}-bg)`};
|
||||
background-image: ${(props) =>
|
||||
props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: none;
|
||||
filter: brightness(85%);
|
||||
}
|
||||
|
||||
& .mantine-Button-centerLoader {
|
||||
|
|
Reference in a new issue