polished#margin JavaScript Examples
The following examples show how to use
polished#margin.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: _error.js From idena-web with MIT License | 5 votes |
|
// eslint-disable-next-line react/prop-types
function MyError({statusCode, hasGetInitialPropsRun, err}) {
if (!hasGetInitialPropsRun && err) {
// getInitialProps is not called in case of
// https://github.com/zeit/next.js/issues/8592. As a workaround, we pass
// err via _app.js so it can be captured
console.error(err)
}
const {t} = useTranslation()
return (
<Layout>
<article>
<div>{t('Something went wrong')}</div>
<div>
<section>
<h2>
{statusCode
? `An error ${statusCode} occurred on server`
: t('An error occurred on client')}
</h2>
<div>
<PrimaryButton onClick={() => Router.push('/home')}>
{t('Go to My Idena')}
</PrimaryButton>
</div>
</section>
</div>
<style jsx>{`
article {
background: ${theme.colors.darkGraphite};
color: white;
display: flex;
flex-direction: column;
height: 100vh;
max-height: 100vh;
}
div:first-child {
background: rgb(255, 102, 102);
display: flex;
align-items: center;
justify-content: center;
line-height: ${rem(20, 13)};
padding: ${rem(12, 13)};
position: relative;
text-align: center;
}
div:nth-child(2) {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
h2 {
font-size: ${rem(18)};
font-weight: 500;
margin: ${margin(0, 0, rem(40))};
word-break: break-all;
}
section > div:nth-child(2) > section {
background: rgb(255, 102, 102);
border-radius: ${rem(9)};
font-size: ${rem(14, 13)};
line-height: ${rem(20, 13)};
margin-top: ${rem(40)};
padding: ${rem(18)} ${rem(24)};
max-width: ${rem(480)};
}
`}</style>
</article>
</Layout>
)
}
Example #2
| Source File: components.js From idena-web with MIT License | 4 votes |
|
export function FlipWords({
currentFlip: {words = []},
translations = {},
onReport = {},
children,
...props
}) {
const {t, i18n} = useTranslation()
const wordTranslations = words.map(({id}) => translations[id])
const hasApprovedTranslation = wordTranslations.reduce(
(acc, curr) => !!curr && acc,
true
)
const [showTranslation, setShowTranslation] = React.useState()
const shouldShowTranslation = showTranslation && hasApprovedTranslation
return (
<ChakraFlex
direction="column"
fontSize={['base', 'md']}
color="brandGray.500"
ml={[0, 8]}
mb={[10, 0]}
w={['100%', '320px']}
{...props}
>
<ChakraFlex
display={['flex', 'none']}
direction="row"
align="center"
justify="center"
>
<Heading fontSize="20px" fontWeight={500}>
{t(`Is the flip correct?`)}
</Heading>
<IconButton
icon={<InfoIcon />}
bg="unset"
fontSize="20px"
minW={5}
w={5}
h={5}
_active={{
bg: 'unset',
}}
_hover={{
bg: 'unset',
}}
_focus={{
outline: 'none',
}}
onClick={onReport}
/>
</ChakraFlex>
<FlipKeywordPanelNew mb={8}>
{words.length ? (
<FlipKeywordTranslationSwitchNew
keywords={{
words,
translations: wordTranslations.map(x => (x ? [x] : [])),
}}
showTranslation={shouldShowTranslation}
locale={i18n.language}
onSwitchLocale={() => setShowTranslation(!showTranslation)}
isInline={false}
/>
) : (
<>
<Box
style={{
color: theme.colors.primary2,
fontWeight: 500,
lineHeight: rem(20),
}}
>
{t(`Getting flip keywords...`)}
</Box>
{[
t(
'Can not load the flip keywords to moderate the story. Please wait or skip this flip.'
),
].map((word, idx) => (
<Box
key={`desc-${idx}`}
style={{
color: theme.colors.muted,
lineHeight: rem(20),
...margin(rem(theme.spacings.small8), 0, 0),
}}
>
{word}
</Box>
))}
</>
)}
</FlipKeywordPanelNew>
{children}
</ChakraFlex>
)
}
Example #3
| Source File: notifications.js From idena-web with MIT License | 4 votes |
|
export function Notification({
title,
body,
type = NotificationType.Info,
action = null,
actionName = '',
pinned,
bg = theme.colors.white,
color = theme.colors.text,
iconColor = theme.colors.primary,
actionColor = theme.colors.primary,
icon,
wrap = 'normal',
delay = NOTIFICATION_DELAY,
}) {
const [hidden, setHidden] = useState(false)
return (
!hidden && (
<Flex justify="center" mb={5} zIndex={100}>
<Flex
align="center"
background={bg}
borderRadius="8px"
color={color}
mx={['12px', 0]}
mt="auto"
mb={['46px', 'auto']}
py={['10px', '6px']}
pl={['16px', '8px']}
pr="16px"
position="relative"
fontSize="md"
width={['auto', '480px']}
zIndex={10000}
css={{
boxShadow: `0 3px 12px 0 rgba(83, 86, 92, 0.1), 0 2px 3px 0 rgba(83, 86, 92, 0.2)`,
}}
>
{icon || (
<i
className="icon icon--Info"
style={{
color:
type === NotificationType.Error
? theme.colors.danger
: iconColor,
fontSize: rem(20),
marginRight: rem(12),
}}
/>
)}
<Box style={{lineHeight: rem(20), ...wordWrap(wrap)}}>
<Box style={{fontWeight: theme.fontWeights.medium}}>{title}</Box>
{body && <Text color={color}>{body}</Text>}
</Box>
<Box
css={{
...margin(0, 0, 0, 'auto'),
...padding(rem(6), rem(12)),
}}
>
{action && (
<FlatButton
style={{
color:
type === NotificationType.Error
? theme.colors.danger
: actionColor,
lineHeight: rem(20),
...padding(0),
}}
onClick={() => {
action()
setHidden(true)
}}
>
{actionName}
</FlatButton>
)}
</Box>
{!pinned && (
<Box
style={{
background: theme.colors.gray2,
height: rem(3),
...borderRadius('bottom', rem(8)),
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
animation: `escape ${delay}ms linear forwards`,
}}
/>
)}
</Flex>
<style jsx global>{`
@keyframes escape {
from {
right: 0;
}
to {
right: 100%;
}
}
`}</style>
</Flex>
)
)
}
