fix(tabs): adapt to light theme and prevent codeblock overflow (#35)

sapphi-red · Sep 18, 2023 · b30ae90 · b30ae90
1 parent 668f60d
commit b30ae90
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/.changeset/red-dolphins-tell.md b/.changeset/red-dolphins-tell.md
@@ -0,0 +1,6 @@
+---
+'vitepress-plugin-tabs': patch
+---
+
+Use `--vp-c-bg` in light mode for code blocks inside tabs to have slight difference between the backgrounds.
+Specify margin and border radius on code blocks inside tabs to prevent them from overflowing on smaller viewport widths.
diff --git a/packages/vitepress-plugin-tabs/src/client/PluginTabsTab.vue b/packages/vitepress-plugin-tabs/src/client/PluginTabsTab.vue
@@ -24,15 +24,20 @@ const { uid, selected } = useTabsSingleState()
   padding: 16px;
 }
 
-.plugin-tabs--content > :first-child {
+.plugin-tabs--content > :first-child:first-child {
   margin-top: 0;
 }
 
-.plugin-tabs--content > :last-child {
+.plugin-tabs--content > :last-child:last-child {
   margin-bottom: 0;
 }
 
-.plugin-tabs--content > div[class*='language-'] {
-  margin: 8px 0;
+.plugin-tabs--content > :deep(div[class*='language-']) {
+  border-radius: 8px;
+  margin: 16px 0px;
+}
+
+:root:not(.dark) .plugin-tabs--content :deep(div[class*='language-']) {
+  background-color: var(--vp-c-bg);
 }
 </style>