From ac571ce6d8c8b8fd2643ca8ca7166ac3286ae98c Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Thu, 18 May 2017 12:28:45 +0800
Subject: [PATCH] doc: add the missing styles for english docs

---
 examples/docs/en-US/alert.md           |  9 +++
 examples/docs/en-US/button.md          | 45 ++++++++++++++
 examples/docs/en-US/carousel.md        | 65 ++++++++++++++++---
 examples/docs/en-US/cascader.md        | 31 ++++++++++
 examples/docs/en-US/collapse.md        | 10 +++
 examples/docs/en-US/color-picker.md    | 20 ++++++
 examples/docs/en-US/color.md           | 86 ++++++++++++++++++++++++++
 examples/docs/en-US/date-picker.md     | 24 +++++++
 examples/docs/en-US/datetime-picker.md | 24 +++++++
 examples/docs/en-US/dialog.md          | 23 +++++++
 examples/docs/en-US/dropdown.md        | 40 ++++++++++++
 examples/docs/en-US/icon.md            | 58 ++++++++++++++++-
 examples/docs/en-US/input-number.md    |  8 +++
 examples/docs/en-US/layout.md          | 31 ++++++++++
 examples/docs/en-US/loading.md         |  6 ++
 examples/docs/en-US/menu.md            | 30 +++++++++
 examples/docs/en-US/pagination.md      | 50 +++++++++++++++
 examples/docs/en-US/popover.md         | 14 +++++
 examples/docs/en-US/rate.md            | 21 +++++++
 examples/docs/en-US/select.md          | 10 ++-
 examples/docs/en-US/switch.md          |  8 +++
 examples/docs/en-US/table.md           | 28 ++++++++-
 examples/docs/en-US/tag.md             | 23 +++++++
 examples/docs/en-US/time-picker.md     |  8 +++
 examples/docs/en-US/transfer.md        |  9 +++
 examples/docs/en-US/transition.md      | 15 +++++
 examples/docs/en-US/tree.md            | 24 ++++++-
 examples/docs/en-US/typography.md      | 74 ++++++++++++++++++++++
 examples/docs/en-US/upload.md          | 41 ++++++++++++
 29 files changed, 822 insertions(+), 13 deletions(-)

diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md
index 230e2955..7369a72b 100644
--- a/examples/docs/en-US/alert.md
+++ b/examples/docs/en-US/alert.md
@@ -7,6 +7,15 @@
     }
   }
 </script>
+<style>
+  .demo-box.demo-alert .el-alert {
+    margin: 20px 0 0;
+  }
+
+  .demo-box.demo-alert .el-alert:first-child {
+    margin: 0;
+  }
+</style>
 
 ## Alert
 
diff --git a/examples/docs/en-US/button.md b/examples/docs/en-US/button.md
index e88ee7d3..b6e36794 100644
--- a/examples/docs/en-US/button.md
+++ b/examples/docs/en-US/button.md
@@ -22,6 +22,51 @@
     }
   }
 </script>
+<style>
+  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 10px;
+    }
+    .el-button + .el-button {
+      margin-left: 10px;
+    }
+    .el-button-group {
+      margin-bottom: 20px;
+
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+
+      & + .el-button-group {
+        margin-left: 10px;
+      }
+    }
+  }
+
+  .demo-box.demo-button .intro-block {
+    padding: 0;
+  }
+
+  .demo-button .intro-block .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-button .intro-block .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-button .intro-block .wrapper {
+    float: right;
+    margin-right: 20px;
+  }
+</style>
 
 ## Button
 
diff --git a/examples/docs/en-US/carousel.md b/examples/docs/en-US/carousel.md
index cfea588d..a63e75c7 100644
--- a/examples/docs/en-US/carousel.md
+++ b/examples/docs/en-US/carousel.md
@@ -10,6 +10,55 @@
     }
   }
 </script>
