doc: add the missing styles for english docs

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
 

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
 

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

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.

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.

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.

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.
 

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.

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.

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.

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: {

examples/docs/en-US/icon.md

@@ -10,6 +10,62 @@
   }
 </script>
 
+<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.

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.

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.

examples/docs/en-US/loading.md

@@ -1,3 +1,9 @@
+<style>
+  .demo-loading .el-table {
+    border: none;
+  }
+</style>
+
 <script>
   export default {
     data() {

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() {

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.

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() {

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() {

examples/docs/en-US/select.md

@@ -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.

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() {

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.

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.

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.

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() {

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: () => ({

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',

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.

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() {