Initial Drupal 11 with DDEV setup
This commit is contained in:
36
web/core/modules/views/css/views-responsive-grid.css
Normal file
36
web/core/modules/views/css/views-responsive-grid.css
Normal file
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* CSS for Views responsive grid style.
|
||||
*/
|
||||
|
||||
.views-view-responsive-grid {
|
||||
--views-responsive-grid--layout-gap: 10px; /* Will be overridden by an inline style. */
|
||||
--views-responsive-grid--column-count: 4; /* Will be overridden by an inline style. */
|
||||
--views-responsive-grid--cell-min-width: 100px; /* Will be overridden by an inline style. */
|
||||
}
|
||||
|
||||
.views-view-responsive-grid--horizontal {
|
||||
/**
|
||||
* Calculated values.
|
||||
*/
|
||||
--views-responsive-grid--gap-count: calc(var(--views-responsive-grid--column-count) - 1);
|
||||
--views-responsive-grid--total-gap-width: calc(var(--views-responsive-grid--gap-count) * var(--views-responsive-grid--layout-gap));
|
||||
--views-responsive-grid-item--max-width: calc((100% - var(--views-responsive-grid--total-gap-width)) / var(--views-responsive-grid--column-count));
|
||||
--views-responsive-grid-item--calculated-min-width: min(100%, var(--views-responsive-grid--cell-min-width)); /* Ensure that cell minimum width does not overflow container. */
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(max(var(--views-responsive-grid-item--calculated-min-width), var(--views-responsive-grid-item--max-width)), 1fr));
|
||||
gap: var(--views-responsive-grid--layout-gap);
|
||||
}
|
||||
|
||||
.views-view-responsive-grid--vertical {
|
||||
margin-bottom: calc(var(--views-responsive-grid--layout-gap) * -1); /* Offset the bottom row's padding. */
|
||||
column-width: var(--views-responsive-grid--cell-min-width);
|
||||
column-count: var(--views-responsive-grid--column-count);
|
||||
column-gap: var(--views-responsive-grid--layout-gap);
|
||||
}
|
||||
|
||||
.views-view-responsive-grid--vertical .views-view-responsive-grid__item > * {
|
||||
padding-bottom: var(--views-responsive-grid--layout-gap);
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
Reference in New Issue
Block a user