From 1ce350e33eb800206568f5325f09c3237e47b83c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 23 Sep 2021 22:28:38 +0800
Subject: [PATCH] Beautify the style of categories button

---
 _sass/colors/dark-typography.scss  |  1 +
 _sass/colors/light-typography.scss |  5 ++++-
 _sass/layout/categories.scss       | 27 ++++++++++++++-------------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index f5d8459..9d48001 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -77,6 +77,7 @@
   /* categories */
   --categories-border: rgb(64, 66, 69);
   --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 7d8cada..9f9b92d 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -65,9 +65,12 @@
   --tag-hover: rgb(222, 226, 230);
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
-  --categories-hover-bg: var(--btn-border-color);
   --dash-color: silver;
 
+  /* Categories */
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
   /* Archive */
   --timeline-color: rgba(0, 0, 0, 0.075);
   --timeline-node-bg: #c2c6cc;
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 8b32c67..29a3463 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -8,24 +8,22 @@
 
 .categories {
   margin-bottom: 2rem;
+
   .card-header {
     padding-right: 12px;
   }
 
   i {
-    &.far,
-    &.fas {
-      font-size: 86%; // fontawesome icons
-    }
+    @extend %category-icon-color;
+
+    font-size: 86%; // fontawesome icons
   }
 
   .list-group-item {
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    > i {
-      @extend %category-icon-color;
-    }
+
     &:first-child {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -33,10 +31,6 @@
 
   }
 
-  .card-header > span > i:first-child {
-    @extend %category-icon-color;
-  }
-
 } // .categories
 
 .category-trigger {
@@ -45,11 +39,18 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d !important;
-  > i.fas {
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
+
+  i {
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: 300ms ease all;
+    transition: transform 300ms ease;
   }
 }