layout-sidebar.css

Same filename in other branches
  1. 10 core/themes/olivero/css/layout/layout-sidebar.css
  2. 11.x 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. -ms-grid-column: 1;
  13. -ms-grid-column-span: 6;
  14. grid-column: 1 / 7;
  15. align-self: flex-start;
  16. -ms-grid-row-align: start;
  17. }
  18. @media (min-width: 43.75rem) {
  19. .sidebar-grid > .site-main {
  20. -ms-grid-column: 1;
  21. -ms-grid-column-span: 14;
  22. grid-column: 1 / 15;
  23. }
  24. }
  25. @media (min-width: 62.5rem) {
  26. .sidebar-grid > .site-main {
  27. display: -ms-grid;
  28. display: grid;
  29. -ms-grid-columns: (minmax(0, 1fr))[8];
  30. grid-template-columns: repeat(8, minmax(0, 1fr));
  31. -ms-grid-column: 3;
  32. -ms-grid-column-span: 8;
  33. grid-column: 3 / 11;
  34. }
  35. .sidebar-grid > .site-main > .region--content-above,
  36. .sidebar-grid > .site-main > .region--content {
  37. -ms-grid-columns: (minmax(0, 1fr))[8];
  38. grid-template-columns: repeat(8, minmax(0, 1fr));
  39. -ms-grid-column: 1;
  40. -ms-grid-column-span: 8;
  41. grid-column: 1 / 9;
  42. }
  43. .sidebar-grid > .site-main .layout--content-narrow,
  44. .sidebar-grid > .site-main .layout--pass--content-narrow > *,
  45. .sidebar-grid > .site-main .layout--content-medium,
  46. .sidebar-grid > .site-main .layout--pass--content-medium > * {
  47. -ms-grid-column: 1;
  48. -ms-grid-column-span: 8;
  49. grid-column: 1 / 9;
  50. }
  51. }
  52. .sidebar-grid .region--sidebar {
  53. -ms-grid-row: 2;
  54. -ms-grid-column: 1;
  55. -ms-grid-column-span: 6;
  56. grid-column: 1 / 7;
  57. }
  58. @media (min-width: 43.75rem) {
  59. .sidebar-grid .region--sidebar {
  60. -ms-grid-column: 3;
  61. -ms-grid-column-span: 10;
  62. grid-column: 3 / 13;
  63. }
  64. }
  65. @media (min-width: 62.5rem) {
  66. .sidebar-grid .region--sidebar {
  67. -ms-grid-row: 1;
  68. -ms-grid-column: 12;
  69. -ms-grid-column-span: 3;
  70. grid-column: 12 / 15;
  71. }
  72. }

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