layout.css

Same filename in this branch
  1. 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  2. 10 core/themes/claro/css/layout/layout.css
  3. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
Same filename in other branches
  1. 7.x themes/stark/layout.css
  2. 7.x themes/bartik/css/layout.css
  3. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  4. 9 core/themes/olivero/css/layout/layout.css
  5. 9 core/themes/seven/css/layout/layout.css
  6. 9 core/themes/claro/css/layout/layout.css
  7. 9 core/themes/bartik/css/layout.css
  8. 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  9. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  10. 8.9.x core/themes/seven/css/layout/layout.css
  11. 8.9.x core/themes/claro/css/layout/layout.css
  12. 8.9.x core/themes/stark/css/layout.css
  13. 8.9.x core/themes/bartik/css/layout.css
  14. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  15. 11.x core/themes/olivero/css/layout/layout.css
  16. 11.x core/themes/claro/css/layout/layout.css
  17. 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css

Base Layout.

File

core/themes/olivero/css/layout/layout.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. * Base Layout.
  10. */
  11. .container {
  12. width: 100%;
  13. max-width: var(--max-width);
  14. padding-inline: var(--container-padding);
  15. /* This fixes an issue where if the toolbar is open in vertical mode, and
  16. * the mobile navigation is open, the "close" button gets pushed outside of
  17. * the viewport. */
  18. }
  19. body.is-fixed .container {
  20. width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
  21. }
  22. .page-wrapper {
  23. max-width: var(--max-bg-color);
  24. background: var(--color--white);
  25. }
  26. /**
  27. * Creates stacking context ensuring that child elements can never appear in
  28. * front of mobile navigation.
  29. */
  30. .layout-main-wrapper {
  31. position: relative;
  32. z-index: 2; /* Ensure dropdown is not cut off by footer. */
  33. }
  34. /* Contains the social sidebar, and the primary content area. */
  35. @media (min-width: 75rem) {
  36. .layout-main {
  37. display: flex;
  38. flex-direction: row-reverse;
  39. flex-wrap: wrap;
  40. }
  41. }
  42. @media (min-width: 75rem) {
  43. .main-content {
  44. width: calc(100% - var(--content-left));
  45. margin-inline-end: auto;
  46. }
  47. }
  48. .main-content__container {
  49. padding-block-start: var(--sp3);
  50. }
  51. @media (min-width: 43.75rem) {
  52. .main-content__container {
  53. padding-block-start: var(--sp5);
  54. }
  55. }
  56. /*
  57. * Contextual link wrappers load without the ".contextual" CSS class, which
  58. * causes layout shifts. We fix this by setting this to position: absolute;
  59. */
  60. [data-contextual-id]:not(.contextual) {
  61. position: absolute;
  62. }

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