_forms.scss 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. input.wp-block-search__input,
  2. input[type="text"],
  3. input[type="email"],
  4. input[type="url"],
  5. input[type="password"],
  6. input[type="search"],
  7. input[type="number"],
  8. input[type="tel"],
  9. input[type="range"],
  10. input[type="date"],
  11. input[type="month"],
  12. input[type="week"],
  13. input[type="time"],
  14. input[type="datetime"],
  15. input[type="datetime-local"],
  16. input[type="color"],
  17. textarea {
  18. background: var(--wp--custom--form--color--background);
  19. border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
  20. border-radius: var(--wp--custom--form--border--radius);
  21. box-shadow: var(--wp--custom--form--color--box-shadow);
  22. color: var(--wp--custom--form--color--text);
  23. font-family: inherit;
  24. padding: var(--wp--custom--form--padding);
  25. &:focus {
  26. border-color: var(--custom--form--color--border);
  27. color: var(--wp--custom--form--color--text);
  28. outline: 1px dotted currentColor;
  29. outline-offset: 2px;
  30. }
  31. }
  32. input[type="checkbox"],
  33. input[type="submit"],
  34. button {
  35. &:focus {
  36. outline: 1px dotted currentColor;
  37. outline-offset: 2px;
  38. }
  39. &::placeholder {
  40. color: var(--wp--custom--form--color--text);
  41. opacity: 0.66;
  42. }
  43. }
  44. select {
  45. font-family: inherit;
  46. font-size: 100%;
  47. }
  48. textarea {
  49. width: 100%;
  50. }
  51. // Vertically align checkbox + label relationship
  52. input[type=checkbox] + label {
  53. display: inline;
  54. margin-left: 0.5em;
  55. line-height: 1em;
  56. }