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

/* ═══════════════════════════════════════════════════════════════
   HOVER CARD — Family A Overlay tokens compliant
   ═══════════════════════════════════════════════════════════════ */

[data-rs-hover-card] {
  position: relative;
  display: inline-flex;
}

[data-rs-hover-card-trigger] {
  cursor: pointer;
}

[data-rs-hover-card-content] {
  position: absolute;
  z-index: var(--hover-card-z-index);
  width: var(--hover-card-width);
  background: var(--hover-card-bg);
  color: var(--hover-card-fg);
  border: var(--hover-card-border-width) solid var(--hover-card-border-color);
  border-radius: var(--hover-card-radius);
  box-shadow: var(--hover-card-shadow);
  padding: var(--hover-card-padding);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity var(--hover-card-transition-duration) var(--hover-card-transition-ease),
    visibility var(--hover-card-transition-duration) var(--hover-card-transition-ease),
    transform var(--hover-card-transition-duration) var(--hover-card-transition-ease);
}

[data-rs-hover-card-content][data-rs-state~="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-rs-hover-card-content][data-rs-side="bottom"],
[data-rs-hover-card-content]:not([data-rs-side]) {
  top: calc(100% + var(--space-sm));
  bottom: auto;
  left: 0;
}

[data-rs-hover-card-content][data-rs-side="top"] {
  bottom: calc(100% + var(--space-sm));
  top: auto;
  left: 0;
  transform: none;
}

[data-rs-hover-card-content][data-rs-side="right"] {
  left: calc(100% + var(--space-xs));
  top: 0;
  transform: none;
}

[data-rs-hover-card-content][data-rs-side="left"] {
  right: calc(100% + var(--space-xs));
  left: auto;
  top: 0;
  transform: none;
}