docs: customize separate styles for instalation page

geist-org · Feb 1, 2022 · 3ad7921 · 3ad7921
1 parent 3f2cada
commit 3ad7921
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/lib/components/layout/layout.tsx b/lib/components/layout/layout.tsx
@@ -63,6 +63,22 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = React.memo
             margin: 25px auto;
             transform: scale(0.95);
           }
+          .installation-tabs .tab.active:after {
+            display: none;
+          }
+          .installation-tabs .tab {
+            color: ${theme.palette.accents_3};
+          }
+          .installation-tabs .tab:hover {
+            color: ${theme.palette.accents_6};
+          }
+          .installation-tabs .tab.active {
+            font-weight: 500;
+            color: ${theme.palette.foreground};
+          }
+          .installation-tabs .content {
+            margin-top: 0;
+          }
         `}</style>
         <style jsx>{`
           .layout {

diff --git a/pages/en-us/guide/installation.mdx b/pages/en-us/guide/installation.mdx
@@ -23,8 +23,9 @@ Also, Geist is based on the component library of framework React, which means yo
 <Tabs
   initialValue="yarn"
   hideDivider
-  leftSpace={0}
-  activeClassName="installation-example">
+  align="right"
+  mt="-46px"
+  className="installation-tabs">
   <Tabs.Item label="Yarn" value="yarn">
     <Snippet>yarn add @geist-ui/core</Snippet>
   </Tabs.Item>

diff --git a/pages/zh-cn/guide/installation.mdx b/pages/zh-cn/guide/installation.mdx
@@ -20,7 +20,12 @@ export const meta = {
   <Dot type="success">安装依赖</Dot>
 </h4>
 
-<Tabs initialValue="yarn" hideDivider leftSpace={0}>
+<Tabs
+  initialValue="yarn"
+  hideDivider
+  align="right"
+  mt="-46px"
+  className="installation-tabs">
   <Tabs.Item label="Yarn" value="yarn">
     <Snippet>yarn add @geist-ui/core</Snippet>
   </Tabs.Item>