@@ -70,6 +74,12 @@
background 130ms ease-out;
color: var(--spectrum-global-color-gray-800);
}
+ .lighter {
+ background: var(--spectrum-global-color-gray-100) !important;
+ }
+ .compress {
+ margin-bottom: -1px;
+ }
.fancy-field:hover {
border-color: var(--spectrum-global-color-gray-400);
}
@@ -92,7 +102,7 @@
.content {
position: relative;
height: var(--fancy-field-height);
- padding: 0 16px;
+ padding: 0 var(--fancy-field-padding);
}
.fancy-field.auto-height .content {
height: auto;
@@ -103,7 +113,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
- gap: 16px;
+ gap: var(--fancy-field-padding);
}
.field {
flex: 1 1 auto;
diff --git a/packages/bbui/src/FancyForm/FancyForm.svelte b/packages/bbui/src/FancyForm/FancyForm.svelte
index 0572bbd403..28bfbb4930 100644
--- a/packages/bbui/src/FancyForm/FancyForm.svelte
+++ b/packages/bbui/src/FancyForm/FancyForm.svelte
@@ -29,7 +29,8 @@
const styles = () => {
let styleString = ""
styleString += `--fancy-field-max-width: ${noMaxWidth ? "auto" : "400px"}`
- styleString += `; --fancy-field-height: ${compact ? "40px" : "64px"}`
+ styleString += `; --fancy-field-height: ${compact ? "36px" : "64px"}`
+ styleString += `; --fancy-field-padding: ${compact ? "8px" : "16px"}`
return styleString
}
diff --git a/packages/bbui/src/FancyForm/index.js b/packages/bbui/src/FancyForm/index.js
index e105991c0f..33591a532c 100644
--- a/packages/bbui/src/FancyForm/index.js
+++ b/packages/bbui/src/FancyForm/index.js
@@ -4,4 +4,5 @@ export { default as FancySelect } from "./FancySelect.svelte"
export { default as FancyButton } from "./FancyButton.svelte"
export { default as FancyForm } from "./FancyForm.svelte"
export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
+export { default as FancyCheckboxGroup } from "./FancyCheckboxGroup.svelte"
export { default as ErrorMessage } from "./ErrorMessage.svelte"
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index 103667848c..481dd29856 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -5,8 +5,7 @@
notifications,
Body,
Layout,
- FancyForm,
- FancyCheckbox,
+ FancyCheckboxGroup,
} from "@budibase/bbui"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import { IntegrationNames } from "constants/backend"
@@ -111,13 +110,7 @@
/>
{:else}
-
-
-
-
-
-
-
+
{/if}