2021-04-28 01:06:08 +12:00
|
|
|
<script>
|
|
|
|
|
export let horizontal = false
|
|
|
|
|
export let paddingX = "M"
|
|
|
|
|
export let paddingY = "M"
|
|
|
|
|
export let noPadding = false
|
|
|
|
|
export let gap = "M"
|
|
|
|
|
export let noGap = false
|
2021-05-08 00:29:05 +12:00
|
|
|
export let alignContent = "normal"
|
2021-05-18 04:42:12 +12:00
|
|
|
export let justifyItems = "stretch"
|
2021-04-28 01:06:08 +12:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<div
|
2021-05-18 04:42:12 +12:00
|
|
|
style="align-content:{alignContent};justify-items:{justifyItems};"
|
2021-04-28 01:06:08 +12:00
|
|
|
class:horizontal
|
|
|
|
|
class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
|
|
|
|
|
paddingY} gap-{!noGap && gap}"
|
|
|
|
|
>
|
|
|
|
|
<slot />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.container {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 1fr;
|
2021-05-19 21:36:39 +12:00
|
|
|
position: relative;
|
2021-04-28 01:06:08 +12:00
|
|
|
}
|
|
|
|
|
.paddingX-S {
|
|
|
|
|
padding-left: var(--spacing-s);
|
|
|
|
|
padding-right: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
.paddingX-M {
|
|
|
|
|
padding-left: var(--spacing-m);
|
|
|
|
|
padding-right: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
.paddingX-L {
|
|
|
|
|
padding-left: var(--spacing-l);
|
|
|
|
|
padding-right: var(--spacing-l);
|
|
|
|
|
}
|
|
|
|
|
.paddingY-S {
|
|
|
|
|
padding-top: var(--spacing-s);
|
|
|
|
|
padding-bottom: var(--spacing-s);
|
|
|
|
|
}
|
|
|
|
|
.paddingY-M {
|
|
|
|
|
padding-top: var(--spacing-m);
|
|
|
|
|
padding-bottom: var(--spacing-m);
|
|
|
|
|
}
|
|
|
|
|
.paddingY-L {
|
|
|
|
|
padding-top: var(--spacing-l);
|
|
|
|
|
padding-bottom: var(--spacing-l);
|
|
|
|
|
}
|
2021-05-07 00:58:07 +12:00
|
|
|
.gap-XS {
|
|
|
|
|
grid-gap: var(--spacing-s);
|
|
|
|
|
}
|
2021-04-28 01:06:08 +12:00
|
|
|
.gap-S {
|
|
|
|
|
grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
|
|
|
|
|
}
|
|
|
|
|
.gap-M {
|
|
|
|
|
grid-gap: var(--spectrum-alias-grid-gutter-small);
|
|
|
|
|
}
|
|
|
|
|
.gap-L {
|
|
|
|
|
grid-gap: var(--spectrum-alias-grid-gutter-medium);
|
|
|
|
|
}
|
|
|
|
|
.horizontal.gap-S :global(*) + :global(*) {
|
|
|
|
|
margin-left: var(--spectrum-alias-grid-gutter-xsmall);
|
|
|
|
|
}
|
|
|
|
|
.horizontal.gap-M :global(*) + :global(*) {
|
|
|
|
|
margin-left: var(--spectrum-alias-grid-gutter-small);
|
|
|
|
|
}
|
|
|
|
|
.horizontal.gap-L :global(*) + :global(*) {
|
|
|
|
|
margin-left: var(--spectrum-alias-grid-gutter-medium);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
