fix(theme): default to vertical align top on badges inside headings (#…

…1584) Co-authored-by: Divyansh Singh <[email protected]>
vuejs · Nov 30, 2022 · 8a488de · 8a488de
1 parent 6ec5489
commit 8a488de
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/docs/guide/theme-badge.md b/docs/guide/theme-badge.md
@@ -15,10 +15,10 @@ You may use the `Badge` component which is globally available.
 
 Code above renders like:
 
-### Title <Badge type="info" text="default" vertical="middle" />
-### Title <Badge type="tip" text="^1.9.0" vertical="middle" />
-### Title <Badge type="warning" text="beta" vertical="middle" />
-### Title <Badge type="danger" text="caution" vertical="middle" />
+### Title <Badge type="info" text="default" />
+### Title <Badge type="tip" text="^1.9.0" />
+### Title <Badge type="warning" text="beta" />
+### Title <Badge type="danger" text="caution" />
 
 ## Custom Children
 

diff --git a/src/client/theme-default/components/VPBadge.vue b/src/client/theme-default/components/VPBadge.vue
@@ -19,11 +19,20 @@ defineProps<{
   border-radius: 10px;
   padding: 0 8px;
   line-height: 18px;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   transform: translateY(-2px);
 }
 
+h1 .VPBadge,
+h2 .VPBadge,
+h3 .VPBadge,
+h4 .VPBadge,
+h5 .VPBadge,
+h6 .VPBadge {
+  vertical-align: top;
+}
+
 h2 .VPBadge {
   border-radius: 11px;
   line-height: 20px;