layout-sidebar.css

Same filename in other branches
  1. 9 core/themes/olivero/css/layout/layout-sidebar.css
  2. 10 core/themes/olivero/css/layout/layout-sidebar.css

Special grid system for sidebar.

File

core/themes/olivero/css/layout/layout-sidebar.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. * Special grid system for sidebar.
  10. */
  11. .sidebar-grid > .site-main {
  12. grid-column: 1 / 7;
  13. align-self: flex-start;
  14. }
  15. @media (min-width: 43.75rem) {
  16. .sidebar-grid > .site-main {
  17. grid-column: 1 / 15;
  18. }
  19. }
  20. @media (min-width: 62.5rem) {
  21. .sidebar-grid > .site-main {
  22. display: grid;
  23. grid-template-columns: repeat(8, minmax(0, 1fr));
  24. grid-column: 3 / 11;
  25. }
  26. .sidebar-grid > .site-main > .region--content-above,
  27. .sidebar-grid > .site-main > .region--content {
  28. grid-template-columns: repeat(8, minmax(0, 1fr));
  29. grid-column: 1 / 9;
  30. }
  31. .sidebar-grid > .site-main .layout--content-narrow,
  32. .sidebar-grid > .site-main .layout--pass--content-narrow > *,
  33. .sidebar-grid > .site-main .layout--content-medium,
  34. .sidebar-grid > .site-main .layout--pass--content-medium > * {
  35. grid-column: 1 / 9;
  36. }
  37. }
  38. .sidebar-grid .region--sidebar {
  39. grid-column: 1 / 7;
  40. }
  41. @media (min-width: 43.75rem) {
  42. .sidebar-grid .region--sidebar {
  43. grid-column: 3 / 13;
  44. }
  45. }
  46. @media (min-width: 62.5rem) {
  47. .sidebar-grid .region--sidebar {
  48. grid-column: 12 / 15;
  49. }
  50. }

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