blob: df2ca74ab959e7d34b57a204974bc3e7e28fa262 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<script lang="ts" generics="T">
import { getGridVars } from '@amp/web-app-components/src/components/Shelf/utils/getGridVars';
import type { GridType } from '@amp/web-app-components/src/components/Shelf/types';
export let items: T[] = [];
export let gridType: GridType;
$: style = getGridVars(gridType);
</script>
<ul {style} class="grid" data-test-id="grid">
{#each items as item}
<li>
<slot {item} />
</li>
{/each}
</ul>
<style lang="scss">
@mixin grid-styles-for-viewport($viewport: null) {
grid-template-columns: repeat(var(--grid-#{$viewport}), 1fr);
column-gap: var(--grid-column-gap-#{$viewport});
row-gap: var(--grid-row-gap-#{$viewport});
}
.grid {
display: grid;
width: 100%;
padding: 0 var(--bodyGutter);
@each $viewport in ('xsmall', 'small', 'medium', 'large', 'xlarge') {
@media (--range-#{$viewport}-only) {
@include grid-styles-for-viewport($viewport);
}
}
}
</style>
|
