details.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/classy/components/details.css
  2. 10 core/themes/olivero/css/components/details.css
  3. 10 core/themes/claro/css/components/details.css
  4. 10 core/themes/starterkit_theme/css/components/details.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/classy/components/details.css
  2. 9 core/themes/olivero/css/components/details.css
  3. 9 core/themes/seven/css/components/details.css
  4. 9 core/themes/claro/css/components/details.css
  5. 9 core/themes/bartik/css/classy/components/details.css
  6. 9 core/themes/starterkit_theme/css/components/details.css
  7. 9 core/themes/classy/css/components/details.css
  8. 8.9.x core/profiles/demo_umami/themes/umami/css/classy/components/details.css
  9. 8.9.x core/themes/seven/css/components/details.css
  10. 8.9.x core/themes/claro/css/components/details.css
  11. 8.9.x core/themes/bartik/css/classy/components/details.css
  12. 8.9.x core/themes/classy/css/components/details.css
  13. 11.x core/profiles/demo_umami/themes/umami/css/classy/components/details.css
  14. 11.x core/misc/dialog/off-canvas/css/details.css
  15. 11.x core/themes/olivero/css/components/details.css
  16. 11.x core/themes/claro/css/components/details.css
  17. 11.x core/themes/starterkit_theme/css/components/details.css

Visual styling for summary and details in the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/details.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. * Visual styling for summary and details in the off-canvas dialog.
  10. *
  11. * @internal
  12. */
  13. #drupal-off-canvas-wrapper {
  14. --off-canvas-details-border-width: 0;
  15. --off-canvas-details-border-color: none;
  16. --off-canvas-details-background-color: #474747;
  17. --off-canvas-details-text-color: #ddd;
  18. --off-canvas-details-summary-border: none;
  19. --off-canvas-details-summary-padding: 0.625rem 1.25rem;
  20. --off-canvas-details-summary-font-size: 0.875rem;
  21. --off-canvas-details-summary-background-color: #333;
  22. --off-canvas-details-summary-background-color-hover: #222;
  23. --off-canvas-details-summary-text-color: #eee;
  24. --off-canvas-details-summary-text-color-hover: #fff;
  25. }
  26. #drupal-off-canvas-wrapper details {
  27. margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
  28. padding: 0 var(--off-canvas-padding);
  29. color: var(--off-canvas-details-text-color);
  30. border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
  31. background: var(--off-canvas-details-background-color);
  32. }
  33. :is(#drupal-off-canvas-wrapper details) + details {
  34. margin-top: calc(-1 * var(--off-canvas-details-border-width));
  35. }
  36. #drupal-off-canvas-wrapper summary {
  37. margin: 0 calc(-1 * var(--off-canvas-padding));
  38. padding: var(--off-canvas-details-summary-padding);
  39. color: var(--off-canvas-details-summary-text-color);
  40. border: var(--off-canvas-details-summary-border);
  41. background-color: var(--off-canvas-details-summary-background-color);
  42. font-size: var(--off-canvas-details-summary-font-size);
  43. }
  44. #drupal-off-canvas-wrapper summary:hover {
  45. color: var(--off-canvas-details-summary-text-color-hover);
  46. background-color: var(--off-canvas-details-summary-background-color-hover);
  47. }
  48. #drupal-off-canvas-wrapper summary:focus {
  49. outline-offset: -4px; /* Ensure focus doesn't get cut off. */
  50. }
  51. #drupal-off-canvas-wrapper summary a {
  52. color: var(--off-canvas-details-text-color);
  53. }
  54. #drupal-off-canvas-wrapper summary a:hover {
  55. color: var(--off-canvas-details-summary-text-color-hover);
  56. }
  57. #drupal-off-canvas-wrapper .details-wrapper {
  58. padding: var(--off-canvas-vertical-spacing-unit) 0;
  59. }

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