Nested lists do not indent

[willcumbie]

Bug Report

Nested unordered lists have identical indentation levels to the base list, making it difficult to visually distinguish them.

*The default style applies a padding of 0 to all <ul> elements. This overrides default CSS styling that would pad nested lists more than their containing lists. Additionally, since unordered lists receive the same class, regardless of whether they're nested or not, it's difficult to create custom themes that would fix this behavior. *

To Reproduce

1. Create an indented list in your mdx file:

* Unordered list item
* Additional list item
    * Nested list item 1
    * Nested list item 2
* Final list item 

2. Inspect the resulting HTML in your browser. You'll see that a nested <ul> element is correctly created, but that the styles make it difficult to distinguish from the parent list.

Expected behavior

Nested lists should receive an additional class, and the default theme should add padding to that class, creating the expected visual differentiation.

Environment

• OS: OSX 10.13.6
• Node/npm version: Node 11/npm 6

[XANOZOID]

Until this is fixed, my workaround was to create a basic component which would do this for me (I actually just inlined the code, but I plan on making a reusable component if that's possible). The dumb way was just to add marginLeft, based on the starting count of spaces/tabs, per item. It's probably possible to keep the styling consistent, too, by importing the docz-CSS-module somehow. I didn't bother with that though.

[pedronauck]

Fixed in the latest release canditate of v1