Strona główna Odkrywaj Pomoc
Zaloguj się
owen
/
vue-roaster
kopia lustrzana https://github.com/jonathan-grah/vue-roaster.git
1
0
Forkuj 0
Pliki Problemy 0 Wiki
Drzewo: 7a5230e223
Gałęzie Tagi
vue-roaster
/
example
/
index.html

index.html 2.1 KB
Historia Czysty

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <title>Example</title>
    6. 

  6. </head>
    7. 

  7. <body>
    8. 

  8.         <div id="toasts-container"></div>
    9. 

  9.         <script src="../dist/example.js"></script>
    10. 

  10.         <style>
    11. 

  11.                 :root {
    12. 

  12.                         --max-width: 250px;
    13. 

  13.                 }
    14. 

  14. 

  15.                 body {
    16. 

  16.                         padding: 0;
    17. 

  17.                         margin: 0;
    18. 

  18.                 }
    19. 

  19. 

  20.                 #toasts-container {
    21. 

  21. 

  22.                 }
    23. 

  23. 

  24.                 .toast {
    25. 

  25.                         user-select: none;
    26. 

  26.                         z-index: 10000 !important;
    27. 

  27.                         animation-duration: 0.60s;
    28. 

  28.                         animation-fill-mode: both;
    29. 

  29.                         border-radius: 2px;
    30. 

  30.                         cursor: pointer;
    31. 

  31.                         overflow-x: hidden !important;
    32. 

  32.                         clear: both;
    33. 

  33.                         position: absolute;
    34. 

  34.                         transform: translateX(20px);
    35. 

  35.                         top: 0;
    36. 

  36.                         height: auto;
    37. 

  37.                         background-color: #323232;
    38. 

  38.                         color: #fff;
    39. 

  39.                         padding: 10px 25px;
    40. 

  40.                         font-size: 1rem;
    41. 

  41.                         font-weight: 300;
    42. 

  42.                         width: var(--max-width);
    43. 

  43.                         box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    44. 

  44.                 }
    45. 

  45. 

  46.                 .toast-right {
    47. 

  47.                         transform: translateX(calc(100vw - (var(--max-width) + 50px) - 20px));
    48. 

  48.                 }
    49. 

  49. 

  50.                 .toast-left {
    51. 

  51.                         transform: translateX(20px);
    52. 

  52.                 }
    53. 

  53. 

  54.                 .toast-top {
    55. 

  55.                         margin-top: 5px;
    56. 

  56.                         bottom: unset;
    57. 

  57.                         top: 0;
    58. 

  58.                 }
    59. 

  59. 

  60.                 .toast-bottom {
    61. 

  61.                         margin-bottom: 5px;
    62. 

  62.                         top: unset;
    63. 

  63.                         bottom: 0;
    64. 

  64.                 }
    65. 

  65.         </style>
    66. 

  66. </body>
    67. 

  67. </html>
    68.