messages.pcss.css

Same filename in this branch
  1. 11.x core/misc/dialog/off-canvas/css/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

Messages.

File

core/themes/olivero/css/components/messages.pcss.css

View source
  1. /**
  2. * @file
  3. * Messages.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. :root {
  7. --messages-icon-size: 32px;
  8. }
  9. .messages-list {
  10. margin-block: var(--sp1);
  11. padding-block: 0;
  12. padding-inline-start: 0;
  13. padding-inline-end: 0;
  14. list-style: none;
  15. }
  16. .messages {
  17. min-height: calc(var(--messages-icon-size) + 2 * var(--sp1));
  18. padding-block: var(--sp1);
  19. padding-inline-start: var(--sp1-5);
  20. padding-inline-end: var(--sp1-5);
  21. color: var(--color--white);
  22. outline: solid 1px transparent;
  23. background-color: var(--color--gray-5);
  24. & * {
  25. color: inherit;
  26. }
  27. /* Additional specificity to override contrib modules. */
  28. &.messages-list__item {
  29. background-image: none;
  30. }
  31. }
  32. .messages__list {
  33. margin-block: 0;
  34. margin-inline-start: 0;
  35. margin-inline-end: 0;
  36. padding-block: 0;
  37. padding-inline-start: 0;
  38. padding-inline-end: 0;
  39. list-style: none;
  40. }
  41. .messages:not(.hidden) ~ .messages {
  42. margin-block-start: var(--sp1);
  43. }
  44. .messages__item + .messages__item {
  45. margin-block-start: var(--sp0-5);
  46. }
  47. .messages__container {
  48. display: flex;
  49. }
  50. .messages__header {
  51. flex-shrink: 0;
  52. margin-inline-end: var(--sp1);
  53. &.no-icon {
  54. margin-inline-end: 0;
  55. }
  56. }
  57. .messages__content {
  58. overflow: auto; /* Ensure large code blocks can be scrolled to. */
  59. flex: 1;
  60. padding-block-start: 3px;
  61. }
  62. .messages__button {
  63. flex-shrink: 0;
  64. margin-inline-start: var(--sp1);
  65. padding-block-start: 3px;
  66. }
  67. .messages__close {
  68. position: relative;
  69. width: 25px;
  70. height: 25px;
  71. padding-block: 0;
  72. padding-inline-start: 0;
  73. padding-inline-end: 0;
  74. cursor: pointer;
  75. vertical-align: top;
  76. border: 0;
  77. background: none;
  78. appearance: none;
  79. &::before,
  80. &::after {
  81. position: absolute;
  82. top: 50%;
  83. left: 50%;
  84. display: block;
  85. width: 33px;
  86. height: 0;
  87. content: "";
  88. border-top: solid 2px var(--color--gray-60);
  89. }
  90. &::before {
  91. transform: translate(-50%, -50%) rotate(45deg);
  92. }
  93. &::after {
  94. transform: translate(-50%, -50%) rotate(-45deg);
  95. }
  96. &:hover {
  97. &::before,
  98. &::after {
  99. border-color: var(--color--white);
  100. }
  101. }
  102. &:focus {
  103. outline: 2px solid var(--color--primary-60);
  104. outline-offset: 2px;
  105. }
  106. }
  107. .messages__icon svg {
  108. vertical-align: top;
  109. }
  110. .messages--error .messages__icon svg {
  111. fill: var(--color--red);
  112. }
  113. .messages--warning .messages__icon svg {
  114. fill: var(--color--gold);
  115. }
  116. .messages--status .messages__icon svg {
  117. fill: var(--color--green);
  118. }
  119. .messages--info .messages__icon svg {
  120. fill: var(--color--primary-60);
  121. }
  122. .messages a {
  123. color: var(--color--white);
  124. }
  125. .messages pre {
  126. margin: 0;
  127. }
  128. .js-form-managed-file .messages {
  129. margin-block-end: var(--sp1);
  130. border-inline-start: solid 6px var(--color--red);
  131. }

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