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

Use single CSS variable for grid spacing to reduce duplication

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

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

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