layout.css
Same filename in this branch
Same filename in other branches
- 7.x themes/stark/layout.css
- 7.x themes/bartik/css/layout.css
- 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 9 core/themes/olivero/css/layout/layout.css
- 9 core/themes/seven/css/layout/layout.css
- 9 core/themes/claro/css/layout/layout.css
- 9 core/themes/bartik/css/layout.css
- 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
- 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 8.9.x core/themes/seven/css/layout/layout.css
- 8.9.x core/themes/claro/css/layout/layout.css
- 8.9.x core/themes/stark/css/layout.css
- 8.9.x core/themes/bartik/css/layout.css
- 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 11.x core/themes/olivero/css/layout/layout.css
- 11.x core/themes/claro/css/layout/layout.css
- 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
Base Layout.
File
-
core/
themes/ olivero/ css/ layout/ layout.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Base Layout.
- */
-
- .container {
- width: 100%;
- max-width: var(--max-width);
- padding-inline: var(--container-padding);
-
- /* This fixes an issue where if the toolbar is open in vertical mode, and
- * the mobile navigation is open, the "close" button gets pushed outside of
- * the viewport. */
- }
-
- body.is-fixed .container {
- width: calc(100% - var(--drupal-displace-offset-left, 0px) - var(--drupal-displace-offset-right, 0px));
- }
-
- .page-wrapper {
- max-width: var(--max-bg-color);
- background: var(--color--white);
- }
-
- /**
- * Creates stacking context ensuring that child elements can never appear in
- * front of mobile navigation.
- */
-
- .layout-main-wrapper {
- position: relative;
- z-index: 2; /* Ensure dropdown is not cut off by footer. */
- }
-
- /* Contains the social sidebar, and the primary content area. */
-
- @media (min-width: 75rem) {
- .layout-main {
- display: flex;
- flex-direction: row-reverse;
- flex-wrap: wrap;
- }
- }
-
- @media (min-width: 75rem) {
- .main-content {
- width: calc(100% - var(--content-left));
- margin-inline-end: auto;
- }
- }
-
- .main-content__container {
- padding-block-start: var(--sp3);
- }
-
- @media (min-width: 43.75rem) {
- .main-content__container {
- padding-block-start: var(--sp5);
- }
- }
-
- /*
- * Contextual link wrappers load without the ".contextual" CSS class, which
- * causes layout shifts. We fix this by setting this to position: absolute;
- */
-
- [data-contextual-id]:not(.contextual) {
- position: absolute;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.