Merge pull request #2462 from boltdesignsystem/feature/DS-748-Update-…

…ordered-list-formats-in-Article-element DS 748 update ordered list formats in article element
boltdesignsystem · Mar 29, 2022 · 08aff4d · 08aff4d
2 parents d480467 + adc8011
commit 08aff4d
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 0 deletions.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/20-elements/article/05-article.twig b/docs-site/src/pages/pattern-lab/_patterns/20-elements/article/05-article.twig
@@ -142,6 +142,52 @@
         First level ordered item
       </li>
     </ol>
+    <ol>
+      <li>
+        First level ordered item 1
+      </li>
+      <li>
+        First level ordered item 2
+        <ol>
+          <li>Second level ordered item 1</li>
+          <li>
+            Second level ordered item 2
+            <ol>
+              <li>
+                Third level ordered item 1
+              </li>
+              <li>
+                Third level ordered item 2
+                <ol>
+                  <li>Fourth level ordered item 1</li>
+                  <li>Fourth level ordered item 2
+                    <ol>
+                      <li>Fifth level ordered item 1</li>
+                      <li>Fifth level ordered item 2
+                        <ol>
+                          <li>Sixth level ordered item 1</li>
+                          <li>Sixth level ordered item 2</li>
+                          <li>Sixth level ordered item 3</li>
+                        </ol>
+                      </li>
+                      <li>Fifth level ordered item 3</li>
+                    </ol>
+                  </li>
+                  <li>Fourth level ordered item 3</li>
+                </ol>
+              </li>
+              <li>Third level ordered item 3</li>
+            </ol>
+          </li>
+          <li>
+            Second level ordered item 3
+          </li>
+        </ol>
+      </li>
+      <li>
+        First level ordered item 3
+      </li>
+    </ol>
     <details>
       <summary>Summary sums up the details</summary>
       <p>

diff --git a/packages/elements/bolt-article/src/article.scss b/packages/elements/bolt-article/src/article.scss
@@ -121,6 +121,21 @@ $_bolt-article-element-spacing: var(--bolt-spacing-y-medium);
     }
   }
 
+  ol,
+  ol > li > ol > li > ol > li > ol {
+    list-style-type: decimal;
+  }
+
+  ol > li > ol,
+  ol > li > ol > li > ol > li > ol > li > ol {
+    list-style-type: lower-alpha;
+  }
+
+  ol > li > ol > li > ol,
+  ol > li > ol > li > ol > li > ol > li > ol > li > ol {
+    list-style-type: upper-roman;
+  }
+
   header,
   section {
     margin: 0 0 calc(#{$_bolt-article-element-spacing} * 1.5) 0;