misc visual updates - round 2

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;
   }

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>

examples/components/footer-nav.vue

@@ -41,10 +41,10 @@
     transition: .3s;
     
     &:hover {
-      color: #5e6d82;
+      color: #20a0ff;
      
       & i {
-        color: #5e6d82;
+        color: #20a0ff;
       }
     }
   }

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">

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;

examples/components/side-nav.vue

@@ -2,6 +2,7 @@
   .side-nav {
     width: 100%;
     box-sizing: border-box;
+    padding-right: 30px;
 
     li {
       list-style: none;

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">

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>

examples/docs/layout.md

@@ -2,6 +2,9 @@
   .demo-layout {
     .el-row {
       margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
     .el-col {
       height: 36px;

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>

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;
+          }
         }
       }
     }

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>