Merge branch 'feature/ISTWCMS-5664-m26lebla-fix-nested-lists' into '1.0.x'

ISTWCMS-5664: css to reset and allow for correct display of nested lists

See merge request !44

src/patterns/01-core/elements/_ordered-list.scss

 // @file
 // Ordered list styles.
-
-:where(ol) {
+ol{
   padding-inline-start: var(--size-4);
   margin: 0 0 var(--size-2);
-  ol{
-    list-style-type: lower-alpha;
-    margin: (var(--size-2) / 2) 0 0;
-    li ol {
-      list-style-type: lower-roman;
-    }
-  }
-}
-
-.lower-alpha {
-  list-style-type: lower-alpha;
-  li ol {
+  &.lower-alpha {
     list-style-type: lower-alpha;
   }
-}
-.upper-alpha{
-  list-style-type: upper-alpha;
-  li ol {
+  &.upper-alpha{
     list-style-type: upper-alpha;
   }
-}
-.lower-roman {
-  list-style-type: lower-roman;
-  li ol {
+  &.lower-roman {
     list-style-type: lower-roman;
   }
-}
-.upper-roman{
-  list-style-type: upper-roman;
-  li ol {
+  &.upper-roman{
     list-style-type: upper-roman;
   }
-}
-.decimal {
-  list-style: decimal outside none;
-  margin: 0;
-  padding: 0 0 var(--size-2) var(--size-2);
+  &.decimal {
+    list-style: decimal outside none;
+    margin: 0;
+    padding: 0 0 var(--size-2) var(--size-2);
 
-  li {
-    counter-increment: item;
-    display: table;
-    margin: var(--size-1) 0;
+    li {
+      list-style-type: decimal;
+      counter-increment: item;
+      display: table;
+      margin: var(--size-1) 0;
 
-    &::before {
-      content: counters(item, ".") ". ";
-      display: table-cell;
-      padding-right: 0.6rem;
-    }
+      &::before {
+        content: counters(item, ".") ". ";
+        display: table-cell;
+        padding-right: 0.6rem;
+      }
 
-    li {
-      margin: 0.5rem 0;
+      li {
+        margin: 0.5rem 0;
 
-      li::before {
-        content: counters(item, ".") " ";
+        li::before {
+          content: counters(item, ".") " ";
+        }
       }
-    }
 
-    ol {
-      counter-reset: item;
-      list-style: square outside none;
-      list-style-type: none;
-      margin: 0;
-      padding: 0;
+      ol {
+        counter-reset: item;
+        list-style: square outside none;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
     }
   }
 }
+//:where(ol) {
+//  padding-inline-start: var(--size-4);
+//  margin: 0 0 var(--size-2);
+//  ol{
+//    list-style-type: lower-alpha;
+//    margin: (var(--size-2) / 2) 0 0;
+//    li ol {
+//      list-style-type: lower-roman;
+//    }
+//  }
+//}
+//
+//.lower-alpha {
+//  list-style-type: lower-alpha;
+//  li ol {
+//    list-style-type: lower-alpha;
+//  }
+//}
+//.upper-alpha{
+//  list-style-type: upper-alpha;
+//  li ol {
+//    list-style-type: upper-alpha;
+//  }
+//}
+//.lower-roman {
+//  list-style-type: lower-roman;
+//  li ol {
+//    list-style-type: lower-roman;
+//  }
+//}
+//.upper-roman{
+//  list-style-type: upper-roman;
+//  li ol {
+//    list-style-type: upper-roman;
+//  }
+//}
+//.decimal {
+//  list-style: decimal outside none;
+//  margin: 0;
+//  padding: 0 0 var(--size-2) var(--size-2);
+//
+//  li {
+//    counter-increment: item;
+//    display: table;
+//    margin: var(--size-1) 0;
+//
+//    &::before {
+//      content: counters(item, ".") ". ";
+//      display: table-cell;
+//      padding-right: 0.6rem;
+//    }
+//
+//    li {
+//      margin: 0.5rem 0;
+//
+//      li::before {
+//        content: counters(item, ".") " ";
+//      }
+//    }
+//
+//    ol {
+//      counter-reset: item;
+//      list-style: square outside none;
+//      list-style-type: none;
+//      margin: 0;
+//      padding: 0;
+//    }
+//  }
+//}

src/patterns/01-core/elements/_unordered-list.scss

 // @file
 // Unordered list styles.
-
-:where(ul) {
-  list-style-type: disc;
+ul {
   margin: 0 0 var(--size-2);
-  padding: 0 0 0 var(--size-4); // LTR
-  ul {
-    list-style-type: circle;
+  padding: 0 0 0 var(--size-3);
+  ul{
     margin: (var(--size-2) / 2) 0 0;
-    li > ul {
-      list-style-type: disc;
-    }
   }
-}
-.disc {
-  list-style: disc;
-  ul {
+  &.disc {
     list-style-type: disc;
-    li > ul {
-      list-style-type: disc;
-    }
   }
-}
-.square {
-  list-style: square;
-  ul {
+  &.square {
     list-style-type: square;
-    li > ul {
-      list-style-type: square;
-    }
   }
-}
-.circle {
-  list-style-type: circle;
-  ul {
+  &.circle {
     list-style-type: circle;
-    li > ul {
-      list-style-type: circle;
-    }
   }
 }
+//
+//:where(ul) {
+//  list-style-type: disc;
+//  margin: 0 0 var(--size-2);
+//  padding: 0 0 0 var(--size-4); // LTR
+//  ul {
+//    list-style-type: circle;
+//    margin: (var(--size-2) / 2) 0 0;
+//    li > ul {
+//      list-style-type: disc;
+//    }
+//  }
+//}
+//.disc {
+//  list-style: disc;
+//  ul {
+//    list-style-type: disc;
+//    li > ul {
+//      list-style-type: disc;
+//    }
+//  }
+//}
+//.square {
+//  list-style: square;
+//  ul {
+//    list-style-type: square;
+//    li > ul {
+//      list-style-type: square;
+//    }
+//  }
+//}
+//.circle {
+//  list-style-type: circle;
+//  ul {
+//    list-style-type: circle;
+//    li > ul {
+//      list-style-type: circle;
+//    }
+//  }
+//}