fixes
This commit is contained in:
parent
8ed804a5e6
commit
ca17a013d0
35 changed files with 1821 additions and 1424 deletions
|
@ -3,6 +3,8 @@ const { title, showClose, maxWidth, hideByDefault, customClass, offset } =
|
|||
Astro.props;
|
||||
|
||||
const randomID = customClass || Math.random().toString().replace(".", "");
|
||||
|
||||
import XmarkIcon from "@assets/svg/xmark.svg";
|
||||
---
|
||||
|
||||
<style define:vars={{ maxWidth, offset }}>
|
||||
|
@ -10,25 +12,30 @@ const randomID = customClass || Math.random().toString().replace(".", "");
|
|||
width: var(--maxWidth);
|
||||
top: var(--offset);
|
||||
left: var(--offset);
|
||||
border-radius: 17px;
|
||||
border: 1px solid var(--text);
|
||||
background: var(--surface1);
|
||||
clip-path: var(--clip-window-outer);
|
||||
position: absolute;
|
||||
}
|
||||
.window-inner {
|
||||
background-color: #20202c;
|
||||
clip-path: var(--clip-window-inner);
|
||||
}
|
||||
.title-bar {
|
||||
.title-bar-text {
|
||||
margin-top: 2.5px !important;
|
||||
}
|
||||
user-select: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #313244;
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 9px 18px 9px 18px;
|
||||
align-items: stretch;
|
||||
height: 42px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.title-bar span {
|
||||
align-self: center;
|
||||
}
|
||||
svg {
|
||||
fill: var(--text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 24px !important;
|
||||
height: 24px;
|
||||
}
|
||||
#close {
|
||||
background: none;
|
||||
|
@ -36,15 +43,16 @@ const randomID = customClass || Math.random().toString().replace(".", "");
|
|||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 24px !important;
|
||||
width: 50px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
outline: inherit;
|
||||
}
|
||||
.window-body {
|
||||
padding: 20px !important;
|
||||
background-color: #1e1e2e;
|
||||
border-radius: 0 0 17px 17px;
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
.window {
|
||||
|
@ -64,28 +72,24 @@ const randomID = customClass || Math.random().toString().replace(".", "");
|
|||
style={hideByDefault && "display: none;"}
|
||||
>
|
||||
<div class="window" style="max-width: 100%">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">{title}</div>
|
||||
{
|
||||
showClose && (
|
||||
<button
|
||||
id="close"
|
||||
aria-label="Close"
|
||||
onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24px"
|
||||
viewBox="0 -960 960 960"
|
||||
<div class="window-inner">
|
||||
<div class="title-bar">
|
||||
<span>{title}</span>
|
||||
{
|
||||
showClose && (
|
||||
<button
|
||||
id="close"
|
||||
aria-label="Close"
|
||||
onclick={`document.querySelector("#window-${randomID}").style.display = "none";`}
|
||||
>
|
||||
<path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
|
||||
</svg>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<slot />
|
||||
<XmarkIcon width="12" height="12" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue