diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-16 13:59:53 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-16 14:01:38 -0300 |
commit | a994009d2f094c4d9c12da68dac3abb28bdef4b3 (patch) | |
tree | e403a58663f81889982635ffb324f9739e6976b3 /packages/taler-wallet-webextension/src/components/styled | |
parent | c33ed919719845f518d6491ef37df6ae16820dd0 (diff) | |
download | wallet-core-a994009d2f094c4d9c12da68dac3abb28bdef4b3.tar.xz |
reserveCreated new design
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 87 |
1 files changed, 44 insertions, 43 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 8b36dbd31..2db7c61f8 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -85,7 +85,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` overflow: auto; table td { - padding: 5px 10px; + padding: 5px 5px; } table tr { border-bottom: 1px solid black; @@ -328,7 +328,8 @@ const ButtonVariant = styled(Button)` text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); `; -export const ButtonPrimary = styled(ButtonVariant)` +export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` + font-size: ${({ small }) => (small ? "small" : "inherit")}; background-color: rgb(66, 184, 221); `; export const ButtonBoxPrimary = styled(ButtonBox)` @@ -501,29 +502,40 @@ export const Input = styled.div<{ invalid?: boolean }>` `; export const InputWithLabel = styled.div<{ invalid?: boolean }>` + /* display: flex; */ + & label { display: block; + font-weight: bold; + margin-left: 0.5em; padding: 5px; color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } - & > div { - position: relative; - display: flex; - top: 0px; - bottom: 0px; - - & > div { - position: absolute; - background-color: lightgray; - padding: 5px; - margin: 2px; - } - & > input { - flex: 1; - padding: 5px; - border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; - } + & div { + line-height: 24px; + display: flex; + } + & div > span { + background-color: lightgray; + box-sizing: border-box; + border-bottom-left-radius: 0.25em; + border-top-left-radius: 0.25em; + height: 2em; + display: inline-block; + padding-left: 0.5em; + padding-right: 0.5em; + align-items: center; + display: flex; + } + & input { + border-width: 1px; + box-sizing: border-box; + height: 2em; + /* border-color: lightgray; */ + border-bottom-right-radius: 0.25em; + border-top-right-radius: 0.25em; + border-color: ${({ invalid }) => (!invalid ? "lightgray" : "red")}; } `; @@ -535,6 +547,7 @@ export const ErrorBox = styled.div` flex-direction: column; /* margin: 0.5em; */ padding: 1em; + margin: 1em; /* width: 100%; */ color: #721c24; background: #f8d7da; @@ -592,6 +605,8 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` } `; +const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; + export const NiceSelect = styled.div` & > select { -webkit-appearance: none; @@ -600,11 +615,18 @@ export const NiceSelect = styled.div` appearance: none; outline: 0; box-shadow: none; - background-image: none; + + background-image: ${image}; + background-position: right 0.5rem center; + background-repeat: no-repeat; + background-size: 1.5em 1.5em; + padding-right: 2.5rem; + background-color: white; - flex: 1; - padding: 0.5em 1em; + border-radius: 0.25rem; + font-size: 1em; + padding: 0.5em 3em 0.5em 1em; cursor: pointer; } @@ -613,27 +635,6 @@ export const NiceSelect = styled.div` /* width: 10em; */ overflow: hidden; border-radius: 0.25em; - - &::after { - content: "\u25BC"; - position: absolute; - top: 0; - right: 0; - padding: 0.5em 1em; - cursor: pointer; - pointer-events: none; - -webkit-transition: 0.25s all ease; - -o-transition: 0.25s all ease; - transition: 0.25s all ease; - } - - &:hover::after { - /* color: #f39c12; */ - } - - &::-ms-expand { - display: none; - } `; export const Outlined = styled.div` |