chore: fix tabs style

chakra-ui · Mar 15, 2024 · dc1dcd5 · dc1dcd5
1 parent 2b594ce
commit dc1dcd5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git a/website/components/machines/tabs.tsx b/website/components/machines/tabs.tsx
@@ -19,7 +19,7 @@ export function Tabs(props: any) {
   const api = tabs.connect(state, send, normalizeProps)
 
   return (
-    <div>
+    <div className="tabs">
       <div {...api.listProps}>
         {data.map((item) => (
           <button

diff --git a/website/styles/machines/tabs.css b/website/styles/machines/tabs.css
@@ -1,29 +1,31 @@
-div:has(> [data-scope="tabs"][data-part="list"]) {
-  width: 100%;
-  max-width: 400px;
-  border-width: 1px;
-  font-size: 0.875rem;
-}
+.tabs {
+  div:has(> [data-scope="tabs"][data-part="list"]) {
+    width: 100%;
+    max-width: 400px;
+    border-width: 1px;
+    font-size: 0.875rem;
+  }
 
-[data-scope="tabs"][data-part="list"] {
-  background: var(--colors-bg-subtle);
-  border-bottom-width: 1px;
-}
+  [data-scope="tabs"][data-part="list"] {
+    background: var(--colors-bg-subtle);
+    border-bottom-width: 1px;
+  }
 
-[data-scope="tabs"][data-part="trigger"] {
-  padding-inline: 1rem;
-  padding-block: 0.5rem;
-  border-bottom-width: 2px;
-  border-bottom-color: transparent;
-}
+  [data-scope="tabs"][data-part="trigger"] {
+    padding-inline: 1rem;
+    padding-block: 0.5rem;
+    border-bottom-width: 2px;
+    border-bottom-color: transparent;
+  }
 
-[data-scope="tabs"][data-part="trigger"][data-selected] {
-  color: var(--colors-text-primary-bold);
-  border-bottom-color: var(--colors-border-primary-subtle);
-}
+  [data-scope="tabs"][data-part="trigger"][data-selected] {
+    color: var(--colors-text-primary-bold);
+    border-bottom-color: var(--colors-border-primary-subtle);
+  }
 
-[data-scope="tabs"][data-part="content"] {
-  padding: 1rem;
-  background: var(--colors-bg-subtle);
-  min-height: 20px;
+  [data-scope="tabs"][data-part="content"] {
+    padding: 1rem;
+    background: var(--colors-bg-subtle);
+    min-height: 20px;
+  }
 }