fix: temp vertical tabs (#75)

* fix: allow for breakpoint to overridden * fix: remaining documentation updates * fix: corrected variable use
bloom-housing · Feb 21, 2024 · 36b3091 · 36b3091
1 parent e9e7df1
commit 36b3091
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/src/navigation/Tabs.scss b/src/navigation/Tabs.scss
@@ -19,6 +19,7 @@
   --tab-active-indicator-color: var(--seeds-color-primary);
   --tab-panel-padding: var(--seeds-spacer-section);
   --tab-panel-background-color: var(--seeds-bg-color-surface);
+  @custom-media --tab-collapse-breakpoint (--sm-only);
 }
 
 .tabs-tablist {
@@ -105,7 +106,7 @@
   }
 }
 
-@media (max-width: 640px) {
+@media (--tab-collapse-breakpoint) {
   .tabs-tablist {
     flex-direction: column;
   }

diff --git a/src/navigation/__stories__/Tabs.docs.mdx b/src/navigation/__stories__/Tabs.docs.mdx
@@ -43,3 +43,4 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 | `--tab-active-indicator-color` | <Swatch color="bloom-color-primary" />                  | `--seeds-color-primary`        |
 | `--tab-panel-padding`          | Spacing within the panel interior                       | `--seeds-spacer-section`       |
 | `--tab-panel-background-color` | <Swatch color="bloom-bg-color-surface" border={true} /> | `--seeds-bg-color-surface`     |
+| `--tab-collapse-breakpoint`    | Screen size breakpoint for vertical orientation         | `--sm-only`                    |