Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
69 lines
1.3 KiB
CSS
69 lines
1.3 KiB
CSS
/**
|
|
* LiveComponent Transitions
|
|
* CSS transitions for DOM swap operations
|
|
*/
|
|
|
|
/* Fade transition */
|
|
.lc-transition-fade {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.lc-transition-fade.lc-transition-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Slide transition */
|
|
.lc-transition-slide {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.lc-transition-slide.lc-transition-active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Slide down transition */
|
|
.lc-transition-slide-down {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.lc-transition-slide-down.lc-transition-active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Slide up transition */
|
|
.lc-transition-slide-up {
|
|
transform: translateY(20px);
|
|
opacity: 0;
|
|
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
.lc-transition-slide-up.lc-transition-active {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Loading indicator active state */
|
|
.lc-indicator-active {
|
|
opacity: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Loading state for boosted links/forms */
|
|
a.lc-loading,
|
|
form.lc-loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
cursor: wait;
|
|
}
|
|
|
|
|
|
|
|
|