/
githubmirror
/
ionic-framework
Обзор
Документация
Войти
/
githubmirror
/
ionic-framework
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
core/src/components/ripple-effect/ripple-effect.scss
82 строки
1 KB
Liam DeBeasi
chore: remove unused sass variables (#28363)
19 окт 2023, 19:41
Не верифицирован
19 окт 2023, 19:41
c801e2a
Код
Авторство
О чём код?
@import "../../themes/ionic.globals"; // Material Design Ripple Effect // -------------------------------------------------- $scale-duration: 225ms; $fade-in-duration: 75ms; $fade-out-duration: 150ms; :host { @include position(0, 0, 0, 0); position: absolute; contain: strict; pointer-events: none; } :host(.unbounded) { contain: layout size style; } .ripple-effect { @include border-radius(50%); position: absolute; // Should remain static for performance reasons background-color: currentColor; color: inherit; contain: strict; opacity: 0; animation: $scale-duration rippleAnimation forwards, $fade-in-duration fadeInAnimation forwards; will-change: transform, opacity; pointer-events: none; } .fade-out { transform: translate(var(--translate-end)) scale(var(--final-scale, 1)); animation: $fade-out-duration fadeOutAnimation forwards; } @keyframes rippleAnimation { from { animation-timing-function: cubic-bezier(.4, 0, .2, 1); transform: scale(1); } to { transform: translate(var(--translate-end)) scale(var(--final-scale, 1)); } } @keyframes fadeInAnimation { from { animation-timing-function: linear; opacity: 0; } to { opacity: 0.16; } } @keyframes fadeOutAnimation { from { animation-timing-function: linear; opacity: 0.16; } to { opacity: 0; } }