dialog.css

Same filename in this branch
  1. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 11.x core/themes/starterkit_theme/css/components/dialog.css
  3. 11.x core/assets/vendor/jquery.ui/themes/base/dialog.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 9 core/themes/seven/css/components/dialog.css
  3. 9 core/themes/claro/css/components/dialog.css
  4. 9 core/themes/bartik/css/classy/components/dialog.css
  5. 9 core/themes/starterkit_theme/css/components/dialog.css
  6. 9 core/themes/classy/css/components/dialog.css
  7. 9 core/assets/vendor/jquery.ui/themes/base/dialog.css
  8. 9 core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  9. 9 core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  10. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  11. 8.9.x core/themes/seven/css/components/dialog.css
  12. 8.9.x core/themes/claro/css/components/dialog.css
  13. 8.9.x core/themes/bartik/css/classy/components/dialog.css
  14. 8.9.x core/themes/classy/css/components/dialog.css
  15. 8.9.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  16. 8.9.x core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  17. 8.9.x core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  18. 10 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  19. 10 core/themes/claro/css/components/dialog.css
  20. 10 core/themes/starterkit_theme/css/components/dialog.css
  21. 10 core/assets/vendor/jquery.ui/themes/base/dialog.css

Presentational styles for Drupal dialogs.

File

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

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Presentational styles for Drupal dialogs.
  10. */
  11. .ui-dialog {
  12. position: absolute;
  13. inset-block-start: 0;
  14. left: 0;
  15. padding: 0;
  16. border: 0;
  17. border-radius: var(--jui-dialog-border-radius);
  18. background: transparent;
  19. box-shadow: var(--jui-dialog-box-shadow);
  20. }
  21. .ui-dialog:focus {
  22. outline: var(--jui-dialog--focus-outline);
  23. box-shadow: var(--jui-dialog--focus-box-shadow);
  24. }
  25. /* Media queries are moved outside */
  26. @media (forced-colors: active) {
  27. .ui-dialog {
  28. border: 1px solid transparent;
  29. }
  30. }
  31. @media all and (max-width: 48em) {
  32. .ui-dialog:not(.ui-dialog-off-canvas) {
  33. min-width: 92%;
  34. max-width: 92%;
  35. }
  36. }
  37. .ui-dialog .ui-dialog-titlebar {
  38. position: relative;
  39. box-sizing: border-box;
  40. padding-block: var(--space-m);
  41. padding-inline: var(--space-l) var(--jui-dialog-close-button-reserved-space);
  42. color: var(--jui-dialog-title-color);
  43. border-start-end-radius: var(--jui-dialog-border-radius);
  44. border-start-start-radius: var(--jui-dialog-border-radius);
  45. background: var(--jui-dialog-title-bg-color);
  46. line-height: calc(var(--space-m) * 2);
  47. }
  48. .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
  49. -webkit-font-smoothing: antialiased;
  50. font-size: var(--jui-dialog-title-font-size);
  51. font-weight: bold;
  52. }
  53. .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  54. position: absolute;
  55. inset-block-start: 50%;
  56. inset-inline-end: 0;
  57. box-sizing: border-box;
  58. inline-size: var(--jui-dialog-close-button-size);
  59. block-size: var(--jui-dialog-close-button-size);
  60. margin-inline: var(--space-l);
  61. padding: 0;
  62. transition: all 0.1s;
  63. transform: translateY(-50%);
  64. border: 2px solid transparent;
  65. border-radius: var(--jui-dialog-close-button-border-radius);
  66. background: none;
  67. }
  68. .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
  69. border-color: var(--color-white);
  70. }
  71. .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:focus {
  72. border-color: var(--color-focus);
  73. outline: var(--jui-dialog--focus-outline);
  74. box-shadow: none;
  75. }
  76. .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
  77. width: 100%;
  78. height: 100%;
  79. margin: 0;
  80. transform: translate(-50%, -50%);
  81. background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='%23D3D4D9' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
  82. }
  83. @media (forced-colors: active) {
  84. .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon.ui-icon-closethick {
  85. background: url("data:image/svg+xml,%3csvg width='12' height='12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11 1.318l-10 10M11 11.318l-10-10' stroke='buttonText' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat 50%;
  86. }
  87. }
  88. .ui-dialog > .ui-dialog-content {
  89. overflow: auto;
  90. padding: var(--space-m) var(--space-l);
  91. color: var(--color-text);
  92. background: var(--color-white);
  93. }
  94. .ui-dialog > .ui-dialog-content .form-actions,
  95. .ui-dialog > .ui-dialog-content .field-actions {
  96. margin: 0;
  97. padding: 0;
  98. }
  99. .ui-dialog > .ui-dialog-buttonpane {
  100. color: var(--color-text);
  101. border-bottom-right-radius: var(--jui-dialog-border-radius);
  102. border-bottom-left-radius: var(--jui-dialog-border-radius);
  103. background: var(--color-gray-050);
  104. }
  105. .ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset {
  106. display: flex;
  107. gap: var(--space-s);
  108. justify-content: flex-end;
  109. margin-block: var(--space-m);
  110. margin-inline-end: var(--space-l);
  111. }
  112. .ui-dialog > .ui-dialog-buttonpane .ui-dialog-buttonset > * {
  113. margin: 0;
  114. }
  115. .ui-dialog > .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  116. padding: 0;
  117. }
  118. .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
  119. background: none;
  120. }
  121. #drupal-off-canvas .form-item .form-item__description {
  122. color: var(--color-gray-050);
  123. font-size: 0.75rem;
  124. }

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