How to use the @tinacms/styles.shadow 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 / ColorPicker / ColorPicker.tsx View on Github 
}
export const Swatch = styled(
({ colorRGBA, colorFormat, unselectable, ...props }: SwatchProps) => (
<div>
<div>
{!colorRGBA
? 'Click to add color'
: ColorFormatter[colorFormat].getLabel(colorRGBA)}
</div>
</div>
)
)`
background: ${color.grey(2)};
border-radius: ${radius('big')};
box-shadow: ${shadow('small')};
cursor: pointer;
width: 100%;
margin: 0;
> div {
display: flex;
align-items: center;
justify-content: center;
font-size: ${font.size(1)};
font-weight: bold;
width: 100%;
height: 2.5rem;
border-radius: ${radius('big')};
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.075);${Emoji} {
font-size: 1em;
}
}
p {
display: block;
margin: 0 0 ${padding()} 0;
}
`
const LinkButton = styled.a`
text-align: center;
border: 0;
border-radius: ${radius('big')};
border: 1px solid ${color.grey(2)};
box-shadow: ${shadow('small')};
font-weight: 500;
cursor: pointer;
font-size: ${font.size(0)};
transition: all ${timing('short')} ease-out;
background-color: white;
color: ${color.grey(8)};
padding: ${padding('small')} ${padding('big')} ${padding('small')} 3.5rem;
position: relative;
text-decoration: none;
display: inline-block;
${Emoji} {
font-size: 1.5rem;
position: absolute;
left: ${padding('big')};
top: 50%;
transform-origin: 50% 50%;`
const AuthorMenu = styled.div`
min-width: 12rem;
border-radius: ${radius()};
border: 1px solid #efefef;
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
opacity: 0;
pointer-events: none;
transition: all 150ms ease-out;
transform-origin: 100% 0;
box-shadow: ${shadow("big")};
background-color: white;
overflow: hidden;
z-index: 100;
${props =>
props.open &&
css`
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 ContentMenu = styled.div<{ open: boolean }>`
min-width: 12rem;
border-radius: ${radius()};
border: 1px solid ${color.grey(2)};
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
opacity: 0;
pointer-events: none;
transition: all 150ms ease-out;
transform-origin: 100% 0;
box-shadow: ${shadow('big')};
background-color: white;
overflow: hidden;
z-index: 100;
${props =>
props.open &&
css`
opacity: 1;
pointer-events: all;
transform: translate3d(0, 2.75rem, 0) scale3d(1, 1, 1);
`};
`
const CreateButton = styled.button`
position: relative;
text-align: center;`
const ActionsOverlay = styled.div<{ open: boolean }>`
min-width: 12rem;
border-radius: ${radius()};
border: 1px solid #efefef;
display: block;
position: absolute;
bottom: ${padding()};
right: ${padding()};
transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
opacity: 0;
pointer-events: none;
transition: all 85ms ease-out;
transform-origin: 100% 100%;
box-shadow: ${shadow('big')};
background-color: white;
overflow: hidden;
z-index: 100;
${props =>
props.open &&
css`
opacity: 1;
pointer-events: all;
transform: translate3d(0, -1.75rem, 0) scale3d(1, 1, 1);
`};
`
export const ActionButton: StyledComponent<'button', {}, {}> = styled.button`
position: relative;
text-align: center;
font-size: ${font.size(0)};`
const BlockMenu = styled.div<{ open: boolean }>`
min-width: 12rem;
border-radius: ${radius()};
border: 1px solid #efefef;
display: block;
position: absolute;
top: 0;
right: 0;
transform: translate3d(0, 0, 0) scale3d(0.5, 0.5, 1);
opacity: 0;
pointer-events: none;
transition: all 150ms ease-out;
transform-origin: 100% 0;
box-shadow: ${shadow('big')};
background-color: white;
overflow: hidden;
z-index: 100;
${props =>
props.open &&
css`
opacity: 1;
pointer-events: all;
transform: translate3d(0, 2.25rem, 0) scale3d(1, 1, 1);
`};
`
const BlockMenuList = styled.div`
display: flex;
flex-direction: column;
`
