diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 219 |
1 files changed, 105 insertions, 114 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 65c1f49e9..8b36dbd31 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -14,18 +14,17 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ - // need to import linaria types, otherwise compiler will complain -import type * as Linaria from '@linaria/core'; +import type * as Linaria from "@linaria/core"; -import { styled } from '@linaria/react'; +import { styled } from "@linaria/react"; export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; - background-color: ${p => p.color}; -` + background-color: ${(p) => p.color}; +`; export const WalletAction = styled.div` display: flex; @@ -36,9 +35,9 @@ export const WalletAction = styled.div` margin: auto; height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; } section { margin-bottom: 2em; @@ -47,7 +46,7 @@ export const WalletAction = styled.div` margin-left: 8px; } } -` +`; export const WalletActionOld = styled.section` border: solid 5px black; border-radius: 10px; @@ -59,17 +58,17 @@ export const WalletActionOld = styled.section` margin: auto; height: 100%; - + & h1:first-child { - margin-top: 0; + margin-top: 0; } -` +`; export const DateSeparator = styled.div` color: gray; - margin: .2em; + margin: 0.2em; margin-top: 1em; -` +`; export const WalletBox = styled.div<{ noPadding?: boolean }>` display: flex; flex-direction: column; @@ -79,10 +78,10 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` width: 400px; } & > section { - padding-left: ${({ noPadding }) => noPadding ? '0px' : '8px'}; - padding-right: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding-left: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; + padding-right: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header - margin-bottom: auto; + margin-bottom: auto; overflow: auto; table td { @@ -128,13 +127,13 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>` margin-left: 8px; } } -` +`; export const Middle = styled.div` - justify-content: space-around; - display: flex; - flex-direction: column; - height: 100%; -` + justify-content: space-around; + display: flex; + flex-direction: column; + height: 100%; +`; export const PopupBox = styled.div<{ noPadding?: boolean }>` height: 290px; @@ -144,9 +143,9 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` justify-content: space-between; & > section { - padding: ${({ noPadding }) => noPadding ? '0px' : '8px'}; + padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")}; // this margin will send the section up when used with a header - margin-bottom: auto; + margin-bottom: auto; overflow-y: auto; table td { @@ -201,8 +200,7 @@ export const PopupBox = styled.div<{ noPadding?: boolean }>` margin-left: 8px; } } - -` +`; export const Button = styled.button<{ upperCased?: boolean }>` display: inline-block; @@ -214,7 +212,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; font-family: inherit; font-size: 100%; @@ -223,7 +221,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` color: rgba(0, 0, 0, 0.8); /* rgba supported */ border: 1px solid #999; /*IE 6/7/8*/ border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ - background-color: '#e6e6e6'; + background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; @@ -263,7 +261,7 @@ export const Link = styled.a<{ upperCased?: boolean }>` cursor: pointer; user-select: none; box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; + text-transform: ${({ upperCased }) => (upperCased ? "uppercase" : "none")}; font-family: inherit; font-size: 100%; @@ -304,9 +302,9 @@ export const FontIcon = styled.div` text-align: center; font-weight: bold; /* vertical-align: text-top; */ -` +`; export const ButtonBox = styled(Button)` - padding: .5em; + padding: 0.5em; width: fit-content; height: 2em; @@ -322,89 +320,87 @@ export const ButtonBox = styled(Button)` border-radius: 4px; border-color: black; color: black; -` - +`; const ButtonVariant = styled(Button)` color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -` +`; export const ButtonPrimary = styled(ButtonVariant)` background-color: rgb(66, 184, 221); -` +`; export const ButtonBoxPrimary = styled(ButtonBox)` color: rgb(66, 184, 221); border-color: rgb(66, 184, 221); -` +`; export const ButtonSuccess = styled(ButtonVariant)` background-color: #388e3c; -` +`; export const LinkSuccess = styled(Link)` color: #388e3c; -` +`; export const ButtonBoxSuccess = styled(ButtonBox)` color: #388e3c; border-color: #388e3c; -` +`; export const ButtonWarning = styled(ButtonVariant)` background-color: rgb(223, 117, 20); -` +`; export const LinkWarning = styled(Link)` color: rgb(223, 117, 20); -` +`; export const ButtonBoxWarning = styled(ButtonBox)` color: rgb(223, 117, 20); border-color: rgb(223, 117, 20); -` +`; export const ButtonDestructive = styled(ButtonVariant)` background-color: rgb(202, 60, 60); -` +`; export const ButtonBoxDestructive = styled(ButtonBox)` color: rgb(202, 60, 60); border-color: rgb(202, 60, 60); -` - +`; export const BoldLight = styled.div` -color: gray; -font-weight: bold; -` + color: gray; + font-weight: bold; +`; export const Centered = styled.div` text-align: center; & > :not(:first-child) { margin-top: 15px; } -` +`; export const Row = styled.div` display: flex; margin: 0.5em 0; justify-content: space-between; padding: 0.5em; -` +`; export const Row2 = styled.div` display: flex; /* margin: 0.5em 0; */ justify-content: space-between; padding: 0.5em; -` +`; export const Column = styled.div` display: flex; flex-direction: column; margin: 0em 1em; justify-content: space-between; -` +`; export const RowBorderGray = styled(Row)` border: 1px solid gray; /* border-radius: 0.5em; */ -` +`; export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; @@ -414,7 +410,7 @@ export const RowLightBorderGray = styled(Row2)` border: 1px solid lightgray; background-color: red; } -` +`; export const HistoryRow = styled.a` text-decoration: none; @@ -423,7 +419,7 @@ export const HistoryRow = styled.a` display: flex; justify-content: space-between; padding: 0.5em; - + border: 1px solid lightgray; border-top: 0px; @@ -439,7 +435,7 @@ export const HistoryRow = styled.a` margin-left: auto; align-self: center; } -` +`; export const ListOfProducts = styled.div` & > div > a > img { @@ -453,62 +449,62 @@ export const ListOfProducts = styled.div` margin-right: auto; margin-left: 1em; } -` +`; export const LightText = styled.div` color: gray; -` +`; export const WarningText = styled.div` color: rgb(223, 117, 20); -` +`; export const SmallText = styled.div` - font-size: small; -` + font-size: small; +`; export const LargeText = styled.div` - font-size: large; -` + font-size: large; +`; export const ExtraLargeText = styled.div` - font-size: x-large; -` + font-size: x-large; +`; export const SmallLightText = styled(SmallText)` color: gray; -` +`; export const CenteredText = styled.div` white-space: nowrap; text-align: center; -` +`; export const CenteredBoldText = styled(CenteredText)` white-space: nowrap; text-align: center; font-weight: bold; color: ${((props: any): any => String(props.color) as any) as any}; -` +`; export const Input = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } & input { display: block; padding: 5px; width: calc(100% - 4px - 10px); - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } -` +`; export const InputWithLabel = styled.div<{ invalid?: boolean }>` & label { display: block; padding: 5px; - color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } & > div { position: relative; @@ -516,20 +512,20 @@ export const InputWithLabel = styled.div<{ invalid?: boolean }>` top: 0px; bottom: 0px; - & > div { + & > div { position: absolute; background-color: lightgray; padding: 5px; margin: 2px; } - & > input { + & > input { flex: 1; - padding: 5px; - border-color: ${({ invalid }) => !invalid ? 'inherit' : 'red'} + padding: 5px; + border-color: ${({ invalid }) => (!invalid ? "inherit" : "red")}; } } -` +`; export const ErrorBox = styled.div` border: 2px solid #f5c6cb; @@ -555,22 +551,22 @@ export const ErrorBox = styled.div` width: 28px; } } -` +`; export const SuccessBox = styled(ErrorBox)` color: #0f5132; background-color: #d1e7dd; border-color: #badbcc; -` +`; export const WarningBox = styled(ErrorBox)` color: #664d03; background-color: #fff3cd; border-color: #ffecb5; -` +`; export const PopupNavigation = styled.div<{ devMode?: boolean }>` - background-color:#0042b2; + background-color: #0042b2; height: 35px; justify-content: space-around; display: flex; @@ -582,7 +578,7 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` & > div > a { color: #f8faf7; display: inline-block; - width: calc(400px / ${({ devMode }) => !devMode ? 4 : 5}); + width: calc(400px / ${({ devMode }) => (!devMode ? 4 : 5)}); text-align: center; text-decoration: none; vertical-align: middle; @@ -597,7 +593,6 @@ export const PopupNavigation = styled.div<{ devMode?: boolean }>` `; export const NiceSelect = styled.div` - & > select { -webkit-appearance: none; -moz-appearance: none; @@ -617,19 +612,19 @@ export const NiceSelect = styled.div` display: flex; /* width: 10em; */ overflow: hidden; - border-radius: .25em; + border-radius: 0.25em; &::after { - content: '\u25BC'; + content: "\u25BC"; position: absolute; top: 0; right: 0; padding: 0.5em 1em; cursor: pointer; pointer-events: none; - -webkit-transition: .25s all ease; - -o-transition: .25s all ease; - transition: .25s all ease; + -webkit-transition: 0.25s all ease; + -o-transition: 0.25s all ease; + transition: 0.25s all ease; } &:hover::after { @@ -639,7 +634,7 @@ export const NiceSelect = styled.div` &::-ms-expand { display: none; } -` +`; export const Outlined = styled.div` border: 2px solid #388e3c; @@ -647,13 +642,12 @@ export const Outlined = styled.div` width: fit-content; border-radius: 2px; color: #388e3c; -` +`; /* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */ export const CheckboxSuccess = styled.input` vertical-align: center; - -` +`; export const TermsSection = styled.a` border: 1px solid black; @@ -664,13 +658,13 @@ export const TermsSection = styled.a` text-decoration: none; color: inherit; flex-direction: column; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -681,11 +675,11 @@ export const TermsSection = styled.a` height: auto; } - &[data-open="true"] header:after { - content: '\\2227'; + &[data-open="true"] header:after { + content: "\\2227"; } - &[data-open="false"] header:after { - content: '\\2228'; + &[data-open="false"] header:after { + content: "\\2228"; } `; @@ -712,13 +706,13 @@ export const TermsOfService = styled.div` padding: 1em; margin-top: 2px; margin-bottom: 2px; - + display: flex; &[data-open="true"] { - display: flex; + display: flex; } &[data-open="false"] > *:not(:first-child) { - display: none; + display: none; } header { @@ -729,22 +723,20 @@ export const TermsOfService = styled.div` height: auto; } - &[data-open="true"] > header:after { - content: '\\2227'; + &[data-open="true"] > header:after { + content: "\\2227"; } - &[data-open="false"] > header:after { - content: '\\2228'; + &[data-open="false"] > header:after { + content: "\\2228"; } } - -` +`; export const StyledCheckboxLabel = styled.div` color: green; text-transform: uppercase; /* font-weight: bold; */ text-align: center; span { - input { display: none; opacity: 0; @@ -758,7 +750,7 @@ export const StyledCheckboxLabel = styled.div` margin-right: 1em; border-radius: 2px; border: 2px solid currentColor; - + svg { transition: transform 0.1s ease-in 25ms; transform: scale(0); @@ -776,12 +768,11 @@ export const StyledCheckboxLabel = styled.div` } input:disabled + div { color: #959495; - }; + } input:disabled + div + label { color: #959495; - }; + } input:focus + div + label { box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em currentColor; } - -`
\ No newline at end of file +`; |