+<style>
+  .demo-carousel .block {
+    padding: 30px;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-carousel .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-carousel .el-carousel__container {
+    text-align: center;
+  }
+
+  .demo-carousel .el-carousel__item {
+    h3 {
+      color: #fff;
+      font-size: 18px;
+      line-height: 300px;
+      margin: 0;
+    }
+    &:nth-child(2n) {
+      background-color: #99a9bf;
+    }
+    &:nth-child(2n+1) {
+      background-color: #d3dce6;
+    }
+  }
+
+  .demo-carousel .small h3 {
+    font-size: 14px;
+    line-height: 150px;
+  }
+
+  .demo-carousel .medium h3 {
+    font-size: 14px;
+    line-height: 200px;
+  }
+</style>
 ## Carousel
 
 Loop a series of images or texts in a limited space
@@ -45,11 +94,11 @@ Loop a series of images or texts in a limited space
     line-height: 150px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -79,11 +128,11 @@ Indicators can be displayed outside the carousel
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -113,11 +162,11 @@ You can define when arrows are displayed
     line-height: 300px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
@@ -147,11 +196,11 @@ When a page is wide enough but has limited height, you can activate card mode fo
     line-height: 200px;
     margin: 0;
   }
-  
+
   .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
   }
-  
+
   .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
   }
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index 0b16c6c3..0ccb0719 100644
--- a/examples/docs/en-US/cascader.md
+++ b/examples/docs/en-US/cascader.md
@@ -247,6 +247,37 @@
   };
 </script>
 
+<style>
+  .demo-cascader {
+    .el-cascader {
+      width: 222px;
+    }
+  }
+  .demo-cascader-size {
+    .el-cascader {
+      vertical-align: top;
+      margin-right: 15px;
+    }
+  }
+  .demo-cascader .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-cascader .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## Cascader
 
 If the options have a clear hierarchical structure, Cascader can be used to view and select them.
diff --git a/examples/docs/en-US/collapse.md b/examples/docs/en-US/collapse.md
index a4d70cf6..c09bd491 100644
--- a/examples/docs/en-US/collapse.md
+++ b/examples/docs/en-US/collapse.md
@@ -14,6 +14,16 @@
   }
 </script>
 
+<style>
+  .demo-collapse {
+    .el-collapse-item__header {
+      .header-icon {
+        margin-left: 5px;
+      }
+    }
+  }
+</style>
+
 ## Collapse
 
 Use Collapse to store contents.
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index 0de276cd..dd5672ba 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -16,6 +16,26 @@
   }
 </script>
 
+<style>
+  .demo-color-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+  .demo-color-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## ColorPicker
 
 ColorPicker is a color selector supporting multiple color formats.
diff --git a/examples/docs/en-US/color.md b/examples/docs/en-US/color.md
index ccfa83c0..bb7717b0 100644
--- a/examples/docs/en-US/color.md
+++ b/examples/docs/en-US/color.md
@@ -1,3 +1,89 @@
+<style>
+  .demo-color-box {
+    border-radius: 4px;
+    padding: 20px;
+    height: 74px;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 14px;
+
+    & .value {
+      font-size: 12px;
+      opacity: 0.69;
+      line-height: 24px;
+    }
+  }
+  .demo-color-box-group {
+    .demo-color-box {
+      border-radius: 0;
+    }
+    .demo-color-box:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+    .demo-color-box:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+  .bg-blue-light {
+    background-color: #58b7ff;
+  }
+  .bg-blue,
+  .bg-info {
+    background-color: #20a0ff;
+  }
+  .bg-blue-dark {
+    background-color: #1d8ce0;
+  }
+
+  .bg-success {
+    background-color: #13CE66;
+  }
+  .bg-warning {
+    background-color: #f7ba2a;
+  }
+  .bg-danger {
+    background-color: #ff4949;
+  }
+
+  .bg-black {
+    background-color: #1f2d3d;
+  }
+  .bg-black-light {
+    background-color: #324057;
+  }
+  .bg-black-lighter {
+    background-color: #475669;
+  }
+
+  .bg-silver {
+    background-color: #8492a6;
+  }
+  .bg-silver-light {
+    background-color: #99a9bf;
+  }
+  .bg-silver-lighter {
+    background-color: #c0ccda;
+  }
+
+  .bg-gray {
+    background-color: #d3dce6;
+  }
+  .bg-gray-light {
+    background-color: #e5e9f2;
+  }
+  .bg-gray-lighter {
+    background-color: #eff2f7;
+  }
+
+  .bg-white-dark {
+    background-color: #f9fafc;
+  }
+
+  .color-gray {
+    color: #5e6d82;
+  }
+</style>
+
 ## Color
 Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.
 
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 36ab0cb0..532e1a5b 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/examples/docs/en-US/date-picker.md
@@ -63,6 +63,30 @@
   };
 </script>
 
