| 41 |
41 |
|
//! write it back, at which point it is a form model.
|
| 42 |
42 |
|
|
| 43 |
43 |
|
use crate::{Emit, class, push_class};
|
| 44 |
|
- |
use makeover_layout::{Choice, Depth, Field, FieldKind, Intent as _, Selector, State};
|
|
44 |
+ |
use makeover_layout::{Choice, Depth, Field, FieldKind, Selector};
|
| 45 |
45 |
|
use std::fmt::Write as _;
|
| 46 |
46 |
|
|
| 47 |
47 |
|
/// A string that is already markup, and is emitted without escaping.
|
| 987 |
987 |
|
pub(crate) fn suggestion_rules(opts: &Emit) -> String {
|
| 988 |
988 |
|
let list = class("form-suggestions", opts);
|
| 989 |
989 |
|
let entry = class("form-suggestion", opts);
|
| 990 |
|
- |
let why = class("form-suggestion-why", opts);
|
|
990 |
+ |
let detail = class("form-suggestion-detail", opts);
|
| 991 |
991 |
|
let mut css = String::new();
|
| 992 |
992 |
|
|
| 993 |
993 |
|
let _ = writeln!(css, ".{list}:empty {{\n display: none;\n}}");
|
| 994 |
994 |
|
// Over what it covers, which is what a list of candidates is even in flow:
|
| 995 |
995 |
|
// it is answering the box above it and goes away when the answer is taken.
|
| 996 |
996 |
|
css.push_str(&crate::depth_rule(&list, Depth::Overlay));
|
| 997 |
|
- |
// An entry answers a click, so it gets every state one implies -- including
|
| 998 |
|
- |
// the disabled rule, which is what draws the candidate that cannot be
|
| 999 |
|
- |
// picked and is why `aria-disabled` is the mark rather than a class.
|
|
997 |
+ |
// An entry answers a click, so it gets every state one implies.
|
| 1000 |
998 |
|
css.push_str(&crate::interactive_rules(&entry, Depth::Flat, opts));
|
| 1001 |
999 |
|
// The keyboard's highlight and the pointer's are the same surface. They are
|
| 1002 |
1000 |
|
// the same fact told two ways, and a list where arrowing and hovering look
|
| 1012 |
1010 |
|
css,
|
| 1013 |
1011 |
|
".{entry}[aria-selected=\"true\"] {{\n background: var(--hover-surface);\n}}"
|
| 1014 |
1012 |
|
);
|
| 1015 |
|
- |
let _ = writeln!(
|
| 1016 |
|
- |
css,
|
| 1017 |
|
- |
".{why} {{\n color: var(--{});\n}}",
|
| 1018 |
|
- |
State::Disabled.token()
|
| 1019 |
|
- |
);
|
|
1013 |
+ |
// The second line, muted rather than disabled. `1fcf2e9b` replaced the
|
|
1014 |
+ |
// unavailable reason this rule used to draw: a candidate carries no
|
|
1015 |
+ |
// `unavailable`, and what sits beside the label now is what tells one row
|
|
1016 |
+ |
// from another that reads the same. Disabled would say the row cannot be
|
|
1017 |
+ |
// picked, which is the opposite of what the detail is for.
|
|
1018 |
+ |
let _ = writeln!(css, ".{detail} {{\n color: var(--content-muted);\n}}");
|
| 1020 |
1019 |
|
|
| 1021 |
1020 |
|
css
|
| 1022 |
1021 |
|
}
|