| 123456789101112131415161718192021222324252627282930313233 |
- // vue/app/shared/SuccessModal/index.styl
- // Стили исключительно для модального окна успеха
- .success-content
- .success-icon
- animation: successIconAppear 0.6s ease-out forwards
-
- svg
- transition: all 0.3s ease
-
- &:hover
- transform: scale(1.05)
- filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.3))
- // Анимация появления иконки
- @keyframes successIconAppear
- 0%
- opacity: 0
- transform: scale(0.5) rotate(-180deg)
- 60%
- opacity: 1
- transform: scale(1.1) rotate(10deg)
- 100%
- opacity: 1
- transform: scale(1) rotate(0deg)
- // Адаптивность для мобильных устройств
- @media (max-width: 640px)
- .success-content
- .success-icon
- svg
- width: 4rem
- height: 4rem
|
