_input-text.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. @use '../../settings' as *;
  2. @use './input-base' as *;
  3. // All HTML5 input types, with irrelevant ones commented out.
  4. // input[type="button"],
  5. // input[type="checkbox"],
  6. // input[type="color"],
  7. input[type="date"],
  8. input[type="datetime-local"],
  9. input[type="email"],
  10. input[type="file"],
  11. // input[type="hidden"],
  12. // input[type="image"],
  13. input[type="month"],
  14. input[type="number"],
  15. input[type="password"],
  16. // input[type="radio"],
  17. // input[type="range"],
  18. // input[type="reset"],
  19. input[type="search"],
  20. // input[type="submit"],
  21. input[type="tel"],
  22. input[type="text"],
  23. input[type="time"],
  24. input[type="url"],
  25. input[type="week"],
  26. textarea {
  27. @apply w-body-text-large;
  28. width: 100%;
  29. padding: theme('spacing.[1.5]') theme('spacing.5');
  30. min-height: $text-input-height;
  31. @include input-base();
  32. }
  33. // Multiline text fields have larger top-bottom padding.
  34. textarea {
  35. padding: theme('spacing.5');
  36. }
  37. // Disable resize handle on textareas with auto-sizing behaviour
  38. .w-field__autosize {
  39. resize: none;
  40. }
  41. .w-field--date_field,
  42. .w-field--date_time_field,
  43. .w-field--time_field {
  44. // Make sure comment buttons are as close as possible.
  45. display: inline-block;
  46. // Make non-text field types with custom widgets have a smaller width.
  47. input {
  48. width: auto;
  49. max-width: 100%;
  50. }
  51. }