views-exposed-form.css 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  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 <head>. 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. align-items: flex-end;
  28. margin-top: 1.5rem;
  29. margin-bottom: 1.5rem;
  30. padding: 0.5rem 1.5rem 1.5rem 1.5rem;
  31. border: 1px solid rgba(216, 217, 224, 0.8);
  32. border-radius: 2px;
  33. background-color: #fff;
  34. box-shadow: 0
  35. 2px
  36. 4px
  37. rgba(0, 0, 0, 0.1);
  38. }
  39. .views-exposed-form__item.views-exposed-form__item {
  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-bottom: 0;
  55. }
  56. .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
  57. margin-right: 0;
  58. }
  59. [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
  60. margin-left: 0;
  61. }