MontoyaTech/ignite-html-toast
MontoyaTech/ignite-html-toast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved the default drop shadow.

Browse Source
This commit is contained in:
MattMo 2023-07-07 11:16:01 -07:00
parent bc7c94edd8
commit e370a48f60
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ignite-html-toast.js
View File

@ -74,7 +74,7 @@ class Toast {
var temp = document.createElement('div');
temp.innerHTML = `
<div class="ignite-html-toast ${type ? type : ""}" style="display: flex; align-items: center; flex-direction: column; left: 50%; top: 100%; position: absolute; transform: translate(-50%, -100%); z-index: 999999; width: 100%; padding: 2em 1em 2em 1em; background-color: transparent;">
<div style="box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
<div style="box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 7em; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #fff;">
<div class="icon" style="${!icon ? "display: none;" : "display: flex;"}font-size: 1.5em; background-color: ${color}; border-radius: 100%; min-width: 1.5em; min-height: 1.5em; align-items: center; justify-content: center; color: #fff;">${icon ? icon : ""}</div>
<div class="message" style="text-align: center;">${content ? content : ""}</div>
<button class="close" onClick="this.parentElement.parentElement.remove();" style="${!closable ? "display: none;" : ""} background-color: transparent; border: none; font-size: 1.75em; color: rgba(0,0,0,0.5);">&times;</button>