| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Example</title>
- </head>
- <body>
- <div id="toasts-container"></div>
- <script src="../dist/toasters.js"></script>
- <style>
- :root {
- --max-width: 250px;
- }
- body {
- padding: 0;
- margin: 0;
- }
- .toast {
- margin-top: 5px;
- user-select: none;
- z-index: 10000 !important;
- animation-duration: 0.60s;
- animation-fill-mode: both;
- border-radius: 2px;
- cursor: pointer;
- clear: both;
- position: relative;
- transform: translateX(20px);
- height: auto;
- background-color: #323232;
- color: #fff;
- padding: 10px 25px;
- font-size: 1rem;
- font-weight: 300;
- width: var(--max-width);
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
- }
- .toast-right {
- transform: translateX(calc(100vw - (var(--max-width) + 50px) - 20px ));
- }
- .toast-left {
- transform: translateX(20px);
- }
- .toast-top {
- }
- .toast-bottom {
- }
- </style>
- </body>
- </html>
|
