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

Commit d2a3ae8

Browse files
NoamELBfacebook-github-bot
authored andcommitted
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
1 parent 06c0ee6 commit d2a3ae8

File tree

1 file changed

+3
-3
lines changed

1 file changed

+3
-3
lines changed

src/component/utils/DraftStyleDefault.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -151,12 +151,12 @@
151151
}
152152

153153
.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth1:before {
154-
content: counter(ol1) ". ";
154+
content: counter(ol1,lower-alpha) ". ";
155155
counter-increment: ol1;
156156
}
157157

158158
.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth2:before {
159-
content: counter(ol2) ". ";
159+
content: counter(ol2,lower-roman) ". ";
160160
counter-increment: ol2;
161161
}
162162

@@ -166,7 +166,7 @@
166166
}
167167

168168
.public/DraftStyleDefault/orderedListItem.public/DraftStyleDefault/depth4:before {
169-
content: counter(ol4) ". ";
169+
content: counter(ol4,lower-alpha) ". ";
170170
counter-increment: ol4;
171171
}
172172

0 commit comments

Comments
 (0)