Task lists - failed tasks?

[paulmmoloney]

https://squidfunk.github.io/mkdocs-material/reference/lists/#using-task-lists

Is there a way of specifying a task has failed, does anyone know? (That is, having a red cross rather than a green tick).

P.

[kamilkrzyskow]

Hello @oceanclub1970,
since the Tasklists uses <input> checkboxes there are only 2 states, checked and unchecked. However, I think you could override the CSS for a given list entry via attr_list. You'd add a class {: .task-failed } and override the CSS to change the appearance of the checked tick.

I didn't try it, but it should be possible.

Additional reference:

• GitHub-like Tasklist icons #2361
• https://facelessuser.github.io/pymdown-extensions/extensions/tasklist/#styling-with-css-custom-tasklist

[kamilkrzyskow]

Hey @oceanclub1970 have you managed to make progress with the idea?

[paulmmoloney]

I'm afraid I haven't had a chance yet. Hope to look into it soon.

[kamilkrzyskow]

I'll see if I can make an example later today.

[kamilkrzyskow]

Here you go @oceanclub1970,
tasklist-failed.zip

- [x] Success state
- [ ] Empty state
- [x] Failed state
{: .task-failed }

The theme uses the :octicons-check-circle-fill-24: emoji:

mkdocs-material/src/templates/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss

Line 30 in 6b239db

--md-tasklist-icon--checked: svg-load("octicons/check-circle-fill-24.svg");

So I chose the :octicons-x-circle-fill-24: to match it.

:root {
  --md-tasklist-icon--failed: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm8.036-4.024a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L10.939 12l-2.963 2.963a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L12 13.06l2.963 2.964a.75.75 0 0 0 1.061-1.06L13.061 12l2.963-2.964a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L12 10.939Z"/></svg>');
}

.md-typeset .task-failed [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: #ff1744;
  -webkit-mask-image: var(--md-tasklist-icon--failed);
  mask-image: var(--md-tasklist-icon--failed);
}

You can change the icon by replacing the <svg> part in the CSS after the charset=utf-8,, also make sure the whole thing is on 1 code line.
Search for the emoji here, then open the SVG from the search result in a new tab and open the text source view in your browser.
https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/

Reference:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

---

[paulmmoloney]

Hey, that's brilliant; thanks for doing that. Much appreciated!