From 96c04f44c9e1bc23b0e8da25825ed1601bb8a05a Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 22 Dec 2021 20:05:50 +0200
Subject: [PATCH] Issue #3255180 by mherchel, Gauravmahlawat, andy-blum:
Olivero: Refactor Views Grid Style CSS to take advantage of not having to
support IE
---
.../layout/layout-views-grid-horizontal.css | 590 ------------------
.../layout-views-grid-horizontal.pcss.css | 277 --------
.../css/layout/layout-views-grid-vertical.css | 165 -----
.../layout-views-grid-vertical.pcss.css | 108 ----
.../olivero/css/layout/layout-views-grid.css | 60 ++
.../css/layout/layout-views-grid.pcss.css | 43 ++
core/themes/olivero/olivero.libraries.yml | 10 +-
.../templates/views/views-view-grid.html.twig | 15 +-
8 files changed, 109 insertions(+), 1159 deletions(-)
delete mode 100644 core/themes/olivero/css/layout/layout-views-grid-horizontal.css
delete mode 100644 core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
delete mode 100644 core/themes/olivero/css/layout/layout-views-grid-vertical.css
delete mode 100644 core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
create mode 100644 core/themes/olivero/css/layout/layout-views-grid.css
create mode 100644 core/themes/olivero/css/layout/layout-views-grid.pcss.css
diff --git a/core/themes/olivero/css/layout/layout-views-grid-horizontal.css b/core/themes/olivero/css/layout/layout-views-grid-horizontal.css
deleted file mode 100644
index b9ec62be7af5..000000000000
--- a/core/themes/olivero/css/layout/layout-views-grid-horizontal.css
+++ /dev/null
@@ -1,590 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Responsive styles for views grid horizontal layout.
- */
-
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-:root {
- --views-grid-layout-gap: var(--sp);
-}
-
-.views-view-grid--horizontal {
- display: flex;
- flex-wrap: wrap
-}
-
-[dir="ltr"] .views-view-grid--horizontal.cols-1 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-1 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-1 > * {
- flex-basis: 100%;
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-2 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-2 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-2 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-2 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-2 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-3 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-3 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-3 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-3 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-3 > * {
-
- /* 3 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-3 > * {
- flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-3 > *:nth-child(3n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-4 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-4 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-4 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-4 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-4 > * {
-
- /* 4 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-4 > * {
- flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-4 > *:nth-child(4n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-5 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 31.25rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-5 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-5 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-5 > * {
-
- /* 3 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-5 > * {
-
- /* 5 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-5 > * {
- flex-basis: calc(20% - var(--views-grid-layout-gap)*0.8)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(3n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-5 > *:nth-child(5n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-6 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 31.25rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-6 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-6 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-6 > * {
-
- /* 3 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-6 > * {
-
- /* 6 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-6 > * {
- flex-basis: calc(16.66667% - var(--views-grid-layout-gap)*0.83333)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(3n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-6 > *:nth-child(6n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-7 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 31.25rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-7 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-7 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-7 > * {
-
- /* 3 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(33.33333% - var(--views-grid-layout-gap)*0.66667)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-7 > * {
-
- /* 7 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-7 > * {
- flex-basis: calc(14.28571% - var(--views-grid-layout-gap)*0.85714)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(3n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-7 > *:nth-child(7n) {
- margin-left: 0;
- }
- }
-
-[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
- margin-right: 0;
-}
-
-[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
- margin-left: 0;
-}
-
-.views-view-grid--horizontal.cols-8 > * {
- flex-basis: 100%
-
- /* 2 column layout. */
- }
-
-@media (min-width: 31.25rem) {
-
-[dir="ltr"] .views-view-grid--horizontal.cols-8 > * {
- margin-right: var(--views-grid-layout-gap);
- }
-
-[dir="rtl"] .views-view-grid--horizontal.cols-8 > * {
- margin-left: var(--views-grid-layout-gap);
- }
-
-.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(50% - var(--views-grid-layout-gap)*0.5)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-8 > * {
-
- /* 4 column layout. */
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(25% - var(--views-grid-layout-gap)*0.75)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(2n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal.cols-8 > * {
-
- /* 8 column layout. */
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--horizontal.cols-8 > * {
- flex-basis: calc(12.5% - var(--views-grid-layout-gap)*0.875)
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-right: var(--views-grid-layout-gap);
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(4n) {
- margin-left: var(--views-grid-layout-gap);
- }
-
- [dir="ltr"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
- margin-right: 0;
- }
-
- [dir="rtl"] .views-view-grid--horizontal.cols-8 > *:nth-child(8n) {
- margin-left: 0;
- }
- }
-
-.views-view-grid--horizontal > * {
- flex-grow: 0;
- flex-shrink: 0;
- margin-bottom: var(--views-grid-layout-gap);
- }
diff --git a/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css b/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
deleted file mode 100644
index fa6104d2e038..000000000000
--- a/core/themes/olivero/css/layout/layout-views-grid-horizontal.pcss.css
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * @file
- * Responsive styles for views grid horizontal layout.
- */
-
-@import "../base/media-queries.pcss.css";
-
-:root {
- --views-grid-layout-gap: var(--sp);
-}
-
-.views-view-grid--horizontal {
- display: flex;
- flex-wrap: wrap;
-
- &.cols-1 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
- }
- }
-
- &.cols-2 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-3 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 3 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(3n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-4 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 4 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(4n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-5 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--sm) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 3 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(3n) {
- margin-inline-end: 0;
- }
- }
-
- /* 5 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 5 - (((5 - 1) / 5) * var(--views-grid-layout-gap)));
-
- &:nth-child(3n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(5n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-6 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--sm) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 3 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(3n) {
- margin-inline-end: 0;
- }
- }
-
- /* 6 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 6 - (((6 - 1) / 6) * var(--views-grid-layout-gap)));
-
- &:nth-child(3n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(6n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-7 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--sm) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 3 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 3 - (((3 - 1) / 3) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(3n) {
- margin-inline-end: 0;
- }
- }
-
- /* 7 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 7 - (((7 - 1) / 7) * var(--views-grid-layout-gap)));
-
- &:nth-child(3n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(7n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- &.cols-8 {
- & > * {
- flex-basis: 100%;
- margin-inline-end: 0;
-
- /* 2 column layout. */
- @media (--sm) {
- flex-basis: calc(100% / 2 - (((2 - 1) / 2) * var(--views-grid-layout-gap)));
- margin-inline-end: var(--views-grid-layout-gap);
-
- &:nth-child(2n) {
- margin-inline-end: 0;
- }
- }
-
- /* 4 column layout. */
- @media (--md) {
- flex-basis: calc(100% / 4 - (((4 - 1) / 4) * var(--views-grid-layout-gap)));
-
- &:nth-child(2n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(4n) {
- margin-inline-end: 0;
- }
- }
-
- /* 8 column layout. */
- @media (--lg) {
- flex-basis: calc(100% / 8 - (((8 - 1) / 8) * var(--views-grid-layout-gap)));
-
- &:nth-child(4n) {
- margin-inline-end: var(--views-grid-layout-gap);
- }
-
- &:nth-child(8n) {
- margin-inline-end: 0;
- }
- }
- }
- }
-
- & > * {
- flex-grow: 0;
- flex-shrink: 0;
- margin-block-end: var(--views-grid-layout-gap);
- }
-}
diff --git a/core/themes/olivero/css/layout/layout-views-grid-vertical.css b/core/themes/olivero/css/layout/layout-views-grid-vertical.css
deleted file mode 100644
index 1ab279c60b32..000000000000
--- a/core/themes/olivero/css/layout/layout-views-grid-vertical.css
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
-/**
- * @file
- * Responsive styles for views grid vertical layout.
- */
-
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-:root {
- --views-grid-layout-gap: var(--sp);
-}
-
-.views-view-grid--vertical {
- margin-bottom: calc(var(--views-grid-layout-gap)*-1); /* Offset the bottom row's padding. */
- grid-column-gap: var(--views-grid-layout-gap)
-}
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-2 {
- column-count: 2
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-3 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-3 {
- column-count: 3
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-4 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-4 {
- column-count: 3
- }
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--vertical.cols-4 {
- column-count: 4
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-5 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-5 {
- column-count: 3
- }
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--vertical.cols-5 {
- column-count: 5
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-6 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-6 {
- column-count: 3
- }
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--vertical.cols-6 {
- column-count: 6
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-7 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-7 {
- column-count: 3
- }
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--vertical.cols-7 {
- column-count: 7
- }
- }
-
-@media (min-width: 31.25rem) {
-
-.views-view-grid--vertical.cols-8 {
- column-count: 2
- }
- }
-
-@media (min-width: 43.75rem) {
-
-.views-view-grid--vertical.cols-8 {
- column-count: 4
- }
- }
-
-@media (min-width: 62.5rem) {
-
-.views-view-grid--vertical.cols-8 {
- column-count: 8
- }
- }
-
-.views-view-grid--vertical .views-view-grid__item > * {
- padding-bottom: var(--views-grid-layout-gap);
- page-break-inside: avoid;
- break-inside: avoid;
- }
diff --git a/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css b/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
deleted file mode 100644
index 3bbdbc071955..000000000000
--- a/core/themes/olivero/css/layout/layout-views-grid-vertical.pcss.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * @file
- * Responsive styles for views grid vertical layout.
- */
-
-@import "../base/media-queries.pcss.css";
-
-:root {
- --views-grid-layout-gap: var(--sp);
-}
-
-.views-view-grid--vertical {
- margin-block-end: calc(-1 * var(--views-grid-layout-gap)); /* Offset the bottom row's padding. */
- column-gap: var(--views-grid-layout-gap);
-
- &.cols-2 {
- @media (--sm) {
- column-count: 2;
- }
- }
-
- &.cols-3 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 3;
- }
- }
-
- &.cols-4 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 3;
- }
-
- @media (--lg) {
- column-count: 4;
- }
- }
-
- &.cols-5 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 3;
- }
-
- @media (--lg) {
- column-count: 5;
- }
- }
-
- &.cols-6 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 3;
- }
-
- @media (--lg) {
- column-count: 6;
- }
- }
-
- &.cols-7 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 3;
- }
-
- @media (--lg) {
- column-count: 7;
- }
- }
-
- &.cols-8 {
- @media (--sm) {
- column-count: 2;
- }
-
- @media (--md) {
- column-count: 4;
- }
-
- @media (--lg) {
- column-count: 8;
- }
- }
-
- & .views-view-grid__item {
- & > * {
- padding-block-end: var(--views-grid-layout-gap);
- break-inside: avoid;
- }
- }
-}
diff --git a/core/themes/olivero/css/layout/layout-views-grid.css b/core/themes/olivero/css/layout/layout-views-grid.css
new file mode 100644
index 000000000000..dedd5828dbbf
--- /dev/null
+++ b/core/themes/olivero/css/layout/layout-views-grid.css
@@ -0,0 +1,60 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+.views-view-grid {
+ --views-grid--layout-gap: var(--sp);
+ --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+ --views-grid-item--min-width: 6.25rem;
+}
+
+.views-view-grid--horizontal {
+ /**
+ * Calculated values.
+ */
+ --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+ --views-grid--total-gap-width: calc(var(--views-grid--gap-count)*var(--views-grid--layout-gap));
+ --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width))/var(--views-grid--column-count));
+
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+ grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+ margin-bottom: calc(var(--views-grid--layout-gap)*-1); /* Offset the bottom row's padding. */
+ column-width: var(--views-grid-item--min-width);
+ column-count: var(--views-grid--column-count);
+ grid-column-gap: var(--views-grid--layout-gap)
+}
+
+.views-view-grid--vertical .views-view-grid__item > * {
+ padding-bottom: var(--views-grid--layout-gap);
+ page-break-inside: avoid;
+ break-inside: avoid;
+ }
diff --git a/core/themes/olivero/css/layout/layout-views-grid.pcss.css b/core/themes/olivero/css/layout/layout-views-grid.pcss.css
new file mode 100644
index 000000000000..af26f8a0a621
--- /dev/null
+++ b/core/themes/olivero/css/layout/layout-views-grid.pcss.css
@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Responsive styles for views grid horizontal layout.
+ *
+ * This creates the correct count of columns and automatically resizes the
+ * grid-items to fit into it. The grid-items will flow onto the next row when
+ * they reach the --views-grid-item--min-width value.
+ */
+
+@import "../base/media-queries.pcss.css";
+
+.views-view-grid {
+ --views-grid--layout-gap: var(--sp);
+ --views-grid--column-count: 4; /* Will be overridden by an inline style. */
+ --views-grid-item--min-width: 100px;
+}
+
+.views-view-grid--horizontal {
+ /**
+ * Calculated values.
+ */
+ --views-grid--gap-count: calc(var(--views-grid--column-count) - 1);
+ --views-grid--total-gap-width: calc(var(--views-grid--gap-count) * var(--views-grid--layout-gap));
+ --views-grid-item--max-width: calc((100% - var(--views-grid--total-gap-width)) / var(--views-grid--column-count));
+
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(max(var(--views-grid-item--min-width), var(--views-grid-item--max-width)), 1fr));
+ grid-gap: var(--views-grid--layout-gap);
+}
+
+.views-view-grid--vertical {
+ margin-block-end: calc(-1 * var(--views-grid--layout-gap)); /* Offset the bottom row's padding. */
+ column-width: var(--views-grid-item--min-width);
+ column-count: var(--views-grid--column-count);
+ column-gap: var(--views-grid--layout-gap);
+
+ & .views-view-grid__item {
+ & > * {
+ padding-block-end: var(--views-grid--layout-gap);
+ break-inside: avoid;
+ }
+ }
+}
diff --git a/core/themes/olivero/olivero.libraries.yml b/core/themes/olivero/olivero.libraries.yml
index 217bb115321b..7fe56951ad6e 100644
--- a/core/themes/olivero/olivero.libraries.yml
+++ b/core/themes/olivero/olivero.libraries.yml
@@ -173,17 +173,11 @@ layout_discovery_section:
layout:
css/layout/layout-discovery-section-layout.css: {}
-layout-views-grid-horizontal:
+layout-views-grid:
version: VERSION
css:
layout:
- css/layout/layout-views-grid-horizontal.css: {}
-
-layout-views-grid-vertical:
- version: VERSION
- css:
- layout:
- css/layout/layout-views-grid-vertical.css: {}
+ css/layout/layout-views-grid.css: {}
local-actions:
version: VERSION
diff --git a/core/themes/olivero/templates/views/views-view-grid.html.twig b/core/themes/olivero/templates/views/views-view-grid.html.twig
index 57193e41c991..2d982871bcd8 100644
--- a/core/themes/olivero/templates/views/views-view-grid.html.twig
+++ b/core/themes/olivero/templates/views/views-view-grid.html.twig
@@ -24,31 +24,24 @@
* @see template_preprocess_views_view_grid()
*/
#}
-{% if options.alignment == 'vertical' %}
- {{ attach_library('olivero/layout-views-grid-vertical') }}
-{% else %}
- {{ attach_library('olivero/layout-views-grid-horizontal') }}
-{% endif %}
-
-{% set columns = options.columns <= 8 ? options.columns : 8 %}
+{{ attach_library('olivero/layout-views-grid') }}
{%
set classes = [
'views-view-grid',
'views-view-grid--' ~ options.alignment,
- 'cols-' ~ columns,
]
%}
{% if title %}
<h3>{{ title }}</h3>
{% endif %}
-<div{{ attributes.addClass(classes) }}>
+<div{{ attributes.addClass(classes).setAttribute('style', '--views-grid--column-count: ' ~ options.columns) }}>
{% for row in items %}
- {% for column in row.content %}
+ {% for item in row.content %}
<div class="views-view-grid__item">
<div class="views-view-grid__item-inner">
- {{- column.content -}}
+ {{- item.content -}}
</div>
</div>
{% endfor %}
--
GitLab