Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
Add different counter-style for ordered lists based on their depth
Browse files Browse the repository at this point in the history
Summary:
Draft.js have only 1 type of counter-style for ordered lists - the numeric.
Current Draft.js:
https://pxl.cl/d7zZ

Quip have a 3 different counter-styles, based on the depth:
https://pxl.cl/d7x6

This can be added by implementing the second argument to the counter function:
 content: counter(ol1) ". ";
to:
  content: counter(ol1,lower-alpha) ". ";

For more info: https://css-tricks.com/numbering-in-style/
Browser support is excellent: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Browser_compatibility (for Basic support)

Reviewed By: flarnie

Differential Revision: D7840010

fbshipit-source-id: 6655566baafd9c03468c1b1b7c83bdb5ecf1ada6
  • Loading branch information
NoamELB authored and facebook-github-bot committed May 2, 2018
1 parent 06c0ee6 commit d2a3ae8
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions src/component/utils/DraftStyleDefault.css
Original file line number Diff line number Diff line change
Expand Up @@ -151,12 +151,12 @@
}

.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth1:before {
content: counter(ol1) ". ";
content: counter(ol1,lower-alpha) ". ";
counter-increment: ol1;
}

.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth2:before {
content: counter(ol2) ". ";
content: counter(ol2,lower-roman) ". ";
counter-increment: ol2;
}

Expand All @@ -166,7 +166,7 @@
}

.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth4:before {
content: counter(ol4) ". ";
content: counter(ol4,lower-alpha) ". ";
counter-increment: ol4;
}

Expand Down

0 comments on commit d2a3ae8

Please sign in to comment.