form--select.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--select.pcss.css
  2. 10 core/themes/claro/css/components/form--select.pcss.css
  3. 11.x core/themes/claro/css/components/form--select.pcss.css

Select input elements.

File

core/themes/claro/css/components/form--select.pcss.css

View source
  1. /**
  2. * @file
  3. * Select input elements.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .form-element--type-select {
  7. padding-right: calc(2rem - var(--input-border-size));
  8. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23545560'/%3E%3C/svg%3E%0A");
  9. background-repeat: no-repeat;
  10. background-position: 100% 50%;
  11. background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
  12. }
  13. [dir="rtl"] .form-element--type-select {
  14. padding-right: calc(1rem - var(--input-border-size));
  15. padding-left: calc(2rem - var(--input-border-size));
  16. background-position: 0 50%;
  17. }
  18. .no-touchevents .form-element--type-select.form-element--extrasmall,
  19. .no-touchevents .form-element--type-select[name$="][_weight]"] {
  20. padding-right: calc(1.5rem - var(--input-border-size));
  21. background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
  22. }
  23. [dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
  24. [dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
  25. padding-right: calc(0.5rem - var(--input-border-size));
  26. padding-left: calc(1.5rem - var(--input-border-size));
  27. }
  28. .form-element--type-select::-ms-expand {
  29. display: none;
  30. }
  31. /**
  32. * Select states.
  33. */
  34. .form-element--type-select:focus {
  35. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%23004adc'/%3E%3C/svg%3E%0A");
  36. }
  37. .form-element--type-select[disabled] {
  38. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='%238e929c'/%3E%3C/svg%3E%0A");
  39. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.