views-exposed-form.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/views-exposed-form.css
  2. 10 core/themes/claro/css/components/views-exposed-form.css
  3. 11.x core/themes/claro/css/components/views-exposed-form.css

Visual styles for views exposed form.

File

core/themes/claro/css/components/views-exposed-form.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Visual styles for views exposed form.
  10. */
  11. /**
  12. * Use flexbox and some margin resets to make the fields + actions go inline.
  13. *
  14. * For (at least) Media Library, this file is typically inserted by AJAX add_css
  15. * command when the dialog is opened. The AJAX add_css command always adds the
  16. * missing-but-required CSS assets to the beginning of the HTML . Because
  17. * of this, we cannot rely on the expected loading order of the CSS assets.
  18. * This is why we have to double these selectors: we have to get the expected
  19. * output even for the Media Library modal.
  20. *
  21. * @todo Remove double selectors after https://www.drupal.org/node/1461322
  22. * has been resolved.
  23. */
  24. .views-exposed-form.views-exposed-form {
  25. display: flex;
  26. flex-wrap: wrap;
  27. margin-top: 1.5rem;
  28. margin-bottom: 1.5rem;
  29. padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  30. border: 1px solid #dedfe4;
  31. border-radius: 2px;
  32. background-color: #fff;
  33. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  34. }
  35. .views-exposed-form--preview.views-exposed-form--preview {
  36. margin-top: 0;
  37. }
  38. .views-exposed-form__item.views-exposed-form__item {
  39. max-width: 100%;
  40. margin: 0.75rem 0.5rem 0 0; /* LTR */
  41. }
  42. [dir="rtl"] .views-exposed-form__item.views-exposed-form__item {
  43. margin-right: 0;
  44. margin-left: 0.5rem;
  45. }
  46. .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
  47. margin-right: 1rem; /* LTR */
  48. }
  49. [dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
  50. margin-right: 0;
  51. margin-left: 1rem;
  52. }
  53. .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
  54. margin-top: 0;
  55. margin-bottom: 0;
  56. }
  57. .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
  58. margin-right: 0;
  59. }
  60. [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
  61. margin-left: 0;
  62. }
  63. .views-exposed-form .form-item--no-label,
  64. .views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
  65. /* Line height of a label + existing margin for the element + margin for label */
  66. margin-top: 2.375rem;
  67. }

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