From e00f5ac9ea59d9dc51a59b16c1744e8b84c2f5e7 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Sun, 18 Sep 2016 22:01:26 +0800
Subject: [PATCH] misc visual updates - round 2

---
 examples/app.vue                   |  6 +++++-
 examples/components/demo-block.vue | 32 +++++++++++++++++++++++-------
 examples/components/footer-nav.vue |  4 ++--
 examples/components/footer.vue     |  2 +-
 examples/components/header.vue     |  7 ++++++-
 examples/components/side-nav.vue   |  1 +
 examples/docs/color.md             | 17 ++++++++--------
 examples/docs/icon.md              | 20 ++++++++++++++-----
 examples/docs/layout.md            |  3 +++
 examples/pages/changelog.vue       | 15 +++++++-------
 examples/pages/component.vue       |  5 +++++
 packages/slider/src/main.vue       |  2 +-
 12 files changed, 81 insertions(+), 33 deletions(-)

diff --git a/examples/app.vue b/examples/app.vue
index 826e9479..d8cff24f 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -25,8 +25,12 @@
   }
 
   .hljs {
-    padding: 20px 25px;
+    line-height: 1.8;
+    font-family: Menlo, Monaco, Consolas, Courier, monospace;
+    font-size: 12px;
+    padding: 18px 24px;
     background-color: #f9fafc;
+    border: solid 1px #eaeefb;
     margin-bottom: 25px;
     border-radius: 2px;
   }
diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index 553da863..11347e08 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -6,8 +6,12 @@
     @mouseleave="hovering = false">
     <slot></slot>
     <div class="demo-block-control" @click="isExpanded = !isExpanded">
-      <i :class="iconClass"></i>
-      <span v-show="hovering">{{ controlText }}</span>
+      <transition name="arrow-slide">
+        <i :class="[iconClass, { 'hovering': hovering }]"></i>
+      </transition>
+      <transition name="text-slide">
+        <span v-show="hovering">{{ controlText }}</span>
+      </transition>
     </div>
   </div>
 </template>
@@ -58,8 +62,11 @@
         color: #5e6d82;
         background-color: #e6effb;
         margin: 0 4px;
-        padding: 4px 8px;
+        transform: translateY(-2px);
+        display: inline-block;
+        padding: 1px 5px;
         font-size: 12px;
+        border-radius: 3px;
       }
     }
     
@@ -72,11 +79,7 @@
       }
       
       code.hljs {
-        font-size: 12px;
-        padding: 18px 24px;
         margin: 0;
-        line-height: 1.8;
-        background-color: #f9fafc;
         border: none;
         max-height: none;
         border-radius: 0;
@@ -99,21 +102,36 @@
       color: #d3dce6;
       cursor: pointer;
       transition: .2s;
+      position: relative;
 
       i {
         font-size: 12px;
         line-height: 36px;
+        transition: .3s;
+        &.hovering {
+          transform: translateX(-40px);
+        }
       }
 
       span {
+        position: absolute;
+        transform: translateX(-30px);
         font-size: 14px;
         line-height: 36px;
+        transition: .3s;
+        display: inline-block;
       }
       
       &:hover {
         color: #20a0ff;
         background-color: #f9fafc;
       }
+       
+      & .text-slide-enter,
+      & .text-slide-leave-active {
+        opacity: 0;
+        transform: translateX(10px);
+      }
     }
   }
 </style>
diff --git a/examples/components/footer-nav.vue b/examples/components/footer-nav.vue
index 6e8905ba..1ef30751 100644
--- a/examples/components/footer-nav.vue
+++ b/examples/components/footer-nav.vue
@@ -41,10 +41,10 @@
     transition: .3s;
     
     &:hover {
-      color: #5e6d82;
+      color: #20a0ff;
      
       & i {
-        color: #5e6d82;
+        color: #20a0ff;
       }
     }
   }
diff --git a/examples/components/footer.vue b/examples/components/footer.vue
index e4df4161..00338a77 100644
--- a/examples/components/footer.vue
+++ b/examples/components/footer.vue
@@ -3,7 +3,7 @@
     <div class="container">
       <div class="footer-main">
         <p class="footer-main-title">Element 1.0 Hydrogen</p>
-        <span class="footer-main-link">反馈建议</span>
+        <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">反馈建议</a>
         <!--<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>-->
       </div>
       <div class="footer-social">
diff --git a/examples/components/header.vue b/examples/components/header.vue
index 8320d245..11c58f3c 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -64,8 +64,13 @@
         color: #fff;
         display: block;
         padding: 0 20px;
+        opacity: .8;
+        &.active,
+        &:hover {
+          opacity: 1;
+        }
 
