Add additional outline button styles
This commit is contained in:
parent
4898fa7dcf
commit
23f4bfde99
3 changed files with 8 additions and 5 deletions
|
@ -24,7 +24,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
||||||
background: ${(props) => `var(--btn-${props.variant}-bg)`};
|
background: ${(props) => `var(--btn-${props.variant}-bg)`};
|
||||||
border: ${(props) => `var(--btn-${props.variant}-border)`};
|
border: ${(props) => `var(--btn-${props.variant}-border)`};
|
||||||
border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
|
border-radius: ${(props) => `var(--btn-${props.variant}-radius)`};
|
||||||
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
|
transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border 0.2s ease-in-out;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transition: fill 0.2s ease-in-out;
|
transition: fill 0.2s ease-in-out;
|
||||||
|
@ -41,6 +41,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
||||||
&:not([data-disabled])&:hover {
|
&:not([data-disabled])&:hover {
|
||||||
color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
|
color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
|
||||||
background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
|
background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
|
||||||
|
border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
|
fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
|
||||||
|
|
|
@ -72,8 +72,9 @@
|
||||||
--btn-outline-bg-hover: transparent;
|
--btn-outline-bg-hover: transparent;
|
||||||
--btn-outline-fg: rgb(220, 220, 220);
|
--btn-outline-fg: rgb(220, 220, 220);
|
||||||
--btn-outline-fg-hover: rgb(255, 255, 255);
|
--btn-outline-fg-hover: rgb(255, 255, 255);
|
||||||
--btn-outline-border: 2px rgba(140, 140, 140, 0.5) solid;
|
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
|
||||||
--btn-outline-radius: 12px;
|
--btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid;
|
||||||
|
--btn-outline-radius: 5rem;
|
||||||
|
|
||||||
--input-bg: rgb(35, 35, 35);
|
--input-bg: rgb(35, 35, 35);
|
||||||
--input-fg: rgb(193, 193, 193);
|
--input-fg: rgb(193, 193, 193);
|
||||||
|
|
|
@ -58,8 +58,9 @@ body[data-theme='defaultLight'] {
|
||||||
--btn-outline-bg-hover: transparent;
|
--btn-outline-bg-hover: transparent;
|
||||||
--btn-outline-fg: rgb(60, 60, 60);
|
--btn-outline-fg: rgb(60, 60, 60);
|
||||||
--btn-outline-fg-hover: rgb(0, 0, 0);
|
--btn-outline-fg-hover: rgb(0, 0, 0);
|
||||||
--btn-outline-border: 2px rgba(140, 140, 140, 0.5) solid;
|
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
|
||||||
--btn-outline-radius: 12px;
|
--btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid;
|
||||||
|
--btn-outline-radius: 5rem;
|
||||||
|
|
||||||
--input-bg: rgb(240, 241, 242);
|
--input-bg: rgb(240, 241, 242);
|
||||||
--input-fg: rgb(0, 0, 0);
|
--input-fg: rgb(0, 0, 0);
|
||||||
|
|
Reference in a new issue