mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(preview): move inline loader above preview

Browse source
This commit is contained in:
Eric Liu 2020-10-15 17:27:27 -07:00
commit 7345cc1b83
1 changed files with 7 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

25
docs/src/components/Preview.svelte
View file

@ -107,11 +107,12 @@
} }
.preview-viewer.framed { .preview-viewer.framed {
min-height: 22rem; min-height: 20rem;
} }
.framed-header { .framed-header {
display: flex; display: flex;
align-items: center;
} }
iframe { iframe {
@ -121,23 +122,16 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>
<div class="preview"> <div class="preview">
{#if framed} {#if framed}
<div class="framed-header"> <div class="framed-header">
<div></div> <div style="margin-left: var(--cds-spacing-03)">
{#if framed && !success}
<InlineLoading description="Loading..." />
{/if}
</div>
<Button <Button
style="margin-left: auto;" style="margin-left: auto;"
kind="ghost" kind="ghost"
@ -151,11 +145,6 @@
</div> </div>
{/if} {/if}
<div class="preview-viewer" class:framed> <div class="preview-viewer" class:framed>
{#if framed && !success}
<div class="loader">
<InlineLoading />
</div>
{/if}
{#if framed} {#if framed}
<iframe <iframe
on:load="{() => { on:load="{() => {