diff options
author | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-06-01 15:47:47 -0300 |
commit | af7b107f455b01e136db2211c357cc59a506139a (patch) | |
tree | d1a4596fba17b9db06d50a76f7ecfa403449faca /packages/taler-wallet-webextension/src/mui/style.tsx | |
parent | 2aade8e7aed485577576f91e61474f69b4366060 (diff) | |
download | wallet-core-af7b107f455b01e136db2211c357cc59a506139a.tar.xz |
mui button impl
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/style.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/style.tsx | 42 |
1 files changed, 31 insertions, 11 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index 3ad1ab14e..49904f7f3 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -46,13 +46,33 @@ export const theme = createTheme(); export const ripple = css` background-position: center; - transition: background 0.5s; - &:hover { - background: #eeeeee radial-gradient(circle, transparent 1%, #eeeeee 1%) + transition: background 0.2s; + + &:hover:enabled { + background: var(--color-main) + radial-gradient(circle, transparent 1%, var(--color-dark) 1%) + center/15000%; + } + &:active:enabled { + background-color: var(--color-main); + background-size: 100%; + transition: background 0s; + } +`; + +export const rippleOutlined = css` + background-position: center; + + transition: background 0.2s; + + &:hover:enabled { + background: var(--color-contrastText) + radial-gradient(circle, transparent 1%, var(--color-light) 1%) center/15000%; } - &:active { - background-color: currentColor; + + &:active:enabled { + background-color: var(--color-contrastText); background-size: 100%; transition: background 0s; } @@ -680,15 +700,15 @@ function createTheme() { function getDefaultSecondary(mode = "light") { if (mode === "dark") { return { - main: purple[200], - light: purple[50], - dark: purple[400], + main: grey[200], + light: grey[50], + dark: grey[400], }; } return { - main: purple[500], - light: purple[300], - dark: purple[700], + main: grey[300], + light: grey[100], + dark: grey[600], }; } |