rustio-admin 0.31.0

Django Admin, but for Rust. A small, focused admin framework.
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
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

/* ============================================================
   RustIO — Buttons
   Variants: primary · secondary · ghost · subtle · danger
   Sizes: sm · md · lg   States: hover · active · focus · disabled · loading
   ============================================================ */

.rio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rio-space-8);
  block-size: 44px;                 /* contract §8.1: every button 44px */
  padding-inline: 20px;
  font-family: var(--rio-font-body);
  font-size: var(--rio-text-14);    /* 16px */
  font-weight: var(--rio-weight-bold); /* 700 */
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--rio-radius-control); /* 8px */
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: background var(--rio-dur-fast) var(--rio-ease),
              border-color var(--rio-dur-fast) var(--rio-ease),
              color var(--rio-dur-fast) var(--rio-ease),
              box-shadow var(--rio-dur-fast) var(--rio-ease);
}
.rio-btn:focus-visible {
  outline: 2px solid var(--rio-rust);
  outline-offset: 2px;
}

/* Sizes — base IS the contract 44px; --md/--lg match it (no per-size opt-in to
   reach 44px). --sm stays a deliberate compact exception for dense toolbars. */
.rio-btn--sm { block-size: 36px; padding-inline: 14px; }
.rio-btn--md { block-size: 44px; padding-inline: 20px; font-size: var(--rio-text-14); }
.rio-btn--lg { block-size: 44px; padding-inline: 24px; font-size: var(--rio-text-15); }

/* Primary — copper (solid fill, white text in BOTH themes) */
.rio-btn--primary {
  background: var(--rio-rust-solid);
  color: var(--rio-on-solid);
}
.rio-btn--primary:hover { background: var(--rio-rust-solid-hover); }
.rio-btn--primary:active { background: var(--rio-rust-solid-active); }

/* Secondary — bordered neutral */
.rio-btn--secondary {
  background: var(--rio-surface);
  color: var(--rio-text-hi);
  border-color: var(--rio-line-strong);
  box-shadow: var(--rio-shadow-sm);
}
.rio-btn--secondary:hover { background: var(--rio-raised); border-color: var(--rio-text-faint); }
.rio-btn--secondary:active { background: var(--rio-sunken); }

/* Ghost — transparent */
.rio-btn--ghost {
  background: transparent;
  color: var(--rio-text-hi);
  border-color: var(--rio-line);
}
.rio-btn--ghost:hover { background: var(--rio-raised); }
.rio-btn--ghost:active { background: var(--rio-sunken); }

/* Subtle — text-only with hover wash */
.rio-btn--subtle {
  background: transparent;
  color: var(--rio-text);
}
.rio-btn--subtle:hover { background: var(--rio-raised); color: var(--rio-text-hi); }
.rio-btn--subtle:active { background: var(--rio-sunken); }

/* Danger — solid #dc2626 (contract §8.1); explicit hover, no brightness filter */
.rio-btn--danger {
  background: var(--rio-danger);
  color: #fff;
}
.rio-btn--danger:hover { background: var(--rio-danger-hover); }
.rio-btn--danger:active { background: var(--rio-danger-hover); }

/* A button rendered as <a> must keep its OWN label colour while hovered.
   The global content-link rule `a:hover { color: var(--rio-rust-hover) }`
   (base/base.css) has specificity (0,1,1) and outranks a single
   `.rio-btn--*` class (0,1,0), so without these state-pinned rules a primary
   button's white label collapses into its darkened hover fill — both resolve
   to --rio-rust-hover — and the text appears to vanish. (0,2,0) wins. */
.rio-btn--primary:hover,
.rio-btn--primary:active { color: var(--rio-on-solid); }
.rio-btn--danger:hover,
.rio-btn--danger:active { color: #fff; }
.rio-btn--secondary:hover,
.rio-btn--secondary:active { color: var(--rio-text-hi); }
.rio-btn--ghost:hover,
.rio-btn--ghost:active { color: var(--rio-text-hi); }
.rio-btn--subtle:active { color: var(--rio-text-hi); }

/* Text-style actions (contract §8.1): a destructive SECONDARY action is a red
   text link with an icon — never a solid red button beside Save. Templates wire
   these up in Phase 5; the styles are defined here. */
.rio-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rio-space-8);
  font-family: var(--rio-font-body);
  font-size: var(--rio-text-14);   /* 16px */
  font-weight: var(--rio-weight-bold); /* 700 */
  color: var(--rio-text-hi);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.rio-action-link:hover { text-decoration: underline; }
.rio-action-link:focus-visible { outline: 2px solid var(--rio-rust); outline-offset: 2px; border-radius: var(--rio-radius-sm); }
.rio-action-link svg { inline-size: 1em; block-size: 1em; flex: none; }
.rio-action-link--danger { color: var(--rio-danger); }   /* "Delete", "Delete group" */
.rio-action-link--muted  { color: var(--rio-text-hi); }  /* "History" */
/* Pin the hover colour for the same reason as the buttons above: the global
   `a:hover` recolour (base.css) outranks a single class, so without these a
   destructive "Delete" link would drift from red to copper on hover. Each
   `(0,2,0)` rule wins; the underline-on-hover above still applies. */
.rio-action-link:hover { color: var(--rio-text-hi); }
.rio-action-link--danger:hover { color: var(--rio-danger); }
.rio-action-link--muted:hover { color: var(--rio-text-hi); }

/* Disabled */
.rio-btn:disabled,
.rio-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Loading — show the ◉ ring sweep, dim the label */
.rio-btn[data-loading="true"] { position: relative; color: transparent !important; pointer-events: none; }
.rio-btn[data-loading="true"] .rio-btn-label { visibility: hidden; }
.rio-btn-spinner {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1em;
  block-size: 1em;
  transform: translate(-50%, -50%);
}

/* Icon-only button */
.rio-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--rio-radius-md);
  background: transparent;
  color: var(--rio-text-mute);
  cursor: pointer;
  transition: background var(--rio-dur-fast) var(--rio-ease), color var(--rio-dur-fast) var(--rio-ease);
}
.rio-iconbtn:hover { background: var(--rio-raised); color: var(--rio-text-hi); }
.rio-iconbtn:active { background: var(--rio-sunken); }
.rio-iconbtn:focus-visible { outline: 2px solid var(--rio-rust); outline-offset: 2px; }
.rio-iconbtn--sm { inline-size: 30px; block-size: 30px; }
.rio-iconbtn--lg { inline-size: 44px; block-size: 44px; }
.rio-iconbtn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* Notification dot */
.rio-iconbtn--dot { position: relative; }
.rio-iconbtn--dot::after {
  content: ""; position: absolute; inset-block-start: 7px; inset-inline-end: 7px;
  inline-size: 7px; block-size: 7px; border-radius: 999px;
  background: var(--rio-rust); border: 2px solid var(--rio-surface);
}