filter.theme.pcss.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/theme/filter.theme.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/theme/filter.theme.pcss.css
  2. 9 core/themes/claro/css/theme/filter.theme.pcss.css
  3. 8.9.x core/themes/claro/css/theme/filter.theme.pcss.css
  4. 10 core/themes/olivero/css/theme/filter.theme.pcss.css
  5. 10 core/themes/claro/css/theme/filter.theme.pcss.css

Styling for the Filter module.

File

core/themes/claro/css/theme/filter.theme.pcss.css

View source
  1. /**
  2. * @file
  3. * Styling for the Filter module.
  4. */
  5. /**
  6. * Filter information under field.
  7. */
  8. .text-full > .form-item {
  9. margin-bottom: 0;
  10. }
  11. .form-element--editor-format {
  12. vertical-align: top;
  13. }
  14. @media screen and (max-width: 600px) {
  15. /* Leave editor's select auto-scaled. */
  16. .form-element.form-element--editor-format {
  17. width: auto;
  18. }
  19. }
  20. .filter-wrapper {
  21. margin-top: 0.5em; /* (8 / 16) */
  22. margin-bottom: 0.5em; /* (8 / 16) */
  23. }
  24. .filter-wrapper .form-item {
  25. margin: 0;
  26. }
  27. .filter-help {
  28. float: right; /* LTR */
  29. padding-top: 0.25em; /* (3 / 12), because font size is 12px */
  30. padding-bottom: 0.25em; /* (3 / 12) */
  31. font-size: 0.75em; /* (12 / 16), inherited font size is 16px */
  32. }
  33. [dir="rtl"] .filter-help {
  34. float: left;
  35. }
  36. /**
  37. * Compose tips.
  38. *
  39. * Wraps filter tips on page '/filter/tips[/name]'.
  40. */
  41. .compose-tips__item {
  42. margin-top: 1.5em;
  43. margin-bottom: 1.5em;
  44. }
  45. /**
  46. * Filter guidelines.
  47. */
  48. .filter-guidelines__item {
  49. margin-top: 0.5em; /* (6 / 12) */
  50. color: var(--input-fg-color--description);
  51. font-size: 0.75em; /* (12 / 16) */
  52. }
  53. .filter-guidelines p {
  54. margin-top: 0.3333em; /* (4 / 12) */
  55. margin-bottom: 0;
  56. }
  57. /**
  58. * Filter tips.
  59. *
  60. * Long is used on '/filter/tips[/name]', short is used for the filter tips
  61. * below a text format input.
  62. */
  63. .filter-tips--long {
  64. margin-bottom: 1.5em;
  65. }
  66. .filter-tips__item,
  67. .filter-tips--long p {
  68. margin-top: 0.75em;
  69. margin-bottom: 0.75em;
  70. }
  71. .filter-tips__item--short {
  72. margin-top: 0.3333em; /* (4 / 12) */
  73. margin-bottom: 0;
  74. }

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