From 1214a24d0cf4108d4da929f2b24f2e252dc425cf Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 29 Sep 2017 15:37:50 +0800
Subject: [PATCH] update docs style vol.2

---
 examples/app.vue                         |  38 ++------
 examples/components/demo-block.vue       | 111 ++++++++++++++++-------
 examples/components/side-nav.vue         |  28 +++++-
 examples/docs/en-US/badge.md             |   2 +-
 examples/docs/en-US/carousel.md          |   2 +-
 examples/docs/en-US/cascader.md          |   2 +-
 examples/docs/en-US/color-picker.md      |   2 +-
 examples/docs/en-US/container.md         |  32 ++++---
 examples/docs/en-US/custom-theme.md      |  96 +-------------------
 examples/docs/en-US/installation.md      |  14 +--
 examples/docs/en-US/pagination.md        |   2 +-
 examples/docs/en-US/quickstart.md        |  26 ++++--
 examples/docs/en-US/rate.md              |   2 +-
 examples/docs/en-US/steps.md             |   2 +-
 examples/docs/zh-CN/badge.md             |   2 +-
 examples/docs/zh-CN/carousel.md          |   2 +-
 examples/docs/zh-CN/cascader.md          |   2 +-
 examples/docs/zh-CN/color-picker.md      |   2 +-
 examples/docs/zh-CN/container.md         |  32 ++++---
 examples/docs/zh-CN/custom-theme.md      |  98 +-------------------
 examples/docs/zh-CN/installation.md      |  14 +--
 examples/docs/zh-CN/pagination.md        |   2 +-
 examples/docs/zh-CN/quickstart.md        |  26 ++++--
 examples/docs/zh-CN/rate.md              |   2 +-
 examples/i18n/page.json                  |   4 +-
 examples/nav.config.json                 |  16 ++--
 examples/pages/template/component.tpl    |  10 +-
 examples/pages/template/resource.tpl     |  56 ++++++------
 packages/theme-chalk/src/common/var.scss |   8 +-
 packages/theme-chalk/src/slider.scss     |  12 ++-
 30 files changed, 268 insertions(+), 379 deletions(-)

diff --git a/examples/app.vue b/examples/app.vue
index 05d15bb6..f8d94f0f 100644
--- a/examples/app.vue
+++ b/examples/app.vue
@@ -23,7 +23,7 @@
         width: 100%;
         left: 0;
         top: 0;
-        z-index: 1000;
+        z-index: 1500;
         border-bottom: solid 1px #ccc;
       }
     }
@@ -60,7 +60,7 @@
     font-family: Menlo, Monaco, Consolas, Courier, monospace;
     font-size: 12px;
     padding: 18px 24px;
-    background-color: #f9fafc;
+    background-color: #fafafa;
     border: solid 1px #eaeefb;
     margin-bottom: 25px;
     border-radius: 4px;
@@ -123,7 +123,7 @@
       background-color: #ECF8FF;
       border-radius: 4px;
       border-left: #50bfff 5px solid;
