oneplusfourgrid_section.css

Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
  2. 8.9.x core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
  3. 10 core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--oneplusfourgrid-section {
  display: flex;
  flex-wrap: wrap;
}

.layout--oneplusfourgrid-section > .layout__region {
  flex: 0 1 100%;
}

.layout--oneplusfourgrid-section > .layout__four-grid-group {
  display: flex;
  flex-direction: column;
  gap: 0.96rem;
}

/* Large */
@media screen and (min-width: 60rem) {
  /* 960px */
  .layout--oneplusfourgrid-section {
    margin-right: -1.5%;
    margin-left: -1.5%;
  }
  .layout--oneplusfourgrid-section > .layout__region--first {
    flex: 0 1 47%;
    margin-right: 1.5%;
    margin-left: 1.5%;
  }
  .layout--oneplusfourgrid-section > .layout__four-grid-group {
    flex: 0 1 50%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }
  .layout__four-grid-group > .layout__region--second,
  .layout__four-grid-group > .layout__region--third,
  .layout__four-grid-group > .layout__region--fourth,
  .layout__four-grid-group > .layout__region--fifth {
    flex: 0 1 44%;
    margin-right: 3%;
    margin-left: 3%;
  }
}

File

core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css

View source
  1. /*
  2. * @file
  3. * Provides the layout styles for two-column layout section.
  4. */
  5. .layout--oneplusfourgrid-section {
  6. display: flex;
  7. flex-wrap: wrap;
  8. }
  9. .layout--oneplusfourgrid-section > .layout__region {
  10. flex: 0 1 100%;
  11. }
  12. .layout--oneplusfourgrid-section > .layout__four-grid-group {
  13. display: flex;
  14. flex-direction: column;
  15. gap: 0.96rem;
  16. }
  17. /* Large */
  18. @media screen and (min-width: 60rem) {
  19. /* 960px */
  20. .layout--oneplusfourgrid-section {
  21. margin-right: -1.5%;
  22. margin-left: -1.5%;
  23. }
  24. .layout--oneplusfourgrid-section > .layout__region--first {
  25. flex: 0 1 47%;
  26. margin-right: 1.5%;
  27. margin-left: 1.5%;
  28. }
  29. .layout--oneplusfourgrid-section > .layout__four-grid-group {
  30. flex: 0 1 50%;
  31. flex-direction: row;
  32. flex-wrap: wrap;
  33. gap: 0;
  34. }
  35. .layout__four-grid-group > .layout__region--second,
  36. .layout__four-grid-group > .layout__region--third,
  37. .layout__four-grid-group > .layout__region--fourth,
  38. .layout__four-grid-group > .layout__region--fifth {
  39. flex: 0 1 44%;
  40. margin-right: 3%;
  41. margin-left: 3%;
  42. }
  43. }

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