Merge branch 'stylelint-rscss-1' into 'develop'

Stylelint + RSCSS initial approach

See merge request pleroma/pleroma-fe!1205

1 files changed, 23 insertions, 10 deletions

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 2e48240a..997a4d10 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="timeline panel-default"
-    :class="[isExpanded ? 'panel' : 'panel-disabled']"
+    class="Conversation"
+    :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
   >
     <div
       v-if="isExpanded"
@@ -28,7 +28,7 @@
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
       :profile-user-id="profileUserId"
-      class="status-fadein panel-body"
+      class="conversation-status status-fadein panel-body"
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
     />
@@ -40,14 +40,27 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
-  .panel-disabled {
-    .status-el {
-      border-left: none;
-      border-bottom-width: 1px;
-      border-bottom-style: solid;
+.Conversation {
+  .conversation-status {
+    border-left: none;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: var(--border, $fallback--border);
+    border-radius: 0;
+  }
+
+  &.-expanded {
+    .conversation-status {
+      border-color: $fallback--border;
       border-color: var(--border, $fallback--border);
-      border-radius: 0;
+      border-left: 4px solid $fallback--cRed;
+      border-left: 4px solid var(--cRed, $fallback--cRed);
+    }
+
+    .conversation-status:last-child {
+      border-bottom: none;
+      border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+      border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     }
   }
 }