From d4c233e1ef66c8d939a835513dfe88508c09e663 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Fri, 13 Nov 2020 23:21:04 +0100
Subject: [PATCH] new splitter style

---
 src/assets/images/chevron.svg |  4 ++--
 src/components/Splitpanes.vue | 32 ++++++++++++++++++++++----------
 src/components/Tab.vue        |  1 -
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/assets/images/chevron.svg b/src/assets/images/chevron.svg
index 85c89cf..13c72f6 100644
--- a/src/assets/images/chevron.svg
+++ b/src/assets/images/chevron.svg
@@ -1,3 +1,3 @@
-<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.721924 9.93097L4.85292 5.79997L0.721924 1.66897L1.99992 0.399973L7.39992 5.79997L1.99992 11.2L0.721924 9.93097Z" fill="#506784"/>
+<svg width="4" height="9" viewBox="0 0 4 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 0.98056V4.5L4.00004 7.71428L4 9L1.10694e-07 4.5L4 0V0.98056Z" fill="#506784"/>
 </svg>
diff --git a/src/components/Splitpanes.vue b/src/components/Splitpanes.vue
index b9f71bd..7d5a479 100644
--- a/src/components/Splitpanes.vue
+++ b/src/components/Splitpanes.vue
@@ -88,11 +88,11 @@ export default {
       const translation = 'translate(-50%, -50%)'
       if (this.horizontal) {
         return {
-          transform: `${translation} ${this.expanded ? 'rotate(-90deg)' : 'rotate(90deg)'}`
+          transform: `${translation} ${this.expanded ? 'rotate(90deg)' : 'rotate(-90deg)'}`
         }
       } else {
         return {
-          transform: `${translation} ${this.expanded ? 'rotate(180deg)' : ''}`
+          transform: `${translation} ${this.expanded ? 'rotate(0deg)' : 'rotate(180deg)'}`
         }
       }
     }
@@ -248,13 +248,23 @@ export default {
 
 .splitpanes__splitter {
   touch-action: none;
-  background-color: var(--color-bg-light-2);
+  background-color: var(--color-bg-light);
   box-sizing: border-box;
   position: relative;
   flex-shrink: 0;
   z-index: 1;
 }
 
+.splitpanes--horizontal > .splitpanes__splitter {
+  border-top: 1px solid var(--color-border-light);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.splitpanes--vertical > .splitpanes__splitter {
+  border-left: 1px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+}
+
 .movable-splitter {
   position: absolute;
   background-color:rgba(162, 177, 198, 0.5);
@@ -262,23 +272,25 @@ export default {
 
 .splitpanes--vertical > .splitpanes__splitter,
 .splitpanes--vertical .movable-splitter {
-  width: 3px;
+  width: 8px;
   z-index: 5;
   height: 100%
 }
 
 .splitpanes--horizontal > .splitpanes__splitter,
 .splitpanes--horizontal .movable-splitter {
-  height: 3px;
+  height: 8px;
   width: 100%;
 }
 .splitpanes__splitter .toggle-btn {
-  background-color: var(--color-bg-light-2);
+  background-color: var(--color-border-light);
   border-radius: var(--border-radius-small);
+  border: 1px solid var(--color-border);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  box-sizing: border-box;
 }
 
 .splitpanes__splitter .toggle-btn:hover {
@@ -286,12 +298,12 @@ export default {
 }
 
 .splitpanes--vertical .toggle-btn {
-  height: 68px;
-  width: 15px;
+  height: 49px;
+  width: 8px;
 }
 .splitpanes--horizontal .toggle-btn {
-  width: 68px;
-  height: 15px;
+  width: 49px;
+  height: 8px;
 }
 .splitpanes__splitter .toggle-btn .direction-icon {
   position: absolute;
diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index 9e31d12..87c450f 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -147,7 +147,6 @@ export default {
 
 <style scoped>
 .tab-content-container {
-  padding-top: 6px;
   background-color: var(--color-white);
   border-top: 1px solid var(--color-border-light);
   margin-top: -1px;