diff --git a/docs/syntax/task-lists.md b/docs/syntax/task-lists.md index d16b97f5d..8b64c8490 100644 --- a/docs/syntax/task-lists.md +++ b/docs/syntax/task-lists.md @@ -13,7 +13,7 @@ Task lists let you render checkboxes in documentation. Use `- [ ]` for unchecked - [x] Set up the project - [x] Install dependencies - [ ] Write tests - - [x] Unit tests + - [x] Unit tests with [An Internal Link](#basic-task-list) - [ ] Integration tests - [ ] Deploy diff --git a/src/Elastic.Documentation.Site/Assets/markdown/list.css b/src/Elastic.Documentation.Site/Assets/markdown/list.css index 116cabd1c..7a588836b 100644 --- a/src/Elastic.Documentation.Site/Assets/markdown/list.css +++ b/src/Elastic.Documentation.Site/Assets/markdown/list.css @@ -4,6 +4,7 @@ line-height: 1.5em; letter-spacing: 0; margin-left: 1.5em; + li::marker { @apply text-grey-80; } @@ -16,18 +17,23 @@ ul { list-style-type: disc; } + ul > li > ul { list-style-type: square; } + ul > li > ul > li > ul { list-style-type: circle; } + ul > li > ul > li > ul > li > ul { list-style-type: disc; } + ul > li > ul > li > ul > li > ul > li > ul { list-style-type: square; } + ul > li > ul > li > ul > li > ul > li > ul > li > ul { list-style-type: circle; } @@ -35,18 +41,23 @@ ol { list-style-type: decimal; } + ol > li > ol { list-style-type: lower-alpha; } + ol > li > ol > li > ol { list-style-type: lower-roman; } + ol > li > ol > li > ol > li > ol { list-style-type: decimal; } + ol > li > ol > li > ol > li > ol > li > ol { list-style-type: lower-alpha; } + ol > li > ol > li > ol > li > ol > li > ol > li > ol { list-style-type: lower-roman; } @@ -56,14 +67,15 @@ margin-left: 0.25em; li.task-list-item { - display: flex; - align-items: baseline; - gap: 0.5em; + position: relative; + padding-left: 1.5em; } input[type='checkbox'] { + position: absolute; + left: 0; + top: 0.15em; margin: 0; - flex-shrink: 0; width: 1em; height: 1em; cursor: default;