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

Merge pull request #11849 from Budibase/fix/section 

Update section component grid column styles
This commit is contained in:
Martin McKeaveney 2023-09-25 13:58:58 +01:00 committed by GitHub
parent 7db7159b4c 69c688a03e
commit 2c50abcbf8
1 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/client/src/components/app/Section.svelte
View File

@ -47,28 +47,29 @@
<style> <style>
div { div {
display: grid; display: grid;
grid-gap: 16px; --gap: 16px;
grid-gap: var(--gap);
} }
.mainSidebar { .mainSidebar {
grid-template-columns: 3fr 1fr; grid-template-columns:
calc((100% - var(--gap)) / 4 * 3) /* 75% */
calc((100% - var(--gap)) / 4); /* 25% */
} }
.sidebarMain { .sidebarMain {
grid-template-columns: 1fr 3fr; grid-template-columns:
} calc((100% - var(--gap)) / 4) /* 25% */
.oneColumn { calc((100% - var(--gap)) / 4 * 3); /* 75% */
grid-template-columns: 1fr;
}
.twoColumns {
grid-template-columns: 1fr 1fr;
}
.threeColumns {
grid-template-columns: 1fr 1fr 1fr;
} }
.oneColumn,
.columns-1 { .columns-1 {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.twoColumns,
.columns-2 { .columns-2 {
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(2, calc((100% - var(--gap)) / 2));
}
.threeColumns {
grid-template-columns: repeat(3, calc((100% - var(--gap)) / 3));
} }
.placeholder { .placeholder {
border: 2px dashed var(--spectrum-global-color-gray-600); border: 2px dashed var(--spectrum-global-color-gray-600);