layout-builder-twocol-section.pcss.css

/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

@import "../base/media-queries.pcss.css";

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

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

    @media (--md) {
      flex-grow: 0;
      flex-shrink: 0;
      margin-block-end: 0;
    }
  }
}

@media (--md) {
  .layout--twocol-section--50-50 {
    & > .layout__region--first {
      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
      margin-inline-end: calc(var(--grid-gap) * 0.5);
    }

    & > .layout__region--second {
      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
      margin-inline-start: calc(var(--grid-gap) * 0.5);
    }
  }

  .layout--twocol-section--33-67 {
    & > .layout__region--first {
      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
      margin-inline-end: calc(var(--grid-gap) * 0.3333);
    }

    & > .layout__region--second {
      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
      margin-inline-start: calc(var(--grid-gap) * 0.6666);
    }
  }

  .layout--twocol-section--67-33 {
    & > .layout__region--first {
      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
      margin-inline-end: calc(var(--grid-gap) * 0.6666);
    }

    & > .layout__region--second {
      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
      margin-inline-start: calc(var(--grid-gap) * 0.3333);
    }
  }

  .layout--twocol-section--25-75 {
    & > .layout__region--first {
      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
      margin-inline-end: calc(var(--grid-gap) * 0.25);
    }

    & > .layout__region--second {
      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
      margin-inline-start: calc(var(--grid-gap) * 0.75);
    }
  }

  .layout--twocol-section--75-25 {
    & > .layout__region--first {
      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
      margin-inline-end: calc(var(--grid-gap) * 0.75);
    }

    & > .layout__region--second {
      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
      margin-inline-start: calc(var(--grid-gap) * 0.25);
    }
  }
}

File

View on git.drupalcode.org

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

View source 
  1. /*

  2.  * @file

  3.  * Provides the layout styles for two-column layout section.

  4.  */

  5. 

  6. @import "../base/media-queries.pcss.css";

  7. 

  8. .layout--twocol-section {

  9.   display: flex;

  10.   flex-wrap: wrap;

  11. 

  12.   & > .layout__region {

  13.     flex: 1 0 100%;

  14.     margin-block-end: var(--grid-gap);

  15. 

  16.     @media (--md) {

  17.       flex-grow: 0;

  18.       flex-shrink: 0;

  19.       margin-block-end: 0;

  20.     }

  21.   }

  22. }

  23. 

  24. @media (--md) {

  25.   .layout--twocol-section--50-50 {

  26.     & > .layout__region--first {

  27.       flex-basis: calc(50% - (var(--grid-gap) * 0.5));

  28.       margin-inline-end: calc(var(--grid-gap) * 0.5);

  29.     }

  30. 

  31.     & > .layout__region--second {

  32.       flex-basis: calc(50% - (var(--grid-gap) * 0.5));

  33.       margin-inline-start: calc(var(--grid-gap) * 0.5);

  34.     }

  35.   }

  36. 

  37.   .layout--twocol-section--33-67 {

  38.     & > .layout__region--first {

  39.       flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));

  40.       margin-inline-end: calc(var(--grid-gap) * 0.3333);

  41.     }

  42. 

  43.     & > .layout__region--second {

  44.       flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));

  45.       margin-inline-start: calc(var(--grid-gap) * 0.6666);

  46.     }

  47.   }

  48. 

  49.   .layout--twocol-section--67-33 {

  50.     & > .layout__region--first {

  51.       flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));

  52.       margin-inline-end: calc(var(--grid-gap) * 0.6666);

  53.     }

  54. 

  55.     & > .layout__region--second {

  56.       flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));

  57.       margin-inline-start: calc(var(--grid-gap) * 0.3333);

  58.     }

  59.   }

  60. 

  61.   .layout--twocol-section--25-75 {

  62.     & > .layout__region--first {

  63.       flex-basis: calc(25% - (var(--grid-gap) * 0.25));

  64.       margin-inline-end: calc(var(--grid-gap) * 0.25);

  65.     }

  66. 

  67.     & > .layout__region--second {

  68.       flex-basis: calc(75% - (var(--grid-gap) * 0.75));

  69.       margin-inline-start: calc(var(--grid-gap) * 0.75);

  70.     }

  71.   }

  72. 

  73.   .layout--twocol-section--75-25 {

  74.     & > .layout__region--first {

  75.       flex-basis: calc(75% - (var(--grid-gap) * 0.75));

  76.       margin-inline-end: calc(var(--grid-gap) * 0.75);

  77.     }

  78. 

  79.     & > .layout__region--second {

  80.       flex-basis: calc(25% - (var(--grid-gap) * 0.25));

  81.       margin-inline-start: calc(var(--grid-gap) * 0.25);

  82.     }

  83.   }

  84. }

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