You are here

layout-sidebar.css in Drupal 10

Same filename and directory in other branches
  1. 9 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. /*
  12. * Media query breakpoints.
  13. * Processed by postcss/postcss-custom-media.
  14. */
  15. /* Navigation related breakpoints */
  16. /* Grid related breakpoints */
  17. /* Grid shifts from 6 to 14 columns. */
  18. /* Width of the entire grid maxes out. */
  19. .sidebar-grid > .site-main {
  20. grid-column: 1 / 7;
  21. align-self: flex-start;
  22. -ms-grid-row-align: start
  23. }
  24. @media (min-width: 43.75rem) {
  25. .sidebar-grid > .site-main {
  26. grid-column: 1 / 15
  27. }
  28. }
  29. @media (min-width: 62.5rem) {
  30. .sidebar-grid > .site-main {
  31. display: grid;
  32. grid-template-columns: repeat(8, minmax(0, 1fr));
  33. grid-column: 3 / 11
  34. }
  35. .sidebar-grid > .site-main > .region--content-above,
  36. .sidebar-grid > .site-main > .region--content {
  37. grid-template-columns: repeat(8, minmax(0, 1fr));
  38. grid-column: 1 / 9;
  39. }
  40. .sidebar-grid > .site-main .layout--content-narrow,
  41. .sidebar-grid > .site-main .layout--pass--content-narrow > *,
  42. .sidebar-grid > .site-main .layout--content-medium,
  43. .sidebar-grid > .site-main .layout--pass--content-medium > * {
  44. grid-column: 1 / 9;
  45. }
  46. }
  47. .sidebar-grid .region--sidebar {
  48. -ms-grid-row: 2;
  49. grid-column: 1 / 7
  50. }
  51. @media (min-width: 43.75rem) {
  52. .sidebar-grid .region--sidebar {
  53. grid-column: 3 / 13
  54. }
  55. }
  56. @media (min-width: 62.5rem) {
  57. .sidebar-grid .region--sidebar {
  58. -ms-grid-row: 1;
  59. grid-column: 12 / 15
  60. }
  61. }