layout.css

Same filename in this branch
  1. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  2. 9 core/themes/seven/css/layout/layout.css
  3. 9 core/themes/claro/css/layout/layout.css
  4. 9 core/themes/bartik/css/layout.css
  5. 9 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. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  4. 8.9.x core/themes/seven/css/layout/layout.css
  5. 8.9.x core/themes/claro/css/layout/layout.css
  6. 8.9.x core/themes/stark/css/layout.css
  7. 8.9.x core/themes/bartik/css/layout.css
  8. 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  9. 10 core/themes/olivero/css/layout/layout.css
  10. 10 core/themes/claro/css/layout/layout.css
  11. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  12. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  13. 11.x core/themes/olivero/css/layout/layout.css
  14. 11.x core/themes/claro/css/layout/layout.css
  15. 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: 84.375rem;
  14. padding-right: 1.125rem;
  15. padding-left: 1.125rem;
  16. }
  17. @media (min-width: 75rem) {
  18. .container {
  19. padding-right: 2.25rem;
  20. padding-left: 2.25rem;
  21. }
  22. }
  23. .page-wrapper {
  24. max-width: 98.125rem;
  25. background: #fff;
  26. }
  27. /**
  28. * Creates stacking context ensuring that child elements can never appear in
  29. * front of mobile navigation.
  30. */
  31. .layout-main-wrapper {
  32. position: relative;
  33. z-index: 2; /* Ensure dropdown is not cut off by footer. */
  34. }
  35. /* Contains the social sidebar, and the primary content area. */
  36. @media (min-width: 75rem) {
  37. .layout-main {
  38. display: flex;
  39. flex-direction: row-reverse;
  40. flex-wrap: wrap;
  41. }
  42. }
  43. @media (min-width: 75rem) {
  44. [dir="ltr"] .main-content {
  45. margin-right: auto;
  46. }
  47. [dir="rtl"] .main-content {
  48. margin-left: auto;
  49. }
  50. .main-content {
  51. width: calc(100% - 5.625rem);
  52. }
  53. }
  54. .main-content__container {
  55. padding-top: 3.375rem;
  56. }
  57. @media (min-width: 43.75rem) {
  58. .main-content__container {
  59. padding-top: 5.625rem;
  60. }
  61. }

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