bf576905a7
Some checks are pending
CI / check (push) Waiting to run
- 51 headless Web Components (45 core + 6 animation) - Shared helpers: emit(), part(), listen(), wireLabel(), initialValue() - Zero `new CustomEvent` or `static #counter` — all use shared utils - Zod schemas for all 44 core components - MCP package with discover, inspect, compose, validate tools - Showcase with Aperture Science theme, M3 Expressive motion - 81 tests passing, TypeScript strict mode clean - Signals (~500B), SPA router (~400B), zero dependencies
138 lines
3.7 KiB
CSS
138 lines
3.7 KiB
CSS
/* PettyUI Animations — stagger, reveal, and transition CSS */
|
|
|
|
.petty-stagger-hidden { opacity: 0; }
|
|
|
|
.petty-stagger-fade-up {
|
|
animation: pettyFadeUp 0.5s ease both;
|
|
}
|
|
.petty-stagger-fade-down {
|
|
animation: pettyFadeDown 0.5s ease both;
|
|
}
|
|
.petty-stagger-fade-left {
|
|
animation: pettyFadeLeft 0.5s ease both;
|
|
}
|
|
.petty-stagger-fade-right {
|
|
animation: pettyFadeRight 0.5s ease both;
|
|
}
|
|
.petty-stagger-scale {
|
|
animation: pettyScale 0.5s ease both;
|
|
}
|
|
.petty-stagger-blur {
|
|
animation: pettyBlur 0.6s ease both;
|
|
}
|
|
|
|
.petty-reveal-hidden { opacity: 0; }
|
|
|
|
.petty-reveal-fade-up {
|
|
animation: pettyFadeUp 0.6s ease both;
|
|
}
|
|
.petty-reveal-fade-down {
|
|
animation: pettyFadeDown 0.6s ease both;
|
|
}
|
|
.petty-reveal-fade-left {
|
|
animation: pettyFadeLeft 0.6s ease both;
|
|
}
|
|
.petty-reveal-fade-right {
|
|
animation: pettyFadeRight 0.6s ease both;
|
|
}
|
|
.petty-reveal-scale {
|
|
animation: pettyScale 0.6s ease both;
|
|
}
|
|
.petty-reveal-blur {
|
|
animation: pettyBlur 0.7s ease both;
|
|
}
|
|
|
|
petty-typewriter.petty-typewriter-cursor::after {
|
|
content: "|";
|
|
animation: pettyCursorBlink 0.8s step-end infinite;
|
|
}
|
|
petty-typewriter[data-state="done"].petty-typewriter-cursor::after {
|
|
animation: pettyCursorBlink 0.8s step-end 3;
|
|
}
|
|
|
|
petty-counter { font-variant-numeric: tabular-nums; }
|
|
|
|
@keyframes pettyFadeUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pettyFadeDown {
|
|
from { opacity: 0; transform: translateY(-20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pettyFadeLeft {
|
|
from { opacity: 0; transform: translateX(20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes pettyFadeRight {
|
|
from { opacity: 0; transform: translateX(-20px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
@keyframes pettyScale {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
@keyframes pettyBlur {
|
|
from { opacity: 0; filter: blur(8px); transform: translateY(10px); }
|
|
to { opacity: 1; filter: blur(0); transform: translateY(0); }
|
|
}
|
|
@keyframes pettyCursorBlink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
dialog[open] {
|
|
animation: pettyDialogIn 0.2s ease;
|
|
}
|
|
@keyframes pettyDialogIn {
|
|
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
[popover]:popover-open {
|
|
animation: pettyPopoverIn 0.15s ease;
|
|
}
|
|
@keyframes pettyPopoverIn {
|
|
from { opacity: 0; transform: translateY(-4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
[data-part="toast"] {
|
|
animation: pettySlideIn 0.3s ease;
|
|
}
|
|
@keyframes pettySlideIn {
|
|
from { opacity: 0; transform: translateX(100%); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
|
|
petty-loading-indicator { display: inline-flex; align-items: center; justify-content: center; position: relative; }
|
|
petty-loading-indicator [data-part="container"] { display: flex; align-items: center; justify-content: center; position: relative; }
|
|
|
|
petty-loading-indicator [data-part="indicator"] {
|
|
border-radius: 50%;
|
|
border: 3px solid rgba(54, 192, 241, 0.12);
|
|
border-top-color: #36c0f1;
|
|
border-right-color: rgba(54, 192, 241, 0.4);
|
|
animation: pettyLoadSpin 1.1s linear infinite, pettyLoadPulse 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
petty-loading-indicator [data-part="container"]::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -2px;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
border-bottom-color: rgba(54, 192, 241, 0.2);
|
|
border-left-color: rgba(54, 192, 241, 0.1);
|
|
animation: pettyLoadSpin 2.4s linear infinite reverse;
|
|
}
|
|
|
|
@keyframes pettyLoadSpin {
|
|
to { rotate: 360deg; }
|
|
}
|
|
|
|
@keyframes pettyLoadPulse {
|
|
0%, 100% { box-shadow: 0 0 8px rgba(54, 192, 241, 0.15); }
|
|
50% { box-shadow: 0 0 20px rgba(54, 192, 241, 0.35); }
|
|
}
|