_forms.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. // base styles for form elements, fieldsets, labels, inputs etc.
  2. // ======================================================================
  3. // default transparent background for all form elements
  4. button,
  5. input,
  6. select,
  7. textarea {
  8. background-color: transparent;
  9. }
  10. // default styles for text-input forms fields
  11. [type='text'],
  12. [type='tel'],
  13. [type='email'],
  14. [type='search'],
  15. [type='number'],
  16. [type='password'],
  17. select,
  18. textarea {
  19. @include spacing-inner(t 1/4, r 1/2, b 1/4, l 1/2);
  20. @include border-color(border);
  21. width: 100%;
  22. border-style: solid;
  23. border-width: 1px;
  24. border-radius: 0;
  25. appearance: none; // no rounded inputs etc.
  26. @include attention {
  27. @include border-color(main);
  28. }
  29. }
  30. [type='radio'] {
  31. @extend %visuallyhidden;
  32. }
  33. legend {
  34. @include font-size(h5);
  35. @include spacing(b 2);
  36. width: 100%;
  37. text-align: center;
  38. }
  39. [type='number'] {
  40. // sass-lint:disable-block no-vendor-prefixes
  41. &::-webkit-inner-spin-button,
  42. &::-webkit-outer-spin-button {
  43. appearance: none;
  44. margin: 0;
  45. }
  46. }