feat(conversation): added border variables

chatscope · Aug 12, 2022 · 209e21d · 209e21d
1 parent 1afb045
commit 209e21d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/themes/default/_variables.scss b/themes/default/_variables.scss
@@ -208,6 +208,20 @@ $chat-container-min-width: 180px !default;
 // Conversation
 //
 
+// Borders
+$conversation-border-top: 0 !default;
+$conversation-border-right: 0 !default;
+$conversation-border-bottom: 0 !default;
+$conversation-border-left: 0 !default;
+$conversation-active-border-top: 0 !default;
+$conversation-active-border-right: 0 !default;
+$conversation-active-border-bottom: 0 !default;
+$conversation-active-border-left: 0 !default;
+$conversation-activated-border-top: 0 !default;
+$conversation-activated-border-right: 0 !default;
+$conversation-activated-border-bottom: 0 !default;
+$conversation-activated-border-left: 0 !default;
+
 // Colors
 $conversation-color: $color-text !default;
 $conversation-bg-color: $default-bg-color !default;

diff --git a/themes/default/components/_conversation.scss b/themes/default/components/_conversation.scss
@@ -21,6 +21,10 @@ $_conversation-unread-right: 0.8em;
   color: $conversation-color;
   background-color: $conversation-bg-color;
   user-select: none;
+  border-top: $conversation-border-top;
+  border-right: $conversation-border-right;
+  border-bottom: $conversation-border-bottom;
+  border-left: $conversation-border-left;
 
   &:hover {
     background-color: $conversation-hover-bg-color;
@@ -44,6 +48,10 @@ $_conversation-unread-right: 0.8em;
 
     color: $conversation-active-color;
     background-color: $conversation-active-bg-color;
+    border-top: $conversation-active-border-top;
+    border-right: $conversation-active-border-right;
+    border-bottom: $conversation-active-border-bottom;
+    border-left: $conversation-active-border-left;
 
     > .#{$prefix}-avatar {
       > .#{$prefix}-status {
@@ -60,6 +68,10 @@ $_conversation-unread-right: 0.8em;
     color: $conversation-name-activated-color;
     background-color: $conversation-activated-bg-color;
     font-weight: $conversation-activated-font-weight;
+    border-top: $conversation-activated-border-top;
+    border-right: $conversation-activated-border-right;
+    border-bottom: $conversation-activated-border-bottom;
+    border-left: $conversation-activated-border-left;
 
     > .#{$prefix}-avatar {
       > .#{$prefix}-status {