-        &.active:before {
+        &.active::before {
           content: '';
           display: block;
           position: absolute;
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index df4f1e80..22a7a151 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -2,6 +2,7 @@
   .side-nav {
     width: 100%;
     box-sizing: border-box;
+    padding-right: 30px;
 
     li {
       list-style: none;
diff --git a/examples/docs/color.md b/examples/docs/color.md
index b6c9a331..7a50c649 100644
--- a/examples/docs/color.md
+++ b/examples/docs/color.md
@@ -10,6 +10,7 @@
     & .value {
       font-size: 12px;
       opacity: 0.69;
+      line-height: 24px;
     }
   }
   .demo-color-box-group {
@@ -118,7 +119,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
     <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#ff4949</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
   </el-col>
 </el-row>
 
@@ -129,23 +130,23 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1f2d3d</div></div>
+      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
       <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
       <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492a6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99a9bf</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#c0ccda</div></div>
+      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
+      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
+      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#d3dce6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#e5e9f2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#eff2f7</div></div>
+      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
+      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
+      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
     </div>
   </el-col>
   <el-col :span="6">
diff --git a/examples/docs/icon.md b/examples/docs/icon.md
index f6f61365..3b7ca197 100644
--- a/examples/docs/icon.md
+++ b/examples/docs/icon.md
@@ -10,20 +10,28 @@
   }
 </script>
 <style>
-  .source>i {
-    margin: 0 10px;
+  .demo-icon .source > i {
+    font-size: 24px;
+    color: #8492a6;
+    margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
   }
+  
+  .demo-icon .source > button {
+    margin: 0 20px;
+  }
 
   .icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;
+    border: solid 1px #eaeefb;
+    border-radius: 4px;
   }
   .icon-list li {
     float: left;
-    width: 20%;
+    width: 16.66%;
     text-align: center;
     height: 120px;
     line-height: 120px;
@@ -42,15 +50,17 @@
       display: inline-block;
       line-height: normal;
       vertical-align: middle;
+      font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+      color: #99a9bf;
     }
     & i {
       display: block;
-      font-size: 30px;
+      font-size: 24px;
       margin-bottom: 15px;
+      color: #8492a6;
     }
     &:hover {
       color: rgb(92, 182, 255);
-      cursor: pointer;
     }
   }
 </style>
diff --git a/examples/docs/layout.md b/examples/docs/layout.md
index 2807ce55..5942cb0f 100644
--- a/examples/docs/layout.md
+++ b/examples/docs/layout.md
@@ -2,6 +2,9 @@
   .demo-layout {
     .el-row {
       margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
     .el-col {
       height: 36px;
diff --git a/examples/pages/changelog.vue b/examples/pages/changelog.vue
index 555e4334..59548c0d 100644
--- a/examples/pages/changelog.vue
+++ b/examples/pages/changelog.vue
@@ -36,6 +36,7 @@
       > li {
         list-style: none;
         position: relative;
+        line-height: 1.8;
 
         &:not(:last-child) {
           margin-bottom: 50px;
@@ -46,10 +47,10 @@
 
           h3:before {
             left: -33px;
-            top: 5px;
-            width: 16px;
+            top: 10px;
+            width: 17px;
             height: @width;
-            background-color: #81c8fa;
+            background-color: #20a0ff;
             border: 0;
           }          
         }
@@ -81,9 +82,9 @@
           display: block;
           position: absolute;
           left: -31px;
-          top: 7px;
+          top: 13px;
           circle: 13px transparent;
-          border: 2px solid #2ca2fc;
+          border: 2px solid #20a0ff;
           box-sizing: border-box;
           background-color: #fff;
         }
@@ -99,7 +100,7 @@
         position: absolute;
         left: -127px;
         font-style: normal;
-        top: 4px;
+        top: 6px;
         font-size: 14px;
         color: #99a9bf;
       }
@@ -107,7 +108,7 @@
   }
 </style>
 <template>
-  <div class="page-container page-changelog">
+  <div class="page-changelog">
     <h2>
       <el-button class="fr">
         <a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
diff --git a/examples/pages/component.vue b/examples/pages/component.vue
index 8a4fb20c..80c8d34f 100644
--- a/examples/pages/component.vue
+++ b/examples/pages/component.vue
@@ -14,6 +14,7 @@
           margin: 45px 0 15px;
         }
         table {
+          border-collapse: collapse;
           width: 100%;
           background-color: #fff;
           color: #5e6d82;
@@ -30,6 +31,10 @@
             border-bottom: 1px solid #eaeefb;
             padding: 10px 0;
           }
+          th {
+            border-top: 1px solid #eaeefb;
+            background-color: #EFF2F7;
+          }
         }
       }
     }
diff --git a/packages/slider/src/main.vue b/packages/slider/src/main.vue
index b161f31c..73bd7ff7 100644
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@@ -19,7 +19,7 @@
         <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
       </div>
       <transition name="popper-fade">
-        <div class="el-slider__pop" v-show="showTip" transition="popper-fade" ref="pop">{{ value }}</div>
+        <div class="el-slider__pop" v-show="showTip" ref="pop">{{ value }}</div>
       </transition>
       <div class="el-slider__stop" v-for="item in stops" :style="{ 'left': item + '%' }" v-if="showStops"></div>
     </div>