20 lines
1.0 KiB
PHTML
20 lines
1.0 KiB
PHTML
<style>
|
|
ui-popup:not(.modal) {box-shadow:0px 0px 0px 9999px rgba(0, 0, 0, 0.5);z-index:9999;transition:all 0.3s ease-out;background:#fff;position:fixed!important;top:0;left: 50%;transform:translate(-50%, 15%);}
|
|
ui-popup:not(.visible) {transform: translate(-50%, -100%);transition-timing-function: ease-in;translate(-50%, -100%);box-shadow:none;}
|
|
ui-popup.modal.visible {display:flex}
|
|
ui-popup > * {padding:1.5rem}
|
|
ui-popup .button-list {text-align:center;}
|
|
ui-popup .button-list .button {padding: 0px 7%;}
|
|
ui-popup .message {background: transparent;padding:1.2rem 1.5rem!important}
|
|
ui-popup .title {font-size:1.5rem;display:flex;justify-content: space-between;background:rgba(120,120,120,0.15)}
|
|
ui-popup::before {left:0;right:0;top:0;bottom:0;background:rgba(0,0,0,0.1);content:" ";}
|
|
</style>
|
|
|
|
<template id="ui-popup">
|
|
<section class="ui-popup section">
|
|
<slot name="title"></slot>
|
|
<slot name="message"></slot>
|
|
<slot name="buttons"></slot>
|
|
</section>
|
|
</template>
|