improve code expand style

funreading · Aug 15, 2017 · 5443e79 · 5443e79
1 parent 59b11f3
commit 5443e79
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -109,26 +109,37 @@
     border-bottom: 1px dashed @border-color-split;
   }
 
-  .collapse {
+  .code-expand-icon {
     position: absolute;
     right: 16px;
     bottom: 23px;
     cursor: pointer;
     width: 16px;
     height: 16px;
     line-height: 16px;
-    opacity: 0.55;
     text-align: center;
-    transition: all 0.3s;
-    user-select: none;
+  }
 
+  .code-expand-icon-show,
+  .code-expand-icon-hide {
+    transition: all 0.4s;
+    user-select: none;
+    position: absolute;
+    left: 0;
+    top: 0;
     &:hover {
       opacity: 1;
     }
   }
 
-  &.expand .collapse {
-    transform: rotate(90deg);
+  .code-expand-icon-show {
+    opacity: 0.55;
+    pointer-events: auto;
+  }
+
+  .code-expand-icon-hide {
+    opacity: 0;
+    pointer-events: none;
   }
 
   .highlight-wrapper {

diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
@@ -160,12 +160,20 @@ export default class Demo extends React.Component {
           </div>
           {introChildren}
           <Tooltip title={codeExpand ? 'Hide Code' : 'Show Code'}>
-            <img
-              alt="expand code"
-              src="https://gw.alipayobjects.com/zos/rmsportal/NBjNKmzFsnATotIWoZmP.svg"
-              className="collapse"
-              onClick={this.handleCodeExpand}
-            />
+            <span className="code-expand-icon">
+              <img
+                alt="expand code"
+                src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
+                className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
+                onClick={this.handleCodeExpand}
+              />
+              <img
+                alt="expand code"
+                src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
+                className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
+                onClick={this.handleCodeExpand}
+              />
+            </span>
           </Tooltip>
         </section>
         <section className={highlightClass}