MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds basic layout component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 15:06:08 +02:00
parent 9bda97b300
commit 3102b6de2c
2 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
packages/bbui/src/Layout/Layout.svelte Normal file
View File

@ -0,0 +1,65 @@
<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
</script>
<div
class:horizontal
class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
paddingY} gap-{!noGap && gap}"
>
<slot />
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
}
.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);
}
.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>

1
packages/bbui/src/index.js
View File

@ -27,6 +27,7 @@ export { default as Popover } from "./Popover/Popover.svelte"
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
export { default as Label } from "./Styleguide/Label.svelte"
export { default as Layout } from "./Layout/Layout.svelte"
export { default as Link } from "./Link/Link.svelte"
export { default as Close } from "./Button/Close.svelte"
export { default as Menu } from "./Menu/Menu.svelte"