layout-builder-fourcol-section.pcss.css

Same filename in other branches
  1. 10 core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
  2. 11.x core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
/*
 * @file
 * Provides the layout styles for four-column layout section.
 */

@import "../base/variables.pcss.css";

.layout--fourcol-section {
  display: flex;
  flex-wrap: wrap;

  & > .layout__region {
    flex: 1 0 100%;
    margin-block-end: var(--grid-gap);

    @media (--md) {
      flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
      flex-grow: 0;
      flex-shrink: 0;
      margin-block-end: 0;
    }
  }

  /* Two column layout. */
  @media (--md) {
    & > .layout__region--first,
    & > .layout__region--second {
      margin-block-end: var(--grid-gap--md);
    }

    & > .layout__region--first,
    & > .layout__region--third {
      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
    }

    & > .layout__region--second,
    & > .layout__region--fourth {
      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
    }
  }

  /* Four column layout. */
  @media (--lg) {
    & > .layout__region {
      flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
    }

    & > .layout__region--first,
    & > .layout__region--second {
      margin-block-end: 0;
    }

    & > .layout__region--first {
      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
    }

    & > .layout__region--second,
    & > .layout__region--third {
      margin-inline: calc(var(--grid-gap--md) * 0.5);
    }

    & > .layout__region--fourth {
      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
    }
  }
}

File

core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css

View source
  1. /*
  2. * @file
  3. * Provides the layout styles for four-column layout section.
  4. */
  5. @import "../base/variables.pcss.css";
  6. .layout--fourcol-section {
  7. display: flex;
  8. flex-wrap: wrap;
  9. & > .layout__region {
  10. flex: 1 0 100%;
  11. margin-block-end: var(--grid-gap);
  12. @media (--md) {
  13. flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
  14. flex-grow: 0;
  15. flex-shrink: 0;
  16. margin-block-end: 0;
  17. }
  18. }
  19. /* Two column layout. */
  20. @media (--md) {
  21. & > .layout__region--first,
  22. & > .layout__region--second {
  23. margin-block-end: var(--grid-gap--md);
  24. }
  25. & > .layout__region--first,
  26. & > .layout__region--third {
  27. margin-inline-end: calc(var(--grid-gap--md) * 0.5);
  28. }
  29. & > .layout__region--second,
  30. & > .layout__region--fourth {
  31. margin-inline-start: calc(var(--grid-gap--md) * 0.5);
  32. }
  33. }
  34. /* Four column layout. */
  35. @media (--lg) {
  36. & > .layout__region {
  37. flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
  38. }
  39. & > .layout__region--first,
  40. & > .layout__region--second {
  41. margin-block-end: 0;
  42. }
  43. & > .layout__region--first {
  44. margin-inline-end: calc(var(--grid-gap--md) * 0.5);
  45. }
  46. & > .layout__region--second,
  47. & > .layout__region--third {
  48. margin-inline: calc(var(--grid-gap--md) * 0.5);
  49. }
  50. & > .layout__region--fourth {
  51. margin-inline-start: calc(var(--grid-gap--md) * 0.5);
  52. }
  53. }
  54. }

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