input.tsx 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import {css} from '@emotion/react';
  2. import {Theme} from 'sentry/utils/theme';
  3. export const INPUT_PADDING = 10;
  4. type Props = {
  5. theme: Theme;
  6. disabled?: boolean;
  7. monospace?: boolean;
  8. readOnly?: boolean;
  9. };
  10. const inputStyles = (props: Props) =>
  11. css`
  12. color: ${props.disabled ? props.theme.disabled : props.theme.formText};
  13. display: block;
  14. width: 100%;
  15. background: ${props.theme.background};
  16. border: 1px solid ${props.theme.border};
  17. border-radius: ${props.theme.borderRadius};
  18. box-shadow: inset ${props.theme.dropShadowLight};
  19. padding: ${INPUT_PADDING}px;
  20. resize: vertical;
  21. height: 40px;
  22. transition: border 0.1s, box-shadow 0.1s;
  23. ${props.monospace ? `font-family: ${props.theme.text.familyMono}` : ''};
  24. ${props.readOnly
  25. ? css`
  26. cursor: default;
  27. `
  28. : ''};
  29. &::placeholder {
  30. color: ${props.theme.formPlaceholder};
  31. }
  32. &[disabled] {
  33. background: ${props.theme.backgroundSecondary};
  34. color: ${props.theme.gray300};
  35. border: 1px solid ${props.theme.border};
  36. cursor: not-allowed;
  37. &::placeholder {
  38. color: ${props.theme.disabled};
  39. }
  40. }
  41. &:focus,
  42. &.focus-visible {
  43. outline: none;
  44. border-color: ${props.theme.focusBorder};
  45. box-shadow: ${props.theme.focusBorder} 0 0 0 1px;
  46. }
  47. `;
  48. export {inputStyles};