base.pcss.css

Same filename in this branch
  1. 11.x core/themes/olivero/css/base/base.pcss.css
Same filename in other branches
  1. 9 core/themes/olivero/css/base/base.pcss.css
  2. 10 core/misc/dialog/off-canvas/css/base.pcss.css
  3. 10 core/themes/olivero/css/base/base.pcss.css

Set base styles for the off-canvas dialog.

@internal

File

core/misc/dialog/off-canvas/css/base.pcss.css

View source
  1. /**
  2. * @file
  3. * Set base styles for the off-canvas dialog.
  4. *
  5. * @internal
  6. */
  7. #drupal-off-canvas-wrapper {
  8. --off-canvas-background-color-light: #666;
  9. --off-canvas-background-color-medium: #444;
  10. --off-canvas-background-color-dark: #333;
  11. --off-canvas-background-color: var(--off-canvas-background-color-medium);
  12. --off-canvas-padding: 20px;
  13. --off-canvas-text-color: #e5e5e5;
  14. --off-canvas-link-color: #85bef4;
  15. --off-canvas-border-color: #666;
  16. --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
  17. --off-canvas-vertical-spacing-unit: 8px;
  18. --off-canvas-focus-outline-width: 2px;
  19. --off-canvas-focus-outline-color: #fff;
  20. padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
  21. color: var(--off-canvas-text-color);
  22. background-color: var(--off-canvas-background-color);
  23. font-family: var(--off-canvas-font-family);
  24. & *:focus {
  25. outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
  26. outline-offset: 2px;
  27. }
  28. & a,
  29. & .link {
  30. text-decoration: none;
  31. color: var(--off-canvas-link-color);
  32. }
  33. & hr {
  34. height: 1px;
  35. background: var(--off-canvas-border-color);
  36. }
  37. & h1,
  38. & .heading-a {
  39. font-size: 23px;
  40. line-height: 1.2;
  41. }
  42. & h2,
  43. & .heading-b {
  44. margin: var(--off-canvas-vertical-spacing-unit) 0;
  45. font-size: 19px;
  46. }
  47. & h3,
  48. & .heading-c {
  49. margin: var(--off-canvas-vertical-spacing-unit) 0;
  50. font-size: 17px;
  51. }
  52. & h4,
  53. & .heading-d {
  54. margin: var(--off-canvas-vertical-spacing-unit) 0;
  55. font-size: 16px;
  56. }
  57. & h5,
  58. & .heading-e,
  59. & h6,
  60. & .heading-f {
  61. margin: var(--off-canvas-vertical-spacing-unit) 0;
  62. font-size: 15px;
  63. }
  64. & p {
  65. margin: var(--off-canvas-vertical-spacing-unit) 0;
  66. }
  67. & img {
  68. max-width: 100%;
  69. height: auto;
  70. }
  71. & .links {
  72. margin: 0;
  73. padding: 0;
  74. list-style: none;
  75. & li {
  76. margin: calc(var(--off-canvas-vertical-spacing-unit) / 2) 0;
  77. }
  78. }
  79. }

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