feature: sib-conversation added

- job-board updated with sib-conversation
- counter for the number of comments added
- new styles added

src/styles/components/comment.scss

@@ -0,0 +1,122 @@
+#job-offers {
+
+  details {
+
+    summary {
+      color: $color-244-73-62;
+      cursor: pointer;
+      display: flex;
+      padding: 1.3rem 2.1rem;
+
+      &::-moz-list-bullet {
+        list-style-type: none;
+      }
+
+      &::-webkit-details-marker {
+        display: none;
+      }
+
+      span {
+        @include icon('speech');
+        font-weight: 600;
+
+        &::before {
+          margin: 0 1rem 0 0;
+        }
+      }
+
+      .icon-arrow-up {
+        margin-left: auto;
+      }
+    }
+
+    &[open] {
+
+      .icon-arrow-up {
+        transform: rotate(180deg);
+      }
+    }
+
+    sib-conversation.conversation {
+
+      .sib-conversation {
+        font-family: Open Sans;
+
+        [name='conversation-wrapper'] {
+          display: flex;
+
+          [name='conversation-avatar'] {
+            margin-right: 6px;
+
+            .avatar {
+              height: 35px;
+              width: 35px;
+            }
+          }
+
+          [name='conversation-content'] {
+
+            [name='author_user.name'] {
+              color: $color-0-0-29;
+              font-size: 1.5rem;
+            }
+
+            .conversation__messages {
+              display: none;
+            }
+          }
+        }
+
+        >sib-display.conversation>div>sib-display:first-child {
+          margin-bottom: 4.5rem;
+        }
+
+        sib-ac-checker {
+          border-top: 1px solid $color-210-17-91;
+
+          sib-form-textarea {
+
+            >label div {
+              color: $color-210-5-56;
+              font-size: 1.4rem;
+              margin-bottom: 1rem;
+              visibility: hidden;
+
+              &::before {
+                content: 'Add a comment';
+                visibility: visible;
+              }
+            }
+
+            textarea {
+              border: none;
+              font-size: 1.5rem;
+              resize: none;
+            }
+          }
+
+          input[type='submit'] {
+            border: 1px solid $color-244-73-62;
+            border-radius: 100em;
+            color: $color-244-73-62;
+            font-size: 1.3rem;
+            padding: 0.8rem 1.5rem;
+            text-transform: lowercase;
+
+            &:hover {
+              background-color: $color-244-73-62;
+              border: 1px solid $color-244-73-62;
+              color: white;
+            }
+          }
+        }
+
+        .conversation>div>sib-display,
+        .conversation-form {
+          border: none;
+          margin: 1rem 2.1rem;
+        }
+      }
+    }
+  }
+}

src/styles/components/filters.scss

@@ -53,7 +53,7 @@
 }
 
 .job-board, #members-list {
-  sib-form {
+  sib-form[naked] {
     @extend %filters;
   }
 }