f11086e9f8
The close button would actually need to be a `button` instead of a `span` HTML element to be both screenreader and keyboard user accessible, as well as having an accessible label. Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
60 lines
1.2 KiB
TypeScript
60 lines
1.2 KiB
TypeScript
const html = `<style>
|
|
.my-backdrop {
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
top:0;
|
|
left:0;
|
|
z-index:999999999999;
|
|
display:block;
|
|
background-color:rgb(5,5,5, 0.8)
|
|
}
|
|
|
|
.modal-box {
|
|
margin:0 auto;
|
|
margin-top:20px;
|
|
margin-bottom:20px;
|
|
position:absolute;
|
|
width:100%;
|
|
top:50%;
|
|
left:50%;
|
|
transform: translateY(-50%) translateX(-50%);
|
|
overflow: auto;
|
|
}
|
|
|
|
.header {
|
|
position: relative;
|
|
float:right;
|
|
top: 10px;
|
|
}
|
|
.close {
|
|
font-size: 30px;
|
|
left: -20px;
|
|
position: relative;
|
|
color:white;
|
|
cursor: pointer;
|
|
}
|
|
/*Modal background is black only, so hardcode white */
|
|
.loader {
|
|
--cal-brand-color:white;
|
|
}
|
|
</style>
|
|
<div class="my-backdrop">
|
|
<div class="header">
|
|
<button type="button" class="close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="modal-box">
|
|
<div class="body">
|
|
<div id="wrapper" class="z-[999999999999] absolute flex w-full items-center">
|
|
<div class="loader modal-loader border-brand-default dark:border-darkmodebrand">
|
|
<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
|
|
</div>
|
|
</div>
|
|
<div id="error" class="hidden left-1/2 -translate-x-1/2 relative text-inverted"></div>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
export default html;
|