canonrs-server 0.1.0

CanonRS server-side rendering support
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/* ============================================
   ANIMATE
   Family I: Animation
   ============================================ */

@keyframes rs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rs-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes rs-slide-in {
  from { opacity: 0; transform: translateY(var(--animate-slide-distance)); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rs-slide-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--animate-slide-distance)); }
}

@keyframes rs-scale-in {
  from { opacity: 0; transform: scale(var(--animate-scale-from)); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rs-scale-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(var(--animate-scale-from)); }
}

/* Base — sem animacao ate ativar */
[data-rs-animate] {
  animation-name: none;
  animation-duration: var(--animate-duration);
  animation-timing-function: var(--animate-ease);
  animation-delay: var(--animate-delay);
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

/* Dispara animacao so quando active */
[data-rs-animate][data-rs-state~="active"][data-rs-animation="fade-in"]   { animation-name: rs-fade-in; }
[data-rs-animate][data-rs-state~="active"][data-rs-animation="fade-out"]  { animation-name: rs-fade-out; }
[data-rs-animate][data-rs-state~="active"][data-rs-animation="slide-in"]  { animation-name: rs-slide-in; }
[data-rs-animate][data-rs-state~="active"][data-rs-animation="slide-out"] { animation-name: rs-slide-out; }
[data-rs-animate][data-rs-state~="active"][data-rs-animation="scale-in"]  { animation-name: rs-scale-in; }
[data-rs-animate][data-rs-state~="active"][data-rs-animation="scale-out"] { animation-name: rs-scale-out; }

/* Easing */
[data-rs-animate][data-rs-easing="ease-in"]     { animation-timing-function: ease-in; }
[data-rs-animate][data-rs-easing="ease-out"]    { animation-timing-function: ease-out; }
[data-rs-animate][data-rs-easing="ease-in-out"] { animation-timing-function: ease-in-out; }
[data-rs-animate][data-rs-easing="linear"]      { animation-timing-function: linear; }

/* Preview/demo — força infinite para visualização contínua */
[data-rs-showcase-preview-hero] [data-rs-animate][data-rs-state~="active"] {
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--motion-duration-slow);
}

/* Inactive — para animacao */
[data-rs-animate][data-rs-state~="inactive"] {
  animation-name: none;
}

/* Reduced motion */
[data-rs-animate][data-rs-animate-reduced] {
  animation: none;
  opacity: 1;
}