From 73da3fc0eb6cb84c346a210273731488c9f8c03e Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Tue, 22 Jun 2021 23:19:34 +0800 Subject: [PATCH] fix: exclude style example blocks from banner styles If the Vue School banner is open, the style example blocks on the Style Guide will have too much top margin and padding. Detail blocks directly above a style example block will also be unexpandable. This is because the styles in BannerTop.vue mistakenly apply top margin and padding to the header in style example blocks. This causes the blocks to be too tall, as well as oveflow their container, overlaying the detail block above and blocking clicks to the element. Let's fix the styles for headers in BannerTop.vue to exclude those in style example blocks. --- src/.vuepress/theme/components/BannerTop.vue | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/.vuepress/theme/components/BannerTop.vue b/src/.vuepress/theme/components/BannerTop.vue index 53010d5539..7e44dd26ce 100644 --- a/src/.vuepress/theme/components/BannerTop.vue +++ b/src/.vuepress/theme/components/BannerTop.vue @@ -155,13 +155,15 @@ $topBannerHeightMobile ?= 3.125rem // Adjust titles margin and padding for anchor links .theme-container.has-top-banner {$contentClass}:not(.custom) - h1, h2, h3, h4, h5, h6 - margin-top (0.5rem - $topBannerHeight - $navbarHeight) - padding-top ($navbarHeight + $topBannerHeight + 1rem) + :not(.style-example) + h1, h2, h3, h4, h5, h6 + margin-top (0.5rem - $topBannerHeight - $navbarHeight) + padding-top ($navbarHeight + $topBannerHeight + 1rem) @media (min-width: 680px) .theme-container.has-top-banner {$contentClass}:not(.custom) - h1, h2, h3, h4, h5, h6 - margin-top (0.5rem - $topBannerHeightMobile - $navbarHeight) - padding-top ($navbarHeight + $topBannerHeightMobile + 1rem) + :not(.style-example) + h1, h2, h3, h4, h5, h6 + margin-top (0.5rem - $topBannerHeightMobile - $navbarHeight) + padding-top ($navbarHeight + $topBannerHeightMobile + 1rem)