Skip to content
Snippets Groups Projects
Verified Commit 0ba8488d 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)
parent 9c0bd377
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 301 deletions
core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+ 7
− 49
View file @ 0ba8488d
......@@ -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
View file @ 0ba8488d
......@@ -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;
}
}
/* 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);
}
display: grid;
gap: var(--grid-gap);
grid-template-columns: var(--layout-fourcol-grid);
}
& > .layout__region--second,
& > .layout__region--fourth {
margin-inline-start: calc(var(--grid-gap) * 0.5);
}
/* Two column layout. */
@media (--md) {
.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);
}
/* Four column layout. */
@media (--lg) {
.layout--fourcol-section {
--layout-fourcol-grid: repeat(4, minmax(0, 1fr));
}
}
core/themes/olivero/css/layout/layout-builder-threecol-section.css
+ 22
− 44
View file @ 0ba8488d
......@@ -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);
.layout--threecol-section > .layout__region--first {
grid-column: var(--layout-threecol-grid__first);
}
@media (min-width: 62.5rem) {
.layout--threecol-section > .layout__region {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
}
.layout--threecol-section > .layout__region--second {
grid-column: var(--layout-threecol-grid__second);
}
@media (min-width: 62.5rem) {
.layout--threecol-section > .layout__region--first {
margin-inline-end: calc(var(--grid-gap) * 0.5);
}
.layout--threecol-section > .layout__region--second {
margin-inline: calc(var(--grid-gap) * 0.5);
}
.layout--threecol-section > .layout__region--third {
grid-column: var(--layout-threecol-grid__third);
}
.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));
@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-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));
.layout--threecol-section--25-25-50 {
--layout-threecol-grid: repeat(4, minmax(0, 1fr));
--layout-threecol-grid__third: 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--50-25-25 {
--layout-threecol-grid: repeat(4, minmax(0, 1fr));
--layout-threecol-grid__first: 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--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
View file @ 0ba8488d
......@@ -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;
}
& > .layout__region--first {
grid-column: var(--layout-threecol-grid__first);
}
}
@media (--lg) {
.layout--threecol-section {
& > .layout__region--first {
margin-inline-end: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second {
margin-inline: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--second {
grid-column: var(--layout-threecol-grid__second);
}
& > .layout__region--third {
margin-inline-start: calc(var(--grid-gap) * 0.5);
}
& > .layout__region--third {
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
View file @ 0ba8488d
......@@ -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;
}
}
core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
+ 17
− 55
View file @ 0ba8488d
......@@ -6,79 +6,41 @@
@import "../base/media-queries.pcss.css";
.layout--twocol-section {
display: flex;
flex-wrap: wrap;
display: grid;
gap: var(--grid-gap);
grid-template-columns: var(--layout-twocol-grid);
& > .layout__region {
flex: 1 0 100%;
margin-block-end: var(--grid-gap);
& > .layout__region--first {
grid-column: var(--layout-twocol-grid__first);
}
@media (--md) {
flex-grow: 0;
flex-shrink: 0;
margin-block-end: 0;
}
& > .layout__region--second {
grid-column: var(--layout-twocol-grid__second);
}
}
@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-grid: repeat(2, minmax(0, 1fr));
}
.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-grid: repeat(3, minmax(0, 1fr));
--layout-twocol-grid__second: span 2;
}
.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-grid: repeat(3, minmax(0, 1fr));
--layout-twocol-grid__first: span 2;
}
.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-grid: repeat(4, minmax(0, 1fr));
--layout-twocol-grid__second: span 3;
}
.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);
}
--layout-twocol-grid: repeat(4, minmax(0, 1fr));
--layout-twocol-grid__first: span 3;
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment