Revert skeleton loaders and restore required setting functionality (#9979)
This commit is contained in:
Andrew Kingston
GitHub
parent
05ba08a956
commit
1b2b4dba88
|
|
@ -1,56 +0,0 @@
|
|||
<div class="skeleton">
|
||||
<div class="children">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.skeleton {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
background-color: var(--spectrum-global-color-gray-200) !important;
|
||||
border-radius: 7px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
animation: fadeIn 130ms ease 0s 1 normal forwards;
|
||||
}
|
||||
|
||||
.children {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0,
|
||||
rgba(255, 255, 255, 0.15) 20%,
|
||||
rgba(255, 255, 255, 0.3) 60%,
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
animation: shimmer 2s infinite;
|
||||
content: "";
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,6 @@ import "./bbui.css"
|
|||
import "@spectrum-css/icon/dist/index-vars.css"
|
||||
|
||||
// Components
|
||||
export { default as Skeleton } from "./Skeleton/Skeleton.svelte"
|
||||
export { default as Input } from "./Form/Input.svelte"
|
||||
export { default as Stepper } from "./Form/Stepper.svelte"
|
||||
export { default as TextArea } from "./Form/TextArea.svelte"
|
||||
|
|
|
|||
|
|
@ -2346,7 +2346,6 @@
|
|||
]
|
||||
},
|
||||
"stringfield": {
|
||||
"skeleton": false,
|
||||
"name": "Text Field",
|
||||
"icon": "Text",
|
||||
"styles": ["size"],
|
||||
|
|
@ -2436,7 +2435,6 @@
|
|||
]
|
||||
},
|
||||
"numberfield": {
|
||||
"skeleton": false,
|
||||
"name": "Number Field",
|
||||
"icon": "123",
|
||||
"styles": ["size"],
|
||||
|
|
@ -2492,7 +2490,6 @@
|
|||
]
|
||||
},
|
||||
"passwordfield": {
|
||||
"skeleton": false,
|
||||
"name": "Password Field",
|
||||
"icon": "LockClosed",
|
||||
"styles": ["size"],
|
||||
|
|
@ -2548,7 +2545,6 @@
|
|||
]
|
||||
},
|
||||
"optionsfield": {
|
||||
"skeleton": false,
|
||||
"name": "Options Picker",
|
||||
"icon": "Menu",
|
||||
"styles": ["size"],
|
||||
|
|
@ -2715,7 +2711,6 @@
|
|||
]
|
||||
},
|
||||
"multifieldselect": {
|
||||
"skeleton": false,
|
||||
"name": "Multi-select Picker",
|
||||
"icon": "ViewList",
|
||||
"styles": ["size"],
|
||||
|
|
@ -2876,7 +2871,6 @@
|
|||
]
|
||||
},
|
||||
"booleanfield": {
|
||||
"skeleton": false,
|
||||
"name": "Checkbox",
|
||||
"icon": "SelectBox",
|
||||
"editable": true,
|
||||
|
|
@ -2955,7 +2949,6 @@
|
|||
]
|
||||
},
|
||||
"longformfield": {
|
||||
"skeleton": false,
|
||||
"name": "Long Form Field",
|
||||
"icon": "TextAlignLeft",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3033,7 +3026,6 @@
|
|||
]
|
||||
},
|
||||
"datetimefield": {
|
||||
"skeleton": false,
|
||||
"name": "Date Picker",
|
||||
"icon": "Date",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3113,7 +3105,6 @@
|
|||
]
|
||||
},
|
||||
"codescanner": {
|
||||
"skeleton": false,
|
||||
"name": "Barcode/QR Scanner",
|
||||
"icon": "Camera",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3275,7 +3266,6 @@
|
|||
]
|
||||
},
|
||||
"attachmentfield": {
|
||||
"skeleton": false,
|
||||
"name": "Attachment",
|
||||
"icon": "Attach",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3338,7 +3328,6 @@
|
|||
]
|
||||
},
|
||||
"relationshipfield": {
|
||||
"skeleton": false,
|
||||
"name": "Relationship Picker",
|
||||
"icon": "TaskList",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3400,7 +3389,6 @@
|
|||
]
|
||||
},
|
||||
"jsonfield": {
|
||||
"skeleton": false,
|
||||
"name": "JSON Field",
|
||||
"icon": "Brackets",
|
||||
"styles": ["size"],
|
||||
|
|
@ -3591,7 +3579,6 @@
|
|||
}
|
||||
},
|
||||
"table": {
|
||||
"skeleton": false,
|
||||
"name": "Table",
|
||||
"icon": "Table",
|
||||
"illegalChildren": ["section"],
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
// to render this part of the block, taking advantage of binding enrichment
|
||||
$: id = `${block.id}-${context ?? rand}`
|
||||
$: instance = {
|
||||
_blockElementHasChildren: $$slots?.default ?? false,
|
||||
_component: `@budibase/standard-components/${type}`,
|
||||
_id: id,
|
||||
_instanceName: name || type[0].toUpperCase() + type.slice(1),
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
import Placeholder from "components/app/Placeholder.svelte"
|
||||
import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
|
||||
import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
|
||||
import Skeleton from "components/app/Skeleton.svelte"
|
||||
|
||||
export let instance = {}
|
||||
export let isLayout = false
|
||||
|
|
@ -39,7 +38,6 @@
|
|||
|
||||
// Get parent contexts
|
||||
const context = getContext("context")
|
||||
const loading = getContext("loading")
|
||||
const insideScreenslot = !!getContext("screenslot")
|
||||
|
||||
// Create component context
|
||||
|
|
@ -172,15 +170,6 @@
|
|||
$: pad = pad || (interactive && hasChildren && inDndPath)
|
||||
$: $dndIsDragging, (pad = false)
|
||||
|
||||
// Determine whether we should render a skeleton loader for this component
|
||||
$: showSkeleton =
|
||||
$loading &&
|
||||
definition?.name !== "Screenslot" &&
|
||||
children.length === 0 &&
|
||||
!instance._blockElementHasChildren &&
|
||||
!definition?.block &&
|
||||
definition?.skeleton !== false
|
||||
|
||||
// Update component context
|
||||
$: store.set({
|
||||
id,
|
||||
|
|
@ -507,12 +496,7 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
{#if showSkeleton}
|
||||
<Skeleton
|
||||
height={initialSettings?.height || definition?.size?.height || 0}
|
||||
width={initialSettings?.width || definition?.size?.width || 0}
|
||||
/>
|
||||
{:else if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
|
||||
{#if constructor && initialSettings && (visible || inSelectedPath) && !builderHidden}
|
||||
<!-- The ID is used as a class because getElementsByClassName is O(1) -->
|
||||
<!-- and the performance matters for the selection indicators -->
|
||||
<div
|
||||
|
|
@ -530,10 +514,11 @@
|
|||
data-icon={icon}
|
||||
data-parent={parent}
|
||||
>
|
||||
<svelte:component this={constructor} bind:this={ref} {...initialSettings}>
|
||||
{#if hasMissingRequiredSettings}
|
||||
<ComponentPlaceholder />
|
||||
{:else if children.length}
|
||||
{:else}
|
||||
<svelte:component this={constructor} bind:this={ref} {...initialSettings}>
|
||||
{#if children.length}
|
||||
{#each children as child (child._id)}
|
||||
<svelte:self instance={child} parent={id} />
|
||||
{/each}
|
||||
|
|
@ -547,6 +532,7 @@
|
|||
<slot />
|
||||
{/if}
|
||||
</svelte:component>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import { writable } from "svelte/store"
|
||||
import { setContext, getContext, onMount } from "svelte"
|
||||
import Router, { querystring } from "svelte-spa-router"
|
||||
import { routeStore, stateStore } from "stores"
|
||||
|
|
@ -10,9 +9,6 @@
|
|||
const component = getContext("component")
|
||||
setContext("screenslot", true)
|
||||
|
||||
const loading = writable(false)
|
||||
setContext("loading", loading)
|
||||
|
||||
// Only wrap this as an array to take advantage of svelte keying,
|
||||
// to ensure the svelte-spa-router is fully remounted when route config
|
||||
// changes
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
import { builderStore } from "stores"
|
||||
|
||||
const component = getContext("component")
|
||||
const { styleable } = getContext("sdk")
|
||||
|
||||
$: requiredSetting = $component.missingRequiredSettings?.[0]
|
||||
</script>
|
||||
|
||||
{#if $builderStore.inBuilder && requiredSetting}
|
||||
<div class="component-placeholder">
|
||||
<div class="component-placeholder" use:styleable={$component.styles}>
|
||||
<span>
|
||||
Add the <mark>{requiredSetting.label}</mark> setting to start using your component
|
||||
-
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
}
|
||||
.component-placeholder mark {
|
||||
background-color: var(--spectrum-global-color-gray-400);
|
||||
padding: 0 2px;
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.component-placeholder .spectrum-Link {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { writable } from "svelte/store"
|
||||
import { setContext, getContext } from "svelte"
|
||||
import { Pagination } from "@budibase/bbui"
|
||||
import { getContext } from "svelte"
|
||||
import { Pagination, ProgressCircle } from "@budibase/bbui"
|
||||
import { fetchData, LuceneUtils } from "@budibase/frontend-core"
|
||||
|
||||
export let dataSource
|
||||
|
|
@ -14,11 +13,6 @@
|
|||
const { styleable, Provider, ActionTypes, API } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
// Update loading state
|
||||
const parentLoading = getContext("loading")
|
||||
const loading = writable(true)
|
||||
setContext("loading", loading)
|
||||
|
||||
// We need to manage our lucene query manually as we want to allow components
|
||||
// to extend it
|
||||
let queryExtensions = {}
|
||||
|
|
@ -26,8 +20,8 @@
|
|||
$: query = extendQuery(defaultQuery, queryExtensions)
|
||||
|
||||
// Fetch data and refresh when needed
|
||||
$: fetch = createFetch(dataSource, $parentLoading)
|
||||
$: updateFetch({
|
||||
$: fetch = createFetch(dataSource)
|
||||
$: fetch.update({
|
||||
query,
|
||||
sortColumn,
|
||||
sortOrder,
|
||||
|
|
@ -35,9 +29,6 @@
|
|||
paginate,
|
||||
})
|
||||
|
||||
// Keep loading context updated
|
||||
$: loading.set($parentLoading || !$fetch.loaded)
|
||||
|
||||
// Build our action context
|
||||
$: actions = [
|
||||
{
|
||||
|
|
@ -89,18 +80,7 @@
|
|||
limit,
|
||||
}
|
||||
|
||||
const createFetch = (datasource, parentLoading) => {
|
||||
// Return a dummy fetch if parent is still loading. We do this so that we
|
||||
// can still properly subscribe to a valid fetch object and check all
|
||||
// properties, but we want to avoid fetching the real data until all parents
|
||||
// have finished loading.
|
||||
// This logic is only needed due to skeleton loaders, as previously we
|
||||
// simply blocked component rendering until data was ready.
|
||||
if (parentLoading) {
|
||||
return fetchData({ API })
|
||||
}
|
||||
|
||||
// Otherwise return the real thing
|
||||
const createFetch = datasource => {
|
||||
return fetchData({
|
||||
API,
|
||||
datasource,
|
||||
|
|
@ -114,14 +94,6 @@
|
|||
})
|
||||
}
|
||||
|
||||
const updateFetch = opts => {
|
||||
// Only update fetch if parents have stopped loading. Otherwise we will
|
||||
// trigger a fetch of the real data before parents are ready.
|
||||
if (!$parentLoading) {
|
||||
fetch.update(opts)
|
||||
}
|
||||
}
|
||||
|
||||
const addQueryExtension = (key, extension) => {
|
||||
if (!key || !extension) {
|
||||
return
|
||||
|
|
@ -155,6 +127,11 @@
|
|||
|
||||
<div use:styleable={$component.styles} class="container">
|
||||
<Provider {actions} data={dataContext}>
|
||||
{#if !$fetch.loaded}
|
||||
<div class="loading">
|
||||
<ProgressCircle />
|
||||
</div>
|
||||
{:else}
|
||||
<slot />
|
||||
{#if paginate && $fetch.supportsPagination}
|
||||
<div class="pagination">
|
||||
|
|
@ -167,6 +144,7 @@
|
|||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</Provider>
|
||||
</div>
|
||||
|
||||
|
|
@ -177,6 +155,13 @@
|
|||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
}
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -12,25 +12,22 @@
|
|||
|
||||
const { Provider } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
const loading = getContext("loading")
|
||||
|
||||
// If the parent DataProvider is loading, fill the rows array with a number of empty objects corresponding to the DataProvider's page size; this allows skeleton loader components to be rendered further down the tree.
|
||||
$: rows = $loading
|
||||
? new Array(dataProvider.limit > 20 ? 20 : dataProvider.limit).fill({})
|
||||
: dataProvider?.rows
|
||||
$: rows = dataProvider?.rows ?? []
|
||||
$: loaded = dataProvider?.loaded ?? true
|
||||
</script>
|
||||
|
||||
<Container {direction} {hAlign} {vAlign} {gap} wrap>
|
||||
{#if $component.empty}
|
||||
<Placeholder />
|
||||
{:else if !$loading && rows.length === 0}
|
||||
<div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
|
||||
{:else}
|
||||
{:else if rows.length > 0}
|
||||
{#each rows as row, index}
|
||||
<Provider data={{ ...row, index }}>
|
||||
<slot />
|
||||
</Provider>
|
||||
{/each}
|
||||
{:else if loaded && noRowsMessage}
|
||||
<div class="noRows"><i class="ri-list-check-2" />{noRowsMessage}</div>
|
||||
{/if}
|
||||
</Container>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import { Skeleton } from "@budibase/bbui"
|
||||
|
||||
const { styleable } = getContext("sdk")
|
||||
const component = getContext("component")
|
||||
|
||||
export let height
|
||||
export let width
|
||||
|
||||
let styles
|
||||
|
||||
$: {
|
||||
styles = JSON.parse(JSON.stringify($component.styles))
|
||||
|
||||
if (!styles.normal.height && height) {
|
||||
// The height and width props provided to this component can either be numbers or strings set by users (ex. '100%', '100px', '100'). A string of '100' wouldn't be a valid CSS property, but some of our components respect that input, so we need to handle it here also, hence the `!isNaN` check.
|
||||
styles.normal.height = !isNaN(height) ? `${height}px` : height
|
||||
}
|
||||
|
||||
if (!styles.normal.width && width) {
|
||||
styles.normal.width = !isNaN(width) ? `${width}px` : width
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div use:styleable={styles}>
|
||||
<Skeleton>
|
||||
<slot />
|
||||
</Skeleton>
|
||||
</div>
|
||||
|
|
@ -37,6 +37,7 @@
|
|||
let repeaterId
|
||||
let schema
|
||||
let enrichedSearchColumns
|
||||
let schemaLoaded = false
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichSearchColumns(searchColumns, schema).then(
|
||||
|
|
@ -77,9 +78,11 @@
|
|||
enrichRelationships: true,
|
||||
})
|
||||
}
|
||||
schemaLoaded = true
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if schemaLoaded}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
|
|
@ -209,3 +212,4 @@
|
|||
</BlockComponent>
|
||||
</BlockComponent>
|
||||
</Block>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
let schema
|
||||
let primaryDisplay
|
||||
let enrichedSearchColumns
|
||||
let schemaLoaded = false
|
||||
|
||||
$: fetchSchema(dataSource)
|
||||
$: enrichSearchColumns(searchColumns, schema).then(
|
||||
|
|
@ -91,6 +92,7 @@
|
|||
enrichRelationships: true,
|
||||
})
|
||||
}
|
||||
schemaLoaded = true
|
||||
}
|
||||
|
||||
const getNormalFields = schema => {
|
||||
|
|
@ -114,6 +116,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if schemaLoaded}
|
||||
<Block>
|
||||
<BlockComponent
|
||||
type="form"
|
||||
|
|
@ -271,3 +274,4 @@
|
|||
{/if}
|
||||
</BlockComponent>
|
||||
</Block>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import Placeholder from "../Placeholder.svelte"
|
||||
import FieldGroupFallback from "./FieldGroupFallback.svelte"
|
||||
import Skeleton from "../Skeleton.svelte"
|
||||
import { getContext, onDestroy } from "svelte"
|
||||
|
||||
export let label
|
||||
|
|
@ -54,8 +53,6 @@
|
|||
builderStore.actions.updateProp("label", e.target.textContent)
|
||||
}
|
||||
|
||||
const loading = getContext("loading")
|
||||
|
||||
onDestroy(() => {
|
||||
fieldApi?.deregister()
|
||||
unsubscribe?.()
|
||||
|
|
@ -79,10 +76,6 @@
|
|||
<div class="spectrum-Form-itemField">
|
||||
{#if !formContext}
|
||||
<Placeholder text="Form components need to be wrapped in a form" />
|
||||
{:else if $loading}
|
||||
<Skeleton>
|
||||
<slot />
|
||||
</Skeleton>
|
||||
{:else if !fieldState}
|
||||
<Placeholder />
|
||||
{:else if schemaType && schemaType !== type && !["options", "longform"].includes(type)}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<script>
|
||||
import { getContext, setContext } from "svelte"
|
||||
import { getContext } from "svelte"
|
||||
import InnerForm from "./InnerForm.svelte"
|
||||
import { Helpers } from "@budibase/bbui"
|
||||
import { writable } from "svelte/store"
|
||||
|
||||
export let dataSource
|
||||
export let theme
|
||||
|
|
@ -21,11 +20,6 @@
|
|||
const context = getContext("context")
|
||||
const { API, fetchDatasourceSchema } = getContext("sdk")
|
||||
|
||||
// Forms also use loading context as they require loading a schema
|
||||
const parentLoading = getContext("loading")
|
||||
const loading = writable(true)
|
||||
setContext("loading", loading)
|
||||
|
||||
let loaded = false
|
||||
let schema
|
||||
let table
|
||||
|
|
@ -36,7 +30,6 @@
|
|||
$: resetKey = Helpers.hashString(
|
||||
schemaKey + JSON.stringify(initialValues) + disabled
|
||||
)
|
||||
$: loading.set($parentLoading || !loaded)
|
||||
|
||||
// Returns the closes data context which isn't a built in context
|
||||
const getInitialValues = (type, dataSource, context) => {
|
||||
|
|
@ -86,6 +79,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if loaded}
|
||||
{#key resetKey}
|
||||
<InnerForm
|
||||
{dataSource}
|
||||
|
|
@ -102,3 +96,4 @@
|
|||
<slot />
|
||||
</InnerForm>
|
||||
{/key}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { getContext } from "svelte"
|
||||
import { Table, Skeleton } from "@budibase/bbui"
|
||||
import { Table } from "@budibase/bbui"
|
||||
import SlotRenderer from "./SlotRenderer.svelte"
|
||||
import { UnsortableTypes } from "../../../constants"
|
||||
import { onDestroy } from "svelte"
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
export let compact
|
||||
export let onClick
|
||||
|
||||
const loading = getContext("loading")
|
||||
const component = getContext("component")
|
||||
const { styleable, getAction, ActionTypes, rowSelectionStore } =
|
||||
getContext("sdk")
|
||||
|
|
@ -29,6 +28,7 @@
|
|||
let selectedRows = []
|
||||
|
||||
$: hasChildren = $component.children
|
||||
$: loading = dataProvider?.loading ?? false
|
||||
$: data = dataProvider?.rows || []
|
||||
$: fullSchema = dataProvider?.schema ?? {}
|
||||
$: fields = getFields(fullSchema, columns, false)
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<Table
|
||||
{data}
|
||||
{schema}
|
||||
loading={$loading}
|
||||
{loading}
|
||||
{rowCount}
|
||||
{quiet}
|
||||
{compact}
|
||||
|
|
@ -145,9 +145,6 @@
|
|||
on:sort={onSort}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<div class="skeleton" slot="loadingIndicator">
|
||||
<Skeleton />
|
||||
</div>
|
||||
<slot />
|
||||
</Table>
|
||||
{#if allowSelectRows && selectedRows.length}
|
||||
|
|
@ -161,12 +158,6 @@
|
|||
div {
|
||||
background-color: var(--spectrum-alias-background-color-secondary);
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row-count {
|
||||
margin-top: var(--spacing-l);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue