Verified Commit 416ef9d7 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3262156 by finnsky, kostyashupenko, ranjith_kumar_k_u, gauravvvv,... 

Issue #3262156 by finnsky, kostyashupenko, ranjith_kumar_k_u, gauravvvv, nayana_mvr, pradipmodh13, libbna: Olivero: Simplification of the grid layouts to use CSS grid (instead of Flexbox)

(cherry picked from commit 0ba8488d)
parent 9dd57075

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

+7 −49
Original line number Diff line number Diff line
@@ -11,65 +11,23 @@ 
 */



.layout--fourcol-section {

  display: flex;

  flex-wrap: wrap;

}



.layout--fourcol-section > .layout__region {

  flex: 1 0 100%;

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

}



@media (min-width: 43.75rem) {

  .layout--fourcol-section > .layout__region {

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

    flex-grow: 0;

    flex-shrink: 0;

    margin-block-end: 0;

  }

  display: grid;

  gap: var(--grid-gap);

  grid-template-columns: var(--layout-fourcol-grid);

}



/* Two column layout. */



@media (min-width: 43.75rem) {

  .layout--fourcol-section > .layout__region--first,

  .layout--fourcol-section > .layout__region--second {

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

  }



  .layout--fourcol-section > .layout__region--first,

  .layout--fourcol-section > .layout__region--third {

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

  }



  .layout--fourcol-section > .layout__region--second,

  .layout--fourcol-section > .layout__region--fourth {

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

  .layout--fourcol-section {

    --layout-fourcol-grid: repeat(2, minmax(0, 1fr));

  }

}



/* Four column layout. */



@media (min-width: 62.5rem) {

  .layout--fourcol-section > .layout__region {

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

  }



  .layout--fourcol-section > .layout__region--first,

  .layout--fourcol-section > .layout__region--second {

    margin-block-end: 0;

  }



  .layout--fourcol-section > .layout__region--first {

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

  }



  .layout--fourcol-section > .layout__region--second,

  .layout--fourcol-section > .layout__region--third {

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

  }



  .layout--fourcol-section > .layout__region--fourth {

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

  .layout--fourcol-section {

    --layout-fourcol-grid: repeat(4, minmax(0, 1fr));

  }

}

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

+13 −53
Original line number Diff line number Diff line
@@ -6,61 +6,21 @@ 
@import "../base/media-queries.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) * 0.5));

      flex-grow: 0;

      flex-shrink: 0;

      margin-block-end: 0;

    }

  display: grid;

  gap: var(--grid-gap);

  grid-template-columns: var(--layout-fourcol-grid);

}



/* Two column layout. */

