dialog.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/dialog.pcss.css
  2. 8.9.x core/themes/claro/css/components/dialog.pcss.css
  3. 10 core/themes/claro/css/components/dialog.pcss.css

Presentational styles for Drupal dialogs.

File

core/themes/claro/css/components/dialog.pcss.css

View source
  1. /**
  2. * @file
  3. * Presentational styles for Drupal dialogs.
  4. */
  5. .ui-dialog {
  6. position: absolute;
  7. top: 0;
  8. left: 0;
  9. padding: 0;
  10. border: 0;
  11. border-radius: var(--jui-dialog-border-radius);
  12. background: transparent;
  13. box-shadow: var(--jui-dialog-box-shadow);
  14. @media (forced-colors: active) {
  15. border: 1px solid transparent;
  16. }
  17. }
  18. .ui-dialog:focus {
  19. outline: var(--jui-dialog--focus-outline);
  20. box-shadow: var(--jui-dialog--focus-box-shadow);
  21. }
  22. @media all and (max-width: 48em) {
  23. /* 768px */
  24. .ui-dialog:not(.ui-dialog-off-canvas) {
  25. min-width: 92%;
  26. max-width: 92%;
  27. }
  28. }
  29. .ui-dialog .ui-dialog-titlebar {
  30. position: relative;
  31. box-sizing: border-box;
  32. padding: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
  33. color: var(--jui-dialog-title-color);
  34. border-top-left-radius: var(--jui-dialog-border-radius);
  35. border-top-right-radius: var(--jui-dialog-border-radius);
  36. background: var(--jui-dialog-title-bg-color);
  37. line-height: calc(var(--space-m) * 2);
  38. }
  39. [dir="rtl"] .ui-dialog .ui-dialog-titlebar {
  40. padding-right: var(--space-l);
  41. padding-left: var(--jui-dialog-close-button-reserved-space);
  42. }
  43. .ui-dialog .ui-dialog-title {
  44. -webkit-font-smoothing: antialiased;
  45. font-size: var(--jui-dialog-title-font-size);
  46. font-weight: bold;
  47. }
  48. .ui-dialog .ui-dialog-titlebar-close {
  49. position: absolute;
  50. top: 50%;
  51. right: 0; /* LTR */
  52. box-sizing: border-box;
  53. width: var(--jui-dialog-close-button-size);
  54. height: var(--jui-dialog-close-button-size);
  55. margin: 0 var(--space-l);
  56. padding: 0;
  57. transition: all 0.1s;
  58. transform: translateY(-50%);
  59. border: 2px solid transparent;
  60. border-radius: var(--jui-dialog-close-button-border-radius);
  61. background: none;
  62. }
  63. [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
  64. right: auto;
  65. left: 0;
  66. }
  67. .ui-dialog .ui-dialog-titlebar-close:hover {
  68. border-color: var(--color-white);
  69. }
  70. .ui-dialog .ui-dialog-titlebar-close:focus {
  71. border-color: var(--color-focus);
  72. outline: var(--jui-dialog--focus-outline);
  73. box-shadow: none;
  74. }
  75. .ui-dialog .ui-icon.ui-icon-closethick {
  76. width: 100%;
  77. height: 100%;
  78. margin: 0;
  79. transform: translate(-50%, -50%);
  80. background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
  81. }
  82. @media (forced-colors: active) {
  83. .ui-dialog .ui-icon.ui-icon-closethick {
  84. background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
  85. }
  86. }
  87. .ui-dialog > .ui-dialog-content {
  88. overflow: auto;
  89. padding: var(--space-m) var(--space-l);
  90. color: var(--color-text);
  91. background: var(--color-white);
  92. }
  93. .ui-dialog > .ui-dialog-buttonpane {
  94. color: var(--color-text);
  95. border-bottom-right-radius: var(--jui-dialog-border-radius);
  96. border-bottom-left-radius: var(--jui-dialog-border-radius);
  97. background: var(--color-gray-050);
  98. }
  99. .ui-dialog-buttonpane .ui-dialog-buttonset {
  100. display: flex;
  101. gap: var(--space-s);
  102. justify-content: flex-end;
  103. margin-block: var(--space-m);
  104. margin-inline-end: var(--space-l);
  105. & > * {
  106. margin: 0;
  107. }
  108. }
  109. .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  110. padding: 0;
  111. }
  112. .ui-dialog .ui-dialog-content {
  113. position: static;
  114. }
  115. /* Form action buttons are moved in dialogs. Remove empty space. */
  116. .ui-dialog .ui-dialog-content .form-actions,
  117. .ui-dialog .ui-dialog-content .field-actions {
  118. margin: 0;
  119. padding: 0;
  120. }
  121. /**
  122. * Off-canvas styles.
  123. */
  124. .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
  125. background: none;
  126. }
  127. #drupal-off-canvas {
  128. & .form-type--boolean {
  129. margin-left: 0;
  130. }
  131. & .form-item .form-item__description {
  132. color: var(--color-gray-050);
  133. font-size: 0.75rem;
  134. }
  135. }

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