messages.pcss.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/components/messages.pcss.css
  2. 11.x core/themes/claro/css/components/messages.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/components/messages.pcss.css
  2. 9 core/themes/claro/css/components/messages.pcss.css
  3. 8.9.x core/themes/claro/css/components/messages.pcss.css
  4. 10 core/misc/dialog/off-canvas/css/messages.pcss.css
  5. 10 core/themes/olivero/css/components/messages.pcss.css
  6. 10 core/themes/claro/css/components/messages.pcss.css

Styling for messages in the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/messages.pcss.css

View source
  1. /**
  2. * @file
  3. * Styling for messages in the off-canvas dialog.
  4. *
  5. * @internal
  6. */
  7. #drupal-off-canvas-wrapper {
  8. --off-canvas-messages-icon-size: 20px;
  9. --off-canvas-messages-background-color: #f3faef;
  10. --off-canvas-messages-text-color-status: #325e1c;
  11. --off-canvas-messages-text-color-warning: #734c00;
  12. --off-canvas-messages-text-color-error: #a51b00;
  13. --off-canvas-messages-icon-status: url(../../../icons/73b355/check.svg);
  14. --off-canvas-messages-icon-warning: url(../../../icons/e29700/warning.svg);
  15. --off-canvas-messages-icon-error: url(../../../icons/e32700/error.svg);
  16. & .messages {
  17. position: relative; /* Anchor ::before pseudo-element. */
  18. margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
  19. padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
  20. padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
  21. border: solid 1px transparent;
  22. background-color: var(--off-canvas-messages-background-color);
  23. /* Icon. */
  24. &::before {
  25. position: absolute;
  26. top: 50%;
  27. display: block;
  28. width: var(--off-canvas-messages-icon-size);
  29. height: var(--off-canvas-messages-icon-size);
  30. content: "";
  31. transform: translateY(-50%);
  32. background-repeat: no-repeat;
  33. background-size: contain;
  34. inset-inline-start: 10px;
  35. @media (forced-colors: active) {
  36. background: canvastext;
  37. mask-repeat: no-repeat;
  38. mask-size: contain;
  39. }
  40. }
  41. }
  42. & h2 {
  43. margin-top: 0;
  44. }
  45. /*
  46. * Some themes (Olivero) insert SVG icon. We use a background icon, so we
  47. * need to remove this.
  48. */
  49. & .messages__icon,
  50. & .messages__close {
  51. display: none;
  52. }
  53. & .messages__list {
  54. margin: 0;
  55. padding-inline-start: 20px;
  56. }
  57. & .messages abbr {
  58. text-decoration: none;
  59. }
  60. & .messages--status {
  61. color: var(--off-canvas-messages-text-color-status);
  62. &::before {
  63. background-image: var(--off-canvas-messages-icon-status);
  64. @media (forced-colors: active) {
  65. background: canvastext;
  66. mask-image: var(--off-canvas-messages-icon-status);
  67. }
  68. }
  69. }
  70. & .messages--warning {
  71. color: var(--off-canvas-messages-text-color-warning);
  72. &::before {
  73. background-image: var(--off-canvas-messages-icon-warning);
  74. @media (forced-colors: active) {
  75. background: canvastext;
  76. mask-image: var(--off-canvas-messages-icon-warning);
  77. }
  78. }
  79. }
  80. & .messages--error {
  81. color: var(--off-canvas-messages-text-color-error);
  82. &::before {
  83. background-image: var(--off-canvas-messages-icon-error);
  84. @media (forced-colors: active) {
  85. background: canvastext;
  86. mask-image: var(--off-canvas-messages-icon-error);
  87. }
  88. }
  89. }
  90. }

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