47 lines
2.3 KiB
PHTML
47 lines
2.3 KiB
PHTML
<template id="ui-message">
|
|
<style type="text/css">
|
|
.fa, .fas {font-family: "Font Awesome 5 Pro";font-weight: 900;}
|
|
.fa, .fab, .fal, .far, .fas {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;}
|
|
.fa-check::before { content: "\f00c"; }
|
|
.fa-exclamation::before { content: "\f12a"; }
|
|
.fa-question::before { content: "\f128"; }
|
|
.fa-times::before { content: "\f00d"; }
|
|
|
|
.ui-message { cursor:pointer;padding: 1em;margin: 1.5em auto;display: block;background: #aeaeae;border-radius: 2px;max-width: 90%;color: #424040;font-size: 0.9em; }
|
|
.ui-message.error { background:#ec4f4f;border-bottom: 2px solid #ad4e4e;color:#621f1f }
|
|
.ui-message.success { background:#67d87c; border-bottom: 2px solid #4ead60;color:#2b362e}
|
|
.ui-message.info { background:#61b5f3; border-bottom: 2px solid #4c8ebf;color:#113550 }
|
|
.ui-message.warning { background:#e6da55; border-bottom: 2px solid #c9bf52; color:#5f5708}
|
|
|
|
.icon-main {display:none;}
|
|
.ui-message.success .icon-main.green,
|
|
.ui-message.error .icon-main.is-error,
|
|
.ui-message.info .icon-main.is-info,
|
|
.ui-message.warning .icon-main.yellow {display:inline}
|
|
|
|
header {font-family:inherit;display:flex;font-size:1.8em;width:100%;line-height:1em; flex-direction:row;resize: horizontal;}
|
|
header .icon-main {flex-shrink:1;width:1.75em;text-align: center;}
|
|
header .is-title {margin-right:auto;flex-grow: 1;}
|
|
|
|
.message:not(:empty) { margin-top:0.66em;}
|
|
|
|
/* footer:not(:empty) {padding:15px 0 0 0;margin:15px 0 0 0;border-top:1px solid rgba(255,255,255,1)} */
|
|
</style>
|
|
|
|
<div class="ui-message">
|
|
<header>
|
|
<i class="icon-main green fas fa-check"></i>
|
|
<i class="icon-main yellow fas fa-exclamation"></i>
|
|
<i class="icon-main is-error fas fa-times"></i>
|
|
<i class="icon-main is-info fas fa-exclamation"></i>
|
|
|
|
<slot class="is-title" name="title"></slot>
|
|
</header>
|
|
|
|
<section class="message"><slot name="content"></slot></section>
|
|
<footer><slot name="footer"></slot></footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script defer="defer" src='{% asset "apps/script/component/message.js" %}'></script>
|