style.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. .v-modal-enter {
  2. -webkit-animation: v-modal-in .2s ease;
  3. animation: v-modal-in .2s ease;
  4. }
  5. .v-modal-leave {
  6. -webkit-animation: v-modal-out .2s ease forwards;
  7. animation: v-modal-out .2s ease forwards;
  8. }
  9. @-webkit-keyframes v-modal-in {
  10. 0% {
  11. opacity: 0;
  12. }
  13. 100% {
  14. }
  15. }
  16. @keyframes v-modal-in {
  17. 0% {
  18. opacity: 0;
  19. }
  20. 100% {
  21. }
  22. }
  23. @-webkit-keyframes v-modal-out {
  24. 0% {
  25. }
  26. 100% {
  27. opacity: 0;
  28. }
  29. }
  30. @keyframes v-modal-out {
  31. 0% {
  32. }
  33. 100% {
  34. opacity: 0;
  35. }
  36. }
  37. .v-modal {
  38. position: fixed;
  39. left: 0;
  40. top: 0;
  41. width: 100%;
  42. height: 100%;
  43. opacity: 0.5;
  44. background: #000;
  45. }
  46. .mint-popup {
  47. position: fixed;
  48. background: #fff;
  49. top: 50%;
  50. left: 50%;
  51. -webkit-transform: translate3d(-50%, -50%, 0);
  52. transform: translate3d(-50%, -50%, 0);
  53. -webkit-backface-visibility: hidden;
  54. backface-visibility: hidden;
  55. -webkit-transition: .2s ease-out;
  56. transition: .2s ease-out;
  57. }
  58. .mint-popup-top {
  59. top: 0;
  60. right: auto;
  61. bottom: auto;
  62. left: 50%;
  63. -webkit-transform: translate3d(-50%, 0, 0);
  64. transform: translate3d(-50%, 0, 0);
  65. }
  66. .mint-popup-right {
  67. top: 50%;
  68. right: 0;
  69. bottom: auto;
  70. left: auto;
  71. -webkit-transform: translate3d(0, -50%, 0);
  72. transform: translate3d(0, -50%, 0);
  73. }
  74. .mint-popup-bottom {
  75. top: auto;
  76. right: auto;
  77. bottom: 0;
  78. left: 50%;
  79. -webkit-transform: translate3d(-50%, 0, 0);
  80. transform: translate3d(-50%, 0, 0);
  81. }
  82. .mint-popup-left {
  83. top: 50%;
  84. right: auto;
  85. bottom: auto;
  86. left: 0;
  87. -webkit-transform: translate3d(0, -50%, 0);
  88. transform: translate3d(0, -50%, 0);
  89. }
  90. .popup-slide-top-enter, .popup-slide-top-leave-active {
  91. -webkit-transform: translate3d(-50%, -100%, 0);
  92. transform: translate3d(-50%, -100%, 0);
  93. }
  94. .popup-slide-right-enter, .popup-slide-right-leave-active {
  95. -webkit-transform: translate3d(100%, -50%, 0);
  96. transform: translate3d(100%, -50%, 0);
  97. }
  98. .popup-slide-bottom-enter, .popup-slide-bottom-leave-active {
  99. -webkit-transform: translate3d(-50%, 100%, 0);
  100. transform: translate3d(-50%, 100%, 0);
  101. }
  102. .popup-slide-left-enter, .popup-slide-left-leave-active {
  103. -webkit-transform: translate3d(-100%, -50%, 0);
  104. transform: translate3d(-100%, -50%, 0);
  105. }
  106. .popup-fade-enter, .popup-fade-leave-active {
  107. opacity: 0;
  108. }