81 lines
2.2 KiB
CSS
81 lines
2.2 KiB
CSS
|
/* Transition and animation utilities for admin pages.
|
||
|
|
These are required by Phoenix JS.show/JS.hide in core_components.ex
|
||
|
|
and by various admin UI interactions (spinners, hover effects, etc.).
|
||
|
|
|
||
|
|
Placed in @layer admin so they integrate with the cascade. */
|
||
|
|
|
||
|
|
@layer admin {
|
||
|
|
|
||
|
|
/* ── Transition properties ── */
|
||
|
|
|
||
|
|
.transition {
|
||
|
|
transition-property: color, background-color, border-color, text-decoration-color,
|
||
|
|
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-duration: 150ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transition-all {
|
||
|
|
transition-property: all;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-duration: 150ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transition-colors {
|
||
|
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-duration: 150ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transition-transform {
|
||
|
|
transition-property: transform;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-duration: 150ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.transition-\[left\] {
|
||
|
|
transition-property: left;
|
||
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-duration: 150ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Duration overrides ── */
|
||
|
|
|
||
|
|
.duration-200 { transition-duration: 200ms; }
|
||
|
|
.duration-300 { transition-duration: 300ms; }
|
||
|
|
|
||
|
|
/* ── Easing overrides ── */
|
||
|
|
|
||
|
|
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
|
||
|
|
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
|
||
|
|
|
||
|
|
/* ── Opacity states (JS.show / JS.hide) ── */
|
||
|
|
|
||
|
|
.opacity-0 { opacity: 0; }
|
||
|
|
.opacity-100 { opacity: 1; }
|
||
|
|
|
||
|
|
/* ── Transform states (JS.show / JS.hide) ── */
|
||
|
|
|
||
|
|
.translate-y-4 { translate: 0 1rem; }
|
||
|
|
.translate-y-0 { translate: 0 0; }
|
||
|
|
.scale-95 { scale: 0.95; }
|
||
|
|
.scale-100 { scale: 1; }
|
||
|
|
|
||
|
|
@media (min-width: 640px) {
|
||
|
|
.sm\:translate-y-0 { translate: 0 0; }
|
||
|
|
.sm\:scale-95 { scale: 0.95; }
|
||
|
|
.sm\:scale-100 { scale: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ── Spin animation ── */
|
||
|
|
|
||
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
|
|
||
|
|
.animate-spin { animation: spin 1s linear infinite; }
|
||
|
|
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
.motion-safe\:animate-spin { animation: spin 1s linear infinite; }
|
||
|
|
}
|
||
|
|
|
||
|
|
} /* @layer admin */
|