vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add additional outline button styles

Browse Source
This commit is contained in:
jeffvli
2023-06-13 18:38:07 -07:00
parent 4898fa7dcf
commit 23f4bfde99
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/button/index.tsx
+2 -1
View File
@@ -24,7 +24,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
background: ${(props) => `var(--btn-${props.variant}-bg)`};
border: ${(props) => `var(--btn-${props.variant}-border)`};
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 {
transition: fill 0.2s ease-in-out;
@@ -41,6 +41,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
&:not([data-disabled])&:hover {
color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
svg {
fill: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
src/renderer/themes/default.scss
+3 -2
View File
@@ -72,8 +72,9 @@
--btn-outline-bg-hover: transparent;
--btn-outline-fg: rgb(220, 220, 220);
--btn-outline-fg-hover: rgb(255, 255, 255);
--btn-outline-border: 2px rgba(140, 140, 140, 0.5) solid;
--btn-outline-radius: 12px;
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
--btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid;
--btn-outline-radius: 5rem;
--input-bg: rgb(35, 35, 35);
--input-fg: rgb(193, 193, 193);
src/renderer/themes/light.scss
+3 -2
View File
@@ -58,8 +58,9 @@ body[data-theme='defaultLight'] {
--btn-outline-bg-hover: transparent;
--btn-outline-fg: rgb(60, 60, 60);
--btn-outline-fg-hover: rgb(0, 0, 0);
--btn-outline-border: 2px rgba(140, 140, 140, 0.5) solid;
--btn-outline-radius: 12px;
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
--btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid;
--btn-outline-radius: 5rem;
--input-bg: rgb(240, 241, 242);
--input-fg: rgb(0, 0, 0);