Tabbed content refresh (denoland#798)

dandv · Sep 4, 2024 · b1bf1ce · b1bf1ce
1 parent b0a1783
commit b1bf1ce
Showing 1 changed file with 22 additions and 6 deletions.
diff --git a/styles.css b/styles.css
@@ -102,7 +102,6 @@ body:not(:has(.ddoc)) {
   }
 
   .copyButton {
-
     @apply opacity-0 transition-all duration-100 absolute top-2 right-2 p-1 rounded;
 
     &:hover,
@@ -275,27 +274,44 @@ body:not(:has(.ddoc)) {
 }
 
 .deno-tabs > ul.deno-tabs-buttons {
-  @apply flex flex-wrap list-none p-0 m-0 mb-2;
+  @apply flex flex-wrap list-none p-0 m-0;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li {
   @apply m-0 m-0;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li > button {
-  @apply inline-block px-4 py-2 text-sm font-semibold text-gray-700 rounded-t-md hover:bg-gray-100 border-b-2 border-transparent;
+  @apply inline-block mr-2 px-4 py-2 text-sm font-semibold text-gray-700 rounded-t bg-slate-100/80 hover:bg-blue-50 border border-transparent;
 }
 
 .deno-tabs > ul.deno-tabs-buttons > li > button[data-active="true"] {
-  @apply border-blue-700 text-blue-700;
+  @apply border-slate-200 bg-slate-100 text-blue-950 border-b-transparent z-10 -mb-[1px] pb-[calc(0.5rem+1px)] relative;
 }
 
 .deno-tabs > div.deno-tabs-content > div {
-  @apply hidden;
+  @apply hidden py-4 px-4 rounded rounded-tl-none bg-slate-100 border border-slate-200;
 }
 
 .deno-tabs > div.deno-tabs-content > div[data-active="true"] {
-  @apply block;
+  @apply flex flex-col gap-4;
+}
+
+.deno-tabs > div.deno-tabs-content > div > p {
+  @apply mb-0;
+}
+
+.deno-tabs pre {
+  @apply border border-blue-100 bg-white;
+}
+
+.deno-tabs .markdownBlockTitle {
+  @apply px-8 py-2 max-sm:-mx-4 sm:rounded-t-md border border-slate-200 bg-slate-600 text-white text-sm font-semibold;
+}
+
+/* Strips bottom margin in instances where multiple code samples exist in a tab. */
+.markdown-body .deno-tabs :not(div > pre + div > pre) {
+  @apply mb-0;
 }
 
 /* Custom DDOC styles for the Deno documentation */