add animation

browser/styles/main/ArticleDetail.styl

@@ -6,6 +6,7 @@ infoButton()
   cursor pointer
   height 33px
   width 33px
+  line-height 33px
   margin-right 5px
   font-size 18px
   color inactiveTextColor
@@ -67,8 +68,10 @@ infoButton()
         color brandColor
     .ArticleDetail-info-control
       float right
+      clearfix
       .ShareButton
-        display inline-block
+        display block
+        float left
       &>button, .ShareButton-open-button
         infoButton()
         .tooltip
@@ -78,8 +81,35 @@ infoButton()
           .tooltip
             opacity 1
       &>button
-        &:nth-child(2) .tooltip
+        float left
+        &:nth-child(1) .tooltip
           margin-left -65px
+      .ArticleDetail-info-control-save
+        float left
+        width 80px
+        margin-right 5px
+        overflow hidden
+        transition width 0.15s ease-in-out
+        border-radius 16.5px
+        &.hide
+          width 0px
+          opacity 0.2
+      .ArticleDetail-info-control-save-button
+        infoButton()
+        background-color brandColor
+        color white
+        font-size 12px
+        width 100%
+        border 1px solid brandBorderColor
+        white-space nowrap
+        .fa
+          font-size 18px
+        &:hover
+          color white
+          background-color lighten(brandColor, 15%)
+        &:focus
+          color white
+          background-color lighten(brandColor, 15%)
       .ShareButton-open-button .tooltip
         margin-left -40px
       .ShareButton-dropdown

browser/styles/main/ArticleNavigator.styl

@@ -61,12 +61,14 @@ articleCount = #999
     top 100px
     width 100%
     height 225px
+    transition opacity 0.2s ease-in-out
+    &.hide
+      opacity 0.2
     .ArticleNavigator-unsaved-header
       border-bottom 1px solid alpha(borderColor, 0.5)
       padding-bottom 5px
       clearfix()
       position relative
-      z-index 30
       padding-left 10px
       font-size 18px
       line-height 22px
@@ -140,6 +142,10 @@ articleCount = #999
     absolute bottom
     top 365px
     width 100%
+    transition top 0.15s ease-in-out
+    background-color articleNavBgColor
+    &.expand
+      top 100px
     .ArticleNavigator-folders-header
       border-bottom 1px solid alpha(borderColor, 0.5)
       padding-bottom 5px