From 6b36f8916e6adc3fc55e078d02d7c62b12e2d5c8 Mon Sep 17 00:00:00 2001
From: Jakob Schrettenbrunner <dev@schrej.net>
Date: Mon, 13 Apr 2020 20:34:07 +0200
Subject: [PATCH] fix arrow and make it a little lighter

---
 .vuepress/theme/VersionSelect.vue     |  2 +-
 .vuepress/theme/VersionSelectItem.vue |  2 +-
 .vuepress/theme/styles/sidebar.css    | 25 +++++++++++--------------
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/.vuepress/theme/VersionSelect.vue b/.vuepress/theme/VersionSelect.vue
index d6baebc6..30a91dd5 100644
--- a/.vuepress/theme/VersionSelect.vue
+++ b/.vuepress/theme/VersionSelect.vue
@@ -2,7 +2,7 @@
   <div class="version-select custom-select" :tabindex="tabindex" @blur="open = false">
     <div class="selected" :class="{open: open}" @click="open = !open">
       <VersionSelectItem :version="selected" />
-      <span class="arrow down"></span>
+      <span class="arrow"></span>
     </div>
     <div class="items" :class="{hidden: !open}">
       <div
diff --git a/.vuepress/theme/VersionSelectItem.vue b/.vuepress/theme/VersionSelectItem.vue
index dad7b75d..28b6a615 100644
--- a/.vuepress/theme/VersionSelectItem.vue
+++ b/.vuepress/theme/VersionSelectItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="inline-block">
     {{ version.name }}
-    <span class="rounded-full px-2 ml-1" :class="classes">{{version.status}}</span>
+    <span class="rounded-full ml-2" :class="classes">{{version.status}}</span>
   </div>
 </template>
 
diff --git a/.vuepress/theme/styles/sidebar.css b/.vuepress/theme/styles/sidebar.css
index 1e2b9218..a44c95eb 100644
--- a/.vuepress/theme/styles/sidebar.css
+++ b/.vuepress/theme/styles/sidebar.css
@@ -99,27 +99,24 @@ $arrow-bg: #000;
             }
 
             .selected {
-                @apply .select-none .border .cursor-pointer .px-4;
+                @apply .select-none .border .border-grey-lighter .cursor-pointer .px-4;
                 border-radius: 1rem;
 
-                &:hover {
-                    @apply .border-blue;
-                }
-                
-                &.open {
-                    @apply .border-blue;
+                &:hover, &.open {
+                    @apply .bg-grey-lighter .border-grey-lighter;
                 }
 
-                &:after {
-                    position: absolute;
-                    content: "";
-                    top: .5em;
-                    right: 10px;
+                .arrow {
+                    @apply .inline-block .relative;
+                    top: -0.16em;
+                    left: .5em;
                     width: 0;
                     height: 0;
-                    border: 4px solid transparent;
-                    border-color: #fff transparent transparent transparent;
+                    border-left: 4px solid transparent;
+                    border-right: 4px solid transparent;
+                    border-top: 6px solid #b8c2cc;
                 }
+                
             }
 
             .items {