react-segmented-input
Version:
Highly customizable React components for code input fields with TypeScript support
2 lines (1 loc) • 1.17 kB
CSS
.box-code-input{display:flex;align-items:center;font-family:inherit}.box-code-input__field{display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all .2s ease;caret-color:currentColor}.box-code-input__field:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.box-code-input__field:disabled{opacity:.5;cursor:not-allowed;background-color:#f3f4f6}.box-code-input__separator{display:flex;align-items:center;justify-content:center;color:#6b7280;font-weight:500;-webkit-user-select:none;user-select:none}@media (max-width: 640px){.box-code-input__separator{font-size:.9em}}.line-code-input{display:inline-block;font-family:inherit}.line-code-input__field{box-sizing:border-box;transition:all .2s ease;caret-color:currentColor;font-family:Courier New,Courier,monospace}.line-code-input__field:focus{box-shadow:0 0 0 2px #3b82f680;border-color:#3b82f6}.line-code-input__field:disabled{opacity:.5;cursor:not-allowed;background-color:#f3f4f6}.line-code-input__field::placeholder{color:#9ca3af;opacity:1}@media (max-width: 640px){.line-code-input__field{font-size:14px;letter-spacing:4px;padding:8px 12px}}