Correct List styles

ably · Mar 24, 2022 · 355bf2f · 355bf2f
1 parent 84e2200
commit 355bf2f
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/preview/app/views/pages/index.html.erb b/preview/app/views/pages/index.html.erb
@@ -216,6 +216,8 @@
           <div class="mb-40">
             <h3 class="text-h2 font-medium mb-24">Lists</h3>
 
+            <p class="ui-text-p1 mb-24">Note that lists support having li items and li items with children, while keeping the same margin (in these examples, the ordered list has paragraphs).
+
             <div class="mb-40">
               <h4 class="text-h3 font-medium mb-16">Unordered</h4>
 
@@ -236,6 +238,26 @@
               <p class="ui-text-p1 mb-24">This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.</p>
             </div>
 
+            <div class="mb-40">
+              <h4 class="text-h3 font-medium mb-16">Ordered</h4>
+
+              <p class="ui-text-p1 mb-24">This is the preceding paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.</p>
+
+              <ol class="ui-ordered-list">
+                <li><p>Pellentesque consequat elit eget tristique sagittis. Etiam et erat et lorem elementum commodo. Aenean congue diam a nibh accumsan tincidunt.</p>
+                   <ol>
+                     <li><p>In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.<?p>
+                       <ol>
+                         <li><p>Etiam et erat et lorem elementum commodo.</p></li>
+                       </ol>
+                     </li>
+                   </ol>
+                </li>
+              </ol>
+
+              <p class="ui-text-p1 mb-24">This is the following paragraph sed nisl id lectus scelerisque facilisis consectetur eget nisl. Morbi scelerisque felis vel ullamcorper viverra. In id ante quis quam sodales auctor in a ante. Maecenas faucibus, diam sit amet sollicitudin pellentesque, est nulla pellentesque sapien.</p>
+            </div>
+
             <div class="mb-40">
               <h4 class="text-h3 font-medium mb-16">Unordered list with emphasis</h4>
 

diff --git a/src/core/styles/text.css b/src/core/styles/text.css
@@ -102,10 +102,24 @@
     @apply list-disc ml-32 mb-24;
   }
 
+  .ui-ordered-list {
+    @apply text-p1 font-light text-cool-black;
+    @apply ml-32 mb-24 list-decimal;
+  }
+
+  .ui-unordered-list li > *:last-of-type:not(ul):not(ol),
+  .ui-ordered-list li > *:last-of-type:not(ul):not(ol) {
+    margin-bottom: 0;
+  }
+
   .ui-unordered-list ul {
     @apply ml-24 mt-16 list-circle;
   }
 
+  .ui-ordered-list ol {
+    @apply ml-24 mt-16 list-decimal;
+  }
+
   .ui-unordered-list ul ul {
     @apply list-square;
   }
@@ -125,11 +139,11 @@
 
   .ui-unordered-list-with-emphasis ul {
     margin-top: calc(var(--spacing-16) + var(--spacing-8));
-    @apply ml-24 list-disc;
+    @apply ml-24 list-circle;
   }
 
   .ui-unordered-list-with-emphasis ul ul {
-    @apply list-circle;
+    @apply list-square;
   }
 
   /* visited needs to come before :hover et all else it overrides them */