_popup.scss 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @keyframes mypulse {
  2. 0% {
  3. box-shadow: 0 0 0 0 #0699d2;
  4. }
  5. }
  6. .popup {
  7. position: fixed;
  8. top: 0;
  9. left: 0;
  10. width: 100%;
  11. height: 100%;
  12. display: flex;
  13. justify-content: center;
  14. align-items: center;
  15. z-index: 9000;
  16. &__baclground {
  17. position: absolute;
  18. top: 0;
  19. left: 0;
  20. width: 100%;
  21. height: 100%;
  22. background-color: rgba(255,255,255,0.5);
  23. filter: blur(em(5));
  24. }
  25. &__body {
  26. position: relative;
  27. width: em(760);
  28. padding: em(70) em(30) em(30) em(30);
  29. background: white;
  30. box-shadow: em(10) em(10) 0 rgba(0,0,0,0.3);
  31. @media screen and (max-width: 992px) {
  32. width: em(800);
  33. }
  34. }
  35. .ic-cross {
  36. display: block;
  37. position: absolute;
  38. top: em(20);
  39. right: em(20);
  40. width: em(32);
  41. height: em(32);
  42. img {
  43. width: 100%;
  44. height: 100%;
  45. object-fit: contain;
  46. object-position: center;
  47. }
  48. }
  49. .text-title {
  50. color: #0070a0;
  51. text-align: center;
  52. font-size: 2em;
  53. font-weight: 500;
  54. line-height: 1.5;
  55. }
  56. .text {
  57. color: #0699d2;
  58. font-size: 1.5em;
  59. font-weight: 300;
  60. text-align: center;
  61. line-height: 1.5;
  62. letter-spacing: 0.2em;
  63. margin-top: em(20);
  64. @media screen and (max-width: 992px) {
  65. font-size: 1.8em;
  66. }
  67. }
  68. .button-group {
  69. display: flex;
  70. justify-content: center;
  71. align-items: center;
  72. width: em(680);
  73. margin-left: auto;
  74. margin-right: auto;
  75. margin-top: em(60);
  76. }
  77. .button-primary {
  78. display: inline-block;
  79. border-radius: 1.5em;
  80. padding: 0.6em 1em;
  81. box-shadow: 0 0 0 1em transparent;
  82. background-color: #0699d2;
  83. cursor: pointer;
  84. text-decoration: none;
  85. margin-left: em(10);
  86. margin-right: em(10);
  87. &:hover {
  88. animation: mypulse 1.5s infinite;
  89. }
  90. p {
  91. text-align: center;
  92. font-size: 1.2em;
  93. font-weight: 400;
  94. color: #ffffff;
  95. @media screen and (max-width: 992px) {
  96. font-size: 1.6em;
  97. }
  98. }
  99. }
  100. }