From 7274e02fd2c5bba11825869e1ca6868d597800e3 Mon Sep 17 00:00:00 2001
From: Matt Shaver <60105315+matthewshaver@users.noreply.github.com>
Date: Thu, 6 Feb 2025 11:39:39 -0500
Subject: [PATCH] Adding tab borders (#6593)

## What are you changing in this pull request and why?

Enhancing tabs:
- Places borders around individual tabs
- Sets a unique background color for clicked and hovered tabs
- Puts a border around the entire table area so it's clear where tabbed
content ends

See
https://www.notion.so/dbtlabs/Documentation-plan-18cbb38ebda7808584e0c13abe8c91d9

Closes https://github.com/dbt-labs/docs.getdbt.com/issues/3889

## Checklist
- [ ] I have reviewed the [Content style
guide](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/content-style-guide.md)
so my content adheres to these guidelines.
- [ ] The topic I'm writing about is for specific dbt version(s) and I
have versioned it according to the [version a whole
page](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#adding-a-new-version)
and/or [version a block of
content](https://github.com/dbt-labs/docs.getdbt.com/blob/current/contributing/single-sourcing-content.md#versioning-blocks-of-content)
guidelines.
- [ ] I have added checklist item(s) to this list for anything anything
that needs to happen before this PR is merged, such as "needs technical
review" or "change base branch."
- [ ] The content in this PR requires a dbt release note, so I added one
to the [release notes
page](https://docs.getdbt.com/docs/dbt-versions/dbt-cloud-release-notes).
<!--
PRE-RELEASE VERSION OF dbt (if so, uncomment):
- [ ] Add a note to the prerelease version [Migration
Guide](https://github.com/dbt-labs/docs.getdbt.com/tree/current/website/docs/docs/dbt-versions/core-upgrade)
-->
<!--
ADDING OR REMOVING PAGES (if so, uncomment):
- [ ] Add/remove page in `website/sidebars.js`
- [ ] Provide a unique filename for new pages
- [ ] Add an entry for deleted pages in `website/vercel.json`
- [ ] Run link testing locally with `npm run build` to update the links
that point to deleted pages
-->

---------

Co-authored-by: Mirna Wong <89008547+mirnawong1@users.noreply.github.com>
Co-authored-by: Jason Karlavige <jkarlavige@gmail.com>
---
 website/src/css/custom.css | 71 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 2c796ae7e3a..fc0964355b2 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -2148,3 +2148,74 @@ table th {
   color: #000000; /* Black text on darker background */
   font-weight: bold;
 }
+
+/* Begin tab borders */
+
+.tabs {
+  background-color: transparent;
+  padding: 10px;
+}
+
+/* Default color and border for tabs */
+.tabs__item {
+  background-color: var(--color-white); /* Sets the tab color the same as the file borders */
+  border: 2px solid var(--color-nav-text);
+  padding: 5px 10px;
+  margin-right: 5px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+/* Default color and border for tabs in dark mode */
+[data-theme='dark'] .tabs__item {
+  background-color: var(--color-primary-blue);
+  border: 1px solid var(--color-nav-text);
+  padding: 5px 10px;
+  margin-right: 5px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+/*Color when hovering over tabs */
+.tabs__item:hover {
+  background-color: var(--ifm-color-primary);
+  color: var(--color-white);
+}
+
+[data-theme='dark'] .tabs__item:hover {
+  background-color: var(--ifm-color-primary);
+  color: var(--color-white);
+}
+
+/* Color when the tab is clicked*/
+.tabs__item--active {
+  background-color: var(--ifm-color-primary);
+  color: var(--color-white);
+  border-color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .tabs__item--active {
+  background-color: var(--ifm-color-primary);
+  color: var(--color-white);
+  border-color: var(--ifm-color-primary);
+}
+
+/* Sets the tab content border and background color */
+[data-theme='dark'] .tabs-container{
+  border: 1px solid var(--color-nav-text);
+  padding: 15px;
+  border-radius: 10px;
+  margin-top: 10px;
+  background-color: transparent;
+}
+
+[data-theme='light'] .tabs-container{
+  border: 1px solid var(--ifm-toc-border-color);
+  padding: 15px;
+  border-radius: 10px;
+  margin-top: 10px;
+  background-color: transparent;
+}
+/* End tab borders */