From d48e164bf23fcc3b6453321da7b075628973e8a8 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 11 Sep 2020 17:24:06 +0800
Subject: [PATCH] style: auto compute menu bottom border distance when header
 shrink

---
 source/css/layout/_partial/header.styl  | 4 ++--
 source/css/layout/common/variables.styl | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 3b208eb..b9457f8 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -274,12 +274,12 @@ $header-progress-height = 2.8px;
       .menu-item {
         a:hover {
           &::after {
-            bottom: -20px;
+            bottom: -($header-shrink-height / 2 - 10);
           }
         }
 
         .active::after {
-          bottom: -20px;
+          bottom: -($header-shrink-height / 2 - 10);
         }
       }
 
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index caf8bfe..8e46b96 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -15,7 +15,7 @@ $main-content-width = 62%;          // 中间内容区域宽度（PC）
 $main-content-width-tablet = 80%;   // 中间内容区域宽度（平板）
 $main-content-width-mobile = 88%;   // 中间内容区域宽度（手机）
 
-$header-shrink-height = 60px;    // 头部收缩高度
+$header-shrink-height = 56px;    // 头部收缩高度
 $tool-button-width = 36px;       // tools 方形工具按钮宽度
 $component-interspace = 30px;    // 组件/模块的间隔值（px）