dialog.css

Same filename in this branch
  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/bartik/css/classy/components/dialog.css
  4. 9 core/themes/starterkit_theme/css/components/dialog.css
  5. 9 core/themes/classy/css/components/dialog.css
  6. 9 core/assets/vendor/jquery.ui/themes/base/dialog.css
  7. 9 core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  8. 9 core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
Same filename in other branches
  1. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  2. 8.9.x core/themes/seven/css/components/dialog.css
  3. 8.9.x core/themes/claro/css/components/dialog.css
  4. 8.9.x core/themes/bartik/css/classy/components/dialog.css
  5. 8.9.x core/themes/classy/css/components/dialog.css
  6. 8.9.x core/assets/vendor/jquery.ui/themes/base/dialog.css
  7. 8.9.x core/assets/vendor/ckeditor/skins/moono-lisa/dialog.css
  8. 8.9.x core/assets/vendor/ckeditor/plugins/dialog/styles/dialog.css
  9. 10 core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  10. 10 core/themes/claro/css/components/dialog.css
  11. 10 core/themes/starterkit_theme/css/components/dialog.css
  12. 10 core/assets/vendor/jquery.ui/themes/base/dialog.css
  13. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
  14. 11.x core/themes/claro/css/components/dialog.css
  15. 11.x core/themes/starterkit_theme/css/components/dialog.css
  16. 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: 0.25rem;
  18. background: transparent;
  19. box-shadow: 0 0 1rem -0.25rem #232429;
  20. }
  21. .ui-dialog:focus {
  22. outline: 2px dotted transparent;
  23. box-shadow: 0 0 0 3px #26a769;
  24. }
  25. @media all and (max-width: 48em) { /* 768px */
  26. .ui-dialog:not(.ui-dialog-off-canvas) {
  27. min-width: 92%;
  28. max-width: 92%;
  29. }
  30. }
  31. .ui-dialog .ui-dialog-titlebar {
  32. position: relative;
  33. box-sizing: border-box;
  34. padding: 1rem 4rem 1rem 1.5rem; /* LTR */
  35. color: #fff;
  36. border-top-left-radius: 4px;
  37. border-top-right-radius: 4px;
  38. background: #232429;
  39. line-height: 2rem;
  40. }
  41. [dir="rtl"] .ui-dialog .ui-dialog-titlebar {
  42. padding-right: 1.5rem;
  43. padding-left: 4rem;
  44. }
  45. .ui-dialog .ui-dialog-title {
  46. -webkit-font-smoothing: antialiased;
  47. font-size: 1.424rem;
  48. font-weight: bold;
  49. }
  50. .ui-dialog .ui-dialog-titlebar-close {
  51. position: absolute;
  52. top: 50%;
  53. right: 0; /* LTR */
  54. box-sizing: border-box;
  55. width: 2rem;
  56. height: 2rem;
  57. margin: 0 1.5rem;
  58. padding: 0;
  59. transition: all 0.1s;
  60. transform: translateY(-50%);
  61. border: 2px solid transparent;
  62. border-radius: 50%;
  63. background: none;
  64. }
  65. [dir="rtl"] .ui-dialog .ui-dialog-titlebar-close {
  66. right: auto;
  67. left: 0;
  68. }
  69. .ui-dialog .ui-dialog-titlebar-close:hover {
  70. border-color: #fff;
  71. }
  72. .ui-dialog .ui-dialog-titlebar-close:focus {
  73. border-color: #26a769;
  74. outline: 2px dotted transparent;
  75. box-shadow: none;
  76. }
  77. .ui-dialog .ui-icon.ui-icon-closethick {
  78. width: 100%;
  79. height: 100%;
  80. margin: 0;
  81. transform: translate(-50%, -50%);
  82. 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%;
  83. }
  84. .ui-dialog > .ui-dialog-content {
  85. overflow: auto;
  86. padding: 1rem 1.5rem;
  87. color: #232429;
  88. background: #fff;
  89. }
  90. .ui-dialog > .ui-dialog-buttonpane {
  91. color: #232429;
  92. border-bottom-right-radius: 4px;
  93. border-bottom-left-radius: 4px;
  94. background: #f3f4f9;
  95. }
  96. .ui-dialog-buttonpane .ui-dialog-buttonset {
  97. justify-content: flex-end;
  98. margin: 0 0.75rem;
  99. }
  100. .ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
  101. padding: 0;
  102. }
  103. .ui-dialog .ui-dialog-content {
  104. position: static;
  105. }
  106. /* Form action buttons are moved in dialogs. Remove empty space. */
  107. .ui-dialog .ui-dialog-content .form-actions {
  108. margin: 0;
  109. padding: 0;
  110. }
  111. /**
  112. * Off-canvas styles.
  113. */
  114. .ui-dialog.ui-dialog-off-canvas .ui-widget-content.ui-dialog-content {
  115. background: none;
  116. }
  117. @media screen and (-ms-high-contrast: active) {
  118. .ui-dialog .ui-icon.ui-icon-closethick {
  119. background: none;
  120. }
  121. .ui-dialog .ui-icon.ui-icon-closethick::before,
  122. .ui-dialog .ui-icon.ui-icon-closethick::after {
  123. position: relative;
  124. display: block;
  125. width: 50%;
  126. height: 100%;
  127. content: "";
  128. }
  129. .ui-dialog .ui-icon.ui-icon-closethick::before {
  130. top: -40%;
  131. left: 60%;
  132. transform: rotate(45deg);
  133. border-bottom: 2px white solid;
  134. }
  135. .ui-dialog .ui-icon.ui-icon-closethick::after {
  136. top: -78%;
  137. left: 60%;
  138. transform: rotate(-45deg);
  139. border-top: 2px white solid;
  140. }
  141. }
  142. #drupal-off-canvas .form-type--boolean {
  143. margin-left: 0;
  144. }
  145. #drupal-off-canvas .form-item .form-item__description {
  146. color: #f3f4f9;
  147. font-size: 0.75rem;
  148. }

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