Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
align-items: flex-start;
margin-bottom: ${space[3]}px;
`
export const checkbox = css`
flex: 0 0 auto;
box-sizing: border-box;
display: inline-block;
cursor: pointer;
width: ${size.small}px;
height: ${size.small}px;
margin: 0 ${space[1]}px 0 0;
border: 2px solid currentColor;
position: relative;
transition: box-shadow ${transitions.short};
transition-delay: 0.08s;
color: ${palette.border.checkbox};
&:checked {
border: 2px solid ${palette.border.checkboxChecked};
& ~ span:before {
right: 0;
}
& ~ span:after {
top: 0;
}
}
&:focus {
export const radio = ({ radio }: { radio: RadioTheme } = radioLight) => css`
flex: 0 0 auto;
cursor: pointer;
box-sizing: border-box;
display: inline-block;
width: ${size.small}px;
height: ${size.small}px;
margin: 0 ${space[1]}px 0 0;
border: 2px solid currentColor;
border-radius: 50%;
position: relative;
transition: box-shadow ${transitions.short};
transition-delay: 0.08s;
color: ${radio.border};
&:checked {
color: ${radio.backgroundChecked};
}
&:focus {
${focusHalo};
}
/*
Take care: Emotion extracts @supports blocks and moves them below
all other <style> elements, making these values hard to override.
I have chosen to keep these styles in the @supports block as</style>
`
export const iconOnlyDefault = css`
width: ${size.large}px;
justify-content: center;
`
export const iconOnlySmall = css`
width: ${size.medium}px;
justify-content: center;
`
export const iconNudgeAnimation = css`
svg {
transform: translate(0, 0);
transition: ${transitions.short};
}
&:hover,
&:focus {
svg {
transform: translate(${space[1] / 2}px, 0);
}
}
`