@julo-ui/otp-input
Version:
React Input Component for entering sequences of digits
36 lines (28 loc) • 649 B
JavaScript
// src/components/otp-input-field/styles.ts
import { css } from "@emotion/react";
var otpInputFieldCx = css`
width: 3rem;
height: 2.875rem;
padding: 0.75rem 0.8125rem;
border: 1px solid var(--colors-neutrals-30);
border-radius: var(--corner-md);
text-align: center;
&:focus,
&:focus-visible {
border-color: var(--colors-primary-20);
}
&:focus-visible {
outline: none;
}
&:disabled {
cursor: not-allowed;
border-color: var(--colors-neutrals-50);
background-color: var(--colors-neutrals-30);
}
&[aria-invalid='true'] {
border-color: var(--colors-red-30);
}
`;
export {
otpInputFieldCx
};