You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.8 KiB
62 lines
1.8 KiB
/* |
|
* 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; |
|
}
|
|
|