Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
right: 0;
}
& ~ span:after {
top: 0;
}
}
}
`
export const labelText = css`
${textSans.medium()};
color: ${palette.text.primary};
`
export const labelTextWithSupportingText = css`
${textSans.medium()};
`
export const supportingText = css`
${textSans.small()};
color: ${palette.text.secondary};
`
export const tick = css`
@supports (appearance: none) {
/* overall positional properties */
position: absolute;
top: 15px;
left: 9px;
width: 6px;
height: 12px;
transform: rotate(45deg);
import { css } from "@emotion/core"
import { size, space, transitions } from "@guardian/src-foundations"
import { buttonLight, ButtonTheme } from "@guardian/src-foundations/themes"
import { textSans } from "@guardian/src-foundations/typography"
import { focusHalo } from "@guardian/src-foundations/accessibility"
export const button = css`
display: inline-flex;
justify-content: space-between;
align-items: center;
${textSans.medium({ fontWeight: "bold" })};
box-sizing: border-box;
border: none;
background: transparent;
cursor: pointer;
transition: ${transitions.medium};
text-decoration: none;
&:focus {
${focusHalo};
}
`
export const primary = ({
button,
}: { button: ButtonTheme } = buttonLight) => css`
background-color: ${button.backgroundPrimary};
export const textInput = ({
textInput,
}: { textInput: TextInputTheme } = textInputLight) => css`
height: ${size.large}px;
${textSans.medium()};
color: ${textInput.textInput};
background-color: ${textInput.backgroundInput};
border: 2px solid ${palette.border.textInput};
padding: 0 ${space[2]}px;
&:focus {
${focusHalo};
}
`
export const inlineError = ({
inlineError,
}: { inlineError: InlineErrorTheme } = inlineErrorLight) => css`
display: flex;
align-items: center;
${textSans.medium()};
color: ${inlineError.text};
margin-bottom: ${space[1]}px;
svg {
fill: currentColor;
width: 30px;
}
`
&:checked {
&:after {
transform: scale(0.6);
}
}
}
`
export const labelText = ({ radio }: { radio: RadioTheme } = radioLight) => css`
${textSans.medium()};
color: ${radio.text};
`
export const labelTextWithSupportingText = css`
${textSans.medium({ fontWeight: "bold" })};
`
export const supportingText = ({
radio,
}: { radio: RadioTheme } = radioLight) => css`
${textSans.small()};
color: ${radio.textSupporting};
`
export const horizontal = css`
flex-direction: row;
label {
margin-right: ${space[2]}px;
}
`