@media (--md) {

    & > .layout__region--first,

    & > .layout__region--second {

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

    }



    & > .layout__region--first,

    & > .layout__region--third {

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

    }



    & > .layout__region--second,

    & > .layout__region--fourth {

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

  .layout--fourcol-section {

    --layout-fourcol-grid: repeat(2, minmax(0, 1fr));

  }

}



/* Four column layout. */

@media (--lg) {

    & > .layout__region {

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

    }



    & > .layout__region--first,

    & > .layout__region--second {

      margin-block-end: 0;

    }



    & > .layout__region--first {

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

    }



    & > .layout__region--second,

    & > .layout__region--third {

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

    }



    & > .layout__region--fourth {

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

    }

  .layout--fourcol-section {

    --layout-fourcol-grid: repeat(4, minmax(0, 1fr));

  }

}

core/themes/olivero/css/layout/layout-builder-threecol-section.css

+22 −44
Original line number Diff line number Diff line
@@ -11,62 +11,40 @@ 
 */



.layout--threecol-section {

  display: flex;

  flex-wrap: wrap;

  display: grid;

  gap: var(--grid-gap);

  grid-template-columns: var(--layout-threecol-grid);

}



.layout--threecol-section > .layout__region {

  flex: 1 0 100%;

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

}



@media (min-width: 62.5rem) {

  .layout--threecol-section > .layout__region {

    flex-grow: 0;

    flex-shrink: 0;

    margin-block-end: 0;

  }

}



@media (min-width: 62.5rem) {

.layout--threecol-section > .layout__region--first {

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

  grid-column: var(--layout-threecol-grid__first);

}



.layout--threecol-section > .layout__region--second {

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

  grid-column: var(--layout-threecol-grid__second);

}



.layout--threecol-section > .layout__region--third {

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

  }

  .layout--threecol-section--25-50-25 > .layout__region--first,

  .layout--threecol-section--25-50-25 > .layout__region--third {

    flex-basis: calc(25% - (var(--grid-gap) * 0.5));

  grid-column: var(--layout-threecol-grid__third);

}



  .layout--threecol-section--25-50-25 > .layout__region--second {

    flex-basis: calc(50% - var(--grid-gap));

  }

  .layout--threecol-section--25-25-50 > .layout__region--first,

  .layout--threecol-section--25-25-50 > .layout__region--second {

    flex-basis: calc(25% - (var(--grid-gap) * 0.5));

@media (min-width: 62.5rem) {

  .layout--threecol-section--25-50-25 {

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__second: span 2;

  }



  .layout--threecol-section--25-25-50 > .layout__region--third {

    flex-basis: calc(50% - var(--grid-gap));

  }

  .layout--threecol-section--50-25-25 > .layout__region--first {

    flex-basis: calc(50% - var(--grid-gap));

  .layout--threecol-section--25-25-50 {

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__third: span 2;

  }



  .layout--threecol-section--50-25-25 > .layout__region--second,

  .layout--threecol-section--50-25-25 > .layout__region--third {

    flex-basis: calc(25% - (var(--grid-gap) * 0.5));

  .layout--threecol-section--50-25-25 {

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__first: span 2;

  }

  .layout--threecol-section--33-34-33 > .layout__region--first,

  .layout--threecol-section--33-34-33 > .layout__region--second,

  .layout--threecol-section--33-34-33 > .layout__region--third {

    flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));



  .layout--threecol-section--33-34-33 {

    --layout-threecol-grid: repeat(3, minmax(0, 1fr));

  }

}

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

+19 −53
Original line number Diff line number Diff line
@@ -6,74 +6,40 @@ 
@import "../base/media-queries.pcss.css";



.layout--threecol-section {

  display: flex;

  flex-wrap: wrap;

  display: grid;

  gap: var(--grid-gap);

  grid-template-columns: var(--layout-threecol-grid);



  & > .layout__region {

    flex: 1 0 100%;

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



    @media (--lg) {

      flex-grow: 0;

      flex-shrink: 0;

      margin-block-end: 0;

    }

  }

}



@media (--lg) {

  .layout--threecol-section {

  & > .layout__region--first {

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

    grid-column: var(--layout-threecol-grid__first);

  }



  & > .layout__region--second {

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

    grid-column: var(--layout-threecol-grid__second);

  }



  & > .layout__region--third {

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

    grid-column: var(--layout-threecol-grid__third);

  }

}



@media (--lg) {

  .layout--threecol-section--25-50-25 {

    & > .layout__region--first,

    & > .layout__region--third {

      flex-basis: calc(25% - (var(--grid-gap) * 0.5));

    }



    & > .layout__region--second {

      flex-basis: calc(50% - var(--grid-gap));

    }

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__second: span 2;

  }



  .layout--threecol-section--25-25-50 {

    & > .layout__region--first,

    & > .layout__region--second {

      flex-basis: calc(25% - (var(--grid-gap) * 0.5));

    }



    & > .layout__region--third {

      flex-basis: calc(50% - var(--grid-gap));

    }

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__third: span 2;

  }



  .layout--threecol-section--50-25-25 {

    & > .layout__region--first {

      flex-basis: calc(50% - var(--grid-gap));

    }



    & > .layout__region--second,

    & > .layout__region--third {

      flex-basis: calc(25% - (var(--grid-gap) * 0.5));

    }

    --layout-threecol-grid: repeat(4, minmax(0, 1fr));

    --layout-threecol-grid__first: span 2;

  }



  .layout--threecol-section--33-34-33 {

    & > .layout__region--first,

    & > .layout__region--second,

    & > .layout__region--third {

      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));

    }

    --layout-threecol-grid: repeat(3, minmax(0, 1fr));

  }

}

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

+21 −47
Original line number Diff line number Diff line
@@ -11,67 +11,41 @@ 
 */



.layout--twocol-section {

  display: flex;

  flex-wrap: wrap;

  display: grid;

  gap: var(--grid-gap);

  grid-template-columns: var(--layout-twocol-grid);

}



.layout--twocol-section > .layout__region {

  flex: 1 0 100%;

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

.layout--twocol-section > .layout__region--first {

  grid-column: var(--layout-twocol-grid__first);

}



@media (min-width: 43.75rem) {

  .layout--twocol-section > .layout__region {

    flex-grow: 0;

    flex-shrink: 0;

    margin-block-end: 0;

  }

.layout--twocol-section > .layout__region--second {

  grid-column: var(--layout-twocol-grid__second);

}



@media (min-width: 43.75rem) {

  .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--twocol-section--50-50 > .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--twocol-section--50-50 {

    --layout-twocol-grid: repeat(2, minmax(0, 1fr));

  }



  .layout--twocol-section--33-67 > .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--twocol-section--33-67 {

    --layout-twocol-grid: repeat(3, minmax(0, 1fr));

    --layout-twocol-grid__second: span 2;

  }



  .layout--twocol-section--67-33 > .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--twocol-section--67-33 {

    --layout-twocol-grid: repeat(3, minmax(0, 1fr));

    --layout-twocol-grid__first: span 2;

  }



  .layout--twocol-section--25-75 > .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--twocol-section--25-75 {

    --layout-twocol-grid: repeat(4, minmax(0, 1fr));

    --layout-twocol-grid__second: span 3;

  }



  .layout--twocol-section--75-25 > .layout__region--second {

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

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

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

    --layout-twocol-grid: repeat(4, minmax(0, 1fr));

    --layout-twocol-grid__first: span 3;

  }

}