70 lines
1.4 KiB
Text
70 lines
1.4 KiB
Text
---
|
|
interface Props {
|
|
content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
|
|
gap?: number
|
|
}
|
|
|
|
const { content, gap } = Astro.props
|
|
---
|
|
|
|
{
|
|
gap ? (
|
|
<section class={`dasig-row-${content || 'center'}`} style={`gap: ${gap}rem`}>
|
|
<slot />
|
|
</section>
|
|
) : (
|
|
<section class={`dasig-row-${content || 'center'}`}>
|
|
<slot />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
<style lang="sass">
|
|
.dasig-row-left
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: flex-start
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-row-center
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-row-right
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: flex-end
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-row-split
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: space-between
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-row-spaced
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: space-around
|
|
align-items: center
|
|
align-content: center
|
|
|
|
.dasig-row-even
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: space-evenly
|
|
align-items: center
|
|
align-content: center
|
|
</style>
|