+<style>
+  .demo-block.demo-date-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-date-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-date-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## DatePicker
 
 Use Date Picker for date input.
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index 63a984b0..d9291931 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/examples/docs/en-US/datetime-picker.md
@@ -72,6 +72,30 @@
   };
 </script>
 
+<style>
+.demo-block.demo-datetime-picker .source {
+    padding: 0;
+    display: flex;
+  }
+
+  .demo-datetime-picker .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    flex: 1;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-datetime-picker .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 ## DateTimePicker
 
 Select date and time in one picker.
diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md
index 8ed07c91..27e4e6a1 100644
--- a/examples/docs/en-US/dialog.md
+++ b/examples/docs/en-US/dialog.md
@@ -47,6 +47,29 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-dialog {
+    .dialog-footer button:first-child {
+      margin-right: 10px;
+    }
+    .full-image {
+      width: 100%;
+    }
+    .el-dialog__wrapper {
+      margin: 0;
+    }
+    .el-select {
+      width: 300px;
+    }
+    .el-input {
+      width: 300px;
+    }
+    .el-button--text {
+      margin-right: 15px;
+    }
+  }
+</style>
+
 ## Dialog
 
 Informs users while preserving the current page state.
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 7cd32d5b..0db59d88 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -1,3 +1,43 @@
+<style>
+  .demo-box {
+    .el-dropdown {
+      vertical-align: top;
+
+      & + .el-dropdown {
+        margin-left: 15px;
+      }
+    }
+    .el-dropdown-link {
+      cursor: pointer;
+      color: #20a0ff;
+    }
+    .el-icon-caret-bottom {
+      font-size: 12px;
+    }
+  }
+
+  .block-col-2 {
+    margin: -24px;
+
+    .el-col {
+      padding: 30px 0;
+      text-align: center;
+      border-right: 1px solid #eff2f6;
+
+      &:last-child {
+        border-right: 0;
+      }
+    }
+  }
+
+ .demo-dropdown .demonstration {
+   display: block;
+   color: #8492a6;
+   font-size: 14px;
+   margin-bottom: 20px;
+ }
+</style>
+
 <script>
   export default {
     methods: {
diff --git a/examples/docs/en-US/icon.md b/examples/docs/en-US/icon.md
index 47d4cfb9..6c72c931 100644
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@@ -10,7 +10,63 @@
   }
 </script>
 
-## Icon 
+<style>
+  .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: 16.66%;
+    text-align: center;
+    height: 120px;
+    line-height: 120px;
+    color: #666;
+    font-size: 13px;
+    transition: color .15s linear;
+
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+
+    @utils-vertical-center;
+
+    & span {
+      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: 24px;
+      margin-bottom: 15px;
+      color: #8492a6;
+    }
+    &:hover {
+      color: rgb(92, 182, 255);
+    }
+  }
+</style>
+
+## Icon
 
 Element provides a set of common icons.
 
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index e43b8826..69bc688b 100644
--- a/examples/docs/en-US/input-number.md
+++ b/examples/docs/en-US/input-number.md
@@ -18,6 +18,14 @@
   };
 </script>
 
