✨ Components annotations

frontend/resources/styles/main/partials/inspect.scss

@@ -383,3 +383,15 @@
 .element-options > :first-child {
   border-top: none;
 }
+
+.inspect-annotation {
+  .content {
+    background-color: $color-gray-60;
+    color: $color-white;
+    margin: 0 10px;
+    padding: 10px;
+    font-size: $fs14;
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+}

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -2327,3 +2327,120 @@
     }
   }
 }
+
+.component-annotation {
+  background-color: $color-gray-60;
+  border: 1px solid $color-gray-60;
+  &.editing {
+    border: 1px solid $color-primary;
+  }
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid $color-gray-50;
+    font-size: $fs12;
+    color: $color-gray-20;
+    padding: 0 10px;
+
+    &.expandeable {
+      cursor: pointer;
+    }
+
+    div {
+      display: flex;
+      align-items: center;
+      line-height: 2.5;
+    }
+
+    .expand {
+      svg {
+        fill: $color-gray-20;
+        width: $size-2;
+        height: $size-2;
+        margin-right: 10px;
+      }
+    }
+
+    .icon {
+      display: none;
+      cursor: pointer;
+    }
+
+    &:hover {
+      .icon {
+        display: flex;
+        svg {
+          fill: $color-gray-20;
+          width: $size-4;
+          height: $size-4;
+          margin-left: 15px;
+        }
+
+        .icon-tick:hover,
+        .icon-pencil:hover {
+          fill: $color-primary;
+        }
+
+        .icon-cross:hover,
+        .icon-trash:hover {
+          fill: $color-danger;
+        }
+      }
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .counter {
+    text-align: right;
+    font-size: $fs11;
+    color: $color-gray-30;
+    margin: 0 10px 10px 0;
+  }
+
+  // Auto growing text
+  .grow-wrap {
+    // easy way to plop the elements on top of each other and have them both sized based on the tallest one's height
+    display: grid;
+
+    &:after {
+      // The space is needed to preventy jumpy behavior
+      content: attr(data-replicated-value) " ";
+      white-space: pre-wrap;
+      visibility: hidden;
+    }
+
+    textarea {
+      background-color: $color-gray-60;
+      color: $color-white;
+      min-height: 250px;
+      padding: 10px;
+
+      border: none;
+      overflow: hidden;
+      outline: none;
+
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+
+      resize: none; /*remove the resize handle on the bottom right*/
+    }
+
+    textarea,
+    &:after {
+      /* Identical styling required!! */
+      font: inherit;
+      font-size: $fs14;
+      overflow-wrap: anywhere;
+
+      padding: 10px;
+
+      /* Place on top of each other */
+      grid-area: 1 / 1 / 2 / 2;
+    }
+  }
+}