i18n: remove redundant styles

examples/components/demo-block.vue

@@ -212,7 +212,7 @@
       },
 
       blockClass() {
-        return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
+        return `demo-${ this.lang } demo-${ this.$router.currentRoute.path.split('/').pop() }`;
       },
 
       iconClass() {

examples/docs/en-US/alert.md

@@ -7,15 +7,6 @@
     }
   }
 </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/badge.md

@@ -1,9 +1,3 @@
-<style>
-  .demo-badge.demo-box .el-dropdown {
-    vertical-align: middle;
-  }
-</style>
-
 ## Badge
 
 A number or status mark on buttons and icons.

examples/docs/en-US/button.md

@@ -22,47 +22,6 @@
     }
   }
 </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;
-      }
-    }
-  }
-
-  .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/checkbox.md

@@ -13,18 +13,6 @@
   };
 </script>
 
-
-<style>
-  .demo-box.demo-checkbox {
-    .checkbox {
-      margin-right: 5px;
-
-      & + .checkbox {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
 ## Checkbox
 
 A group of options for multiple choices.

examples/docs/en-US/color.md

@@ -1,89 +1,3 @@
-<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,30 +63,6 @@
   };
 </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,30 +72,6 @@
   };
 </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

@@ -36,7 +36,7 @@
           resource: '',
           desc: ''
         },
-        formLabelWidth: '80px'
+        formLabelWidth: '120px'
       };
     },
     methods: {
@@ -47,25 +47,6 @@
   };
 </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;
-    }
-  }
-</style>
 ## Dialog
 
 Informs users while preserving the current page state.

examples/docs/en-US/dropdown.md

@@ -1,43 +1,3 @@
-<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/form.md

@@ -200,7 +200,7 @@
 </script>
 
 <style>
-  .demo-form {
+  .demo-form.demo-en-US {
     .el-select .el-input {
       width: 360px;
     }

examples/docs/en-US/icon.md

@@ -9,61 +9,6 @@
     }
   }
 </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 
 

examples/docs/en-US/input-number.md

@@ -14,13 +14,7 @@
     }
   };
 </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,34 +1,3 @@
-<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,9 +1,3 @@
-<style>
-  .demo-loading .el-table {
-    border: none;
-  }
-</style>
-
 <script>
   export default {
     data() {

examples/docs/en-US/menu.md

@@ -1,33 +1,3 @@
-<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 {
     methods: {

examples/docs/en-US/message.md

@@ -57,14 +57,6 @@
   };
 </script>
 
-<style>
-  .demo-box.demo-message {
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Message
 
 Used to show feedback after an activity. The difference with Notification is that the latter is often used to show a system level passive notification.

examples/docs/en-US/notification.md

@@ -53,14 +53,6 @@
   };
 </script>
 
-<style>
-  .demo-box.demo-notification {
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Notification 
 
 Displays a global notification message at the upper right corner of the page.

examples/docs/en-US/pagination.md

@@ -128,56 +128,6 @@ Add more modules based on your scenario.
     }
   }
 </script>
-<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>
-
 
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/en-US/popover.md

@@ -99,20 +99,6 @@
   };
 </script>
 
-<style>
-  .demo-box.demo-popover {
-    .el-popover + .el-popover {
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 360px;
-    }
-    .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Popover
 
 ### Basic usage

examples/docs/en-US/time-picker.md

@@ -1,11 +1,3 @@
-<style>
-  .demo-box {
-    .el-date-editor + .el-date-editor {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## TimePicker
 
 Use Time Picker for time input.

examples/docs/zh-CN/form.md

@@ -200,7 +200,7 @@
 </script>
 
 <style>
-  .demo-form {
+  .demo-form.demo-zh-CN {
     .el-select .el-input {
       width: 360px;
     }

examples/docs/zh-CN/message.md

@@ -57,14 +57,6 @@
   };
 </script>
 
-<style>
-  .demo-box.demo-message {
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Message 消息提示
 
 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

examples/docs/zh-CN/notification.md

@@ -53,14 +53,6 @@
   };
 </script>
 
-<style>
-  .demo-box.demo-notification {
-    .el-button + .el-button {
-      margin-left: 10px;
-    }
-  }
-</style>
-
 ## Notification 通知
 
 悬浮出现在页面右上角，显示全局的通知提醒消息。