+<style>
+  .demo-box.demo-input-number {
+    .el-input-number + .el-input-number {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## InputNumber
 
 Input numerical values with a customizable range.
diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md
index 5deffeb4..ca2970fa 100644
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@@ -1,3 +1,34 @@
+<style>
+  .demo-layout {
+    .el-row {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    .el-col {
+      border-radius: 4px;
+    }
+    .bg-purple-dark {
+      background: #99a9bf;
+    }
+    .bg-purple {
+      background: #d3dce6;
+    }
+    .bg-purple-light {
+      background: #e5e9f2;
+    }
+    .grid-content {
+      border-radius: 4px;
+      min-height: 36px;
+    }
+    .row-bg {
+      padding: 10px 0;
+      background-color: #f9fafc;
+    }
+  }
+</style>
+
 ## Layout
 
 Quickly and easily create layouts with the basic 24-column.
diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md
index e340a0b9..5b3826ca 100644
--- a/examples/docs/en-US/loading.md
+++ b/examples/docs/en-US/loading.md
@@ -1,3 +1,9 @@
+<style>
+  .demo-loading .el-table {
+    border: none;
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/menu.md b/examples/docs/en-US/menu.md
index ff89b548..ea60f81b 100644
--- a/examples/docs/en-US/menu.md
+++ b/examples/docs/en-US/menu.md
@@ -1,3 +1,33 @@
+<style>
+  .demo-box.demo-menu {
+    .el-menu-demo {
+      padding-left: 55px;
+    }
+    .el-menu-vertical-demo {
+      width: 200px;
+      min-height: 400px;
+    }
+    .line {
+      height: 1px;
+      background-color: #e0e6ed;
+      margin: 35px -24px;
+    }
+    h5 {
+      font-size: 14px;
+      color: #8492a6;
+      margin-top: 10px;
+    }
+    .tac {
+      text-align: center;
+
+      .el-menu-vertical-demo {
+        display: inline-block;
+        text-align: left;
+      }
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/pagination.md b/examples/docs/en-US/pagination.md
index 47e88137..5f182f5a 100644
--- a/examples/docs/en-US/pagination.md
+++ b/examples/docs/en-US/pagination.md
@@ -1,3 +1,53 @@
+<style>
+  .demo-pagination .source.first {
+    padding: 0;
+  }
+
+  .demo-pagination .first .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-pagination .first .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+
+  .demo-pagination .source.last {
+    padding: 0;
+  }
+
+  .demo-pagination .last .block {
+    padding: 30px 24px;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .demo-pagination .last .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+
+  .demo-pagination .last .demonstration + .el-pagination {
+    float: right;
+    width: 70%;
+    margin: 5px 20px 0 0;
+  }
+</style>
+
 ## Pagination
 
 If you have too much data to display in one page, use pagination.
diff --git a/examples/docs/en-US/popover.md b/examples/docs/en-US/popover.md
index bd6a6e46..b3b6d146 100644
--- a/examples/docs/en-US/popover.md
+++ b/examples/docs/en-US/popover.md
@@ -1,3 +1,17 @@
+<style>
+  .demo-box.demo-popover {
+    .el-popover + .el-popover {
+      margin-left: 10px;
+    }
+    .el-input {
+      width: 360px;
+    }
+    .el-button {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/rate.md b/examples/docs/en-US/rate.md
index af259e2f..ecdf40a0 100644
--- a/examples/docs/en-US/rate.md
+++ b/examples/docs/en-US/rate.md
@@ -1,3 +1,24 @@
+<style>
+  .demo-rate .block {
+    padding: 30px 0;
+    text-align: center;
+    border-right: solid 1px #EFF2F6;
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  .demo-rate .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md
index aa39ddd2..09a1a3f8 100644
--- a/examples/docs/en-US/select.md
+++ b/examples/docs/en-US/select.md
@@ -105,7 +105,7 @@
         states: ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut", "Delaware", "Florida", "Georgia", "Hawaii", "Idaho", "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana", "Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota", "Mississippi", "Missouri", "Montana", "Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota", "Tennessee", "Texas", "Utah", "Vermont", "Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"]
       };
     },
-    
+
     mounted() {
       this.list = this.states.map(item => { return { value: item, label: item }; });
     },
@@ -126,6 +126,12 @@
   };
 </script>
 
+<style>
+  .demo-select .el-select {
+    width: 240px;
+  }
+</style>
+
 ## Select
 
 When there are plenty of options, use a drop-down menu to display and select desired ones.
@@ -236,7 +242,7 @@ Disable the whole component.
     </el-option>
   </el-select>
 </template>
-  
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index 65023175..fcad1182 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -1,3 +1,11 @@
+<style>
+  .demo-box.demo-switch {
+    .el-switch {
+      margin: 20px 20px 20px 0;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
index bfd61cfb..e56176d6 100644
--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@@ -278,6 +278,32 @@
   };
 </script>
 
+<style>
+  .el-table .info-row {
+    background: #c9e5f5;
+  }
+
+  .el-table .positive-row {
+    background: #e2f0e4;
+  }
+
+  .demo-table .name-wrapper {
+    display: inline-block;
+  }
+
+  .demo-table .demo-table-expand {
+    label {
+      width: 90px;
+      color: #99a9bf;
+    }
+    .el-form-item {
+      margin-right: 0;
+      margin-bottom: 0;
+      width: 50%;
+    }
+  }
+</style>
+
 ## Table
 
 Display multiple data with similar format. You can sort, filter, compare your data in a table.
@@ -1563,7 +1589,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
       label="Amount 3">
     </el-table-column>
   </el-table>
-  
+
   <el-table
     :data="tableData6"
     border
diff --git a/examples/docs/en-US/tag.md b/examples/docs/en-US/tag.md
index 4f8cabb4..c5609932 100644
--- a/examples/docs/en-US/tag.md
+++ b/examples/docs/en-US/tag.md
@@ -39,6 +39,29 @@
   }
 </script>
 
+<style>
+  .demo-box.demo-tag {
+    .el-tag + .el-tag {
+      margin-left: 10px;
+    }
+    .button-new-tag {
+      margin-left: 10px;
+      height: 24px;
+      line-height: 22px;
+      padding: 0 *;
+    }
+    .input-new-tag {
+      width: 78px;
+      margin-left: 10px;
+      vertical-align: bottom;
+
+      .el-input__inner {
+        height: 24px;
+      }
+    }
+  }
+</style>
+
 ## Tag
 
 Used for marking and selection.
diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md
index 555218d1..6873514b 100644
--- a/examples/docs/en-US/time-picker.md
+++ b/examples/docs/en-US/time-picker.md
@@ -1,3 +1,11 @@
+<style>
+  .demo-box {
+    .el-date-editor + .el-date-editor {
+      margin-left: 10px;
+    }
+  }
+</style>
+
 ## TimePicker
 
 Use Time Picker for time input.
diff --git a/examples/docs/en-US/transfer.md b/examples/docs/en-US/transfer.md
index 5bb9fa0a..0b030633 100644
--- a/examples/docs/en-US/transfer.md
+++ b/examples/docs/en-US/transfer.md
@@ -1,3 +1,12 @@
+<style>
+  .demo-transfer {
+    .transfer-footer {
+      margin-left: 20px;
+      padding: 6px 5px;
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {
diff --git a/examples/docs/en-US/transition.md b/examples/docs/en-US/transition.md
index ab37ab55..c330a2e0 100644
--- a/examples/docs/en-US/transition.md
+++ b/examples/docs/en-US/transition.md
@@ -154,6 +154,21 @@ import Vue from 'vue'
 Vue.component(CollapseTransition.name, CollapseTransition)
 ```
 
+<style>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #20A0FF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    margin-right: 20px;
+    box-sizing: border-box;
+  }
+</style>
+
 <script>
   module.exports = {
     data: () => ({
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
index df886c02..325212fe 100644
--- a/examples/docs/en-US/tree.md
+++ b/examples/docs/en-US/tree.md
@@ -1,3 +1,25 @@
+<style>
+  .demo-tree {
+    .leaf {
+      width: 20px;
+      background: #ddd;
+    }
+
+    .folder {
+      width: 20px;
+      background: #888;
+    }
+
+    .buttons {
+      margin-top: 20px;
+    }
+
+    .filter-tree {
+      margin-top: 20px;
+    }
+  }
+</style>
+
 <script>
   const data = [{
     label: 'Level one 1',
@@ -114,7 +136,7 @@
         if (node.data.name === 'region1') {
           hasChild = true;
         } else if (node.data.name === 'region2') {
-          hasChild = false;          
+          hasChild = false;
         } else {
           hasChild = Math.random() > 0.5;
         }
diff --git a/examples/docs/en-US/typography.md b/examples/docs/en-US/typography.md
index d442a25e..22f8289b 100644
--- a/examples/docs/en-US/typography.md
+++ b/examples/docs/en-US/typography.md
@@ -1,3 +1,77 @@
+<style>
+  .demo-typo-box {
+    height: 200px;
+    width: 200px;
+    position: relative;
+    border: 1px solid #eaeefb;
+    font-size: 40px;
+    color: #1f2d3d;
+    text-align: center;
+    line-height: 162px;
+    padding-bottom: 36px;
+    box-sizing: border-box;
+    display: inline-block;
+    margin-right: 17px;
+    border-radius: 4px;
+
+    .name {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 35px;
+      border-top: 1px solid #eaeefb;
+      font-size: 14px;
+      color: #8492a6;
+      line-height: 35px;
+      text-align: left;
+      text-indent: 10px;
+      font-family: 'Helvetica Neue';
+    }
+  }
+  .demo-typo-size {
+    .h1 {
+      font-size: 20px;
+    }
+    .h2 {
+      font-size: 18px;
+    }
+    .h3 {
+      font-size: 16px;
+    }
+    .text-regular {
+      font-size: 14px;
+    }
+    .text-small {
+      font-size: 13px;
+    }
+    .text-smaller {
+      font-size: 12px;
+    }
+    .color-dark-light {
+      color: #99a9bf;
+    }
+  }
+  .typo-PingFang {
+    font-family: 'PingFang SC';
+  }
+  .typo-Hiragino {
+    font-family: 'Hiragino Sans GB';
+  }
+  .typo-Microsoft {
+    font-family: 'Microsoft YaHei';
+  }
+  /* 英文 */
+  .typo-Helvetica-Neue {
+    font-family: 'Helvetica Neue';
+  }
+  .typo-Helvetica {
+    font-family: 'Helvetica';
+  }
+  .typo-Arial {
+    font-family: 'Arial';
+  }
+</style>
+
 ## Typography
 
 We create a font convention to ensure the best presentation across different platforms.
diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index 97d5655a..d600898c 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -1,3 +1,44 @@
+<style>
+  .upload-tip {
+    color: #8492a6;
+    font-size: 12px;
+    margin-top: 7px;
+  }
+  .demo-box {
+    margin-bottom: 24px;
+
+    .upload-demo {
+      width: 360px;
+    }
+    .avatar-uploader {
+      .el-upload {
+        border: 1px dashed #d9d9d9;
+        border-radius: 6px;
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+
+        &:hover {
+          border-color: #20a0ff;
+        }
+      }
+      .avatar-uploader-icon {
+        font-size: 28px;
+        color: #8c939d;
+        width: 178px;
+        height: @width;
+        line-height: @height;
+        text-align: center;
+      }
+      .avatar {
+        width: 178px;
+        height: @width;
+        display: block;
+      }
+    }
+  }
+</style>
+
 <script>
   export default {
     data() {