@jaymago/simple-display-alert
Version:
A lightweight, customizable alert system for web applications with TypeScript support
2 lines (1 loc) • 6.21 kB
CSS
@charset "UTF-8";#simple-display-alert{position:fixed;z-index:9999999999999;height:auto;max-width:100%}#simple-display-alert.bottom-right{bottom:0;right:0}#simple-display-alert.bottom-right #simple-display-alert-items{right:30px;bottom:30px;margin-top:10px}#simple-display-alert.bottom-left{bottom:0;left:0}#simple-display-alert.bottom-left #simple-display-alert-items{left:30px;bottom:30px;margin-top:10px}#simple-display-alert.top-right{top:0;right:0}#simple-display-alert.top-right #simple-display-alert-items{right:30px;top:30px;margin-bottom:10px}#simple-display-alert.top-left{top:0;left:0}#simple-display-alert.top-left #simple-display-alert-items{left:30px;top:30px;margin-bottom:10px}@media screen and (max-width: 767px){#simple-display-alert{padding-left:20px;padding-right:20px}#simple-display-alert.bottom-right #simple-display-alert-items{right:0}#simple-display-alert.bottom-left #simple-display-alert-items{left:0}#simple-display-alert.top-right #simple-display-alert-items{right:0}#simple-display-alert.top-left #simple-display-alert-items{left:0}}#simple-display-alert:before{background:transparent;transition:background-color .3s ease-in-out}#simple-display-alert.has-backdrop:before{content:" ";position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff6}#simple-display-alert-items{position:relative;border:1px solid #88ba88;border-left-color:#178344;background-color:#f5fff5;border-left-width:4px;padding-bottom:1rem;padding-top:1rem;padding-left:22px;padding-right:22px;background-color:#fff;font-size:14px;font-weight:500;line-height:1.2;display:flex;align-items:center;border-radius:6px;opacity:0;transition:opacity .25s ease-in-out,transform .35s ease-in-out}#simple-display-alert-items.fade-top{transform:translateY(12px)}#simple-display-alert-items.fade-bottom{transform:translateY(-12px)}#simple-display-alert-items.fade-left{transform:translate(12px)}#simple-display-alert-items.fade-right{transform:translate(-12px)}@media screen and (min-width: 767px){#simple-display-alert-items{min-width:280px}}#simple-display-alert-items.show{opacity:1}#simple-display-alert-items.show.fade-top,#simple-display-alert-items.show.fade-bottom{transform:translateY(0)}#simple-display-alert-items.show.fade-left,#simple-display-alert-items.show.fade-right{transform:translate(0)}#simple-display-alert-items{z-index:999999;max-width:900px;box-shadow:0 1rem 3rem #0000008c}#simple-display-alert-items.alert-body{box-shadow:0 1px 4px 1px #0001,0 4px 8px #0001}#simple-display-alert-items.alert-danger{border-color:#d2a5a5;border-left-color:#8f130c;background-color:#fff9f9}#simple-display-alert-items.alert-warning{border-color:#dac171;border-left-color:#8a5700;background-color:#fffaeb}#simple-display-alert-items.alert-primary{color:#000;border-color:#057805;border-left-color:#075507}#simple-display-alert-items.alert-info{border-color:#67c7da;border-left-color:#026c81;background-color:#e9fbff}#simple-display-alert-items.alert-white{border-color:#b9b9b9;border-left-color:#555;background-color:#fff}#simple-display-alert-items .alert-icon{position:relative;top:0;font-size:20px;margin-right:8px}#simple-display-alert-items .alert-icon.spinner-border{top:4px}#simple-display-alert-items .close{position:absolute;width:20px;height:20px;opacity:.7;border-width:0px;border-style:solid;border-radius:50%;right:0;top:0;text-align:center;font-size:18px;line-height:1;cursor:pointer;text-decoration:none;color:inherit;font-family:Arial,Helvetica,sans-serif}#simple-display-alert-items .close:hover{opacity:1}#simple-display-alert-items.has-icon>div{display:inline-flex}#simple-display-alert-items.compact{font-size:14px;padding:15px 20px;border-left-width:5px}#simple-display-alert-items.compact .alert-icon{font-size:16px}#simple-display-alert-items .sda-icon{display:inline-block;width:16px;height:16px;margin-right:6px;background-size:contain;background-repeat:no-repeat;background-position:center}#simple-display-alert-items .sda-loader-icon{border:3px solid #b7b7b7;border-left-color:#737373;border-radius:50%;animation:spin 1s linear infinite}#simple-display-alert-items .sda-success-icon{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23178344' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpath d='M8 12l3 3 5-5'%3E%3C/path%3E%3C/svg%3E")}#simple-display-alert-items .sda-danger-icon{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f130c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E")}#simple-display-alert-items .sda-warning-icon{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5700' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E")}#simple-display-alert-items .sda-info-icon{width:18px;height:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23026c81' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E")}.dot-load{width:8px;margin-left:1px}.dot-load:after{overflow:hidden;display:inline-block;vertical-align:bottom;-webkit-animation:ellipsis steps(4,end) 1.2s infinite;animation:ellipsis steps(4,end) 1.2s infinite;content:"\2026";width:0px}@keyframes ellipsis{to{width:18px}}@-webkit-keyframes ellipsis{to{width:18px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}