From 1be8cbb18b8d7fbd889febfb8fe55be20ad730ea Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Mon, 6 Sep 2021 23:46:46 +0800
Subject: [PATCH] Refactor @extend

---
 .../components/third-party/search.styl        |  2 +-
 .../outline/sidebar/sidebar-toggle.styl       |  4 ---
 .../_common/scaffolding/highlight/index.styl  | 36 ++++++++++---------
 .../css/_common/scaffolding/pagination.styl   | 10 ++++--
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 0ad09fc..f1570d4 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -132,7 +132,7 @@ if (hexo-config('algolia_search.enable')) {
     }
 
     .current .page-number {
-      @extend .pagination .page-number.current;
+      @extend $page-number-current;
       cursor: default;
     }
 
diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl
index 01ae35f..0d44434 100644
--- a/source/css/_common/outline/sidebar/sidebar-toggle.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl
@@ -10,10 +10,6 @@
   background: $sidebar-highlight;
 }
 
-// Fix issue #75
-// @extends does not seem to work inside @media
-// So we use a mixin here
-// https://github.com/stylus/stylus/issues/609
 @media (any-hover: hover) {
   body:not(.sidebar-active) .sidebar-toggle:hover {
     toggle-arrow(hexo-config('sidebar.position'));
diff --git a/source/css/_common/scaffolding/highlight/index.styl b/source/css/_common/scaffolding/highlight/index.styl
index bec8238..250067a 100644
--- a/source/css/_common/scaffolding/highlight/index.styl
+++ b/source/css/_common/scaffolding/highlight/index.styl
@@ -26,6 +26,24 @@ $code-block {
   margin: 0 auto 20px;
 }
 
+$figcaption {
+  background: var(--highlight-gutter-background);
+  color: var(--highlight-foreground);
+  display: flow-root;
+  font-size: $table-font-size;
+  line-height: 1.2;
+  padding: .5em;
+
+  a {
+    color: var(--highlight-foreground);
+    float: right;
+
+    &:hover {
+      border-bottom-color: var(--highlight-foreground);
+    }
+  }
+}
+
 pre, code {
   font-family: $code-font-family;
 }
@@ -72,21 +90,7 @@ figure.highlight {
   }
 
   figcaption {
-    background: var(--highlight-gutter-background);
-    color: var(--highlight-foreground);
-    display: flow-root;
-    font-size: $table-font-size;
-    line-height: 1.2;
-    padding: .5em;
-
-    a {
-      color: var(--highlight-foreground);
-      float: right;
-
-      &:hover {
-        border-bottom-color: var(--highlight-foreground);
-      }
-    }
+    @extend $figcaption;
   }
 
   .gutter {
@@ -109,7 +113,7 @@ figure.highlight {
 
 // See https://github.com/hexojs/hexo-util/pull/229
 pre .caption, pre figcaption {
-  @extend figure.highlight figcaption;
+  @extend $figcaption;
   margin-bottom: 10px;
 }
 
diff --git a/source/css/_common/scaffolding/pagination.styl b/source/css/_common/scaffolding/pagination.styl
index 007f67c..5a98d91 100644
--- a/source/css/_common/scaffolding/pagination.styl
+++ b/source/css/_common/scaffolding/pagination.styl
@@ -8,6 +8,12 @@ $page-number-basic {
   }
 }
 
+$page-number-current {
+  background: $pagination-active-bg;
+  border-color: $pagination-active-border;
+  color: $pagination-active-color;
+}
+
 .pagination {
   border-top: 1px solid $pagination-border;
   margin: 120px 0 0;
@@ -44,8 +50,6 @@ $page-number-basic {
   }
 
   .page-number.current {
-    background: $pagination-active-bg;
-    border-color: $pagination-active-border;
-    color: $pagination-active-color;
+    @extend $page-number-current;
   }
 }