index.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. .rc-trigger-popup {
  2. position: absolute;
  3. top: -9999px;
  4. left: -9999px;
  5. z-index: 1050;
  6. }
  7. .rc-trigger-popup-hidden {
  8. display: none;
  9. }
  10. .rc-trigger-popup-zoom-enter,
  11. .rc-trigger-popup-zoom-appear {
  12. opacity: 0;
  13. animation-play-state: paused;
  14. animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  15. animation-duration: 0.3s;
  16. animation-fill-mode: both;
  17. }
  18. .rc-trigger-popup-zoom-leave {
  19. animation-duration: 0.3s;
  20. animation-fill-mode: both;
  21. animation-play-state: paused;
  22. animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
  23. }
  24. .rc-trigger-popup-zoom-enter.rc-trigger-popup-zoom-enter-active,
  25. .rc-trigger-popup-zoom-appear.rc-trigger-popup-zoom-appear-active {
  26. animation-name: rcTriggerZoomIn;
  27. animation-play-state: running;
  28. }
  29. .rc-trigger-popup-zoom-leave.rc-trigger-popup-zoom-leave-active {
  30. animation-name: rcTriggerZoomOut;
  31. animation-play-state: running;
  32. }
  33. .rc-trigger-popup-arrow {
  34. z-index: 1;
  35. width: 0px;
  36. height: 0px;
  37. background: #000;
  38. border-radius: 100vw;
  39. box-shadow: 0 0 0 3px black;
  40. }
  41. @keyframes rcTriggerZoomIn {
  42. 0% {
  43. transform: scale(0, 0);
  44. transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
  45. opacity: 0;
  46. }
  47. 100% {
  48. transform: scale(1, 1);
  49. transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
  50. opacity: 1;
  51. }
  52. }
  53. @keyframes rcTriggerZoomOut {
  54. 0% {
  55. transform: scale(1, 1);
  56. transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
  57. opacity: 1;
  58. }
  59. 100% {
  60. transform: scale(0, 0);
  61. transform-origin: var(--arrow-x, 50%) var(--arrow-y, 50%);
  62. opacity: 0;
  63. }
  64. }
  65. .rc-trigger-popup-mask {
  66. position: fixed;
  67. top: 0;
  68. right: 0;
  69. left: 0;
  70. bottom: 0;
  71. background-color: #373737;
  72. background-color: rgba(55, 55, 55, 0.6);
  73. height: 100%;
  74. filter: alpha(opacity=50);
  75. z-index: 1050;
  76. }
  77. .rc-trigger-popup-mask-hidden {
  78. display: none;
  79. }
  80. .rc-trigger-popup-fade-enter,
  81. .rc-trigger-popup-fade-appear {
  82. opacity: 0;
  83. animation-duration: 0.3s;
  84. animation-fill-mode: both;
  85. animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  86. animation-play-state: paused;
  87. }
  88. .rc-trigger-popup-fade-leave {
  89. animation-duration: 0.3s;
  90. animation-fill-mode: both;
  91. animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
  92. animation-play-state: paused;
  93. }
  94. .rc-trigger-popup-fade-enter.rc-trigger-popup-fade-enter-active,
  95. .rc-trigger-popup-fade-appear.rc-trigger-popup-fade-appear-active {
  96. animation-name: rcTriggerMaskFadeIn;
  97. animation-play-state: running;
  98. }
  99. .rc-trigger-popup-fade-leave.rc-trigger-popup-fade-leave-active {
  100. animation-name: rcDialogFadeOut;
  101. animation-play-state: running;
  102. }
  103. @keyframes rcTriggerMaskFadeIn {
  104. 0% {
  105. opacity: 0;
  106. }
  107. 100% {
  108. opacity: 1;
  109. }
  110. }
  111. @keyframes rcDialogFadeOut {
  112. 0% {
  113. opacity: 1;
  114. }
  115. 100% {
  116. opacity: 0;
  117. }
  118. }
  119. .rc-trigger-popup-mobile {
  120. transition: all 0.3s;
  121. position: fixed;
  122. left: 0;
  123. right: 0;
  124. bottom: 0;
  125. top: auto;
  126. }
  127. .rc-trigger-popup-mobile-fade-appear-start,
  128. .rc-trigger-popup-mobile-fade-enter-start {
  129. transform: translateY(100%);
  130. }
  131. .rc-trigger-popup-mobile-fade-leave-active {
  132. transform: translateY(100%);
  133. }