|
|
|
|
/*
|
|
|
|
|
* 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: -ms-grid;
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