-      margin-top: 20px;
+      margin: 20px 0;
 
       code {
         background-color: rgba(255, 255, 255, .7);
@@ -132,32 +132,12 @@
     }
 
     .warning {
-      border-bottom-right-radius: 4px;
-      border-left: 4px solid #f66;
-      border-top-right-radius: 4px;
-      padding: 12px 24px 12px 30px;
-      position: relative;
-      background-color: #f8f8f8;
-      margin-top: 20px;
-      
-      &::before {
-        background-color: #f66;
-        border-radius: 100%;
-        color: #fff;
-        content: "!";
-        font-family: Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
-        font-size: 14px;
-        font-weight: 700;
-        left: -12px;
-        line-height: 20px;
-        position: absolute;
-        width: 20px;
-        height: 20px;
-        text-align: center;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-  
+      padding: 8px 16px;
+      background-color: #fff6f7;
+      border-radius: 4px;
+      border-left: #FE6C6F 5px solid;
+      margin: 20px 0;
+
       code {
         background-color: rgba(255, 255, 255, .7);
         color: #445368;
diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index d92e9343..3e5a494c 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -5,30 +5,43 @@
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
     <slot name="source"></slot>
-    <div class="meta">
-      <div class="description">
+    <div class="meta" ref="meta">
+      <div class="description" v-if="$slots.default">
         <slot></slot>
-        <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
-          <el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
-        </el-tooltip>
       </div>
       <slot name="highlight"></slot>
     </div>
-    <div class="demo-block-control" @click="isExpanded = !isExpanded">
+    <div
+      class="demo-block-control"
+      ref="control"
+      :class="{ 'is-fixed': fixedControl }"
+      @click="isExpanded = !isExpanded">
       <transition name="arrow-slide">
         <i :class="[iconClass, { 'hovering': hovering }]"></i>
       </transition>
       <transition name="text-slide">
         <span v-show="hovering">{{ controlText }}</span>
       </transition>
+      <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
+        <transition name="text-slide">
+          <el-button
+            v-show="hovering || isExpanded"
+            size="small"
+            type="text"
+            class="control-button"
+            @click.stop="goJsfiddle">
+            {{ langConfig['button-text'] }}
+          </el-button>
+        </transition>
+      </el-tooltip>
     </div>
   </div>
 </template>
 
 <style>
   .demo-block {
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
+    border: solid 1px #ebebeb;
+    border-radius: 3px;
     transition: .2s;
 
     &.hover {
@@ -48,28 +61,28 @@
     }
 
     .meta {
-      background-color: #f9fafc;
+      background-color: #fafafa;
       border-top: solid 1px #eaeefb;
-      clear: both;
       overflow: hidden;
       height: 0;
       transition: height .2s;
     }
 
     .description {
-      padding: 18px 24px;
-      width: 40%;
+      padding: 20px;
       box-sizing: border-box;
-      border-left: solid 1px #eaeefb;
-      float: right;
+      border: solid 1px #ebebeb;
+      border-radius: 3px;
       font-size: 14px;
-      line-height: 1.8;
-      color: #5e6d82;
+      line-height: 22px;
+      color: #666;
       word-break: break-word;
+      margin: 10px;
+      background-color: #fff;
 
       p {
-        margin: 0 0 12px;
-        line-height: 1.8;
+        margin: 0;
+        line-height: 26px;
       }
 
       code {
@@ -86,9 +99,6 @@
     }
 
     .highlight {
-      width: 60%;
-      border-right: solid 1px #eaeefb;
-
       pre {
         margin: 0;
       }
@@ -107,7 +117,7 @@
 
     .demo-block-control {
       border-top: solid 1px #eaeefb;
-      height: 36px;
+      height: 44px;
       box-sizing: border-box;
       background-color: #fff;
       border-bottom-left-radius: 4px;
@@ -116,23 +126,28 @@
       margin-top: -1px;
       color: #d3dce6;
       cursor: pointer;
-      transition: .2s;
       position: relative;
+    
+      &.is-fixed {
+        position: fixed;
+        bottom: 0;
+        width: 868px;
+      }
 
       i {
         font-size: 12px;
-        line-height: 36px;
+        line-height: 44px;
         transition: .3s;
         &.hovering {
           transform: translateX(-40px);
         }
       }
 
-      span {
+      > span {
         position: absolute;
         transform: translateX(-30px);
         font-size: 14px;
-        line-height: 36px;
+        line-height: 44px;
         transition: .3s;
         display: inline-block;
       }
@@ -147,19 +162,27 @@
         opacity: 0;
         transform: translateX(10px);
       }
+      
+      .control-button {
+        line-height: 26px;
+        position: absolute;
+        top: 0;
+        right: 25px;
+        font-size: 14px;
+      }
     }
   }
 </style>
 
 <script type="text/babel">
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
 
   export default {
     data() {
       return {
         hovering: false,
-        isExpanded: false
+        isExpanded: false,
+        fixedControl: false
       };
     },
 
@@ -174,10 +197,10 @@
       goJsfiddle() {
         const { script, html, style } = this.jsfiddle;
         const resourcesTpl = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>' +
-        '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
+        '\n<scr' + 'ipt src="//unpkg.com/element-ui@next/lib/index.js"></scr' + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
         let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
-        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
+        let cssTpl = `@import url("//unpkg.com/element-ui@next/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
         jsTpl = jsTpl
           ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
           : 'new Vue().$mount(\'#app\')';
@@ -206,6 +229,17 @@
         document.body.appendChild(form);
 
         form.submit();
+      },
+
+      scrollHandler() {
+        const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
+        this.fixedControl = bottom > document.documentElement.clientHeight &&
+          top + 44 <= document.documentElement.clientHeight;
+        this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
+      },
+
+      removeScrollHandler() {
+        document.removeEventListener('scroll', this.scrollHandler);
       }
     },
 
@@ -236,7 +270,8 @@
 
       codeAreaHeight() {
         if (this.$el.getElementsByClassName('description').length > 0) {
-          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
+          return this.$el.getElementsByClassName('description')[0].clientHeight +
+            this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
         }
         return this.$el.getElementsByClassName('highlight')[0].clientHeight;
       }
@@ -245,6 +280,16 @@
     watch: {
       isExpanded(val) {
         this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
+        if (!val) {
+          this.fixedControl = false;
+          this.$refs.control.style.left = '0';
+          this.removeScrollHandler();
+          return;
+        }
+        setTimeout(() => {
+          document.addEventListener('scroll', this.scrollHandler);
+          this.scrollHandler();
+        }, 200);
       }
     },
 
@@ -256,6 +301,10 @@
           highlight.borderRight = 'none';
         }
       });
+    },
+
+    beforeDestroy() {
+      this.removeScrollHandler();
     }
   };
 </script>
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index 8abb0c3b..7fbc9ad1 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -3,6 +3,10 @@
     width: 100%;
     box-sizing: border-box;
     padding-right: 30px;
+    transition: opacity .5s;
+    &:hover {
+      opacity: 1 !important;
+    }
 
     li {
       list-style: none;
@@ -105,7 +109,10 @@
   }
 </style>
 <template>
-  <div class="side-nav" :style="navStyle">
+  <div
+    class="side-nav"
+    @mouseenter="isFade = false"
+    :style="navStyle">
     <ul>
       <li class="nav-item" v-for="item in data">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
@@ -150,6 +157,7 @@
   </div>
 </template>
 <script>
+  import bus from '../bus';
   import compoLang from '../i18n/component.json';
   import { version } from 'main/index.js';
 
@@ -168,17 +176,28 @@
         isSmallScreen: false,
         versions: [],
         version,
-        dropdownVisible: false
+        dropdownVisible: false,
+        isFade: false
       };
     },
     watch: {
       '$route.path'() {
         this.handlePathChange();
+      },
+      isFade(val) {
+        bus.$emit('navFade', val);
       }
     },
     computed: {
       navStyle() {
-        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
+        const style = {};
+        if (this.isSmallScreen) {
+          style.paddingBottom = '60px';
+        }
+        if (this.isFade) {
+          style.opacity = '0.5';
+        }
+        return style;
       },
       isComponentPage() {
         return /^component-/.test(this.$route.name);
@@ -233,6 +252,9 @@
       }
     },
     created() {
+      bus.$on('fadeNav', () => {
+        this.isFade = true;
+      });
       const xhr = new XMLHttpRequest();
       xhr.onreadystatechange = _ => {
         if (xhr.readyState === 4 && xhr.status === 200) {
diff --git a/examples/docs/en-US/badge.md b/examples/docs/en-US/badge.md
index 35e645c8..13ab44fd 100644
--- a/examples/docs/en-US/badge.md
+++ b/examples/docs/en-US/badge.md
@@ -96,7 +96,7 @@ Use a red dot to mark content that needs to be noticed.
 ```html
 <el-badge is-dot class="item">query</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>
diff --git a/examples/docs/en-US/carousel.md b/examples/docs/en-US/carousel.md
index a63e75c7..b4ec9513 100644
--- a/examples/docs/en-US/carousel.md
+++ b/examples/docs/en-US/carousel.md
@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index 0ccb0719..1ebdee14 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index ec333e20..b760701a 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -22,7 +22,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/en-US/container.md b/examples/docs/en-US/container.md
index 13173979..8b151434 100644
--- a/examples/docs/en-US/container.md
+++ b/examples/docs/en-US/container.md
@@ -1,12 +1,12 @@
 <style>
   .el-header, .el-footer {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     line-height: 60px;
   }
   
   .el-aside {
-    color: #fff;
+    color: #333;
   }
   
   #common-layouts + .demo-container {
@@ -15,14 +15,14 @@
     }
     
     .el-aside {
-      background-color: #8492a6;
+      background-color: #D3DCE6;
       text-align: center;
       line-height: 200px;
     }
     
     .el-main {
-      background-color: #d3dce6;
-      color: #5e6d82;
+      background-color: #E9EEF3;
+      color: #333;
       text-align: center;
       line-height: 160px;
     }
@@ -132,22 +132,22 @@ These components use flex for layout, so please make sure your browser supports
 
 <style>
   .el-header, .el-footer {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     text-align: center;
     line-height: 60px;
   }
   
   .el-aside {
-    background-color: #8492a6;
-    color: #fff;
+    background-color: #D3DCE6;
+    color: #333;
     text-align: center;
     line-height: 200px;
   }
   
   .el-main {
-    background-color: #d3dce6;
-    color: #5e6d82;
+    background-color: #E9EEF3;
+    color: #333;
     text-align: center;
     line-height: 160px;
   }
@@ -222,6 +222,7 @@ These components use flex for layout, so please make sure your browser supports
       </el-submenu>
     </el-menu>
   </el-aside>
+  
   <el-container>
     <el-header style="text-align: right; font-size: 12px">
       <el-dropdown>
@@ -234,6 +235,7 @@ These components use flex for layout, so please make sure your browser supports
       </el-dropdown>
       <span>Tom</span>
     </el-header>
+    
     <el-main>
       <el-table :data="tableData">
         <el-table-column prop="date" label="Date" width="140">
@@ -249,13 +251,13 @@ These components use flex for layout, so please make sure your browser supports
 
 <style>
   .el-header {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     line-height: 60px;
   }
   
   .el-aside {
-    color: #fff;
+    color: #333;
   }
 </style>
 
diff --git a/examples/docs/en-US/custom-theme.md b/examples/docs/en-US/custom-theme.md
index a02544e3..069f8c5e 100644
--- a/examples/docs/en-US/custom-theme.md
+++ b/examples/docs/en-US/custom-theme.md
@@ -1,96 +1,2 @@
 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
-
-## Changing theme color
-If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-preview/#/en-US) is recommended.
-
-The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
-
-The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
-
-## More customizations
-If you need more customization than just changing the theme color, please follow these steps:
-
-### Install related tool
-First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
-```shell
-npm i element-theme -g
-```
-
-Then install the default theme from npm or GitHub.
-```shell
-# from npm
-npm i element-theme-chalk -D
-
-# from GitHub
-npm i https://github.com/ElementUI/theme-chalk -D
-```
-
-### Initialize variable file
-After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
-
-```shell
-et -i [custom output file]
-
-> ✔ Generator variables file
-```
-
-In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
-```css
-:root {
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50BFFF;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
-  --color-white: #fff;
-  --color-black: #000;
-  --color-grey: #C0CCDA;
-```
-
-### Modify variables
-Just edit `element-variables.css`, e.g. changing the theme color to red:
-```CSS
---color-primary: red;
-```
-
-### Build theme
-After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
-```shell
-et
-
-> ✔ build theme font
-> ✔ build element theme
-```
-
-### Import custom theme
-By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
-
-```javascript
-import '../theme/index.css'
-import ElementUI from 'element-ui'
-import Vue from 'vue'
-
-Vue.use(ElementUI)
-```
-
-### Import component theme on demand
-If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
-```json
-{
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~theme"
-    }
-  ]]]
-}
-```
-
-If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
+Under construction.
\ No newline at end of file
diff --git a/examples/docs/en-US/installation.md b/examples/docs/en-US/installation.md
index 931e4469..f616fd86 100644
--- a/examples/docs/en-US/installation.md
+++ b/examples/docs/en-US/installation.md
@@ -4,21 +4,21 @@
 Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
 
 ```shell
-npm i element-ui -S
+npm i element-ui@next -S
 ```
 
 ### CDN
-Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
+Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) , and import JavaScript and CSS file in your page.
 
 ```html
 <!-- import CSS -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
 <!-- import JavaScript -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
 ```
 
 ### Hello world
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
 
 ```html
 <!DOCTYPE html>
@@ -26,7 +26,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
 <head>
   <meta charset="UTF-8">
   <!-- import CSS -->
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
 </head>
 <body>
   <div id="app">
@@ -39,7 +39,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
   <!-- import Vue before Element -->
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- import JavaScript -->
-  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
   <script>
     new Vue({
       el: '#app',
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
index ba78ab2f..714b3273 100644
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -7,7 +7,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
 
diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md
index bfbbcc26..6ad4e447 100644
--- a/examples/docs/en-US/quickstart.md
+++ b/examples/docs/en-US/quickstart.md
@@ -4,9 +4,7 @@ This part walks you through the process of using Element in a webpack project.
 
 ### Use Starter Kit
 
-We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
-
-If you prefer not to use them, please read the following.
+Under construction.
 
 ### Config files
 
@@ -42,8 +40,8 @@ Typical configurations for these config files are:
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "element-ui": "^1.0.0",
-    "vue": "^2.1.6"
+    "element-ui": "next",
+    "vue": "^2.4.2"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -194,7 +192,7 @@ new Vue({
 })
 ```
 
-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/dev/components.json))
+Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json))
 
 ```javascript
 import Vue from 'vue'
@@ -215,6 +213,7 @@ import {
   RadioGroup,
   RadioButton,
   Checkbox,
+  CheckboxButton,
   CheckboxGroup,
   Switch,
   Select,
@@ -244,19 +243,23 @@ import {
   Col,
   Upload,
   Progress,
-  Spinner,
   Badge,
   Card,
   Rate,
   Steps,
   Step,
   Carousel,
-  Scrollbar,
   CarouselItem,
   Collapse,
   CollapseItem,
   Cascader,
   ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   Loading,
   MessageBox,
   Message,
@@ -308,19 +311,22 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(Upload)
 Vue.use(Progress)
-Vue.use(Spinner)
 Vue.use(Badge)
 Vue.use(Card)
 Vue.use(Rate)
 Vue.use(Steps)
 Vue.use(Step)
 Vue.use(Carousel)
-Vue.use(Scrollbar)
 Vue.use(CarouselItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Cascader)
 Vue.use(ColorPicker)
+Vue.use(Container)
+Vue.use(Header)
+Vue.use(Aside)
+Vue.use(Main)
+Vue.use(Footer)
 
 Vue.use(Loading.directive)
 
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index c50dbd09..f1f57956 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -3,7 +3,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
index f2750786..a40404e5 100644
--- a/examples/docs/en-US/steps.md
+++ b/examples/docs/en-US/steps.md
@@ -133,7 +133,7 @@ Simple step bars, where `align-center`, `description`, `direction` and `space` w
 :::demo
 ```html
 
-<el-steps :space="200" active="1" simple>
+<el-steps :space="200" :active="1" simple>
   <el-step title="Step 1" icon="el-icon-edit"></el-step>
   <el-step title="Step 2" icon="el-icon-upload"></el-step>
   <el-step title="Step 3" icon="el-icon-picture"></el-step>
diff --git a/examples/docs/zh-CN/badge.md b/examples/docs/zh-CN/badge.md
index d0fd4912..e0a43489 100644
--- a/examples/docs/zh-CN/badge.md
+++ b/examples/docs/zh-CN/badge.md
@@ -98,7 +98,7 @@
 ```html
 <el-badge is-dot class="item">数据查询</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>
diff --git a/examples/docs/zh-CN/carousel.md b/examples/docs/zh-CN/carousel.md
index f88da431..e3b3c524 100644
--- a/examples/docs/zh-CN/carousel.md
+++ b/examples/docs/zh-CN/carousel.md
@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/zh-CN/cascader.md b/examples/docs/zh-CN/cascader.md
index 4565aeae..9be7bf2f 100644
--- a/examples/docs/zh-CN/cascader.md
+++ b/examples/docs/zh-CN/cascader.md
@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index eb652534..413e6538 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -22,7 +22,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/docs/zh-CN/container.md b/examples/docs/zh-CN/container.md
index f4468146..9977a363 100644
--- a/examples/docs/zh-CN/container.md
+++ b/examples/docs/zh-CN/container.md
@@ -1,12 +1,12 @@
 <style>
   .el-header, .el-footer {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     line-height: 60px;
   }
   
   .el-aside {
-    color: #fff;
+    color: #333;
   }
   
   #chang-jian-ye-mian-bu-ju + .demo-container {
@@ -15,14 +15,14 @@
     }
   
     .el-aside {
-      background-color: #8492a6;
+      background-color: #D3DCE6;
       text-align: center;
       line-height: 200px;
     }
   
     .el-main {
-      background-color: #d3dce6;
-      color: #5e6d82;
+      background-color: #E9EEF3;
+      color: #333;
       text-align: center;
       line-height: 160px;
     }
@@ -132,22 +132,22 @@
 
 <style>
   .el-header, .el-footer {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     text-align: center;
     line-height: 60px;
   }
   
   .el-aside {
-    background-color: #8492a6;
-    color: #fff;
+    background-color: #D3DCE6;
+    color: #333;
     text-align: center;
     line-height: 200px;
   }
   
   .el-main {
-    background-color: #d3dce6;
-    color: #5e6d82;
+    background-color: #E9EEF3;
+    color: #333;
     text-align: center;
     line-height: 160px;
   }
@@ -222,6 +222,7 @@
       </el-submenu>
     </el-menu>
   </el-aside>
+  
   <el-container>
     <el-header style="text-align: right; font-size: 12px">
       <el-dropdown>
@@ -234,6 +235,7 @@
       </el-dropdown>
       <span>王小虎</span>
     </el-header>
+    
     <el-main>
       <el-table :data="tableData">
         <el-table-column prop="date" label="日期" width="140">
@@ -249,13 +251,13 @@
 
 <style>
   .el-header {
-    background-color: #1f2d3d;
-    color: #fff;
+    background-color: #B3C0D1;
+    color: #333;
     line-height: 60px;
   }
   
   .el-aside {
-    color: #fff;
+    color: #333;
   }
 </style>
 
diff --git a/examples/docs/zh-CN/custom-theme.md b/examples/docs/zh-CN/custom-theme.md
index bf0e4faf..acbca83f 100644
--- a/examples/docs/zh-CN/custom-theme.md
+++ b/examples/docs/zh-CN/custom-theme.md
@@ -1,98 +1,2 @@
 ## 自定义主题
-Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。
-
-## 仅替换主题色
-如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-preview)。
-
-Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
-
-使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
-
-如果希望进行除主题色之外的样式定制，请继续阅读。
-
-## 深层次的定制
-如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：
-
-### 安装工具
-首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
-```shell
-npm i element-theme -g
-```
-
-安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
-```shell
-# 从 npm
-npm i element-theme-chalk -D
-
-# 从 GitHub
-npm i https://github.com/ElementUI/theme-chalk -D
-```
-
-### 初始化变量文件
-主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
-
-```shell
-et -i [可以自定义变量文件]
-
-> ✔ Generator variables file
-```
-
-如果使用默认配置，执行后当前目录会有一个 `element-variables.css` 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：
-```css
-:root {
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50BFFF;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
-  --color-white: #fff;
-  --color-black: #000;
-  --color-grey: #C0CCDA;
-```
-
-### 修改变量
-直接编辑 `element-variables.css` 文件，例如修改主题色为红色。
-```CSS
---color-primary: red;
-```
-
-### 编译主题
-保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数；如果你在初始化时指定了自定义变量文件，则需要增加 `-c` 参数，并带上你的变量文件名
-```shell
-et
-
-> ✔ build theme font
-> ✔ build element theme
-```
-
-### 引入自定义主题
-默认情况下编译的主题目录是放在 `./theme` 下，你可以通过 `-o` 参数指定打包目录。像引入默认主题一样，在代码里直接引用 `theme/index.css` 文件即可。
-
-```javascript
-import '../theme/index.css'
-import ElementUI from 'element-ui'
-import Vue from 'vue'
-
-Vue.use(ElementUI)
-```
-
-### 搭配插件按需引入组件主题
-如果是搭配 `babel-plugin-component` 一起使用，只需要修改 `.babelrc` 的配置，指定 `styleLibraryName` 路径为自定义主题相对于 `.babelrc` 的路径，注意要加 `~`。
-```json
-{
-  "plugins": [["component", [
-    {
-      "libraryName": "element-ui",
-      "styleLibraryName": "~theme"
-    }
-  ]]]
-}
-```
-
-如果不清楚 `babel-plugin-component` 是什么，请阅读 <a href="./#/zh-CN/component/quickstart">快速上手</a> 一节。更多 `element-theme` 用法请参考[项目仓库](https://github.com/ElementUI/element-theme)。
+整理中。
diff --git a/examples/docs/zh-CN/installation.md b/examples/docs/zh-CN/installation.md
index b0076ce9..d79277ae 100644
--- a/examples/docs/zh-CN/installation.md
+++ b/examples/docs/zh-CN/installation.md
@@ -4,21 +4,21 @@
 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
 
 ```shell
-npm i element-ui -S
+npm i element-ui@next -S
 ```
 
 ### CDN
-目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
+目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui@next/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
 
 ```html
 <!-- 引入样式 -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+<link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
 <!-- 引入组件库 -->
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+<script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
 ```
 
 ### Hello world
-通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](http://codepen.io/QingWei-Li/pen/vXwJrY)
+通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
 
 ```html
 <!DOCTYPE html>
@@ -26,7 +26,7 @@ npm i element-ui -S
 <head>
   <meta charset="UTF-8">
   <!-- 引入样式 -->
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/element-ui@next/lib/theme-chalk/index.css">
 </head>
 <body>
   <div id="app">
@@ -39,7 +39,7 @@ npm i element-ui -S
   <!-- 先引入 Vue -->
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <!-- 引入组件库 -->
-  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
+  <script src="https://unpkg.com/element-ui@next/lib/index.js"></script>
   <script>
     new Vue({
       el: '#app',
diff --git a/examples/docs/zh-CN/pagination.md b/examples/docs/zh-CN/pagination.md
index cf2caa36..cd8fdc09 100644
--- a/examples/docs/zh-CN/pagination.md
+++ b/examples/docs/zh-CN/pagination.md
@@ -153,7 +153,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
 
diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md
index 78b64380..3dcf9916 100644
--- a/examples/docs/zh-CN/quickstart.md
+++ b/examples/docs/zh-CN/quickstart.md
@@ -4,9 +4,7 @@
 
 ### 使用 Starter Kit
 
-我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
-
-如果不希望使用我们提供的模板，请继续阅读。
+整理中。
 
 ### 配置文件
 
@@ -42,8 +40,8 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "element-ui": "^1.0.0",
-    "vue": "^2.1.6"
+    "element-ui": "next",
+    "vue": "^2.4.2"
   },
   "devDependencies": {
     "babel-core": "^6.0.0",
@@ -194,7 +192,7 @@ new Vue({
 })
 ```
 
-完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/dev/components.json) 为准）
+完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json) 为准）
 
 ```javascript
 import Vue from 'vue'
@@ -215,6 +213,7 @@ import {
   RadioGroup,
   RadioButton,
   Checkbox,
+  CheckboxButton,
   CheckboxGroup,
   Switch,
   Select,
@@ -244,19 +243,23 @@ import {
   Col,
   Upload,
   Progress,
-  Spinner,
   Badge,
   Card,
   Rate,
   Steps,
   Step,
   Carousel,
-  Scrollbar,
   CarouselItem,
   Collapse,
   CollapseItem,
   Cascader,
   ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   Loading,
   MessageBox,
   Message,
@@ -308,19 +311,22 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(Upload)
 Vue.use(Progress)
-Vue.use(Spinner)
 Vue.use(Badge)
 Vue.use(Card)
 Vue.use(Rate)
 Vue.use(Steps)
 Vue.use(Step)
 Vue.use(Carousel)
-Vue.use(Scrollbar)
 Vue.use(CarouselItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Cascader)
 Vue.use(ColorPicker)
+Vue.use(Container)
+Vue.use(Header)
+Vue.use(Aside)
+Vue.use(Main)
+Vue.use(Footer)
 
 Vue.use(Loading.directive)
 
diff --git a/examples/docs/zh-CN/rate.md b/examples/docs/zh-CN/rate.md
index cbf70a9c..6e54a63e 100644
--- a/examples/docs/zh-CN/rate.md
+++ b/examples/docs/zh-CN/rate.md
@@ -22,7 +22,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
diff --git a/examples/i18n/page.json b/examples/i18n/page.json
index 70cf61fe..5b303165 100644
--- a/examples/i18n/page.json
+++ b/examples/i18n/page.json
@@ -82,7 +82,7 @@
       "resource": {
         "paraHeight": "1.8",
         "1": "资源",
-        "2": "这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。",
+        "2": "整理中",
         "3": "Axure Components",
         "4": "通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件",
         "5": "下载",
@@ -176,7 +176,7 @@
       "resource": {
         "paraHeight": "1.6",
         "1": "Resource",
-        "2": "Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.",
+        "2": "Under construction.",
         "3": "Axure Components",
         "4": "By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.",
         "5": "Download",
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 21674f6b..41101da9 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -246,6 +246,14 @@
     }
   ],
   "en-US": [
+    {
+      "name": "Changelog",
+      "path": "/changelog"
+    },
+    {
+      "name": "Element React",
+      "href": "https://eleme.github.io/element-react/"
+    },
     {
       "name": "Development",
       "children": [
@@ -271,14 +279,6 @@
         }
       ]
     },
-    {
-      "name": "Changelog",
-      "path": "/changelog"
-    },
-    {
-      "name": "Element React",
-      "href": "https://eleme.github.io/element-react/"
-    },
     {
       "name": "Components",
       "groups": [
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index d1c79265..99d5c9cc 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -40,7 +40,7 @@
       padding-top: 130px;
       > {
         h3 {
-          margin: 45px 0 20px;
+          margin: 55px 0 20px;
         }
 
         table {
@@ -172,9 +172,17 @@
           this.showHeader = true;
           bus.$emit('toggleHeader', this.showHeader);
         }
+        if (!this.navFaded) {
+          bus.$emit('fadeNav');
+        }
         this.scrollTop = scrollTop;
       }
     },
+    created() {
+      bus.$on('navFade', val => {
+        this.navFaded = val;
+      });
+    },
     mounted() {
       this.throttledScrollHandler = throttle(300, this.handleScroll);
       document.addEventListener('scroll', this.throttledScrollHandler);
diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index 99949d7c..47bfc4e9 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -99,33 +99,33 @@
   <div class="page-container page-resource">
     <h2><%= 1 ></h2>
     <p><%= 2 ></p>
-    <div class="cards">
-      <ul class="container">
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Axure-Components.svg" alt="">
-            <h3><%= 3 ></h3>
-            <p><%= 4 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>
-          </div>
-        </li>
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Sketch-Template.svg" alt="">
-            <h3><%= 6 ></h3>
-            <p><%= 7 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>
-          </div>
-        </li>
-        <li>
-          <div class="card">
-            <img src="~examples/assets/images/Module.svg" alt="">
-            <h3><%= 8 ></h3>
-            <p><%= 9 ></p>
-            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>
-          </div>
-        </li>
-      </ul>
-    </div>
+    <!--<div class="cards">-->
+      <!--<ul class="container">-->
+        <!--<li>-->
+          <!--<div class="card">-->
+            <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
+            <!--<h3><%= 3 ></h3>-->
+            <!--<p><%= 4 ></p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"><%= 5 ></a>-->
+          <!--</div>-->
+        <!--</li>-->
+        <!--<li>-->
+          <!--<div class="card">-->
+            <!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
+            <!--<h3><%= 6 ></h3>-->
+            <!--<p><%= 7 ></p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"><%= 5 ></a>-->
+          <!--</div>-->
+        <!--</li>-->
+        <!--<li>-->
+          <!--<div class="card">-->
+            <!--<img src="~examples/assets/images/Module.svg" alt="">-->
+            <!--<h3><%= 8 ></h3>-->
+            <!--<p><%= 9 ></p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>-->
+          <!--</div>-->
+        <!--</li>-->
+      <!--</ul>-->
+    <!--</div>-->
   </div>
 </template>
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 884bda08..233ce3b8 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -570,15 +570,15 @@ $--card-padding: 20px;
 $--slider-main-background-color: $--color-primary;
 $--slider-runway-background-color: $--border-color-light;
 $--slider-button-hover-color: mix($--color-primary, black, 97%);
-$--slider-stop-background-color: $--color-text-placeholder;
+$--slider-stop-background-color: $--color-white;
 $--slider-disable-color: $--color-text-placeholder;
 
 $--slider-margin: 16px 0;
 $--slider-border-radius: 3px;
-$--slider-height: 4px;
-$--slider-button-size: 12px;
+$--slider-height: 6px;
+$--slider-button-size: 16px;
 $--slider-button-wrapper-size: 36px;
-$--slider-button-wrapper-offset: -16px;
+$--slider-button-wrapper-offset: -15px;
 
 /* Steps
 --------------------------*/
diff --git a/packages/theme-chalk/src/slider.scss b/packages/theme-chalk/src/slider.scss
index 2dc89622..0f4486cf 100644
--- a/packages/theme-chalk/src/slider.scss
+++ b/packages/theme-chalk/src/slider.scss
@@ -25,10 +25,14 @@
     &.disabled {
       cursor: default;
 
-      .el-slider__bar, .el-slider__button {
+      .el-slider__bar {
         background-color: $--slider-disable-color;
       }
 
+      .el-slider__button {
+        border-color: $--slider-disable-color;
+      }
+
       .el-slider__button-wrapper {
         &:hover,
         &.hover {
@@ -102,7 +106,8 @@
   @include e(button) {
     width: $--slider-button-size;
     height: $--slider-button-size;
-    background-color: $--slider-main-background-color;
+    border: solid 2px $--slider-main-background-color;
+    background-color: $--color-white;
     border-radius: 50%;
     transition: .2s;
     user-select: none;
@@ -110,8 +115,7 @@
     &:hover,
     &.hover,
     &.dragging {
-      transform: scale(1.5);
-      background-color: $--slider-button-hover-color;
+      transform: scale(1.2);
     }
 
     &:hover,