From c2695adb6d8d2407fec26da8fc53fff28b871b27 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Thu, 30 Jul 2020 10:18:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E4=BD=93=E5=A4=AA=E5=A4=A7=E4=BA=86,?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E4=B8=8B=20icon=20=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/App.tsx |  2 +-
 examples/style.scss         | 28 ++++++++++++++++++++++------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/examples/components/App.tsx b/examples/components/App.tsx
index ae6ca775a..d5cde65c8 100644
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@@ -299,7 +299,7 @@ export class App extends React.PureComponent {
             {nav.label}
             {hasChildren ? (
               <i
-                className={`iconfont icon-down-arrow ${
+                className={`iconfont icon-xialajiantou ${
                   isOpen ? '' : 'is-flipped'
                 }`}
                 onClick={e => this.toggleOpen(e, nav)}
diff --git a/examples/style.scss b/examples/style.scss
index 5ac10872c..7ebab046b 100644
--- a/examples/style.scss
+++ b/examples/style.scss
@@ -292,8 +292,9 @@ body {
       position: relative;
 
       > a {
-        font-size: 16px;
-        font-weight: 700;
+        // font-size: 16px;
+        // font-weight: 700;
+        font-size: 14px;
         color: #666;
         padding-left: 0;
         padding-right: 20px;
@@ -305,10 +306,23 @@ body {
 
       i {
         font-size: 12px;
-        padding: 5px;
+        padding: 0;
+        display: block;
         position: absolute;
-        right: 15px;
-        top: 0;
+        right: 20px;
+        top: 10px;
+        color: #666;
+
+        &:hover {
+          color: #333;
+        }
+
+        &:before {
+          display: block;
+          transform-origin: 50% 50%;
+          transform: rotate(0deg);
+          transition: transform 0.3s ease-out;
+        }
       }
 
       &.is-top {
@@ -472,7 +486,9 @@ body {
   }
 
   .is-flipped {
-    transform: rotateX(180deg);
+    &::before {
+      transform: rotate(180deg);
+    }
   }
 
   > .schema-wrapper {