diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-09 23:15:49 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-09 23:15:53 -0300 |
commit | d29499b80a992a0d107327c0dfbf31bb2d2ba6f7 (patch) | |
tree | 256d181c9f3c3795841c71ef6400f4dce6a738f4 /packages/taler-wallet-webextension/src/components/styled/index.tsx | |
parent | 5881d957caf3bd7d3311cae7420ceb1e3fa5a9e1 (diff) | |
download | wallet-core-d29499b80a992a0d107327c0dfbf31bb2d2ba6f7.tar.xz |
migration css to linaria
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/styled/index.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 135 |
1 files changed, 135 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx new file mode 100644 index 000000000..6e7e736a5 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -0,0 +1,135 @@ +// import { FunctionalComponent, JSX } from 'preact'; +// import styled from './preact-styled' + +// import { css } from '@linaria/core'; +import { styled } from '@linaria/react'; + +export const PopupBox = styled.div` + height: calc(320px - 34px - 16px); + display: flex; + flex-direction: column; + + & > section { + overflow: auto; + } + + & > footer { + padding-top: 5px; + flex-direction: row; + justify-content: flex-end; + display: flex; + & > button { + margin-left: 5px; + } + } +` + +const Button = styled.button` + display: inline-block; + zoom: 1; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + user-select: none; + box-sizing: border-box; + + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: #444; /* rgba not supported (IE 8) */ + 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'; + text-decoration: none; + border-radius: 2px; + + :focus { + outline: 0; + } + + [disabled] { + border: none; + background-image: none; + /* csslint ignore:start */ + filter: alpha(opacity=40); + /* csslint ignore:end */ + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + pointer-events: none; + } + + :hover { + filter: alpha(opacity=90); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.05) 40%, + rgba(0, 0, 0, 0.1) + ); + } +`; + +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 ButtonSuccess = styled(ButtonVariant)` + background-color: rgb(28, 184, 65); +` + +export const ButtonWarning = styled(ButtonVariant)` + background-color: rgb(223, 117, 20); +` + +export const ButtonDestructive = styled(ButtonVariant)` + background-color: rgb(202, 60, 60); +` + +export const BoldLight = styled.div` +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; + border: 1px solid gray; + border-radius: 0.5em; + margin: 0.5em 0; + justify-content: space-between; + padding: 0.5em; +` + +export const SmallText = styled.div` + font-size: small; + margin-top: 0.5em; +` + +export const SmallTextLight = styled(SmallText)` + color: gray; +` + +export const CenteredText = styled.div` + white-space: nowrap; + text-align: center; +` + +export const CenteredTextBold = styled(CenteredText)` + white-space: nowrap; + text-align: center; + font-weight: bold; + color: ${((props: any): any => String(props.color) as any) as any}; +` |