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

fix modal-container targeting for Portal component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-08 16:05:31 +02:00
parent eb0ffcc5b6
commit def3b67e02
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Modal/Modal.svelte
View File

@ -37,7 +37,7 @@
<svelte:window on:keydown={handleKey} /> <svelte:window on:keydown={handleKey} />
{#if visible} {#if visible}
<Portal target="modal-container"> <Portal target=".modal-container">
<div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}> <div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
<div class="spectrum-Modal-wrapper"> <div class="spectrum-Modal-wrapper">
<div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}> <div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>

18
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -28,11 +28,13 @@
} }
</script> </script>
<div class="spectrum-Dialog spectrum-Dialog--small" role="dialog" tabindex="-1" aria-modal="true"> <div class="spectrum-Dialog spectrum-Dialog--medium" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid"> <div class="spectrum-Dialog-grid">
<h1 class="spectrum-Dialog-heading">{title}</h1> <h1 class="spectrum-Dialog-heading">{title}</h1>
<hr class="spectrum-Divider spectrum-Divider--sizeM spectrum-Divider--horizontal spectrum-Dialog-divider"> <hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
<section class="spectrum-Dialog-content">
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
<section class="spectrum-Dialog-content content-grid">
<slot /> <slot />
</section> </section>
{#if showCancelButton || showConfirmButton} {#if showCancelButton || showConfirmButton}
@ -66,6 +68,16 @@
<style> <style>
.content-grid {
display: grid;
position: relative;
gap: var(--spacing-xl);
color: var(--ink);
}
h1 {
font-weight: normal;
}
.close-icon { .close-icon {
position: absolute; position: absolute;
top: 15px; top: 15px;