Update styling

client/src/components/content-block-form/AddContentLink.vue

@@ -31,7 +31,7 @@
       &__text {
         // custom style, because the view needs this
         @include link-base;
-        font-weight: $font-weight-bold;
+        font-weight: $font-weight-semibold;
         color: $color;
       }
     }

client/src/components/content-block-form/ContentElement.vue

@@ -174,10 +174,13 @@
   @import '~styles/helpers';
 
   .content-element {
+    &__section {
       display: grid;
       grid-template-columns: 1fr 50px;
       grid-auto-rows: auto;
       /*width: 95%; // reserve space for scrollbar*/
+    }
+
     &__chooser {
       grid-column: 1 / span 2;
     }

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -148,7 +148,6 @@
     //border: 2px solid $color-silver-dark;
     //border-radius: 12px;
     position: relative;
-    margin-bottom: 20px;
 
     /*IE10+*/
     & > :nth-child(1) {

client/src/components/content-forms/TextForm.vue

@@ -39,7 +39,7 @@
 
   .text-form {
     &__input {
-      width: $modal-input-width;
+      width: 100%;
     }
   }
 </style>

client/src/pages/createContentBlock.vue

@@ -218,6 +218,16 @@
       margin-bottom: $large-spacing;
     }
 
+    &__add-button {
+    }
+
+    &__segment {
+      margin-bottom: $large-spacing;
+      :last-child {
+        margin-bottom: 0;
+      }
+    }
+
     &__content {
       grid-area: content;
       overflow-x: visible;

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

@@ -11,7 +11,7 @@
   &__item {
     list-style: none;
     position: relative;
-    padding: 0 0 0 2*15px;
+    padding: 0 0 0 $large-spacing;
     &:before {
       content: counter(content-items, lower-alpha) ")";
       counter-increment: content-items;
@@ -19,7 +19,24 @@
       font-weight: 600;
       left: 0;
       color: $color-brand;
+      font-family: $sans-serif-font-family;
       line-height: 27px;
+      top: -30px;
+    }
+  }
+
+  $parent: &;
+
+  &--creator {
+    padding-top: $medium-spacing;
+    padding-left: 10px;
+
+    #{$parent}__item {
+      border-left: 2px solid $color-brand;
+      padding: $small-spacing 0 $small-spacing $medium-spacing;
+      &:before {
+        left: -8px;
+      }
     }
   }
 }