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

/* ============================================================================
   TOGGLE_GROUP — Forms tokens compliant
   ============================================================================ */

[data-rs-toggle-group] {
  display: inline-flex;
  flex-direction: var(--toggle-group-direction);
  flex-wrap: var(--toggle-group-wrap);
  background: var(--toggle-group-bg);
  border-radius: var(--toggle-group-radius);
  border: 1px solid var(--toggle-group-border);
  overflow: hidden;
}

[data-rs-toggle-group] [data-rs-toggle] {
  padding-inline: var(--toggle-group-item-padding-x);
  padding-block: var(--toggle-group-item-padding-y);
  border: none;
  border-right: 1px solid var(--toggle-group-item-divider);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

[data-rs-toggle-group] [data-rs-toggle]:last-child {
  border-right: none;
}

[data-rs-toggle-group] [data-rs-toggle]:hover:not([data-rs-state~="disabled"]):not([data-rs-state~="on"]) {
  background: var(--toggle-group-item-hover-bg);
  outline: 1px solid var(--toggle-group-border);
  outline-offset: -1px;
}

[data-rs-toggle-group] [data-rs-toggle]:active:not([data-rs-state~="disabled"]) {
  transform: scale(0.97);
}

[data-rs-toggle-group] [data-rs-toggle]:focus-visible {
  outline: var(--focus-ring-width) solid var(--theme-action-focus-ring);
  outline-offset: -2px;
  z-index: 1;
}

[data-rs-toggle-group] [data-rs-state~="on"] {
  background: var(--toggle-on-bg);
  color: var(--toggle-on-fg);
}

[data-rs-toggle-group] [data-rs-state~="off"] {
  background: transparent;
}

[data-rs-toggle-group][data-rs-state~="disabled"],
[data-rs-toggle-group] [data-rs-state~="disabled"] {
  opacity: var(--toggle-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}