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

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