How to use the @tinacms/styles.font.size 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 / links / LinkForm.tsx View on Github 
border: 1px solid ${color.grey(2)};
width: 100%;
margin: 0 0 0.5rem 0;
outline: none;
box-shadow: 0 0 0 2px transparent;
&:hover {
box-shadow: 0 0 0 2px ${color.grey(3)};
}
&:focus {
box-shadow: 0 0 0 2px #0084ff;
}
&::placeholder {
font-size: ${font.size(2)};
color: #cfd3d7;
}
`
const LinkActions = styled.div`
display: flex;
justify-content: flex-end;
padding-top: 0.25rem;
`
const LinkButton = styled.button`
text-align: center;
border: 0;
border-radius: ${radius()};
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
background-color: #0084ff;transform: translate3d(-7px, 0, 0);
}
}
`
export const PanelBody = styled.div`
background: #f6f6f9;
position: relative;
display: flex;
flex: 1 1 auto;
overflow-y: auto;
`
const GroupLabel = styled.span`
margin: 0;
font-size: ${font.size(2)};
font-weight: 500;
color: inherit;
transition: all 85ms ease-out;
`
const GroupPanelKeyframes = keyframes`
0% {
transform: translate3d( 100%, 0, 0 );
}
100% {
transform: translate3d( 0, 0, 0 );
}
`
export const GroupPanel = styled.div<{ isExpanded: boolean }>`
position: fixed;const LinkActions = styled.div`
display: flex;
justify-content: flex-end;
padding-top: 0.25rem;
`
const LinkButton = styled.button`
text-align: center;
border: 0;
border-radius: ${radius()};
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
background-color: #0084ff;
color: white;
font-weight: 500;
cursor: pointer;
font-size: ${font.size(0)};
padding: 0.5rem 1.25rem;
transition: opacity 86ms ease-out;
margin-left: 0.5rem;
flex: 0 1 auto;
&:hover {
opacity: 0.6;
}
`
const SaveLink = styled.button`
text-align: center;
border: 0;
border-radius: ${radius()};
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.12);
background-color: #0084ff;
color: white;const FieldLabel = styled.label`
display: block;
font-size: ${font.size(1)};
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.35;
color: ${color.grey(8)};
margin-bottom: 0.5rem;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
`
const FieldDescription = styled.p`
color: ${color.grey(6)};
font-size: ${font.size(0)};
font-style: italic;
font-weight: lighter;
padding-top: 0.25rem;
white-space: normal
`
const FieldError = styled.span`
display: block;
color: red;
font-size: ${font.size(1)};
margin-top: 0.5rem;
font-weight: 500;
`}
`
const ListItem = styled.div`
position: relative;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: stretch;
background-color: white;
border: 1px solid ${color.grey(2)};
margin: 0 0 -1px 0;
overflow: visible;
line-height: 1.35;
padding: 0;
font-size: ${font.size(2)};
font-weight: 500;
${ItemLabel} {
color: #282828;
align-self: center;
max-width: 100%;
}
svg {
fill: ${color.grey(3)};
width: 1.25rem;
height: auto;
transition: fill 85ms ease-out;
}
&:hover {>
{sidebar.isOpen ? : }
)
}
const MenuList = styled.div`
margin: 2rem -${padding()} 2rem -${padding()};
display: block;
`
const MenuLink = styled.div<{ value: string }>`
color: ${color.grey(1)};
font-size: ${font.size(4)};
font-weight: 500;
padding: ${padding()} ${padding()} ${padding()} 4rem;
position: relative;
cursor: pointer;
transition: all ${timing('short')} ease-out;
overflow: hidden;
&:after {
content: '';
position: absolute;
top: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
right: 0.5rem;
border-radius: ${radius()};
background-color: ${color.grey(9)};
z-index: -1;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 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;
}
`}
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%;
transform: translate3d(0, -50%, 0);
transition: all ${timing('short')} ease-out;
}white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
transition: all 85ms ease-out;
text-align: left;
`
const GroupListHeader = styled.div`
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
${GroupLabel} {
font-size: ${font.size(3)};
}
`
const GroupListPanel = styled.div`
max-height: initial;
position: relative;
height: auto;
margin-bottom: 1.5rem;
border-radius: ${radius('small')};
background-color: ${color.grey(2)};
`
const EmptyList = styled.div`
text-align: center;
border-radius: ${radius('small')};
background-color: ${color.grey(2)};position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
overflow: auto;
padding: 0;
`
export const ModalHeader = styled.div`
height: 3.5rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: ${font.size(5)};
font-weight: 500;
line-height: normal;
padding: 0 ${padding()} 0 ${padding()};
border-bottom: 1px solid ${color.grey(3)};
margin: 0;
`
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;
