164 lines
5.2 KiB
Text
164 lines
5.2 KiB
Text
---
|
|
// Properties
|
|
const {
|
|
Name,
|
|
Title = "Dialog Title",
|
|
Description = "Description",
|
|
CloseButton = true,
|
|
QuestionTooltip = false, // Requires Astro Tooltip: https://code.juliancataldo.com/component/astro-tooltips/#installation
|
|
Actions = false,
|
|
BlurryBackdrop = true,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div id={Name + '-backdrop'} class="fl-dialog-backdrop"></div>
|
|
<div id={Name} class="fl-dialog">
|
|
<div class="fl-dialog-header">
|
|
<div class="fl-dialog-header-start">
|
|
<h2>{Title}</h2>
|
|
</div>
|
|
<div class="fl-dialog-header-end">
|
|
{
|
|
QuestionTooltip ? (
|
|
<button title={QuestionTooltip}>
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
color="#000000"
|
|
>
|
|
<>
|
|
<path
|
|
d="M7.90039 8.07954C7.90039 3.30678 15.4004 3.30682 15.4004 8.07955C15.4004 11.4886 11.9913 10.8067 11.9913 14.8976"
|
|
stroke="#000000"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M12 19.01L12.01 18.9989"
|
|
stroke="#000000"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</>
|
|
</svg>
|
|
</button>
|
|
) : null
|
|
}
|
|
{
|
|
CloseButton ? (
|
|
<button onclick={CloseButton}>
|
|
<svg
|
|
width="24px"
|
|
height="24px"
|
|
stroke-width="1.5"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
color="#000000"
|
|
>
|
|
<path
|
|
d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426"
|
|
stroke="#FFF"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
) : null
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="fl-dialog-content">
|
|
<slot />
|
|
</div>
|
|
{
|
|
Actions ? (
|
|
<div class="fl-dialog-actions">
|
|
<slot name="actions" />
|
|
</div>
|
|
) : null
|
|
}
|
|
</div>
|
|
|
|
<style lang="scss" is:inline>
|
|
.fl-dialog-backdrop {
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100%;
|
|
backdrop-filter: blur(10px) brightness(0.8) contrast(0.8);
|
|
z-index: 1;
|
|
display: none;
|
|
}
|
|
.fl-dialog {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
background: black;
|
|
border-radius: 12px;
|
|
border: 1px #3e3e3e solid;
|
|
max-width: 720px;
|
|
display: none;
|
|
.fl-dialog-header {
|
|
border-radius: 12px 12px 0px 0px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 24px;
|
|
* {margin: 0px}
|
|
p {
|
|
color: gray;
|
|
}
|
|
button {
|
|
background: transparent;
|
|
border-radius: 3rem;
|
|
border: none;
|
|
aspect-ratio: 1;
|
|
&:hover {
|
|
background: #1e1e1e;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.fl-dialog-content {
|
|
padding: 12px 24px;
|
|
}
|
|
.fl-dialog-actions {
|
|
border-radius: 0px 0px 12px 12px;
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 6px;
|
|
a, button {
|
|
color: black;
|
|
background: white;
|
|
border: none;
|
|
font-size: 16px;
|
|
border-radius: 4px;
|
|
padding: 6px 12px;
|
|
&:hover {
|
|
filter: brightness(0.6);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.fl-secondary-btn {
|
|
color: white;
|
|
background: transparent;
|
|
&:hover {
|
|
cursor: pointer;
|
|
filter: brightness(0.6);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|