fc-dioxus 0.1.2

Typed, accessible Dioxus components over future-css
Documentation 
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

/*!
 * future-css -- https://github.com/estith/future-css
 * A styling system for multi-language, multi-platform systems
 *
 * Regenerate with: npm run build
 * This file is generated; edit the sources in src/ instead.
 */
/*! future-css -- transfer
 * Content wraps rather than eliding values needed to understand or authorize work.
 * Controls compose the button/field/check components and retain their state styles.
 * No motion is introduced; reduced-motion needs no additional override.
 */
@layer fc.components {
  .fc-transfer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fc-space-3);
    min-inline-size: 0;
    padding: var(--fc-space-4);
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--fc-color-text-default);
    background-color: var(--fc-color-bg-surface);
    border: var(--fc-border-width-thin) solid var(--fc-color-border-subtle);
    border-radius: var(--fc-radius-lg);
  }
  .fc-transfer__title { margin: 0; font-size: var(--fc-font-size-md); font-weight: var(--fc-font-weight-semibold); }
  .fc-transfer__meta { margin: 0; color: var(--fc-color-text-muted); font-size: var(--fc-font-size-sm); }
  .fc-transfer__actions { display: flex; flex-wrap: wrap; gap: var(--fc-space-2); }
  .fc-transfer[data-fc-state="error"],
  .fc-transfer[data-fc-state="denied"] { border-inline-start: var(--fc-space-1) solid var(--fc-color-danger-border); }
  .fc-transfer[data-fc-state="pending"],
  .fc-transfer[data-fc-state="queued"],
  .fc-transfer[data-fc-state="running"],
  .fc-transfer[data-fc-state="streaming"] { border-inline-start: var(--fc-space-1) solid var(--fc-color-accent-border); }
  .fc-transfer[data-fc-state="complete"] { border-style: double; }
  .fc-transfer[data-fc-state="aborted"] { border-style: dashed; }
  @media (forced-colors: active) {
    .fc-transfer { color: CanvasText; background-color: Canvas; border-color: CanvasText; }
  }
}