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

/* ============================================================
 * rustio-admin / pages / list  —  model list (console)
 *
 * The list reuses the console masthead + command bar + board
 * (layout/console.css) and the DS button/form/data/navigation
 * components. This sheet adds the glue for the framework-specific
 * interactive controls the DS kit doesn't ship: the JS dropdowns
 * (filters / sort / rows / saved views), filter chips, the active-
 * filter pills, the bulk-select reveal, and the filter-form bodies.
 * All built on DS tokens.
 * ============================================================ */

/* Icon sizing fallback (icon() emits sized SVGs; this keeps inline
 * label-adjacent icons aligned). */
.rio-icon { inline-size: 1em; block-size: 1em; flex: none; vertical-align: -0.12em; }
.rio-chev { inline-size: 15px; block-size: 15px; flex: none; opacity: 0.7; }

/* ---- JS dropdowns (filters / sort / rows / saved views) ---- */
.rio-dropdown { position: relative; display: inline-flex; }
.rio-dropdown-panel {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 40; /* above the sticky table header (z-index:1); matches the topbar menu (z-index:40) */
  min-inline-size: 220px;
  display: none;
  background: var(--rio-overlay);
  border: 1px solid var(--rio-line);
  border-radius: var(--rio-radius-lg);
  box-shadow: var(--rio-shadow-lg), var(--rio-highlight-top);
  padding: 6px;
}
.rio-dropdown-toggle[aria-expanded="true"] + .rio-dropdown-panel { display: block; }
.rio-dropdown-toggle.is-active {
  border-color: var(--rio-rust);
  color: var(--rio-rust);
}
.rio-dropdown-section { padding: 6px; }
.rio-dropdown-section + .rio-dropdown-section { border-block-start: 1px solid var(--rio-line); }
.rio-dropdown-label {
  display: block;
  font-family: var(--rio-font-mono);
  font-size: var(--rio-text-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rio-text-faint);
  margin-block-end: 6px;
}
.rio-dropdown-menu { display: flex; flex-direction: column; gap: 1px; }
.rio-dropdown-footer { padding: 6px; border-block-start: 1px solid var(--rio-line); }
.rio-dropdown-badge {
  display: inline-grid; place-items: center;
  min-inline-size: 20px; block-size: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--rio-rust-tint-2); color: var(--rio-rust);
  font-family: var(--rio-font-mono); font-size: var(--rio-text-13); font-weight: 600; /* 14px — contract floor */
}

/* ---- Filter chips (single-select filter + rows-per-page) ---- */
.rio-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rio-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: var(--rio-radius-pill);
  border: 1px solid var(--rio-line); background: var(--rio-surface);
  color: var(--rio-text); font-size: var(--rio-text-13); text-decoration: none;
  transition: border-color var(--rio-dur-fast) var(--rio-ease), background var(--rio-dur-fast) var(--rio-ease);
}
.rio-chip:hover { border-color: var(--rio-line-strong); background: var(--rio-raised); }
.rio-chip.is-active {
  border-color: var(--rio-rust); background: var(--rio-rust-tint); color: var(--rio-rust);
  font-weight: var(--rio-weight-semibold);
}

/* ---- Active-filter pills strip ---- */
.rio-active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-block-start: -8px;
}
.rio-active-filters-label {
  font-family: var(--rio-font-mono); font-size: var(--rio-text-12);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--rio-text-faint);
}
.rio-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; border-radius: var(--rio-radius-pill);
  background: var(--rio-rust-tint); color: var(--rio-text);
  font-size: var(--rio-text-13);
}
.rio-active-pill-key { color: var(--rio-text-mute); }
.rio-active-pill-x {
  display: inline-grid; place-items: center;
  inline-size: 18px; block-size: 18px; border-radius: 999px;
  color: var(--rio-text-mute); text-decoration: none; line-height: 1;
}
.rio-active-pill-x:hover { background: var(--rio-rust-tint-2); color: var(--rio-rust); }
.rio-active-filters-clear { color: var(--rio-rust); font-size: var(--rio-text-13); text-decoration: none; }
.rio-active-filters-clear:hover { text-decoration: underline; }

/* ---- Bulk-select reveal ---- */
.rio-bulk-form .rio-bulkbar { display: none; }
.rio-bulk-form.is-active .rio-bulkbar { display: flex; }

/* ---- Sortable table headers ---- */
.rio-dtable thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.rio-dtable thead th a:hover { color: var(--rio-text-hi); }
.rio-dtable thead th.is-sort-asc a,
.rio-dtable thead th.is-sort-desc a { color: var(--rio-rust); }

/* ---- Filter-form bodies (FK autocomplete / multi-select / date) ---- */
.rio-fk-autocomplete, .rio-multi-select, .rio-date-range { display: flex; flex-direction: column; gap: 10px; min-inline-size: 240px; }
.rio-fk-autocomplete-wrap { position: relative; }
.rio-fk-autocomplete-results {
  list-style: none; margin: 4px 0 0; padding: 4px;
  border: 1px solid var(--rio-line); border-radius: var(--rio-radius-md);
  background: var(--rio-overlay); max-block-size: 220px; overflow: auto;
}
.rio-fk-autocomplete-actions, .rio-multi-select-actions, .rio-date-range-actions { display: flex; gap: 8px; }
.rio-multi-select-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-block-size: 240px; overflow: auto; }
.rio-multi-select-option { display: flex; align-items: center; gap: 8px; font-size: var(--rio-text-14); cursor: pointer; }
.rio-date-range-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--rio-text-13); color: var(--rio-text-mute); }
.rio-date-range { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }