More CSS

Author: ardatan

src/assets/css/_css/code.less

@@ -135,7 +135,7 @@
     flex-direction: row;
     justify-content: space-between;
     .language-title {
-      margin: 0 0 50px 0;
+      margin: 0 0 10px 0;
       font-size: 48px;
       font-weight: bold;
     }
@@ -149,11 +149,9 @@
       }
     }
   }
-  .library-category {
-    padding-top: 15px;
-  }
   .library-category-title {
     margin: 0;
+    padding-top: 45px;
     font-size: 24px;
     color: #a6a6a6;
     font-weight: bold;
@@ -163,7 +161,7 @@
     flex-direction: row;
     justify-content: space-between;
     margin-top: 36px;
-    margin-bottom: 50px;
+    margin-bottom: 40px;
     .library-details {
       width: 30%;
       .library-name {
@@ -195,24 +193,69 @@
     }
     .library-howto {
       width: 60%;
+      position: relative;
       .library-howto-content {
+        overflow: hidden;
+        &.not-expanded {
+          max-height: 450px;
+        }
+        &.expanded {
+          max-height: none;
+          border-bottom-style: solid;
+          border-bottom-color: #C4C4C4;
+          border-bottom-width: 3px;
+        }
         p {
           margin: 0;
         }
-        transition: max-height 0.25s ease-in;
       }
     }
     .library-howto-expand {
-      border-top-style: solid;
-      border-top-color: #C4C4C4;
-      border-top-width: 3px;
-      background-image: url(http://github.com/static/img/downarrow.svg%3C/span%3E);
-      background-position: center;
-      background-repeat: no-repeat;
-      width: 100%;
-      min-height: 40px;
-      display: block;
       cursor: pointer;
+      
+      &.not-expanded {
+        background: -webkit-linear-gradient(
+          top,
+          rgba(237, 239, 240, 0),
+          rgba(237, 239, 240, 0) 380px,
+          #ffffff 400px
+        );
+        background: linear-gradient(
+          to bottom,
+          rgba(237, 239, 240, 0),
+          rgba(237, 239, 240, 0) 380px,
+          #ffffff 400px
+        );
+        box-sizing: border-box;
+        display: block;
+        height: 450px;
+        padding-top: 400px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        text-align: center;
+        .library-howto-expand-anchor {
+          background: #ffffff;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          border-radius: 9pt 9pt 0 0;
+          color: #8c8c8c;
+          display: inline-block;
+          max-width: 100%;
+          overflow: hidden;
+          padding: 10px;
+          text-decoration: underline;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      &.expanded {
+        width: 100%;
+        height: 30px;
+        text-align: center;
+        transform: rotate(180deg);
+      }
     }
   }
 }

src/pages/code.tsx

@@ -90,11 +90,7 @@ export function buildLibraryContent(library: any, pageContext: any) {
       </div>
       <div className="library-howto">
         <div
-          className="library-howto-content"
-          style={{
-            maxHeight: expanded ? "100%" : "450px",
-            overflow: "hidden",
-          }}
+          className={`library-howto-content ${expanded ? 'expanded' : 'not-expanded'}`}
           ref={el => {
             if (el && !overflown) {
               setOverflown(el.clientHeight < el.scrollHeight)
@@ -105,10 +101,13 @@ export function buildLibraryContent(library: any, pageContext: any) {
             {library.howto || library.description}
           </Marked>
         </div>
-        {overflown && <div
-          className="library-howto-expand"
-          onClick={() => setExpanded(!expanded)}
-        /> }
+        {overflown && (
+          <div
+            className={`library-howto-expand ${expanded ? 'expanded' : 'not-expanded'}`}
+            onClick={() => setExpanded(!expanded)}>
+              <img src="/img/downarrow.svg" className="library-howto-expand-anchor" />
+          </div>
+        )}
       </div>
     </div>
   )