dialog.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 10 core/themes/starterkit_theme/css/components/dialog.css
  3. 10 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. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  19. 11.x core/themes/claro/css/components/dialog.css
  20. 11.x core/themes/starterkit_theme/css/components/dialog.css
  21. 11.x 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. top: 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. @media (forced-colors: active) {
  22. .ui-dialog {
  23. border: 1px solid transparent;
  24. }
  25. }
  26. .ui-dialog:focus {
  27. outline: var(--jui-dialog--focus-outline);
  28. box-shadow: var(--jui-dialog--focus-box-shadow);
  29. }
  30. @media all and (max-width: 48em) {
  31. /* 768px */
  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: var(--space-m) var(--jui-dialog-close-button-reserved-space) var(--space-m) var(--space-l); /* LTR */
  41. color: var(--jui-dialog-title-color);
  42. border-top-left-radius: var(--jui-dialog-border-radius);
  43. border-top-right-radius: var(--jui-dialog-border-radius);
  44. background: var(--jui-dialog-title-bg-color);
  45. line-height: calc(var(--space-m) * 2);
  46. }
  47. [dir="rtl"] .ui-dialog .ui-dialog-titlebar {
  48. padding-right: var(--space-l);
  49. padding-left: var(--jui-dialog-close-button-reserved-space);
  50. }
  51. .ui-dialog .ui-dialog-title {
  52. -webkit-font-smoothing: antialiased;
  53. font-size: var(--jui-dialog-title-font-size);
  54. font-weight: bold;
  55. }
  56. .ui-dialog .ui-dialog-titlebar-close {
  57. position: absolute;
  58. top: 50%;
  59. right: 0; /* LTR */
  60. box-sizing: border-box;
  61. width: var(--jui-dialog-close-button-size);
  62. height: var(--jui-dialog-close-button-size);
  63. margin: 0 var(--space-l);
  64. padding: 0;
  65. transition: all 0.1s;
  66. transform: translateY(-50%);
  67. border: 2px solid transparent;
  68. border-radius: var(--jui-dialog-close-button-border-radius);
  69. background: none;
  70. }
  71. [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
  72. right: auto;
  73. left: 0;
  74. }
  75. .ui-dialog .ui-dialog-titlebar-close:hover {
  76. border-color: var(--color-white);
  77. }
  78. .ui-dialog .ui-dialog-titlebar-close:focus {
  79. border-color: var(--color-focus);
  80. outline: var(--jui-dialog--focus-outline);
  81. box-shadow: none;
  82. }
  83. .ui-dialog .ui-icon.ui-icon-closethick {
  84. width: 100%;
  85. height: 100%;
  86. margin: 0;
  87. transform: translate(-50%, -50%);
  88. 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%;
  89. }
  90. @media (forced-colors: active) {
  91. .ui-dialog .ui-icon.ui-icon-closethick {
  92. 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%;
  93. }
  94. }
  95. .ui-dialog > .ui-dialog-content {
  96. overflow: auto;
  97. padding: var(--space-m) var(--space-l);
  98. color: var(--color-text);
  99. background: var(--color-white);
  100. }
  101. .ui-dialog > .ui-dialog-buttonpane {
  102. color: var(--color-text);
  103. border-bottom-right-radius: var(--jui-dialog-border-radius);
  104. border-bottom-left-radius: var(--jui-dialog-border-radius);
  105. background: var(--color-gray-050);
  106. }
  107. .ui-dialog-buttonpane .ui-dialog-buttonset {
  108. display: flex;
  109. gap: var(--space-s);
  110. justify-content: flex-end;
  111. margin-block: var(--space-m);
  112. margin-inline-end: var(--space-l);
  113. }
  114. .ui-dialog-buttonpane .ui-dialog-buttonset > * {
  115. margin: 0;
  116. }
  117. .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  118. padding: 0;
  119. }
  120. .ui-dialog .ui-dialog-content {
  121. position: static;
  122. }
  123. /* Form action buttons are moved in dialogs. Remove empty space. */
  124. .ui-dialog .ui-dialog-content .form-actions,
  125. .ui-dialog .ui-dialog-content .field-actions {
  126. margin: 0;
  127. padding: 0;
  128. }
  129. /**
  130. * Off-canvas styles.
  131. */
  132. .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
  133. background: none;
  134. }
  135. #drupal-off-canvas .form-type--boolean {
  136. margin-left: 0;
  137. }
  138. #drupal-off-canvas .form-item .form-item__description {
  139. color: var(--color-gray-050);
  140. font-size: 0.75rem;
  141. }

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