noty.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. .noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight {
  2. position: fixed;
  3. margin: 0;
  4. padding: 0;
  5. z-index: 9999999;
  6. -webkit-transform: translateZ(0) scale(1, 1);
  7. transform: translateZ(0) scale(1, 1);
  8. -webkit-backface-visibility: hidden;
  9. backface-visibility: hidden;
  10. -webkit-font-smoothing: subpixel-antialiased;
  11. filter: blur(0);
  12. -webkit-filter: blur(0);
  13. max-width: 90%; }
  14. #noty_layout__top {
  15. top: 0;
  16. left: 5%;
  17. width: 90%; }
  18. #noty_layout__topLeft {
  19. top: 20px;
  20. left: 20px;
  21. width: 325px; }
  22. #noty_layout__topCenter {
  23. top: 5%;
  24. left: 50%;
  25. width: 325px;
  26. -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
  27. transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
  28. #noty_layout__topRight {
  29. top: 20px;
  30. right: 20px;
  31. width: 325px; }
  32. #noty_layout__bottom {
  33. bottom: 0;
  34. left: 5%;
  35. width: 90%; }
  36. #noty_layout__bottomLeft {
  37. bottom: 20px;
  38. left: 20px;
  39. width: 325px; }
  40. #noty_layout__bottomCenter {
  41. bottom: 5%;
  42. left: 50%;
  43. width: 325px;
  44. -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
  45. transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); }
  46. #noty_layout__bottomRight {
  47. bottom: 20px;
  48. right: 20px;
  49. width: 325px; }
  50. #noty_layout__center {
  51. top: 50%;
  52. left: 50%;
  53. width: 325px;
  54. -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
  55. transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); }
  56. #noty_layout__centerLeft {
  57. top: 50%;
  58. left: 20px;
  59. width: 325px;
  60. -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
  61. transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
  62. #noty_layout__centerRight {
  63. top: 50%;
  64. right: 20px;
  65. width: 325px;
  66. -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1);
  67. transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); }
  68. .noty_progressbar {
  69. display: none; }
  70. .noty_has_timeout.noty_has_progressbar .noty_progressbar {
  71. display: block;
  72. position: absolute;
  73. left: 0;
  74. bottom: 0;
  75. height: 3px;
  76. width: 100%;
  77. background-color: #646464;
  78. opacity: 0.2;
  79. filter: alpha(opacity=10); }
  80. .noty_bar {
  81. -webkit-backface-visibility: hidden;
  82. -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1);
  83. -ms-transform: translate(0, 0) scale(1, 1);
  84. transform: translate(0, 0) scale(1, 1);
  85. -webkit-font-smoothing: subpixel-antialiased;
  86. overflow: hidden; }
  87. .noty_effects_open {
  88. opacity: 0;
  89. -webkit-transform: translate(50%);
  90. -ms-transform: translate(50%);
  91. transform: translate(50%);
  92. -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  93. animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  94. -webkit-animation-fill-mode: forwards;
  95. animation-fill-mode: forwards; }
  96. .noty_effects_close {
  97. -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  98. animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  99. -webkit-animation-fill-mode: forwards;
  100. animation-fill-mode: forwards; }
  101. .noty_fix_effects_height {
  102. -webkit-animation: noty_anim_height 75ms ease-out;
  103. animation: noty_anim_height 75ms ease-out; }
  104. .noty_close_with_click {
  105. cursor: pointer; }
  106. .noty_close_button {
  107. position: absolute;
  108. top: 2px;
  109. right: 2px;
  110. font-weight: bold;
  111. width: 20px;
  112. height: 20px;
  113. text-align: center;
  114. line-height: 20px;
  115. background-color: rgba(0, 0, 0, 0.05);
  116. border-radius: 2px;
  117. cursor: pointer;
  118. -webkit-transition: all .2s ease-out;
  119. transition: all .2s ease-out; }
  120. .noty_close_button:hover {
  121. background-color: rgba(0, 0, 0, 0.1); }
  122. .noty_modal {
  123. position: fixed;
  124. width: 100%;
  125. height: 100%;
  126. background-color: #000;
  127. z-index: 10000;
  128. opacity: .3;
  129. left: 0;
  130. top: 0; }
  131. .noty_modal.noty_modal_open {
  132. opacity: 0;
  133. -webkit-animation: noty_modal_in .3s ease-out;
  134. animation: noty_modal_in .3s ease-out; }
  135. .noty_modal.noty_modal_close {
  136. -webkit-animation: noty_modal_out .3s ease-out;
  137. animation: noty_modal_out .3s ease-out;
  138. -webkit-animation-fill-mode: forwards;
  139. animation-fill-mode: forwards; }
  140. @-webkit-keyframes noty_modal_in {
  141. 100% {
  142. opacity: .3; } }
  143. @keyframes noty_modal_in {
  144. 100% {
  145. opacity: .3; } }
  146. @-webkit-keyframes noty_modal_out {
  147. 100% {
  148. opacity: 0; } }
  149. @keyframes noty_modal_out {
  150. 100% {
  151. opacity: 0; } }
  152. @keyframes noty_modal_out {
  153. 100% {
  154. opacity: 0; } }
  155. @-webkit-keyframes noty_anim_in {
  156. 100% {
  157. -webkit-transform: translate(0);
  158. transform: translate(0);
  159. opacity: 1; } }
  160. @keyframes noty_anim_in {
  161. 100% {
  162. -webkit-transform: translate(0);
  163. transform: translate(0);
  164. opacity: 1; } }
  165. @-webkit-keyframes noty_anim_out {
  166. 100% {
  167. -webkit-transform: translate(50%);
  168. transform: translate(50%);
  169. opacity: 0; } }
  170. @keyframes noty_anim_out {
  171. 100% {
  172. -webkit-transform: translate(50%);
  173. transform: translate(50%);
  174. opacity: 0; } }
  175. @-webkit-keyframes noty_anim_height {
  176. 100% {
  177. height: 0; } }
  178. @keyframes noty_anim_height {
  179. 100% {
  180. height: 0; } }
  181. /*# sourceMappingURL=noty.css.map*/