Modal.css 879 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. .Modal {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. bottom: 0;
  7. display: flex;
  8. align-items: center;
  9. justify-content: center;
  10. overflow: auto;
  11. padding: calc(var(--space-factor) * 10);
  12. }
  13. .Modal__background {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. right: 0;
  18. bottom: 0;
  19. z-index: 1;
  20. background-color: rgba(0, 0, 0, 0.3);
  21. backdrop-filter: blur(2px);
  22. }
  23. .Modal__content {
  24. position: relative;
  25. z-index: 2;
  26. width: 100%;
  27. max-width: 100%;
  28. opacity: 0;
  29. transform: translateY(10px);
  30. animation: Modal__content_fade-in 0.1s ease-out 0.05s forwards;
  31. position: relative;
  32. }
  33. @keyframes Modal__content_fade-in {
  34. from {
  35. opacity: 0;
  36. transform: translateY(10px);
  37. }
  38. to {
  39. opacity: 1;
  40. transform: translateY(0);
  41. }
  42. }
  43. .Modal__close {
  44. position: absolute;
  45. right: calc(var(--space-factor) * 5);
  46. top: calc(var(--space-factor) * 5);
  47. }