From d2a3ae82baeb9f14c6f8a882a5c93f87afec84dc Mon Sep 17 00:00:00 2001 From: Noam Elboim Date: Wed, 2 May 2018 10:23:46 -0700 Subject: [PATCH] Add different counter-style for ordered lists based on their depth 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 --- src/component/utils/DraftStyleDefault.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/utils/DraftStyleDefault.css b/src/component/utils/DraftStyleDefault.css index 956accd0c9..4347bdb508 100644 --- a/src/component/utils/DraftStyleDefault.css +++ b/src/component/utils/DraftStyleDefault.css @@ -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; } @@ -166,7 +166,7 @@ } .public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth4:before { - content: counter(ol4) ". "; + content: counter(ol4,lower-alpha) ". "; counter-increment: ol4; }