CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-20 11:27:56 +12:00
Code Issues Projects Releases Wiki Activity

Use single CSS variable for grid spacing to reduce duplication

Browse source
This commit is contained in:
Andrew Kingston 2024-08-09 08:48:32 +01:00
parent cdc2092264
commit 8a022bb21e
No known key found for this signature in database
2 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/app/Layout.svelte
View file

@ -352,6 +352,9 @@
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
/* Deliberately unitless as we need to do unitless calculations in grids */
--grid-spacing: 4;
} }
.component { .component {
display: contents; display: contents;
@ -407,7 +410,7 @@
gap: var(--spacing-xl); gap: var(--spacing-xl);
} }
.nav.size--max { .nav.size--max {
padding: 10px; padding: calc(var(--grid-spacing) * 2px);
} }
.nav :global(.spectrum-Icon) { .nav :global(.spectrum-Icon) {
color: var(--navTextColor); color: var(--navTextColor);
@ -483,7 +486,7 @@
padding: 32px; padding: 32px;
} }
.main:not(.size--max):has(.screenslot-dom > .component > .grid) { .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
padding: 22px; padding: calc(32px - var(--grid-spacing) * 2px);
} }
.layout--none .main { .layout--none .main {

11
packages/client/src/components/app/container/GridContainer.svelte
View file

@ -53,7 +53,6 @@
.grid { .grid {
position: relative; position: relative;
height: 400px; height: 400px;
--spacing: 8;
/* /*
Prevent cross-grid variable inheritance. The other variables for alignment Prevent cross-grid variable inheritance. The other variables for alignment
@ -113,8 +112,8 @@
overflow: auto; overflow: auto;
pointer-events: all; pointer-events: all;
position: relative; position: relative;
padding: 4px; padding: calc(var(--grid-spacing) * 1px);
margin: 4px; margin: calc(var(--grid-spacing) * 1px);
/* On desktop, use desktop metadata and fall back to mobile */ /* On desktop, use desktop metadata and fall back to mobile */
/* Position vars */ /* Position vars */
@ -126,7 +125,8 @@
round( round(
up, up,
calc( calc(
(var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1 (var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) +
1
) )
) )
) )
@ -139,7 +139,8 @@
round( round(
up, up,
calc( calc(
(var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1 (var(--grid-spacing) * 2 + var(--default-height)) / var(--row-size) +
1
) )
) )
) )