Refactor styling of nested content lists

client/src/components/ContentBlock.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{'hideable-element--greyed-out': hidden}"
-    class="content-block__container hideable-element">
+    class="content-block__container hideable-element content-list__parent">
     <div
       :class="specialClass"
       class="content-block">

client/src/components/content-blocks/ContentList.vue

@@ -4,7 +4,6 @@
       :key="item.id"
       class="content-list__item"
       v-for="(item, index) in items">
-      <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
       <slot
         :item="item"
         :index="index">
@@ -15,29 +14,13 @@
 </template>
 
 <script>
-  const lowerAsciiA = 97;
-
   export default {
     //
     props: {
-      startingIndex: {
-        type: Number,
-        default: 0
-      },
       items: {
         type: Array,
         default: () => ([])
       }
     },
-    methods: {
-      alphaIndex(index) {
-        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
-      }
-    },
   };
 </script>
-
-<style scoped lang="scss">
-  @import '~styles/helpers';
-
-</style>

client/src/pages/createContentBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="create-content-block">
+  <div class="create-content-block content-list__parent">
     <div class="create-content-block__content">
       <h1 class="heading-1 create-content-block__heading">Inhaltsblock erfassen</h1>
 
@@ -83,7 +83,6 @@
   import TextForm from '@/components/content-forms/TextForm';
   import InputWithLabel from '@/components/ui/InputWithLabel';
   import AddContentLink from '@/components/content-block-form/AddContentLink';
-  import ContentList from '@/components/content-blocks/ContentList';
   import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
   import ContentElement from '@/components/content-block-form/ContentElement';
 
@@ -91,7 +90,6 @@
     components: {
       ContentElement,
       ContentBlockElementChooserWidget,
-      ContentList,
       AddContentLink,
       InputWithLabel,
       TextForm,

client/src/styles/_nested-content-lists.scss

@@ -1,17 +1,24 @@
 .content-list {
   /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
 
+  // parent element needs to reset the counter-increment
+  // either use this class, or use the attribute on it
+  &__parent {
+    counter-reset: content-items;
+  }
+
   &__item {
     list-style: none;
     position: relative;
     padding: 0 0 0 2*15px;
-  }
+    &:before {
-
+      content: counter(content-items, lower-alpha) ")";
-  &__numbering {
+      counter-increment: content-items;
-    position: absolute;
+      position: absolute;
-    font-weight: 600;
+      font-weight: 600;
-    left: 0;
+      left: 0;
-    color: $color-brand;
+      color: $color-brand;
-    line-height: 27px;
+      line-height: 27px;
+    }
   }
 }