Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const backgroundColor = ({ filled }) => palette('grayscale', filled ? 1 : 0, true)
const foregroundColor = ({ transparent, disabled }) => transparent ? palette(disabled ? 2 : 1) : palette('grayscale', 0, true)
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { font, palette } from 'styled-theme'
const Badge = styled.span`
font-family: ${font('primary')};
font-size: 0.75rem;
line-height: 1.5em;
padding: 0.1em 0.3em;
color: ${palette('grayscale', 0, true)};
background-color: ${palette(1)};
border-radius: 0.16667em;
`
Badge.propTypes = {
palette: PropTypes.string,
reverse: PropTypes.bool,
}
Badge.defaultProps = {
palette: 'primary',
}
export default Badge
import { font, palette } from 'styled-theme'
import { ifProp } from 'styled-tools'
const fontSize = ({ height }) => `${height / 35.5555555556}rem`
const styles = css`
font-family: ${font('primary')};
display: block;
width: 100%;
margin: 0;
box-sizing: border-box;
font-size: ${fontSize};
padding: ${ifProp({ type: 'textarea' }, '0.4444444444em', '0 0.4444444444em')};
height: ${ifProp({ type: 'textarea' }, 'auto', '2.2222222222em')};
color: ${palette('grayscale', 0)};
background-color: ${palette('grayscale', 0, true)};
border: 1px solid ${ifProp('invalid', palette('danger', 2), palette('grayscale', 3))};
border-radius: 2px;
&[type=checkbox], &[type=radio] {
display: inline-block;
border: 0;
border-radius: 0;
width: auto;
height: auto;
margin: 0 0.2rem 0 0;
}
`
const StyledTextarea = styled.textarea`${styles}`
const StyledSelect = styled.select`${styles}`
const StyledInput = styled.input`${styles}`
opacity: 0;
&[class*="after-open"] {
opacity: 1;
}
&[class*="before-close"] {
opacity: 0;
}
`
const ModalBox = styled(ReactModal)`
position: absolute;
display: flex;
flex-direction: column;
font-family: ${font('primary')};
font-size: 1rem;
background-color: ${palette('grayscale', 0, true)};
border-radius: 0.125em;
color: ${palette('grayscale', 0)};
top: calc(50% - 1rem);
left: calc(50% - 1rem);
right: auto;
bottom: auto;
margin: 1rem calc(-50% + 1rem) 1rem 1rem;
transform: translate(-50%, 100%);
transition: transform 250ms ease-in-out;
outline: none;
box-sizing: border-box;
min-width: 320px;
max-width: calc(640px - 1rem);
max-height: calc(100% - 1rem);
padding-top: ${({ hasHeader }) => hasHeader ? 0 : '1rem'};
@media screen and (max-width: 640px) {
const thumbColor = ({ disabled }) =>
palette(disabled ? 2 : 1)
const backgroundColor = ({ transparent, disabled }) => transparent ? 'transparent' : palette(disabled ? 2 : 1)
Block,
} from 'components'
const Wrapper = styled(Block)`
display: flex;
justify-content: center;
padding: 0px;
margin: -15px;
@media screen and (max-width: 640px) {
padding: 0.5rem;
}
`
const Text = styled.div`
margin-left: 1rem;
color: ${palette({ grayscale: 5 }, 1)};
overflow: auto;
> :first-child {
margin: 0;
}
`
const InternacionalizationMenu = ({ ...props }) => {
const { i18n } = useTranslation()
const changeLanguage = (lng) => {
i18n.changeLanguage(lng)
}
return (
import PropTypes from 'prop-types'
import styled, { keyframes } from 'styled-components'
import { palette } from 'styled-theme'
const spin = keyframes`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`
const Spinner = styled.div`
position: relative;
border: 0.2em solid ${palette('grayscale', 1, true)};
border-bottom-color: ${palette(1)};
border-radius: 50%;
margin: 0 auto;
width: 1em;
height: 1em;
animation: ${spin} 1s linear infinite;
`
Spinner.propTypes = {
palette: PropTypes.string,
reverse: PropTypes.bool,
}
Spinner.defaultProps = {
palette: 'primary',
}