How to use the @tinacms/styles.padding function in @tinacms/styles
To help you get started, we’ve selected a few @tinacms/styles examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
tinacms / tinacms / packages / @tinacms / fields / src / Wysiwyg / state / plugins / Menu / Menu.tsx View on Github 
opacity: 1;
pointer-events: all;
transform: translate3d(0, 100%, 0) scale3d(1, 1, 1);
`};
`
export const MenuOption = styled.div<{ disabled: boolean; active: boolean }>`
display: block;
padding: 0.5rem 1rem;
transition: all 85ms ease-out;
cursor: pointer;
&:first-child {
padding-top: ${padding('small')};
}
&:last-child {
padding-bottom: ${padding('small')};
}
&:hover {
background-color: ${color.grey(1)};
color: ${color.primary()};
}
&:active {
color: ${color.primary()};
fill: ${color.primary()};
background-color: rgba(53, 50, 50, 0.05);
}
``
export const ModalBody = styled.div<{ padded?: boolean }>`
padding: ${p => (p.padded ? padding() : '0')}rem;
margin: 0;
`
export const ModalActions = styled.div`
display: flex;
justify-content: flex-end;
border-radius: 0 0 0.3rem 0.3rem;
padding: 0 ${padding()}rem ${padding()}rem ${padding()}rem;
${Button} {
flex: 0 1 auto;
min-width: 8rem;
margin: 0 ${padding('small')}rem 0 0;
&:last-child {
margin-right: 0;
}
}
`
const MenuList = styled.div`
margin: 2rem -${padding()}rem 2rem -${padding()}rem;
display: block;
`
const MenuLink = styled.div<{ value: string }>`
color: ${color('light')};
font-size: 1.125rem;
font-weight: 500;
padding: ${padding('small')}rem ${padding()}rem ${padding('small')}rem 4rem;
position: relative;
cursor: pointer;
transition: all ${p => p.theme.timing.short} ease-out;
overflow: hidden;
margin-bottom: ${padding('small')}rem;
&:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0.5rem;
right: 0.5rem;
border-radius: 1.5rem;
background-color: #363145;
z-index: -1;
transition: all 150ms ease;
transform: translate3d(0, 100%, 0);
opacity: 0;
}
&:hover {
color: #2296fe;`
export const ModalBody = styled.div<{ padded?: boolean }>`
padding: ${p => (p.padded ? padding() : '0')};
margin: 0;
`
export const ModalActions = styled.div`
display: flex;
justify-content: flex-end;
border-radius: 0 0 0.3rem 0.3rem;
padding: 0 ${padding()} ${padding()} ${padding()};
${Button} {
flex: 0 1 auto;
min-width: 8rem;
margin: 0 ${padding('small')} 0 0;
&:last-child {
margin-right: 0;
}
}
`
isMultiform={isMultiform}
onClick={() => isMultiform && setEditingForm(null)}
>
{isMultiform && }
{form.label}
)
}
const StyledEditingFormTitle = styled.div<{ isMultiform: Boolean }>`
cursor: ${p => p.isMultiform && 'pointer'};
background-color: white;
border-bottom: 1px solid rgba(51, 51, 51, 0.09);
display: flex;
align-items: center;
padding: ${padding('small')}rem ${padding()}rem;
color: inherit;
font-size: 1.2rem;
transition: color 250ms ease-out;
svg {
width: 1.25rem;
fill: #949494;
height: auto;
transform: translate3d(-4px, 0, 0);
transition: transform 250ms ease-out;
}
:hover {
color: ${p => p.isMultiform && `${p.theme.color.primary}`};
svg {
transform: translate3d(-7px, 0, 0);
transition: transform 250ms ease;
}opacity: 1;
pointer-events: all;
transform: translate3d(0, 2.25rem, 0) scale3d(1, 1, 1);
`};
`
const BlockMenuList = styled.div`
display: flex;
flex-direction: column;
`
const BlockOption = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: ${padding('small')};
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`}
`
const LinkButton = styled.a`
text-align: center;
border: 0;
border-radius: ${p => p.theme.radius.big};
border: 1px solid #edecf3;
box-shadow: ${p => p.theme.shadow.small};
font-weight: 500;
cursor: pointer;
font-size: 0.75rem;
transition: all ${p => p.theme.timing.short} ease-out;
background-color: white;
color: ${color('dark')};
padding: ${padding('small')}rem ${padding('big')}rem ${padding('small')}rem
3.5rem;
position: relative;
text-decoration: none;
display: inline-block;
${Emoji} {
font-size: 1.5rem;
position: absolute;
left: ${padding('big')}rem;
top: 50%;
transform-origin: 50% 50%;
transform: translate3d(0, -50%, 0);
transition: all ${p => p.theme.timing.short} ease-out;
}
&:hover {
color: ${color('primary')};
${Emoji} {<option>{input.value}</option>
)}
)
}
const SelectElement = styled.div`
display: block;
position: relative;
select {
display: block;
font-family: inherit;
max-width: 100%;
padding: ${padding('small')};
border-radius: ${radius('small')};
background: ${color.grey(0)};
font-size: ${font.size(2)};
line-height: 1.35;
position: relative;
background-color: ${color.grey()};
transition: all 85ms ease-out;
border: 1px solid ${color.grey(2)};
width: 100%;
margin: 0;
appearance: none;
outline: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right 0.7em top 50%;
background-size: 0.65em auto;box-shadow: ${p => p.theme.shadow.small};
font-weight: 500;
cursor: pointer;
font-size: 0.75rem;
transition: all ${p => p.theme.timing.short} ease-out;
background-color: white;
color: ${color('dark')};
padding: ${padding('small')}rem ${padding('big')}rem ${padding('small')}rem
3.5rem;
position: relative;
text-decoration: none;
display: inline-block;
${Emoji} {
font-size: 1.5rem;
position: absolute;
left: ${padding('big')}rem;
top: 50%;
transform-origin: 50% 50%;
transform: translate3d(0, -50%, 0);
transition: all ${p => p.theme.timing.short} ease-out;
}
&:hover {
color: ${color('primary')};
${Emoji} {
transform: translate3d(0, -50%, 0);
}
}
`
const NoFormsPlaceholder = () => (
👋opacity: 1;
pointer-events: all;
transform: translate3d(0, 2.25rem, 0) scale3d(1, 1, 1);
`};
`
const AuthorMenuList = styled.div`
display: flex;
flex-direction: column;
`
const AuthorOption = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};
padding: ${padding("small")};
font-weight: 500;
width: 100%;
background: none;
cursor: pointer;
outline: none;
border: 0;
transition: all 85ms ease-out;
&:hover {
color: ${color.primary()};
background-color: #f6f6f9;
}
&:not(:last-child) {
border-bottom: 1px solid #efefef;
}
`
