_input-base.scss 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. /**
  2. * Field styles reusable across **all** fields, including:
  3. * Text input, textarea, checkbox, radio, select, etc.
  4. */
  5. @mixin input-base() {
  6. @include more-contrast-interactive();
  7. appearance: none;
  8. border-radius: theme('borderRadius.DEFAULT');
  9. color: theme('colors.text-context');
  10. background-color: theme('colors.surface-field');
  11. border: 1px solid theme('colors.border-field-default');
  12. &:hover {
  13. border-color: theme('colors.border-field-hover');
  14. }
  15. &[disabled],
  16. &[disabled]:hover {
  17. color: theme('colors.text-placeholder');
  18. background-color: theme('colors.surface-field-inactive');
  19. border-color: theme('colors.border-field-inactive');
  20. cursor: not-allowed;
  21. }
  22. // Only show the error state for the specific field in error.
  23. .w-field--error > .w-field__input > &,
  24. // Allow for one wrapper level within StreamField.
  25. .w-field--error > .w-field__input > * > &,
  26. // Ideally, individual widgets should show they are in error state with aria-invalid.
  27. &[aria-invalid='true'] {
  28. border-color: theme('colors.critical.200');
  29. }
  30. &::placeholder {
  31. color: theme('colors.text-placeholder');
  32. }
  33. }