Add incomplete FloatingPanel

main
kts of kettek 2024-02-10 06:28:46 -08:00
parent 415be31b3e
commit 62c68a8b55
1 changed files with 39 additions and 0 deletions

View File

@ -0,0 +1,39 @@
<script lang='ts'>
import {
ModalHeader,
ModalBody,
ModalFooter,
} from "carbon-components-svelte"
export let title: string = "Untitled"
export let label: string = "Untitled"
export let noPadding: boolean = false
</script>
<dialog>
<header class='bx--modal-header'>
<h2 class='bx--modal-header__label bx--type-delta'>{label}</h2>
</header>
<section class='bx--modal-content {noPadding?'-noPadding':''}'>
<slot/>
</section>
</dialog>
<style>
dialog {
position: fixed;
left: 100;
top: 100;
background-color: var(--cds-ui-01, #f4f4f4);
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 1fr auto;
outline: 3px solid rgba(0, 0, 0, 0);
outline-offset: -3px;
}
section.-noPadding {
padding: 0 !important;
}
</style>