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. inset-block-start: 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. &:focus {
  15. outline: var(--jui-dialog--focus-outline);
  16. box-shadow: var(--jui-dialog--focus-box-shadow);
  17. }
  18. /* Media queries are moved outside */
  19. }
  20. @media (forced-colors: active) {
  21. .ui-dialog {
  22. border: 1px solid transparent;
  23. }
  24. }
  25. @media all and (max-width: 48em) {
  26. .ui-dialog:not(.ui-dialog-off-canvas) {
  27. min-width: 92%;
  28. max-width: 92%;
  29. }
  30. }
  31. .ui-dialog {
  32. .ui-dialog-titlebar {
  33. position: relative;
  34. box-sizing: border-box;
  35. padding-block: var(--space-m);
  36. padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
  37. color: var(--jui-dialog-title-color);
  38. border-start-end-radius: var(--jui-dialog-border-radius);
  39. border-start-start-radius: var(--jui-dialog-border-radius);
  40. background: var(--jui-dialog-title-bg-color);
  41. line-height: calc(var(--space-m) * 2);
  42. .ui-dialog-title {
  43. -webkit-font-smoothing: antialiased;
  44. font-size: var(--jui-dialog-title-font-size);
  45. font-weight: bold;
  46. }
  47. .ui-dialog-titlebar-close {
  48. position: absolute;
  49. inset-block-start: 50%;
  50. inset-inline-end: 0;
  51. box-sizing: border-box;
  52. inline-size: var(--jui-dialog-close-button-size);
  53. block-size: var(--jui-dialog-close-button-size);
  54. margin-inline: var(--space-l);
  55. padding: 0;
  56. transition: all 0.1s;
  57. transform: translateY(-50%);
  58. border: 2px solid transparent;
  59. border-radius: var(--jui-dialog-close-button-border-radius);
  60. background: none;
  61. &:hover {
  62. border-color: var(--color-white);
  63. }
  64. &:focus {
  65. border-color: var(--color-focus);
  66. outline: var(--jui-dialog--focus-outline);
  67. box-shadow: none;
  68. }
  69. .ui-icon.ui-icon-closethick {
  70. width: 100%;
  71. height: 100%;
  72. margin: 0;
  73. transform: translate(-50%, -50%);
  74. background: url(../../images/icons/d3d4d9/ex.svg) no-repeat 50%;
  75. @media (forced-colors: active) {
  76. background: url(../../images/icons/buttonText/ex.svg) no-repeat 50%;
  77. }
  78. }
  79. }
  80. }
  81. > .ui-dialog-content {
  82. overflow: auto;
  83. padding: var(--space-m) var(--space-l);
  84. color: var(--color-text);
  85. background: var(--color-white);
  86. .form-actions,
  87. .field-actions {
  88. margin: 0;
  89. padding: 0;
  90. }
  91. }
  92. > .ui-dialog-buttonpane {
  93. color: var(--color-text);
  94. border-bottom-right-radius: var(--jui-dialog-border-radius);
  95. border-bottom-left-radius: var(--jui-dialog-border-radius);
  96. background: var(--color-gray-050);
  97. .ui-dialog-buttonset {
  98. display: flex;
  99. gap: var(--space-s);
  100. justify-content: flex-end;
  101. margin-block: var(--space-m);
  102. margin-inline-end: var(--space-l);
  103. & > * {
  104. margin: 0;
  105. }
  106. }
  107. .ui-button-text-only .ui-button-text {
  108. padding: 0;
  109. }
  110. }
  111. &.ui-dialog-off-canvas {
  112. .ui-widget-content.ui-dialog-content {
  113. background: none;
  114. }
  115. }
  116. }
  117. #drupal-off-canvas {
  118. .form-item .form-item__description {
  119. color: var(--color-gray-050);
  120. font-size: 0.75rem;
  121. }
  122. }

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