| @import "@primer/css/support/variables/typography.scss"; | |
| $ol-circled-reduce-diameter: 2px; | |
| // line-height is 24 pixels (16 * 1.5), and we want a 22px diameter but respect the line-height. | |
| .markdownBody { | |
| > :global(.ghd-tool) > ol:not(:global(.no-styling)), | |
| > ol:not(:global(.no-styling)) { | |
| // We will remove the default list style and use contrasting circled counter instead | |
| list-style: none; | |
| counter-reset: markdown-ordered-list; | |
| // So that list items have the same margin regardless of `li > p` or `li > [text]` | |
| > li { | |
| margin-bottom: 16px; | |
| } | |
| // This is the contrasting circled counter for the list item | |
| > li::before { | |
| counter-increment: markdown-ordered-list; | |
| content: counter(markdown-ordered-list); | |
| float: left; | |
| width: calc(1.5rem - $ol-circled-reduce-diameter); | |
| margin-left: -2rem; | |
| margin-top: calc($ol-circled-reduce-diameter / 2); | |
| font-size: $h5-size; | |
| line-height: calc(1.5rem - $ol-circled-reduce-diameter); | |
| font-weight: 500; | |
| text-align: center; | |
| background-color: var(--color-fg-default); | |
| color: var(--color-canvas-default); | |
| border-radius: 50%; | |
| } | |
| // Any list below top level uses plain letters | |
| ol { | |
| list-style-type: lower-alpha; | |
| } | |
| } | |
| } | |