Merge pull request #1242 from dpc-sdp/feature/R20-1459-bullet-points

[R20-1459] add support for list types
dpc-sdp · Jul 1, 2024 · ba38fc3 · ba38fc3
2 parents b91226a + 4a5ef01
commit ba38fc3
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/packages/ripple-ui-core/src/styles/utilities/_lists.css b/packages/ripple-ui-core/src/styles/utilities/_lists.css
@@ -18,6 +18,22 @@
     margin-left: var(--rpl-sp-5);
   }
 
+  &[type='i'] {
+    list-style-type: lower-roman;
+  }
+
+  &[type='I'] {
+    list-style-type: upper-roman;
+  }
+
+  &[type='a'] {
+    list-style-type: lower-latin;
+  }
+
+  &[type='A'] {
+    list-style-type: upper-latin;
+  }
+
   li {
     padding: 0 0 var(--rpl-sp-2) var(--rpl-sp-2);
 
@@ -65,28 +81,24 @@
   letter-spacing: var(--rpl-type-ls-1);
   margin-left: var(--rpl-sp-4);
   padding-left: var(--rpl-sp-4);
-  list-style-type: none;
+  list-style-type: disc;
 
   @media (--rpl-bp-l) {
     margin-left: var(--rpl-sp-5);
   }
 
+  &[type='circle'] {
+    list-style-type: circle;
+  }
+
+  &[type='square'] {
+    list-style-type: square;
+  }
+
   > li {
     position: relative;
     padding: 0 0 var(--rpl-sp-2) var(--rpl-sp-2);
 
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 1.1rem;
-      left: -0.9rem;
-      background-color: currentcolor;
-      width: 0.5rem;
-      height: 0.5rem;
-      border-radius: 50%;
-    }
-
     &:last-of-type {
       padding-bottom: 0;
     }
@@ -120,7 +132,7 @@
         display: block;
         position: absolute;
         top: 0;
-        left: -1rem;
+        left: calc(var(--rpl-sp-3) * -1);
         background-color: transparent;
       }
     }