Browse Source

fix modal-container targeting for Portal component

pull/1431/head
Keviin Åberg Kultalahti 5 years ago
parent
commit
def3b67e02
  1. 2
      packages/bbui/src/Modal/Modal.svelte
  2. 18
      packages/bbui/src/Modal/ModalContent.svelte

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

@ -37,7 +37,7 @@
<svelte:window on:keydown={handleKey} />
{#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-Modal-wrapper">
<div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>

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

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

Loading…
Cancel
Save