docs: tweak home page arrow style

soluvas · Dec 31, 2019 · 4aa4285 · 4aa4285
1 parent d8cea74
commit 4aa4285
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/site/theme/template/Home/DesignPage/index.tsx b/site/theme/template/Home/DesignPage/index.tsx
@@ -118,7 +118,7 @@ export default function DesignPage() {
                   to={getLocalizedPathname('/docs/spec/values', isZhCN)}
                 >
                   <FormattedMessage id="app.home.detail" />
-                  <RightOutlined />
+                  <RightOutlined className="home-link-arrow" />
                 </Link>
               </Col>
               <Col xs={24} sm={16}>
@@ -189,13 +189,13 @@ export default function DesignPage() {
                   <li>
                     <Link to={getLocalizedPathname('/docs/spec/colors', isZhCN)}>
                       <FormattedMessage id="app.home.global-style" />
-                      <RightOutlined />
+                      <RightOutlined className="home-link-arrow" />
                     </Link>
                   </li>
                   <li>
                     <Link to={getLocalizedPathname('/docs/spec/overview', isZhCN)}>
                       <FormattedMessage id="app.home.design-patterns" />
-                      <RightOutlined />
+                      <RightOutlined className="home-link-arrow" />
                     </Link>
                   </li>
                 </ul>
@@ -236,19 +236,19 @@ export default function DesignPage() {
                   <li>
                     <Link to={getLocalizedPathname('/docs/react/introduce', isZhCN)}>
                       Ant Design of React
-                      <RightOutlined />
+                      <RightOutlined className="home-link-arrow" />
                     </Link>
                   </li>
                   <li>
                     <a href="https://ng.ant.design/" target="_blank" rel="noopener noreferrer">
                       Ant Design of Angular
-                      <RightOutlined />
+                      <RightOutlined className="home-link-arrow" />
                     </a>
                   </li>
                   <li>
                     <a href="https://vue.ant.design/" target="_blank" rel="noopener noreferrer">
                       Ant Design of Vue
-                      <RightOutlined />
+                      <RightOutlined className="home-link-arrow" />
                     </a>
                   </li>
                 </ul>

diff --git a/site/theme/template/Home/index.less b/site/theme/template/Home/index.less
@@ -27,6 +27,19 @@
       margin-bottom: 56px;
     }
   }
+
+  .home-link-arrow {
+    margin-left: 0.3em;
+    position: relative;
+    font-size: 0.85em;
+    transition: all 0.2s;
+    opacity: 0.75;
+  }
+
+  a:hover .home-link-arrow {
+    transform: translateX(3px);
+    opacity: 1;
+  }
 }
 
 @media (max-width: @screen-sm-min) {