From e5df04dd590bd7a9786c61b036d914b281242ae5 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 28 Sep 2021 16:10:25 +0800
Subject: [PATCH] Hide the scroll bar of code block when not hovering (resolve
 #414)

---
 _sass/addon/commons.scss | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 714b072..8a76614 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -66,6 +66,25 @@ $scrollbar-size: 7px;
   border-radius: calc(#{$scrollbar-size} / 2);
 }
 
+.highlight {
+  border-color: transparent;
+  transition: border-color 0.5s ease;
+
+  &:hover {
+    border-color: var(--scrollbar-thumb-bg);
+    transition: border-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /* add border to act as background-color */
+    border-right-style: inset;
+    border-right-width: calc(100vw + 100vh);
+    border-color: inherit;
+    background-color: var(--highlight-bg-color);
+  }
+
+}
+
 /* --- Typography --- */
 
 h1 {