Chore: configure es docs

README.md

@@ -79,7 +79,7 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e
 Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) before making a pull request.
 
 ## Special Thanks
-English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows:
+English documentation is brought to you by SwiftGG Translation Team:
 - [raychenfj](https://github.com/raychenfj)
 - [kevin](http://thekevin.cn/)
 - [曾小涛](https://github.com/zengxiaotao)
@@ -91,6 +91,18 @@ English documentation is brought to you by SwiftGG Translation Team. Our special
 - [Changing](https://github.com/sunzhuo11)
 - [mmoaay](https://github.com/mmoaay)
 
+Spanish documentation is made possible by these community developers:
+- [adavie1](https://github.com/adavie1)
+- [carmencitaqiu](https://github.com/carmencitaqiu)
+- [coderdiaz](https://github.com/coderdiaz)
+- [fedegar33](https://github.com/fedegar33)
+- [Gonzalo2310](https://github.com/Gonzalo2310)
+- [lesterbx](https://github.com/lesterbx)
+- [ProgramerGuy](https://github.com/ProgramerGuy)
+- [SantiagoGdaR](https://github.com/SantiagoGdaR)
+- [sigfriedCub1990](https://github.com/sigfriedCub1990)
+- [thechosenjuan](https://github.com/thechosenjuan)
+
 ## Donation
 If you find Element useful, you can buy us a cup of coffee
 <img width="650" src="http://fuss10.elemecdn.com/2/d0/ab1b8e5a1d96bcdcd6092ce0c66ecjpeg.jpeg?t=2017" alt="">

build/bin/gen-indices.js

@@ -7,9 +7,14 @@ const slugify = require('transliteration').slugify;
 const key = require('./algolia-key');
 
 const client = algoliasearch('9NLTR1QH8B', key);
+const langs = {
+  'zh-CN': 'element-zh',
+  'en-US': 'element-en',
+  'es': 'element-es'
+};
 
-['zh-CN', 'en-US'].forEach(lang => {
-  const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
+['zh-CN', 'en-US', 'es'].forEach(lang => {
+  const indexName = langs[lang];
   const index = client.initIndex(indexName);
   index.clearIndex(err => {
     if (err) return;

examples/app.vue

@@ -249,30 +249,25 @@
         this.suggestJump();
       }
       setTimeout(() => {
-        const notified = localStorage.getItem('ES_NOTIFIED');
-        if (!notified && this.lang !== 'zh-CN') {
-          const h = this.$createElement;
+        const notified = localStorage.getItem('ES_NOTIFIED_2');
+        if (!notified && this.lang !== 'es') {
           const title = this.lang === 'zh-CN'
-            ? '帮助我们完成西班牙语文档'
-            : 'Help us with Spanish docs';
-          const messages = this.lang === 'zh-CN'
-            ? ['点击', '这里', '查看详情']
-            : ['Click ', 'here', ' to learn more'];
+            ? '西班牙语文档正式上线'
+            : 'Spanish docs now available';
+          const message = this.lang === 'zh-CN'
+            ? '点击这里进行切换'
+            : 'Click here to switch';
+          const self = this;
           this.$notify({
             title,
             duration: 0,
-            message: h('span', [
-              messages[0],
-              h('a', {
-                attrs: {
-                  target: '_blank',
-                  href: 'https://github.com/ElemeFE/element/issues/8074'
-                }
-              }, messages[1]),
-              messages[2]
-            ]),
+            message,
+            onClick() {
+              self.$router.push('/es');
+              localStorage.setItem('ES_NOTIFIED_2', 1);
+            },
             onClose() {
-              localStorage.setItem('ES_NOTIFIED', 1);
+              localStorage.setItem('ES_NOTIFIED_2', 1);
             }
           });
         }

examples/components/header.vue

@@ -223,17 +223,37 @@
       .container {
         padding: 0 12px;
       }
-      .nav-item a,
-      .nav-lang {
-        font-size: 12px;
-        vertical-align: top;
+      .nav-item {
+        a {
+          font-size: 12px;
+          vertical-align: top;
+        }
+
+        &.lang-item {
+          height: 100%;
+         
+          .nav-lang {
+            display: flex;
+            align-items: center;
+            
+            span {
+              padding-bottom: 0;
+            }
+          }
+        }
       }
       .nav-dropdown {
         padding: 0;
+        span {
+          font-size: 12px;
+        }
       }
       .nav-gap {
         padding: 0 8px;
       }
+      .nav-versions {
+        display: none;
+      }
     }
   }
 </style>
@@ -287,44 +307,51 @@
           </li>
 
           <!-- 版本选择器 -->
-          <li class="nav-item" v-show="isComponentPage">
+          <li class="nav-item nav-versions" v-show="isComponentPage">
             <el-dropdown
-                trigger="click"
-                class="nav-dropdown"
-                :class="{ 'is-active': dropdownVisible }">
+              trigger="click"
+              class="nav-dropdown"
+              :class="{ 'is-active': verDropdownVisible }">
               <span>
-                {{ langConfig.dropdown }}{{ version }}
+                {{ version }}
                 <i class="el-icon-arrow-down el-icon--right"></i>
               </span>
               <el-dropdown-menu
-                  slot="dropdown"
-                  class="nav-dropdown-list"
-                  @input="handleDropdownToggle">
+                slot="dropdown"
+                class="nav-dropdown-list"
+                @input="handleVerDropdownToggle">
                 <el-dropdown-item
-                    v-for="item in Object.keys(versions)"
-                    :key="item"
-                    @click.native="switchVersion(item)">
+                  v-for="item in Object.keys(versions)"
+                  :key="item"
+                  @click.native="switchVersion(item)">
                   {{ item }}
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </li>
 
-          <!-- lang -->
+          <!-- 语言选择器 -->
           <li class="nav-item lang-item">
-            <span
-              class="nav-lang"
-              :class="{ 'active': lang === 'zh-CN' }"
-              @click="switchLang('zh-CN')">
-              中文
-            </span>
-            <span class="nav-lang-spe"> / </span>
-            <span
-              class="nav-lang"
-              :class="{ 'active': lang === 'en-US' }"
-              @click="switchLang('en-US')">
-              En
-            </span>
+            <el-dropdown
+              trigger="click"
+              class="nav-dropdown nav-lang"
+              :class="{ 'is-active': langDropdownVisible }">
+              <span>
+                {{ displayedLang }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                slot="dropdown"
+                class="nav-dropdown-list"
+                @input="handleLangDropdownToggle">
+                <el-dropdown-item
+                  v-for="(value, key) in langs"
+                  :key="key"
+                  @click.native="switchLang(key)">
+                  {{ value }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </li>
           
           <!--theme picker-->
@@ -348,7 +375,13 @@
         active: '',
         versions: [],
         version,
-        dropdownVisible: true
+        verDropdownVisible: true,
+        langDropdownVisible: true,
+        langs: {
+          'zh-CN': '中文',
+          'en-US': 'English',
+          'es': 'Español'
+        }
       };
     },
 
@@ -361,6 +394,9 @@
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
       },
+      displayedLang() {
+        return this.langs[this.lang] || '中文';
+      },
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['header'];
       },
@@ -381,8 +417,12 @@
         this.$router.push(this.$route.path.replace(this.lang, targetLang));
       },
 
-      handleDropdownToggle(visible) {
-        this.dropdownVisible = visible;
+      handleVerDropdownToggle(visible) {
+        this.verDropdownVisible = visible;
+      },
+
+      handleLangDropdownToggle(visible) {
+        this.langDropdownVisible = visible;
       }
     },
 

examples/components/search.vue

@@ -46,7 +46,7 @@
 
     .el-autocomplete-suggestion__list {
       position: static !important;
-      padding-bottom: 31px;
+      padding-bottom: 28px;
     }
 
     li {
@@ -87,14 +87,14 @@
       left: 0;
       width: 100%;
       padding-right: 20px;
-      background-color: #dfe4ed;
+      background-color: #e4e7ed;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       box-sizing: border-box;
       text-align: right;
 
       &:hover {
-         background-color: #dfe4ed;
+         background-color: #e4e7ed;
        }
     
       img {
@@ -120,7 +120,24 @@
       return {
         index: null,
         query: '',
-        isEmpty: false
+        isEmpty: false,
+        langs: {
+          'zh-CN': {
+            search: '搜索文档',
+            empty: '无匹配结果',
+            index: 'zh'
+          },
+          'en-US': {
+            search: 'Search',
+            empty: 'No results',
+            index: 'en'
+          },
+          'es': {
+            search: 'Buscar',
+            empty: 'No hay datos que coincidan',
+            index: 'es'
+          }
+        }
       };
     },
 
@@ -130,11 +147,11 @@
       },
 
       placeholder() {
-        return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
+        return this.lang ? this.langs[this.lang].search : '';
       },
 
       emptyText() {
-        return this.lang === 'zh-CN' ? '无匹配结果' : 'No results';
+        return this.lang ? this.langs[this.lang].empty : '';
       }
     },
 
@@ -147,7 +164,7 @@
     methods: {
       initIndex() {
         const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
-        this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`);
+        this.index = client.initIndex(`element-${ this.lang ? this.langs[this.lang].index : 'zh' }`);
       },
 
       querySearch(query, cb) {

examples/docs/en-US/alert.md

@@ -25,7 +25,7 @@ Displays important alert messages.
 
 Alert components are non-overlay elements in the page that does not disappear automatically.
 
-::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
+:::demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
 
 ```html
 <template>
@@ -53,7 +53,7 @@ Alert components are non-overlay elements in the page that does not disappear au
 
 Customize the close button as texts or other symbols.
 
-::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
+:::demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
 
 ```html
 <template>
@@ -90,7 +90,7 @@ Customize the close button as texts or other symbols.
 
 Displaying an icon improves readability.
 
-::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
+:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
 
 ```html
 <template>
@@ -122,7 +122,7 @@ Displaying an icon improves readability.
 
 Use the `center` attribute to center the text.
 
-::: demo
+:::demo
 
 ```html
 <template>
@@ -158,7 +158,7 @@ Use the `center` attribute to center the text.
 
 Description includes a message with more detailed information.
 
-::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
+:::demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
 
 ```html
 <template>
@@ -173,7 +173,7 @@ Description includes a message with more detailed information.
 
 ### With icon and description
 
-::: demo At last, this is an example with both icon and description.
+:::demo At last, this is an example with both icon and description.
 
 ```html
 <template>

examples/docs/en-US/badge.md

@@ -45,7 +45,7 @@ Displays the amount of new messages.
 
 You can customize the max value.
 
-::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
+:::demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
 
 ```html
 <el-badge :value="200" :max="99" class="item">

examples/docs/en-US/button.md

@@ -26,7 +26,7 @@ Commonly used button.
 
 ### Basic usage
 
-::: demo Use `type`, `plain` and `round` to define Button's style.
+:::demo Use `type`, `plain` and `round` to define Button's style.
 
 ```html
 <div>

examples/docs/en-US/carousel.md

@@ -65,7 +65,7 @@ Loop a series of images or texts in a limited space
 
 ### Basic usage
 
-::: demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
+:::demo Combine `el-carousel` with `el-carousel-item`, and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  `el-carousel-item` tag. By default the carousel switches when mouse hovers over an indicator. Set `trigger` to `click`, and the carousel switches only when an indicator is clicked.
 ```html
 <template>
   <div class="block">
@@ -110,7 +110,7 @@ Loop a series of images or texts in a limited space
 
 Indicators can be displayed outside the carousel
 
-::: demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
+:::demo The `indicator-position` attribute determines where the indicators are located. By default they are inside the carousel, and setting `indicator-position` to `outside` moves them outside; setting `indicator-position` to `none` hides the indicators.
 ```html
 <template>
   <el-carousel indicator-position="outside">
@@ -144,7 +144,7 @@ Indicators can be displayed outside the carousel
 
 You can define when arrows are displayed
 
-::: demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
+:::demo The `arrow` attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting `arrow` to `always` or `never` shows/hides the arrows permanently.
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
@@ -178,7 +178,7 @@ You can define when arrows are displayed
 
 When a page is wide enough but has limited height, you can activate card mode for carousels
 
-::: demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
+:::demo Setting `type` to `card` activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">

examples/docs/en-US/checkbox.md

@@ -74,7 +74,7 @@ Checkbox can be used alone to switch between two states.
 
 Disabled state for checkbox.
 
-::: demo Set the `disabled` attribute.
+:::demo Set the `disabled` attribute.
 
 ```html
 <template>

examples/docs/en-US/color.md

@@ -38,37 +38,37 @@
     background-color: #ff4949;
   }
   .bg-info {
-    background-color: #878D99;
+    background-color: #909399;
   }
 
   .bg-text-primary {
-    background-color: #2d2f33;
+    background-color: #303133;
   }
   .bg-text-regular {
-    background-color: #5a5e66;
+    background-color: #303133;
   }
   .bg-text-secondary {
-    background-color: #878d99;
+    background-color: #909399;
   }
   .bg-text-placeholder {
-    background-color: #b4bccc;
+    background-color: #c0c4cc;
   }
 
   .bg-border-base {
-    background-color: #d8dce5;
+    background-color: #dcdfe6;
   }
   .bg-border-light {
-    background-color: #dfe4ed;
+    background-color: #e4e7ed;
   }
   .bg-border-lighter {
-    background-color: #e6ebf5;
+    background-color: #ebeef5;
   }
   .bg-border-extra-light {
-    background-color: #edf2fc;
+    background-color: #f2f6fc;
   }
 
   [class*=" bg-border-"] {
-    color: #5a5e66;
+    color: #303133;
   }
 </style>
 
@@ -94,13 +94,13 @@ Besides the main color, you need to use different scene colors in different scen
     <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
 
@@ -111,18 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
-      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
-      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
-      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
+      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
-      <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
-      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">Light Border<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#F2F6FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/en-US/container.md

@@ -76,7 +76,7 @@ These components use flex for layout, so please make sure your browser supports
 
 ### Common layouts
 
-::: demo
+:::demo
 ```html
 <el-container>
   <el-header>Header</el-header>
@@ -170,7 +170,7 @@ These components use flex for layout, so please make sure your browser supports
 
 ### Example
 
-::: demo
+:::demo
 ```html
 <el-container style="height: 500px; border: 1px solid #eee">
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

examples/docs/en-US/custom-theme.md

@@ -73,9 +73,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
 $--color-success: #67c23a !default;
-$--color-warning: #eb9e05 !default;
-$--color-danger: #fa5555 !default;
-$--color-info: #878d99 !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
 
 ...
 ```

examples/docs/en-US/form.md

@@ -231,6 +231,8 @@
       }
     }
     .demo-dynamic {
+      width: 500px;
+
       .el-input {
         margin-right: 10px;
         width: 270px;
@@ -706,7 +708,7 @@ This example shows how to customize your own validation rules to finish a two-fa
 
 ### Number Validate
 
-::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
+:::demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
   <el-form-item
@@ -761,7 +763,7 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 
 All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
 
-::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
+:::demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
 ```html
 <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
   <el-form-item label="Activity name">

examples/docs/en-US/i18n.md

@@ -208,6 +208,8 @@ Currently Element ships with the following languages:
   <li>Arabic (ar)</li>
   <li>Hebrew (he)</li>
   <li>Lithuanian (lt)</li>
+  <li>Kazakh (kz)</li>
+  <li>Hungarian (hu)</li>
 </ul>
 
 If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request.

examples/docs/en-US/icon.md

@@ -12,7 +12,7 @@
 
 <style>
   .demo-icon .source > i {
-    color: #8492a6;
+    color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
@@ -46,18 +46,24 @@
 
     @utils-vertical-center;
 
-    & span {
+    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 {
+    i {
       display: block;
-      font-size: 24px;
+      font-size: 32px;
       margin-bottom: 15px;
-      color: #8492a6;
+      color: #606266;
+    }
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
     }
     &:hover {
       color: rgb(92, 182, 255);
@@ -90,7 +96,7 @@ Just assign the class name to `el-icon-iconName`.
   <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
-      {{'el-icon-' + name}}
+      <span class="icon-name">{{'el-icon-' + name}}</span>
     </span>
   </li>
 </ul>

examples/docs/en-US/input.md

@@ -149,7 +149,7 @@ Input data using mouse or keyboard.
 
 ### Basic usage
 
-::: demo
+:::demo
 
 ```html
 <el-input placeholder="Please input" v-model="input"></el-input>
@@ -168,7 +168,7 @@ export default {
 
 ### Disabled
 
-::: demo Disable the Input with the `disabled` attribute.
+:::demo Disable the Input with the `disabled` attribute.
 
 ```html
 <el-input
@@ -191,7 +191,7 @@ export default {
 
 ### Clearable
 
-::: demo Make the Input clearable with the `clearable` attribute.
+:::demo Make the Input clearable with the `clearable` attribute.
 
 ```html
 <el-input
@@ -216,7 +216,7 @@ export default {
 
 Add an icon to indicate input type.
 
-::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
+:::demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
 ```html
 <div class="demo-input-suffix">
   <span class="demo-input-label">Using attributes</span>
@@ -271,7 +271,7 @@ export default {
 
 Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`.
 
-::: demo Control the height by setting the `rows` prop.
+:::demo Control the height by setting the `rows` prop.
 
 ```html
 <el-input
@@ -297,7 +297,7 @@ export default {
 
 Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust.
 
-::: demo
+:::demo
 
 ```html
 <el-input
@@ -331,7 +331,7 @@ export default {
 
 Prepend or append an element, generally a label or a button.
 
-::: demo Use `slot` to distribute elements that prepend or append to Input.
+:::demo Use `slot` to distribute elements that prepend or append to Input.
 
 ```html
 <div>
@@ -380,7 +380,7 @@ export default {
 
 ### Sizes
 
-::: demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
+:::demo Add `size` attribute to change the size of Input. In addition to the default size, there are three other options: `large`, `small` and `mini`.
 ```html
 <div class="demo-input-size">
   <el-input
@@ -423,7 +423,7 @@ export default {
 
 You can get some recommended tips based on the current input.
 
-::: demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
+:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 ```html
 <el-row class="demo-autocomplete">
   <el-col :span="12">
@@ -583,7 +583,7 @@ Customize how suggestions are displayed.
 
 Search data from server-side.
 
-::: demo
+:::demo
 ```html
 <el-autocomplete
   v-model="state4"

examples/docs/en-US/layout.md

@@ -37,7 +37,7 @@ Quickly and easily create layouts with the basic 24-column.
 
 Create basic grid layout using columns.
 
-::: demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
+:::demo With `row` and `col`, we can easily manipulate the layout using the `span` attribute.
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -101,7 +101,7 @@ Create basic grid layout using columns.
 
 Column spacing is supported.
 
-::: demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
+:::demo Row provides `gutter` attribute to specify spacings between columns, and its default value is 0.
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -145,7 +145,7 @@ Column spacing is supported.
 
 Form a more complex hybrid layout by combining the basic 1/24 columns.
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -198,7 +198,7 @@ Form a more complex hybrid layout by combining the basic 1/24 columns.
 
 You can specify column offsets.
 
-::: demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
+:::demo You can specify the number of column offset by setting the value of `offset` attribute of Col.
 
 ```html
 <el-row :gutter="20">
@@ -248,7 +248,7 @@ You can specify column offsets.
 
 Use the flex layout to make flexible alignment of columns.
 
-::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
+:::demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around.
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -311,7 +311,7 @@ Use the flex layout to make flexible alignment of columns.
 
 Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>

examples/docs/en-US/menu.md

@@ -59,7 +59,7 @@ Menu that provides navigation for your website.
 
 Top bar NavMenu can be used in a variety of scenarios.
 
-::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
+:::demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
@@ -112,7 +112,7 @@ Top bar NavMenu can be used in a variety of scenarios.
 
 Vertical NavMenu with sub-menus.
 
-::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
+:::demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -207,7 +207,7 @@ Vertical NavMenu with sub-menus.
 
 Vertical NavMenu could be collapsed.
 
-::: demo 
+:::demo
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">expand</el-radio-button>
@@ -275,7 +275,7 @@ Vertical NavMenu could be collapsed.
 | mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
 | background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
-| text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
+| text-color  | text color of Menu (hex format) | string |   —   | #303133 |
 | active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |

examples/docs/en-US/notification.md

@@ -116,7 +116,7 @@ Displays a global notification message at a corner of the page.
 
 ### Basic usage
 
-::: demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
+:::demo Element has registered the `$notify` method and it receives an object as its parameter. In the simplest case, you can set the `title` field and the` message` field for the title and body of the notification. By default, the notification automatically closes after 4500ms, but by setting `duration` you can control its duration. Specifically, if set to `0`, it will not close automatically. Note that `duration` receives a `Number` in milliseconds.
 
 ```html
 <template>
@@ -161,7 +161,7 @@ Displays a global notification message at a corner of the page.
 
 We provide four types: success, warning, info and error.
 
-::: demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
+:::demo Element provides four notification types: `success`, `warning`, `info` and `error`. They are set by the `type` field, and other values will be ignored. We also registered methods for these types that can be invoked directly like `open5` and `open6` without passing a `type` field.
 ```html
 <template>
   <el-button
@@ -228,7 +228,7 @@ We provide four types: success, warning, info and error.
 
 Notification can emerge from any corner you like.
 
-::: demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
+:::demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
 ```html
 <template>
   <el-button
@@ -296,7 +296,7 @@ Notification can emerge from any corner you like.
 
 Customize Notification's offset from the edge of the screen.
 
-::: demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+:::demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
 ```html
 <template>
   <el-button
@@ -325,7 +325,7 @@ Customize Notification's offset from the edge of the screen.
 ### Use HTML string
 `message` supports HTML string.
 
-::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
 ```html
 <template>
   <el-button
@@ -359,7 +359,7 @@ Although `message` property supports HTML strings, dynamically rendering arbitra
 
 It is possible to hide the close button
 
-::: demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
+:::demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
 ```html
 <template>
   <el-button

examples/docs/en-US/tag.md

@@ -63,7 +63,7 @@ Used for marking and selection.
 
 ### Basic usage
 
-::: demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
+:::demo Use the `type` attribute to define Tag's type. In addition, the `color` attribute can be used to set the background color of the Tag.
 
 ```html
 <el-tag>Tag One</el-tag>

examples/docs/en-US/tree.md

@@ -292,7 +292,7 @@ Display a set of data with hierarchies.
 
 Basic tree structure.
 
-::: demo
+:::demo
 ```html
 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
@@ -355,7 +355,7 @@ Basic tree structure.
 
 Used for node selection.
 
-::: demo This example also shows how to load node data asynchronously.
+:::demo This example also shows how to load node data asynchronously.
 ```html
 <el-tree
   :props="props"
@@ -421,7 +421,7 @@ Used for node selection.
 
 ### Custom leaf node in lazy mode
 
-::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
+:::demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
 ```html
 <el-tree
   :props="props1"
@@ -469,7 +469,7 @@ Used for node selection.
 
 The checkbox of a node can be set as disabled.
 
-::: demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
+:::demo In the example, 'disabled' property is declared in defaultProps, and some nodes are set as 'disabled:true'. The corresponding checkboxes are disabled and can't be clicked.
 ```html
 <el-tree
   :data="data3"
@@ -525,7 +525,7 @@ The checkbox of a node can be set as disabled.
 ### Default expanded and default checked
 Tree nodes can be initially expanded or checked
 
-::: demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
+:::demo Use `default-expanded-keys` and `default-checked-keys` to set initially expanded and initially checked nodes respectively. Note that for them to work, `node-key` is required. Its value is the name of a key in the data object, and the value of that key should be unique across the whole tree.
 ```html
 <el-tree
   :data="data2"
@@ -588,7 +588,7 @@ Tree nodes can be initially expanded or checked
 
 ### Checking tree nodes
 
-::: demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
+:::demo This example shows how to get and set checked nodes. They both can be done in two approaches: node and key. If you are taking the key approach, `node-key` is required.
 ```html
 <el-tree
   :data="data2"
@@ -685,7 +685,7 @@ Tree nodes can be initially expanded or checked
 ### Custom node content
 The content of tree nodes can be customized, so you can add icons or buttons as you will
 
-::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+:::demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
 <el-tree
   :data="data4"
@@ -782,7 +782,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
 ### Tree node filtering
 Tree nodes can be filtered
 
-::: demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
+:::demo Invoke the `filter` method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, `filter-node-method` is required, and its value is the filtering method.
 ```html
 <el-input
   placeholder="Filter keyword"
@@ -866,7 +866,7 @@ Tree nodes can be filtered
 
 Only one node among the same level can be expanded at one time.
 
-::: demo
+:::demo
 ```html
 <el-tree
   :data="data"

examples/docs/en-US/upload.md

@@ -167,7 +167,7 @@ Upload files by clicking or drag-and-drop
 
 Use `before-upload` hook to limit the upload file format and size.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="avatar-uploader"
@@ -238,7 +238,7 @@ Use `before-upload` hook to limit the upload file format and size.
 
 Use `list-type` to change the fileList style.
 
-::: demo
+:::demo
 ```html
 <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
@@ -274,7 +274,7 @@ Use `list-type` to change the fileList style.
 
 ### FileList with thumbnail
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -310,7 +310,7 @@ Use `list-type` to change the fileList style.
 
 Use `on-change` hook function to control upload file list
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -349,7 +349,7 @@ Use `on-change` hook function to control upload file list
 
 You can drag your file to a certain area to upload it.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -368,7 +368,7 @@ You can drag your file to a certain area to upload it.
 
 ### Manual upload
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"

examples/docs/es/alert.md

@@ -25,7 +25,7 @@ Mostrar mensajes de alertas importantes.
 
 Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
 
-::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
+:::demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
 
 ```html
 <template>
@@ -53,7 +53,7 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec
 
 Personalizar el botón de cerrar como texto u otros símbolos.
 
-::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
+:::demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son personalizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puede configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. El atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
 
 
 ```html
@@ -91,7 +91,7 @@ Personalizar el botón de cerrar como texto u otros símbolos.
 
 Mostrar un icono mejora la legibilidad.
 
-::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
+:::demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
 
 
 ```html
@@ -124,7 +124,7 @@ Mostrar un icono mejora la legibilidad.
 
 Para centrar el texto utilice el atributo `center`.
 
-::: demo
+:::demo
 
 ```html
 <template>
@@ -160,7 +160,7 @@ Para centrar el texto utilice el atributo `center`.
 
 Descripción incluye un mensaje con información más detallada.
 
-::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
+:::demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
 
 ```html
 <template>
@@ -175,7 +175,7 @@ Descripción incluye un mensaje con información más detallada.
 
 ### Utilizando icono y descripción
 
-::: demo Finalmente este es un ejemplo utilizando icono y descripción.
+:::demo Finalmente este es un ejemplo utilizando icono y descripción.
 
 ```html
 <template>

examples/docs/es/badge.md

@@ -45,7 +45,7 @@ Muestra la cantidad de mensajes nuevos.
 
 Se puede personalizar el valor máximo.
 
-::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
+:::demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
 
 ```html
 <el-badge :value="200" :max="99" class="item">

examples/docs/es/button.md

@@ -26,7 +26,7 @@ Botones comúnmente usados.
 
 ### Uso básico
 
-::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
+:::demo Use `type`, `plain` y `round` para definir estilos a los botones.
 
 ```html
 <div>

examples/docs/es/carousel.md

@@ -65,7 +65,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
 
 ### Uso básico
 
-::: demo Combine `el-carousel`  con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  `trigger`  para  `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
+:::demo Combine `el-carousel`  con `el-carousel-item`, para conseguir el carrusel. El contenido de cada diapositiva es completamente personalizable, y sólo tiene que colocarla dentro de la etiqueta  `el-carousel-item` . Por defecto, el carrusel cambia cuando el ratón pasa por encima de un indicador. Fije  `trigger`  para  `click`, si lo que se desea es que el carrusel cambie sólo cuando se haga clic en un indicador.
 
 ```html
 <template>
@@ -111,7 +111,7 @@ Presenta una serie de imágenes o textos en un espacio limitado
 
 Los indicadores de paginacion pueden mostrarse fuera del carrusel
 
-::: demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
+:::demo El atributo  `indicator-position`  determina dónde se encuentran los indicadores de paginación. Por defecto están dentro del carrusel, y el ajuste de `indicator-position`  a `outside`  los mueve hacia fuera; en cambio `indicator-position`  a `none`  los oculta.
 
 ```html
 <template>
@@ -146,7 +146,7 @@ Los indicadores de paginacion pueden mostrarse fuera del carrusel
 
 Puede definir cuando se visualizan las flechas
 
-::: demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
+:::demo El atributo `arrow` determina cuándo se visualizan las flechas. Por defecto aparecen cuando el ratón se desplaza sobre el carrusel. Ajuste `arrow` a `always` o `never` para mostrar u ocultar las flechas permanentemente.
 
 ```html
 <template>
@@ -181,7 +181,7 @@ Puede definir cuando se visualizan las flechas
 
 Cuando una página es suficientemente ancha pero tiene una altura limitada, puede activar el modo `card` para carrusel.
 
-::: demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
+:::demo Ajuste `type` a `card` para activar el modo tarjeta. Aparte de la apariencia, la mayor diferencia entre el modo tarjeta y el modo común es que al hacer clic en las diapositivas de ambos lados, el carrusel cambia directamente en modo tarjeta.
 
 ```html
 <template>

examples/docs/es/checkbox.md

@@ -74,7 +74,7 @@ Checkbox puede ser usado para alternar entre dos estados.
 
 Estado deshabilitado para el checkbox.
 
-::: demo Setear el atributo `disabled`.
+:::demo Setear el atributo `disabled`.
 
 ```html
 <template>

examples/docs/es/color.md

@@ -38,37 +38,37 @@
     background-color: #ff4949;
   }
   .bg-info {
-    background-color: #878D99;
+    background-color: #909399;
   }
 
   .bg-text-primary {
-    background-color: #2d2f33;
+    background-color: #303133;
   }
   .bg-text-regular {
-    background-color: #5a5e66;
+    background-color: #303133;
   }
   .bg-text-secondary {
-    background-color: #878d99;
+    background-color: #909399;
   }
   .bg-text-placeholder {
-    background-color: #b4bccc;
+    background-color: #c0c4cc;
   }
 
   .bg-border-base {
-    background-color: #d8dce5;
+    background-color: #dcdfe6;
   }
   .bg-border-light {
-    background-color: #dfe4ed;
+    background-color: #e4e7ed;
   }
   .bg-border-lighter {
-    background-color: #e6ebf5;
+    background-color: #ebeef5;
   }
   .bg-border-extra-light {
-    background-color: #edf2fc;
+    background-color: #f2f6fc;
   }
 
   [class*=" bg-border-"] {
-    color: #5a5e66;
+    color: #303133;
   }
 </style>
 
@@ -94,13 +94,13 @@ Además del color principal, se necesitan utilizar distintos colores para difere
     <div class="demo-color-box bg-success">Éxito<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Precaución<div class="value">#EB9E05</div></div>
+    <div class="demo-color-box bg-warning">Precaución<div class="value">#E6A23C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Peligro<div class="value">#FA5555</div></div>
+    <div class="demo-color-box bg-danger">Peligro<div class="value">#F56C6C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
 
@@ -111,18 +111,18 @@ Los colores neutrales son para texto, fondos y bordes. Puede usar diferentes col
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#2D2F33</div></div>
-      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#5A5E66</div></div>
-      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#878D99</div></div>
-      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#B4BCCC</div></div>
+      <div class="demo-color-box bg-text-primary">Texto primario<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">Texto regular<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-secondary">Texto secundario<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">Texto de placeholder<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">Borde base<div class="value">#D8DCE5</div></div>
-      <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#DFE4ED</div></div>
-      <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#E6EBF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#EDF2FC</div></div>
+      <div class="demo-color-box bg-border-base">Borde base<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">Borde ligero<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Borde claro<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Borde extra claro<div class="value">#F2F6FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/es/container.md

@@ -77,7 +77,7 @@ Estos componentes utilizan flex para el diseño, así que asegurese que el naveg
 
 ### Diseños comunes
 
-::: demo
+:::demo
 ```html
 <el-container>
   <el-header>Cabecera</el-header>
@@ -171,7 +171,7 @@ Estos componentes utilizan flex para el diseño, así que asegurese que el naveg
 
 ### Ejemplo
 
-::: demo
+:::demo
 ```html
 <el-container style="height: 500px; border: 1px solid #eee">
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

examples/docs/es/custom-theme.md

@@ -14,9 +14,9 @@ Este sitio, le permitirá obtener una vista previa del tema con un nuevo color e
 $--color-primary: teal;
 
 /* Ubicación de la fuente, obligatoria */
-$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
 
-@import "../node_modules/element-ui/packages/theme-chalk/src/index";
+@import "~element-ui/packages/theme-chalk/src/index";
 ```
 
 Entonces, en el archivo principal del proyecto, importe este archivo de estilos en lugar de los estilos de Element:
@@ -73,9 +73,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
 $--color-success: #67c23a !default;
-$--color-warning: #eb9e05 !default;
-$--color-danger: #fa5555 !default;
-$--color-info: #878d99 !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
 
 ...
 ```

examples/docs/es/dialog.md

@@ -243,8 +243,6 @@ Si un diálogo está anidado en otro diálogo, se requiere append-to-body.
 ```
 :::
 
-:::
-
 ### Contenido centrado
 El contenido de Diálogo se puede centrar.
 

examples/docs/es/form.md

@@ -169,7 +169,7 @@
 </script>
 
 <style>
-  .demo-form.demo-en-US {
+  .demo-form.demo-es {
     .el-select .el-input {
       width: 360px;
     }
@@ -231,6 +231,8 @@
       }
     }
     .demo-dynamic {
+      width: 500px;
+
       .el-input {
         margin-right: 10px;
         width: 270px;
@@ -707,7 +709,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 
 ### Validación numerica
 
-::: demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
+:::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs.
 
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
@@ -765,7 +767,7 @@ Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqu
 
 Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
 
-::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
+:::demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
 
 ```html
 <el-form ref="form" :model="sizeForm" label-width="120px" size="mini">

examples/docs/es/i18n.md

@@ -207,6 +207,9 @@ Actualmente Element está disponible en los siguientes idiomas:
   <li>Slovenian (sl)</li>
   <li>Arabic (ar)</li>
   <li>Hebrew (he)</li>
+  <li>Lithuanian (lt)</li>
+  <li>Kazakh (kz)</li>
+  <li>Hungarian (hu)</li>
 </ul>
 
 Si su idioma de destino no está incluido, puede contribuir: simplemente añada  [aqui](https://github.com/ElemeFE/element/tree/master/src/locale/lang) otra configuración de idioma y cree un pull request.

examples/docs/es/icon.md

@@ -12,7 +12,7 @@
 
 <style>
   .demo-icon .source > i {
-    color: #8492a6;
+    color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
@@ -46,18 +46,24 @@
     
     @utils-vertical-center;
     
-    & span {
+    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 {
+    i {
       display: block;
-      font-size: 24px;
+      font-size: 32px;
       margin-bottom: 15px;
-      color: #8492a6;
+      color: #606266;
+    }
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #606266;
     }
     &:hover {
       color: rgb(92, 182, 255);
@@ -90,7 +96,7 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
   <li v-for="name in icons" :key="name">
     <span>
       <i :class="'el-icon-' + name"></i>
-      {{'el-icon-' + name}}
+      <span class="icon-name">{{'el-icon-' + name}}</span>
     </span>
   </li>
 </ul>

examples/docs/es/input.md

@@ -72,7 +72,7 @@
 </script>
 
 <style>
-  .demo-input.demo-en-US {
+  .demo-input.demo-es {
     .el-select .el-input {
       width: 130px;
     }
@@ -148,7 +148,7 @@ Ingresa datos usando el ratón o teclado.
 
 ### Uso básico
 
-::: demo
+:::demo
 
 ```html
 <el-input placeholder="Please input" v-model="input"></el-input>
@@ -167,7 +167,7 @@ export default {
 
 ### Disabled
 
-::: demo Deshabilite el Input con el atributo  `disabled`.
+:::demo Deshabilite el Input con el atributo  `disabled`.
 
 ```html
 <el-input
@@ -192,7 +192,7 @@ export default {
 
 Añada un icono para indicar el tipo de Input.
 
-::: demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
+:::demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
 
 ```html
 <div class="demo-input-suffix">
@@ -248,7 +248,7 @@ export default {
 
 Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
 
-::: demo Controle la altura ajustando el prop `rows`.
+:::demo Controle la altura ajustando el prop `rows`.
 
 ```html
 <el-input
@@ -274,7 +274,7 @@ export default {
 
 El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
 
-::: demo
+:::demo
 
 ```html
 <el-input
@@ -308,7 +308,7 @@ export default {
 
 Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
 
-::: demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
+:::demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
 
 ```html
 <div>
@@ -357,7 +357,7 @@ export default {
 
 ### Tamaño
 
-::: demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
+:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
 
 ```html
 <div class="demo-input-size">
@@ -401,7 +401,7 @@ export default {
 
 Puede obtener algunas sugerencias basadas en la entrada actual.
 
-::: demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
+:::demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
 
 ```html
 <el-row class="demo-autocomplete">
@@ -563,7 +563,7 @@ Personalice cómo se muestran las sugerencias.
 
 Búsqueda de datos desde el servidor.
 
-::: demo
+:::demo
 ```html
 <el-autocomplete
   v-model="state4"

examples/docs/es/layout.md

@@ -37,7 +37,7 @@ Rápido y facilmente crea un layout básico con 24 columnas.
 
 Crea un layout básico usando columnas.
 
-:::**Demo** Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
+:::demo Con `row` y `col`, puede facilmente manipular el layout usando el atributo `span`.
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -101,7 +101,7 @@ Crea un layout básico usando columnas.
 
 El espaciado de columnas está soportado.
 
-:::**Demo** Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
+:::demo Row provee el atributo `gutter` para especificar el espacio entre columnas y su valor por defecto es 0.
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -145,7 +145,7 @@ El espaciado de columnas está soportado.
 
 Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
 
-:::**Demo**
+:::demo
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -198,7 +198,7 @@ Crea un complejo layout híbrido combinando el básico de 1/24 columnas.
 
 Puedes especificar offsets para las columnas.
 
-:::**Demo** Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
+:::demo Puedes especificar el offset para una columna mediante el atributo `offset` de Col.
 
 ```html
 <el-row :gutter="20">
@@ -248,7 +248,7 @@ Puedes especificar offsets para las columnas.
 
 Usa flex layout para un alineamiento flexible de columnas.
 
-:::**Demo** Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
+:::demo Puede habilitar flex layout asignando el atributo `type` a 'flex', y definir el layout de elementos hijos asignando el atributo `justify` con los valores start, center, end, space-between o space-around.
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -311,7 +311,7 @@ Usa flex layout para un alineamiento flexible de columnas.
 
 Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
 
-:::**Demo**
+:::demo
 ```html
 <el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>

examples/docs/es/menu.md

@@ -59,7 +59,7 @@ Menú que provee la navegación para tu sitio.
 
 Top bar NavMenu puede ser usado en distinto escenarios.
 
-:::**Demo** Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
+:::demo Por defecto el menú es vertical, pero puede hacerlo horizontal asignando a la propiedad `mode` el valor 'horizontal'. Además, puede utilizar el componente de submenú para crear un menú de segundo nivel. Menú provee `background-color`, `text-color` y `active-text-color` para customizar los colores.
 
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -113,7 +113,7 @@ Top bar NavMenu puede ser usado en distinto escenarios.
 
 NavMenu vertical con sub-menús.
 
-:::**Demo** Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
+:::demo Puede utilizar el componente `el-menu-item-group` para crear un grupo de menú, y el nombre del grupo estará determinado por la propiedad `title` o la propiedad `slot`.
 
 ```html
 <el-row class="tac">
@@ -209,7 +209,7 @@ NavMenu vertical con sub-menús.
 
 NavMenu vertical puede ser colapsado.
 
-:::**Demo**
+:::demo
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">expand</el-radio-button>
@@ -277,7 +277,7 @@ NavMenu vertical puede ser colapsado.
 | mode              | modo de presentación del menú            | string  | horizontal / vertical | vertical    |
 | collapse          | si el menú está colapsado (solo en modo vertical) | boolean | —                     | false       |
 | background-color  | color de fondo del menú (formato hexadecimal) | string  | —                     | #ffffff     |
-| text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #2d2f33     |
+| text-color        | color de texto del menú (formato hexadecimal) | string  | —                     | #303133     |
 | active-text-color | color de text del menu-item activo (formato hexadecimal) | string  | —                     | #409EFF     |
 | default-active    | índice del menu-item activo              | string  | —                     | —           |
 | default-openeds   | arreglo que contiene las llaves del sub-menus activo | Array   | —                     | —           |

examples/docs/es/notification.md

@@ -116,7 +116,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 
 ### Uso básico
 
-::: demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
+:::demo Element ha registrado el método`$notify` y recibe un objeto como parámetro. En el caso más sencillo, puede establecer el campo de `title` y el campo de ` message` para el título y el cuerpo de la notificación. De forma predeterminada, la notificación se cierra automáticamente después de 4500ms, pero configurando `duration`  se puede controlar su duración. Específicamente, si está configurado en `0`, no se cerrará automáticamente. Tenga en cuenta que `duration` recibe un `Number` en milisegundos.
 
 ```html
 <template>
@@ -161,7 +161,7 @@ Muestra un mensaje de notificación global en una esquina de la página.
 
 Proporcionamos cuatro tipos: success, warning, info y error.
 
-::: demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
+:::demo Element proporciona cuatro tipos de notificación: `success`, `warning`, `info` y `error`. Se definen por el campo `type`  y se ignorarán otros valores. También se han registrado métodos para estos tipos que se pueden invocar directamente como en el ejemplo `open5` y `open6` sin pasar un campo `type`.
 
 ```html
 <template>
@@ -229,7 +229,7 @@ Proporcionamos cuatro tipos: success, warning, info y error.
 
 La notificación puede surgir de cualquier rincón que uno desee.
 
-::: demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`.
+:::demo El atributo `position` define desde qué esquina se desliza la notificación. Puede ser `top-right`, `top-left`, `bottom-right` o `bottom-left`. Predeterminado: `top-right`.
 
 ```html
 <template>
@@ -298,7 +298,7 @@ La notificación puede surgir de cualquier rincón que uno desee.
 
 Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 
-::: demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.
+:::demo Configure el atributo `offset` para personalizar el desplazamiento de la notificación desde el borde de la pantalla. Tenga en cuenta que cada instancia de la notificación del mismo momento debe tener el mismo desplazamiento.
 
 ```html
 <template>
@@ -328,7 +328,7 @@ Personalizar el desplazamiento de notificación desde el borde de la pantalla.
 ### Usando cadenas HTML
 `message` soporta cadenas HTML.
 
-::: demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML.
+:::demo Configure `dangerouslyUseHTMLString` a true y `message` se tratará como una cadena HTML.
 
 ```html
 <template>
@@ -365,7 +365,7 @@ Aunque la propiedad `message` soporta cadenas HTML, el renderizado dinámico de
 
 Es posible ocultar el botón de cerrar
 
-::: demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación.
+:::demo Configure el atributo `showClose` como `false` para que el usuario no pueda cerrar la notificación.
 
 ```html
 <template>

examples/docs/es/pagination.md

@@ -53,7 +53,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
 
 ### Uso básico
 
-:::**Demo** Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
+:::demo Asigne en el atributo `layout` los diferentes elementos que quiere utilizar separados por coma. Los elementos de paginación son: `prev` (un botón para navegar a la página anterior), `next` (un botón para navegar a la siguiente página), `pager` (lista de página), `jumper` (un `input` para saltar a una página determinada), `total` (total de elementos), `size` (un `select` para seleccionar el tamaño de la página ) y `->`(todo elemento situado luego de este símbolo será movido a la derecha).
 ```html
 <div class="block">
   <span class="demonstration">When you have few pages</span>
@@ -76,7 +76,7 @@ Si tiene que mostrar muchos datos en una página, utilice la paginación.
 
 Usa una paginación pequeña en caso de espacio limitado.
 
-:::**Demo** Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
+:::demo Solo ponga el atributo `small` como `true` y la Paginación se volverá pequeña.
 ```html
 <el-pagination
   small
@@ -90,7 +90,7 @@ Usa una paginación pequeña en caso de espacio limitado.
 
 Agrega más modulos basados en su escenario.
 
-:::**Demo** Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
+:::demo Este ejemplo es un completo caso de uso. Utiliza los eventos `size-change` y `current-change` para manejar el tamaño de página y el cambio de página. El atributo `page-sizes` acepta un arreglo de enteros, cada uno representa un diferente valor del atributo `sizes` que es un `select`, ejemplo `[100, 200, 300, 400]` indicará que el `select` tendrá las opciones: 100, 200, 300 o 400 elementos por página.
 
 ```html
 <template>

examples/docs/es/popover.md

@@ -103,7 +103,7 @@
 
 Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para atributos duplicados, por favor refiérase a la documentación de Tooltip.
 
-:::**Demo** Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
+:::demo Agrega `ref` al popover, luego en el botón usa la directiva `v-popover` para asociar el botón y el popover. El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click` o `focus`. De manera alternativa puede especificar la referencia utilizando un [slot con nombre](https://vuejs.org/v2/guide/components.html#Named-Slots).
 
 ```html
 <el-popover
@@ -140,7 +140,7 @@ Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para a
 ### Información anidada
 Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo de una tabla anidada.
 
-:::**Demo** Reemplaza el atributo `content` con un `slot`.
+:::demo Reemplaza el atributo `content` con un `slot`.
 
 ```html
 <el-popover
@@ -189,7 +189,7 @@ Otros componentes pueden anidarse dentro de popover. A continuación un ejemplo
 
 Por supuesto, puedes anidar otras operaciones. Es más ligero que utilizar un `dialog`.
 
-:::**Demo**
+:::demo
 ```html
 <el-popover
   ref="popover5"

examples/docs/es/progress.md

@@ -14,7 +14,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
 
 ### Barra de progreso lineal (porcentage externo)
 
-:::**Demo** Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
+:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
 ```html
 <el-progress :percentage="0"></el-progress>
 <el-progress :percentage="70"></el-progress>
@@ -26,7 +26,7 @@ Progreso es usado para mostrar el estado de la operación actual e informar al u
 ### Barra de progreso lineal (porcentage interno)
 En este caso el porcentage no toma espacio adicional.
 
-:::**Demo** El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
+:::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
 ```html
 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
@@ -37,7 +37,7 @@ En este caso el porcentage no toma espacio adicional.
 
 ### Barra de progreso circular
 
-:::**Demo** Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
+:::demo Puede asignar el atributo `type` como `circle` para usar la barra circular de progreso, y usar el atributo `width` para cambiar el tamaño del círculo.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>

examples/docs/es/tag.md

@@ -63,7 +63,7 @@ Se utiliza para marcar y seleccionar.
 
 ### Uso básico
 
-::: demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
+:::demo Utilice el atributo `type` para definir el tipo de etiqueta. Además, el atributo `color` se puede utilizar para establecer el color de fondo de la etiqueta.
 
 ```html
 <el-tag>Tag One</el-tag>

examples/docs/es/tooltip.md

@@ -9,7 +9,7 @@
 </script>
 
 <style>
-  .demo-tooltip.demo-en-US {
+  .demo-tooltip.demo-es {
     &:first-of-type .source {
       .el-button {
         width: 110px;

examples/docs/es/tree.md

@@ -292,7 +292,7 @@ Muestra un conjunto de datos jerárquicos.
 
 Estructura básica de árbol.
 
-::: demo
+:::demo
 ```html
 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
@@ -355,7 +355,7 @@ Estructura básica de árbol.
 
 Usado para la selección de nodos.
 
-::: demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
+:::demo Este ejemplo también muestra como cargar los datos de forma asíncrona.
 ```html
 <el-tree
   :props="props"
@@ -469,7 +469,7 @@ Usado para la selección de nodos.
 
 El checkbox de un nodo se puede poner como desactivado.
 
-::: demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
+:::demo En el ejemplo, la propiedad 'disabled' se declara en defaultProps, y algunos nodos se ponen como 'disabled:true'. Los checkboxes correspondientes son desactivados y no se pueden pinchar.
 ```html
 <el-tree
   :data="data3"
@@ -588,7 +588,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 
 ### Seleccionando nodos
 
-::: demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
+:::demo Este ejemplo muestra como establecer y leer nodos seleccionados. Esto se puede hacer por nodos o por claves. Si lo hace por claves el atributo `node-key` es necesario.
 ```html
 <el-tree
   :data="data2"
@@ -685,7 +685,7 @@ Los nodos pueden estar desplegados o seleccionados por defecto.
 ### Contenido personalizado en los nodos
 El contenido de los nodos puede ser personalizado, así que puede añadir iconos y botones a su gusto.
 
-::: demo Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
+:::demo Utilice `render-content` para asignar una función de renderizado que devuelve el contenido del árbol de nodos. Mire la documentación de node para una introducción detallada a las funciondes de renderizado. Ten en cuenta que este ejemplo no puede ejecutarse en jsfiddle ya que no soporta la sintaxis JSX. En un proyecto real `render-content` funcionará si las dependencias relevantes están configuradas correctamente.
 ```html
 <el-tree
   :data="data4"
@@ -866,7 +866,7 @@ Los nodos del árbol se pueden filtrar.
 
 Solo puede ser expandido un nodo del mismo nivel a la vez.
 
-::: demo
+:::demo
 ```html
 <el-tree
   :data="data"

examples/docs/es/upload.md

@@ -167,7 +167,7 @@ Carga archivos haciendo clic o arrastrándolos.
 
 Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamaño.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="avatar-uploader"
@@ -238,7 +238,7 @@ Utilice el _hook_ `before-upload` para limitar el formato de archivo y su tamañ
 
 Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos.
 
-::: demo
+:::demo
 ```html
 <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
@@ -274,7 +274,7 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
 
 ### Lista de archivos con miniatura
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -310,7 +310,7 @@ Utilice la propiedad `list-type` para cambiar el estilo a un listado de archivos
 
 Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de archivos subidos.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -349,7 +349,7 @@ Utilice el _hook_ `on-change` para controlar la funcionalidad de la lista de arc
 
 Puede arrastrar el archivo dentro de un área en especifico para cargar el archivo.
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -368,7 +368,7 @@ Puede arrastrar el archivo dentro de un área en especifico para cargar el archi
 
 ### Carga normal
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"

examples/docs/zh-CN/alert.md

@@ -25,7 +25,7 @@
 
 页面中的非浮层元素，不会自动消失。
 
-::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
+:::demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
 ```html
 <template>
   <el-alert
@@ -52,7 +52,7 @@
 
 自定义关闭按钮为文字或其他符号。
 
-::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
+:::demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
 ```html
 <template>
   <el-alert
@@ -88,7 +88,7 @@
 
 表示某种状态时提升可读性。
 
-::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
+:::demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
 ```html
 <template>
   <el-alert
@@ -119,7 +119,7 @@
 
 使用 `center` 属性让文字水平居中。
 
-::: demo
+:::demo
 ```html
 <template>
   <el-alert
@@ -154,7 +154,7 @@
 
 包含标题和内容，解释更详细的警告。
 
-::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
+:::demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
 ```html
 <template>
   <el-alert
@@ -168,7 +168,7 @@
 
 ### 带有 icon 和辅助性文字介绍
 
-::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
+:::demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
 ```html
 <template>
   <el-alert

examples/docs/zh-CN/carousel.md

@@ -67,7 +67,7 @@
 
 适用广泛的基础用法
 
-::: demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
+:::demo 结合使用`el-carousel`和`el-carousel-item`标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在`el-carousel-item`标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置`trigger`属性为`click`，可以达到点击触发的效果。
 ```html
 <template>
   <div class="block">
@@ -112,7 +112,7 @@
 
 可以将指示器的显示位置设置在容器外部
 
-::: demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
+:::demo `indicator-position`属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为`outside`则会显示在外部；设置为`none`则不会显示指示器。
 ```html
 <template>
   <el-carousel indicator-position="outside">
@@ -145,7 +145,7 @@
 ### 切换箭头
 可以设置切换箭头的显示时机
 
-::: demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
+:::demo `arrow`属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将`arrow`设置为`always`，则会一直显示；设置为`never`，则会一直隐藏。
 ```html
 <template>
   <el-carousel :interval="5000" arrow="always">
@@ -178,7 +178,7 @@
 ### 卡片化
 当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格
 
-::: demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
+:::demo 将`type`属性设置为`card`即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。
 ```html
 <template>
   <el-carousel :interval="4000" type="card" height="200px">

examples/docs/zh-CN/checkbox.md

@@ -72,7 +72,7 @@
 
 多选框不可用状态。
 
-::: demo 设置`disabled`属性即可。
+:::demo 设置`disabled`属性即可。
 
 ```html
 <template>

examples/docs/zh-CN/color.md

@@ -32,43 +32,43 @@
     background-color: #67C23A;
   }
   .bg-warning {
-    background-color: #EB9E05;
+    background-color: #E6A23C;
   }
   .bg-danger {
-    background-color: #FA5555;
+    background-color: #F56C6C;
   }
   .bg-info {
-    background-color: #878D99;
+    background-color: #909399;
   }
 
   .bg-text-primary {
-    background-color: #2d2f33;
+    background-color: #303133;
   }
   .bg-text-regular {
-    background-color: #5a5e66;
+    background-color: #606266;
   }
   .bg-text-secondary {
-    background-color: #878d99;
+    background-color: #909399;
   }
   .bg-text-placeholder {
-    background-color: #b4bccc;
+    background-color: #c0c4cc;
   }
 
   .bg-border-base {
-    background-color: #d8dce5;
+    background-color: #dcdfe6;
   }
   .bg-border-light {
-    background-color: #dfe4ed;
+    background-color: #e4e7ed;
   }
   .bg-border-lighter {
-    background-color: #e6ebf5;
+    background-color: #ebeef5;
   }
   .bg-border-extra-light {
-    background-color: #edf2fc;
+    background-color: #f2f6fc;
   }
 
   [class*=" bg-border-"] {
-    color: #5a5e66;
+    color: #303133;
   }
 </style>
 
@@ -95,13 +95,13 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
     <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#E6A23C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#F56C6C</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#909399</div></div>
   </el-col>
 </el-row>
 
@@ -112,18 +112,18 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#2D2F33</div></div>
-      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#5A5E66</div></div>
-      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#878D99</div></div>
-      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#B4BCCC</div></div>
+      <div class="demo-color-box bg-text-primary">主要文字<div class="value">#303133</div></div>
+      <div class="demo-color-box bg-text-regular">常规文字<div class="value">#606266</div></div>
+      <div class="demo-color-box bg-text-secondary">次要文字<div class="value">#909399</div></div>
+      <div class="demo-color-box bg-text-placeholder">占位文字<div class="value">#C0C4CC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-border-base">一级边框<div class="value">#D8DCE5</div></div>
-      <div class="demo-color-box bg-border-light">二级边框<div class="value">#DFE4ED</div></div>
-      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#E6EBF5</div></div>
-      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#EDF2FC</div></div>
+      <div class="demo-color-box bg-border-base">一级边框<div class="value">#DCDFE6</div></div>
+      <div class="demo-color-box bg-border-light">二级边框<div class="value">#E4E7ED</div></div>
+      <div class="demo-color-box bg-border-lighter">三级边框<div class="value">#EBEEF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">四级边框<div class="value">#F2F6FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/zh-CN/container.md

@@ -76,7 +76,7 @@
 
 ### 常见页面布局
 
-::: demo
+:::demo
 ```html
 <el-container>
   <el-header>Header</el-header>
@@ -170,7 +170,7 @@
 
 ### 实例
 
-::: demo
+:::demo
 ```html
 <el-container style="height: 500px; border: 1px solid #eee">
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">

examples/docs/zh-CN/custom-theme.md

@@ -72,9 +72,9 @@ $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
 $--color-success: #67c23a !default;
-$--color-warning: #eb9e05 !default;
-$--color-danger: #fa5555 !default;
-$--color-info: #878d99 !default;
+$--color-warning: #e6a23c !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
 
 ...
 ```

examples/docs/zh-CN/form.md

@@ -246,7 +246,7 @@
 
 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
 
-::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
+:::demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
 ```html
 <el-form ref="form" :model="form" label-width="80px">
   <el-form-item label="活动名称">
@@ -329,7 +329,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
 
-::: demo 设置 `inline` 属性可以让表单域变为行内的表单域
+:::demo 设置 `inline` 属性可以让表单域变为行内的表单域
 ```html
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
   <el-form-item label="审批人">
@@ -369,7 +369,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 根据具体目标和制约因素，选择最佳的标签对齐方式。
 
-::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
+:::demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
 ```html
 <el-radio-group v-model="labelPosition" size="small">
   <el-radio-button label="left">左对齐</el-radio-button>
@@ -409,7 +409,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
 
-::: demo Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
+:::demo Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
 ```html
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="活动名称" prop="name">
@@ -523,7 +523,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。
 
-::: demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
+:::demo 本例还使用`status-icon`属性为输入框添加了表示校验结果的反馈图标。
 ```html
 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
   <el-form-item label="密码" prop="pass">
@@ -619,7 +619,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 ### 动态增减表单项
 
-::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
+:::demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
 ```html
 <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
   <el-form-item
@@ -695,7 +695,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 ### 数字类型验证
 
-::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
+:::demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
 ```html
 <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
   <el-form-item
@@ -750,7 +750,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 
 通过设置 Form 上的 `size` 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。
 
-::: demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
+:::demo 如果希望某个表单项或某个表单组件的尺寸不同于 Form 上的`size`属性，直接为这个表单项或表单组件设置自己的`size`即可。
 ```html
 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
   <el-form-item label="活动名称">

examples/docs/zh-CN/i18n.md

@@ -220,6 +220,8 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
   <li>阿拉伯语（ar）</li>
   <li>希伯来语（he）</li>
   <li>立陶宛语（lt）</li>
+  <li>哈萨克斯坦语（kz）</li>
+  <li>匈牙利语（hu）</li>
 </ul>
 
 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。

examples/docs/zh-CN/icon.md

@@ -11,19 +11,12 @@
 </script>
 <style>
   .demo-icon .source > i {
-    color: #5a5e66;
+    color: #606266;
     margin: 0 20px;
     font-size: 1.5em;
     vertical-align: middle;
   }
   
-  .demo-icon .source > i {
-      color: #5a5e66;
-      margin: 0 20px;
-      font-size: 1.5em;
-      vertical-align: middle;
-  }
-  
   .demo-icon .source > button {
     margin: 0 20px;
   }
@@ -64,14 +57,14 @@
       display: block;
       font-size: 32px;
       margin-bottom: 15px;
-      color: #5a5e66;
+      color: #606266;
     }
     
     .icon-name {
       display: inline-block;
       padding: 0 3px;
       height: 1em;
-      color: #5a5e66;
+      color: #606266;
     }
     
     &:hover {

examples/docs/zh-CN/input.md

@@ -186,7 +186,7 @@
 
 ### 基础用法
 
-::: demo
+:::demo
 ```html
 <el-input v-model="input" placeholder="请输入内容"></el-input>
 
@@ -205,7 +205,7 @@ export default {
 
 ### 禁用状态
 
-::: demo 通过 `disabled` 属性指定是否禁用 input 组件
+:::demo 通过 `disabled` 属性指定是否禁用 input 组件
 ```html
 <el-input
   placeholder="请输入内容"
@@ -227,7 +227,7 @@ export default {
 
 ### 可清空
 
-::: demo 使用`clearable`属性即可得到一个可清空的输入框
+:::demo 使用`clearable`属性即可得到一个可清空的输入框
 
 ```html
 <el-input
@@ -252,7 +252,7 @@ export default {
 
 带有图标标记输入类型
 
-::: demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
+:::demo 可以通过 `prefix-icon` 和 `suffix-icon` 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。
 ```html
 <div class="demo-input-suffix">
   属性方式：
@@ -300,7 +300,7 @@ export default {
 
 用于输入多行文本信息，通过将 `type` 属性的值指定为 textarea。
 
-::: demo 文本域高度可通过 `rows` 属性控制
+:::demo 文本域高度可通过 `rows` 属性控制
 ```html
 <el-input
   type="textarea"
@@ -325,7 +325,7 @@ export default {
 
 通过设置 `autosize` 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 `autosize` 还可以设定为一个对象，指定最小行数和最大行数。
 
-::: demo
+:::demo
 ```html
 <el-input
   type="textarea"
@@ -358,7 +358,7 @@ export default {
 
 可前置或后置元素，一般为标签或按钮
 
-::: demo 可通过 slot 来指定在 input 中前置或者后置内容。
+:::demo 可通过 slot 来指定在 input 中前置或者后置内容。
 ```html
 <div>
   <el-input placeholder="请输入内容" v-model="input3">
@@ -405,7 +405,7 @@ export default {
 
 ### 尺寸
 
-::: demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
+:::demo 可通过 `size` 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。
 ```html
 <div class="demo-input-size">
   <el-input
@@ -452,7 +452,7 @@ export default {
 
 根据输入内容提供对应的输入建议
 
-::: demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
+:::demo autocomplete 是一个可带输入建议的输入框组件，`fetch-suggestions` 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。
 ```html
 <el-row class="demo-autocomplete">
   <el-col :span="12">
@@ -566,7 +566,7 @@ export default {
 
 可自定义输入建议的显示
 
-::: demo 使用`scoped slot`自定义输入建议的模板。该 scope 的参数为`item`，表示当前输入建议对象。
+:::demo 使用`scoped slot`自定义输入建议的模板。该 scope 的参数为`item`，表示当前输入建议对象。
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
@@ -698,7 +698,7 @@ export default {
 
 从服务端搜索数据
 
-::: demo
+:::demo
 ```html
 <el-autocomplete
   v-model="state4"

examples/docs/zh-CN/layout.md

@@ -37,7 +37,7 @@
 
 使用单一分栏创建基础的栅格布局。
 
-::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
+:::demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
 ```html
 <el-row>
   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
@@ -101,7 +101,7 @@
 
 分栏之间存在间隔。
 
-::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
+:::demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -145,7 +145,7 @@
 
 通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="20">
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
@@ -198,7 +198,7 @@
 
 支持偏移指定的栏数。
 
-::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
+:::demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -247,7 +247,7 @@
 
 通过 `flex` 布局来对分栏进行灵活的对齐。
 
-::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
+:::demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -310,7 +310,7 @@
 
 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：`xs`、`sm`、`md`、`lg` 和 `xl`。
 
-::: demo
+:::demo
 ```html
 <el-row :gutter="10">
   <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>

examples/docs/zh-CN/menu.md

@@ -59,7 +59,7 @@
 
 适用广泛的基础用法。
 
-::: demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
+:::demo 导航菜单默认为垂直模式，通过`mode`属性可以使导航菜单变更为水平模式。另外，在菜单中通过`submenu`组件可以生成二级菜单。Menu 还提供了`background-color`、`text-color`和`active-text-color`，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
 
 ```html
 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -113,7 +113,7 @@
 
 垂直菜单，可内嵌子菜单。
 
-::: demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
+:::demo 通过`el-menu-item-group`组件可以实现菜单进行分组，分组名可以通过`title`属性直接设定，也可以通过具名 slot 来设定。
 ```html
 <el-row class="tac">
   <el-col :span="12">
@@ -208,7 +208,7 @@
 
 ### 折叠
 
-::: demo
+:::demo
 ```html
 <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
   <el-radio-button :label="false">展开</el-radio-button>
@@ -276,7 +276,7 @@
 | mode     | 模式   | string  |   horizontal / vertical   | vertical |
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
 | background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
-| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #2d2f33 |
+| text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #303133 |
 | active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
 | default-active | 当前激活菜单的 index | string    | — | — |
 | default-openeds | 当前打开的sub-menu的 key 数组 | Array    | — | — |

examples/docs/zh-CN/notification.md

@@ -118,7 +118,7 @@
 
 适用性广泛的通知栏
 
-::: demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
+:::demo Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，在最简单的情况下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置`duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭。注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
 ```html
 <template>
   <el-button
@@ -162,7 +162,7 @@
 
 带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息
 
-::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
+:::demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过`type`字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入`type`字段的情况下像`open5`和`open6`那样直接调用。
 ```html
 <template>
   <el-button
@@ -229,7 +229,7 @@
 
 可以让 Notification 从屏幕四角中的任意一角弹出
 
-::: demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
+:::demo 使用`position`属性定义 Notification 的弹出位置，支持四个选项：`top-right`、`top-left`、`bottom-right`、`bottom-left`，默认为`top-right`。
 ```html
 <template>
   <el-button
@@ -297,7 +297,7 @@
 
 让 Notification 偏移一些位置
 
-::: demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
+:::demo Notification 提供设置偏移量的功能，通过设置 `offset` 字段，可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
 ```html
 <template>
   <el-button
@@ -326,7 +326,7 @@
 ### 使用 HTML 片段
 `message` 属性支持传入 HTML 片段
 
-::: demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
+:::demo 将`dangerouslyUseHTMLString`属性设置为 true，`message` 就会被当作 HTML 片段处理。
 ```html
 <template>
   <el-button
@@ -360,7 +360,7 @@
 
 可以不显示关闭按钮
 
-::: demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。
+:::demo 将`showClose`属性设置为`false`即可隐藏关闭按钮。
 ```html
 <template>
   <el-button

examples/docs/zh-CN/select.md

@@ -339,10 +339,10 @@
     style="margin-left: 20px;"
     placeholder="请选择">
     <el-option
-        v-for="item in options"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value">
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value">
     </el-option>
   </el-select>
 </template>

examples/docs/zh-CN/tree.md

@@ -292,7 +292,7 @@
 
 基础的树形结构展示。
 
-::: demo
+:::demo
 ```html
 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 
@@ -355,7 +355,7 @@
 
 适用于需要选择层级时使用。
 
-::: demo 本例还展示了动态加载节点数据的方法。
+:::demo 本例还展示了动态加载节点数据的方法。
 ```html
 <el-tree
   :props="props"
@@ -421,7 +421,7 @@
 
 ### 懒加载自定义叶子节点
 
-::: demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
+:::demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
 ```html
 <el-tree
   :props="props1"
@@ -468,7 +468,7 @@
 ### 默认展开和默认选中
 可将 Tree 的某些节点设置为默认展开或默认选中
 
-::: demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
+:::demo 分别通过`default-expanded-keys`和`default-checked-keys`设置默认展开和默认选中的节点。需要注意的是，此时必须设置`node-key`，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
 ```html
 <el-tree
   :data="data2"
@@ -532,7 +532,7 @@
 ### 禁用状态
 可将 Tree 的某些节点设置为禁用状态
 
-::: demo 通过`disabled`设置禁用状态。
+:::demo 通过`disabled`设置禁用状态。
 ```html
 <el-tree
   :data="data3"
@@ -587,7 +587,7 @@
 
 ### 树节点的选择
 
-::: demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
+:::demo 本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置`node-key`。
 ```html
 <el-tree
   :data="data2"
@@ -684,7 +684,7 @@
 ### 自定义节点内容
 节点的内容支持自定义，可以在节点区添加按钮或图标等内容
 
-::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
+:::demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
 ```html
 <el-tree
   :data="data4"
@@ -781,7 +781,7 @@
 ### 节点过滤
 通过关键字过滤树节点
 
-::: demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
+:::demo 在需要对节点进行过滤时，调用 Tree 实例的`filter`方法，参数为关键字。需要注意的是，此时需要设置`filter-node-method`，值为过滤函数。
 ```html
 <el-input
   placeholder="输入关键字进行过滤"
@@ -865,7 +865,7 @@
 
 对于同一级的节点，每次只能展开一个
 
-::: demo
+:::demo
 ```html
 <el-tree
   :data="data"

examples/docs/zh-CN/upload.md

@@ -126,7 +126,7 @@
 
 ### 点击上传
 
-::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。 
+:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。
 ```html
 <el-upload
   class="upload-demo"
@@ -167,7 +167,7 @@
 
 使用 `before-upload` 限制用户上传的图片格式和大小。
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="avatar-uploader"
@@ -238,7 +238,7 @@
 
 使用 `list-type` 属性来设置文件列表的样式。
 
-::: demo
+:::demo
 ```html
 <el-upload
   action="https://jsonplaceholder.typicode.com/posts/"
@@ -274,7 +274,7 @@
 
 ### 图片列表缩略图
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -310,7 +310,7 @@
 
 通过 `on-change` 钩子函数来对列表进行控制
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -347,7 +347,7 @@
 
 ### 拖拽上传
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"
@@ -363,7 +363,7 @@
 
 ### 手动上传
 
-::: demo
+:::demo
 ```html
 <el-upload
   class="upload-demo"

examples/i18n/page.json

@@ -106,10 +106,7 @@
         "9": "Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.",
         "lang": "en-US",
         "titleSize": "34",
-        "paraSize": "18",
-        "theatreParam": "{ maxSpeed: 100 }",
-        "typingFunc": ".addScene('product designers', 1800, -17, 800)\n          .addScene('UI designers', 1800, -12, 800)\n          .addScene('UX designers', 1800, -12, 800)\n          .addScene('product managers', 1800, -16, 800)\n          .addScene('FE developers', 1800, -13, 800)",
-        "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:For ', 500)"
+        "paraSize": "18"
       },
       "component": {},
       "changelog": {
@@ -182,7 +179,7 @@
         "9": "Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.",
         "paraHeight": "1.6",
         "placeholder1": "Under construction",
-        "placeholder2": "Please wait while we prepare the design resources"
+        "placeholder2": "More resources are being developed"
       }
     }
   },
@@ -201,15 +198,12 @@
         "9": "Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.",
         "lang": "es",
         "titleSize": "34",
-        "paraSize": "18",
-        "theatreParam": "{ maxSpeed: 100 }",
-        "typingFunc": ".addScene('product designers', 1800, -17, 800)\n          .addScene('UI designers', 1800, -12, 800)\n          .addScene('UX designers', 1800, -12, 800)\n          .addScene('product managers', 1800, -16, 800)\n          .addScene('FE developers', 1800, -13, 800)",
-        "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n        .addScene(2600)\n        .addScene('line2:For ', 500)"
+        "paraSize": "18"
       },
       "component": {},
       "changelog": {
         "1": "Lista de cambios",
-        "2": "en-US"
+        "2": "es"
       },
       "design": {
         "1": "Disciplinas de diseño",
@@ -277,7 +271,7 @@
         "9": "Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.",
         "paraHeight": "1.6",
         "placeholder1": "En construcción",
-        "placeholder2": "Por favor espere mientras preparamos los recursos de diseño"
+        "placeholder2": "Se están desarrollando más recursos"
       }
     }
   }

examples/nav.config.json

@@ -501,7 +501,7 @@
   ],
   "es": [
     {
-      "name": "Changelog-es",
+      "name": "Changelog",
       "path": "/changelog"
     },
     {
@@ -517,23 +517,23 @@
       "children": [
         {
           "path": "/installation",
-          "name": "Installation-es"
+          "name": "Installation"
         },
         {
           "path": "/quickstart",
-          "name": "Quick Start-es"
+          "name": "Quick Start"
         },
         {
           "path": "/i18n",
-          "name": "Internationalization-es"
+          "name": "Internationalization"
         },
         {
           "path": "/custom-theme",
-          "name": "Custom Theme-es"
+          "name": "Custom Theme"
         },
         {
           "path": "/transition",
-          "name": "Built-in transition-es"
+          "name": "Built-in transition"
         }
       ]
     },
@@ -545,27 +545,27 @@
           "list": [
             {
               "path": "/layout",
-              "title": "Layout-es"
+              "title": "Layout"
             },
             {
               "path": "/container",
-              "title": "Layout Container-es"
+              "title": "Layout Container"
             },
             {
               "path": "/color",
-              "title": "Color-es"
+              "title": "Color"
             },
             {
               "path": "/typography",
-              "title": "Typography-es"
+              "title": "Typography"
             },
             {
               "path": "/icon",
-              "title": "Icon-es"
+              "title": "Icon"
             },
             {
               "path": "/button",
-              "title": "Button-es"
+              "title": "Button"
             }
           ]
         },
@@ -574,67 +574,67 @@
           "list": [
             {
               "path": "/radio",
-              "title": "Radio-es"
+              "title": "Radio"
             },
             {
               "path": "/checkbox",
-              "title": "Checkbox-es"
+              "title": "Checkbox"
             },
             {
               "path": "/input",
-              "title": "Input-es"
+              "title": "Input"
             },
             {
               "path": "/input-number",
-              "title": "InputNumber-es"
+              "title": "InputNumber"
             },
             {
               "path": "/select",
-              "title": "Select-es"
+              "title": "Select"
             },
             {
               "path": "/cascader",
-              "title": "Cascader-es"
+              "title": "Cascader"
             },
             {
               "path": "/switch",
-              "title": "Switch-es"
+              "title": "Switch"
             },
             {
               "path": "/slider",
-              "title": "Slider-es"
+              "title": "Slider"
             },
             {
               "path": "/time-picker",
-              "title": "TimePicker-es"
+              "title": "TimePicker"
             },
             {
               "path": "/date-picker",
-              "title": "DatePicker-es"
+              "title": "DatePicker"
             },
             {
               "path": "/datetime-picker",
-              "title": "DateTimePicker-es"
+              "title": "DateTimePicker"
             },
             {
               "path": "/upload",
-              "title": "Upload-es"
+              "title": "Upload"
             },
             {
               "path": "/rate",
-              "title": "Rate-es"
+              "title": "Rate"
             },
             {
               "path": "/color-picker",
-              "title": "ColorPicker-es"
+              "title": "ColorPicker"
             },
             {
               "path": "/transfer",
-              "title": "Transfer-es"
+              "title": "Transfer"
             },
             {
               "path": "/form",
-              "title": "Form-es"
+              "title": "Form"
             }
           ]
         },
@@ -643,27 +643,27 @@
           "list": [
             {
               "path": "/table",
-              "title": "Table-es"
+              "title": "Table"
             },
             {
               "path": "/tag",
-              "title": "Tag-es"
+              "title": "Tag"
             },
             {
               "path": "/progress",
-              "title": "Progress-es"
+              "title": "Progress"
             },
             {
               "path": "/tree",
-              "title": "Tree-es"
+              "title": "Tree"
             },
             {
               "path": "/pagination",
-              "title": "Pagination-es"
+              "title": "Pagination"
             },
             {
               "path": "/badge",
-              "title": "Badge-es"
+              "title": "Badge"
             }
           ]
         },
@@ -672,23 +672,23 @@
           "list": [
             {
               "path": "/alert",
-              "title": "Alert-es"
+              "title": "Alert"
             },
             {
               "path": "/loading",
-              "title": "Loading-es"
+              "title": "Loading"
             },
             {
               "path": "/message",
-              "title": "Message-es"
+              "title": "Message"
             },
             {
               "path": "/message-box",
-              "title": "MessageBox-es"
+              "title": "MessageBox"
             },
             {
               "path": "/notification",
-              "title": "Notification-es"
+              "title": "Notification"
             }
           ]
         },
@@ -697,23 +697,23 @@
           "list": [
             {
               "path": "/menu",
-              "title": "NavMenu-es"
+              "title": "NavMenu"
             },
             {
               "path": "/tabs",
-              "title": "Tabs-es"
+              "title": "Tabs"
             },
             {
               "path": "/breadcrumb",
-              "title": "Breadcrumb-es"
+              "title": "Breadcrumb"
             },
             {
               "path": "/dropdown",
-              "title": "Dropdown-es"
+              "title": "Dropdown"
             },
             {
               "path": "/steps",
-              "title": "Steps-es"
+              "title": "Steps"
             }
           ]
         },
@@ -722,27 +722,27 @@
           "list": [
             {
               "path": "/dialog",
-              "title": "Dialog-es"
+              "title": "Dialog"
             },
             {
               "path": "/tooltip",
-              "title": "Tooltip-es"
+              "title": "Tooltip"
             },
             {
               "path": "/popover",
-              "title": "Popover-es"
+              "title": "Popover"
             },
             {
               "path": "/card",
-              "title": "Card-es"
+              "title": "Card"
             },
             {
               "path": "/carousel",
-              "title": "Carousel-es"
+              "title": "Carousel"
             },
             {
               "path": "/collapse",
-              "title": "Collapse-es"
+              "title": "Collapse"
             }
           ]
         }

examples/pages/es/changelog.vue

@@ -138,9 +138,9 @@
   <div class="page-changelog">
     <div class="heading">
       <el-button class="fr">
-        <a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
+        <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
       </el-button>
-      Changelog
+      Lista de cambios
     </div>
     <ul class="timeline" ref="timeline">
     </ul>
@@ -148,7 +148,7 @@
   </div>
 </template>
 <script>
-  import ChangeLog from '../../../CHANGELOG.en-US.md';
+  import ChangeLog from '../../../CHANGELOG.es.md';
 
   export default {
     components: {

examples/pages/es/design.vue

@@ -26,57 +26,57 @@
 </style>
 <template>
   <div>
-    <h2>Design Disciplines</h2>
+    <h2>Disciplinas de diseño</h2>
     <el-row :gutter="14" class="cards">
       <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/consistency.png" alt="Consistency">
-          <h4>Consistency</h4>
+          <h4>Consistencia</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/feedback.png" alt="Feedback">
-          <h4>Feedback</h4>
+          <h4>Comentarios</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/efficiency.png" alt="Efficiency">
-          <h4>Efficiency</h4>
+          <h4>Eficiencia</h4>
           <span></span>
         </div>
       </el-col>
       <el-col :xs="12" :sm="6">
         <div class="card">
           <img src="~examples/assets/images/controllability.png" alt="Controllability">
-          <h4>Controllability</h4>
+          <h4>Control</h4>
           <span></span>
         </div>
       </el-col>
     </el-row>
-    <h3>Consistency</h3>
+    <h3>Consistencia</h3>
     <ul>
-      <li><strong>Consistent with real life: </strong>in line with the process and logic of real life, and comply with languages and habits that the users are used to.</li>
-      <li><strong>Consistent within interface: </strong>all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</li>
+      <li><strong>Consistente con la vida real: </strong>en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.</li>
+      <li><strong>Consistente dentro de la interfaz: </strong>todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.</li>
     </ul>
-    <h3>Feedback</h3>
+    <h3>Comentarios</h3>
     <ul>
-      <li><strong>Operation feedback: </strong>enable the users to clearly perceive their operations by style updates and interactive effects.</li>
-      <li><strong>Visual feedback: </strong>reflect current state by updating or rearranging elements of the page.</li>
+      <li><strong>Comentarios sobre la operación: </strong>Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.</li>
+      <li><strong>Comentarios visuales: </strong>Refleja el estado actual al actualizar o reorganizar los elementos de la página.</li>
     </ul>
-    <h3>Efficiency</h3>
+    <h3>Eficiencia</h3>
     <ul>
-      <li><strong>Simplify the process: </strong>keep operating process simple and intuitive.</li>
-      <li><strong>Definite and clear: </strong>enunciate your intentions clearly so that the users can quickly understand and make decisions.</li>
-      <li><strong>Easy to identify: </strong>the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</li>
+      <li><strong>Simplifica el proceso: </strong>Mantiene el proceso operativo simple e intuitivo.</li>
+      <li><strong>Bien definido y claro: </strong>Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.</li>
+      <li><strong>Fácil de identificar: </strong>La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.</li>
     </ul>
-    <h3>Controllability</h3>
+    <h3>Control</h3>
     <ul>
-      <li><strong>Decision making: </strong>giving advices about operations is acceptable, but do not make decisions for the users.</li>
-      <li><strong>Controlled consequences: </strong>users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</li>
+      <li><strong>Toma de decisiones: </strong>Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.</li>
+      <li><strong>Consecuencias controladas: </strong>Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.</li>
     </ul>
   </div>
 </template>

examples/pages/es/guide.vue

@@ -78,11 +78,11 @@
         navsData: [
           {
             path: '/design',
-            name: 'Design Disciplines'
+            name: 'Disciplinas de diseño'
           },
           {
             path: '/nav',
-            name: 'Navigation'
+            name: 'Navegación'
           }
         ]
       };

examples/pages/es/index.vue

@@ -237,8 +237,8 @@
   <div>
     <div class="banner">
       <div class="banner-desc">
-        <h1>A Desktop UI Library</h1>
-        <p>Element, a Vue 2.0 based component library for developers, designers and product managers</p>
+        <h1>Un kit de interfaz de usuario para la web</h1>
+        <p>Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto</p>
       </div>
     </div>
     <div class="jumbotron">
@@ -264,36 +264,36 @@
         <li>
           <div class="card">
             <img src="~examples/assets/images/guide.png" alt="">
-            <h3>Guide</h3>
-            <p>Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.</p>
+            <h3>Guía</h3>
+            <p>Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.</p>
             <router-link
               active-class="active"
-              to="/en-US/guide/design"
-              exact>View Detail
+              to="/es/guide/design"
+              exact>Ver detalle
             </router-link>
           </div>
         </li>
         <li>
           <div class="card">
             <img src="~examples/assets/images/component.png" alt="">
-            <h3>Component</h3>
-            <p>Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.</p>
+            <h3>Componentes</h3>
+            <p>Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.</p>
             <router-link
               active-class="active"
-              to="/en-US/component/layout"
-              exact>View Detail
+              to="/es/component/layout"
+              exact>Ver detalle
             </router-link>
           </div>
         </li>
         <li>
           <div class="card">
             <img src="~examples/assets/images/resource.png" alt="">
-            <h3>Resource</h3>
-            <p>Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.</p>
+            <h3>Recursos</h3>
+            <p>Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.</p>
             <router-link
               active-class="active"
-              to="/en-US/resource"
-              exact>View Detail
+              to="/es/resource"
+              exact>Ver detalle
             </router-link>
           </div>
         </li>

examples/pages/es/nav.vue

@@ -76,42 +76,42 @@
 </style>
 <template>
   <div>
-    <h2>Navigation</h2>
+    <h2>Navegación</h2>
     <div class="block">
-      <p>Navigation focuses on solving the users' problems of where to go and how to get there. Generally it can be categorized into 'sidebar navigation' and 'top navigation'.</p>
+      <p>La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.</p>
     </div>
     <div class="block">
-      <h3>Choose the right navigation</h3>
-      <p>An appropriate navigation gives users a smooth experience, while an inappropriate one leads to confusion. Here are the differences between sidebar navigation and top navigation</p>
+      <h3>Elige la navegación correcta</h3>
+      <p>Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.</p>
     </div>
     <div class="block">
-      <h3>Side Navigation</h3>
+      <h3>Navegación lateral</h3>
       <el-row :gutter="20">
         <el-col :span="9">
-          <p>Fix the navigation at the left edge, thus improves its visibility, making it easier to switch between pages. In this case, the top area of the page holds commonly used tools, e.g. search bar, help button, notice button, etc. Suitable for background management or utility websites.</p>
+          <p>Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.</p>
         </el-col>
         <el-col :span="15" class="nav-demos">
-          <img src="~examples/assets/images/navbar_1.png" alt="Level 1 categories" @click="enlarge(846, $event)">
-          <h5>Level 1 categories</h5>
-          <p>Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.</p>
-          <img src="~examples/assets/images/navbar_2.png" alt="Level 2 categories" @click="enlarge(846, $event)">
-          <h5>Level 2 categories</h5>
-          <p>Sidebar displays up to two levels of navigation. Breadcrumbs are recommended in combination of second level navigation, making it easier for the users to locate and navigate.</p>
-          <img src="~examples/assets/images/navbar_3.png" alt="Level 3 categories" @click="enlarge(846, $event)">
-          <h5>Level 3 categories</h5>
-          <p>Suitable for complicated utility websites. The left sidebar holds first level navigation, and the middle column displays second level navigation or other utility options.</p>
+          <img src="~examples/assets/images/navbar_1.png" alt="Categorías de Nivel 1" @click="enlarge(846, $event)">
+          <h5>Categorías de Nivel 1</h5>
+          <p>Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.</p>
+          <img src="~examples/assets/images/navbar_2.png" alt="Categorías de Nivel 2" @click="enlarge(846, $event)">
+          <h5>Categorías de Nivel 2</h5>
+          <p>La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.</p>
+          <img src="~examples/assets/images/navbar_3.png" alt="Categorías de Nivel 3" @click="enlarge(846, $event)">
+          <h5>Categorías de Nivel 3</h5>
+          <p>Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.</p>
         </el-col>
       </el-row>
     </div>
     <div class="block">
-      <h3>Top Navigation</h3>
+      <h3>Navegación superior</h3>
       <el-row>
         <el-col :span="10">
-          <p>Conforms to the normal browsing order from top to bottom, which makes things more natural. The navigation amount and text length are limited to the width of the top.</p>
+          <p>Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.</p>
         </el-col>
         <el-col :span="14" class="nav-demos">
           <img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
-          <p>Suitable for sites with few navigations and large chunks.</p>
+          <p>Adecuado para sitios con pocas navegaciones y grandes trozos.</p>
         </el-col>
       </el-row>
     </div>

examples/pages/es/resource.vue

@@ -120,41 +120,41 @@
 </style>
 <template>
   <div class="page-container page-resource">
-    <h2>Resource</h2>
-    <div class="resource-placeholder">
-      <img src="~examples/assets/images/resource-placeholder.svg" alt="">
-      <h4>Under construction</h4>
-      <p>Please wait while we prepare the design resources</p>
-    </div>
+    <h2>Recursos</h2>
+    <!--<div class="resource-placeholder">-->
+      <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
+      <!--<h4>En construcción</h4>-->
+      <!--<p>Se están desarrollando más recursos</p>-->
+    <!--</div>-->
     
-    <!--<p>Under construction.</p>-->
-    <!--<div class="cards">-->
-      <!--<ul class="container">-->
+    <p>Se están desarrollando más recursos</p>
+    <div class="cards">
+      <ul class="container">
         <!--<li>-->
           <!--<div class="card">-->
             <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
-            <!--<h3>Axure Components</h3>-->
-            <!--<p>By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.</p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Download</a>-->
-          <!--</div>-->
-        <!--</li>-->
-        <!--<li>-->
-          <!--<div class="card">-->
-            <!--<img src="~examples/assets/images/Sketch-Template.svg" alt="">-->
-            <!--<h3>Sketch Template</h3>-->
-            <!--<p>Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.</p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch">Download</a>-->
+            <!--<h3>Componetes de Axure</h3>-->
+            <!--<p>Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.</p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Descarga</a>-->
           <!--</div>-->
         <!--</li>-->
+        <li>
+          <div class="card">
+            <img src="~examples/assets/images/Sketch-Template.svg" alt="">
+            <h3>Plantilla de Sketch</h3>
+            <p>Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.</p>
+            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch">Descarga</a>
+          </div>
+        </li>
         <!--<li>-->
           <!--<div class="card">-->
             <!--<img src="~examples/assets/images/Module.svg" alt="">-->
-            <!--<h3>Interaction Design Documentation</h3>-->
-            <!--<p>Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.</p>-->
-            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Download</a>-->
+            <!--<h3>Documentación de diseño de interacción</h3>-->
+            <!--<p>Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.</p>-->
+            <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Descarga</a>-->
           <!--</div>-->
         <!--</li>-->
-      <!--</ul>-->
-    <!--</div>-->
+      </ul>
+    </div>
   </div>
 </template>

examples/pages/template/changelog.tpl

@@ -138,7 +138,7 @@
   <div class="page-changelog">
     <div class="heading">
       <el-button class="fr">
-        <a href="https://github.com/ElemeFE/element/releases" target="_blank">Github Releases</a>
+        <a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
       </el-button>
       <%= 1 >
     </div>

examples/pages/template/resource.tpl

@@ -121,15 +121,15 @@
 <template>
   <div class="page-container page-resource">
     <h2><%= 1 ></h2>
-    <div class="resource-placeholder">
-      <img src="~examples/assets/images/resource-placeholder.svg" alt="">
-      <h4><%= placeholder1 ></h4>
-      <p><%= placeholder2 ></p>
-    </div>
+    <!--<div class="resource-placeholder">-->
+      <!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
+      <!--<h4><%= placeholder1 ></h4>-->
+      <!--<p><%= placeholder2 ></p>-->
+    <!--</div>-->
     
-    <!--<p><%= 2 ></p>-->
-    <!--<div class="cards">-->
-      <!--<ul class="container">-->
+    <p><%= placeholder2 ></p>
+    <div class="cards">
+      <ul class="container">
         <!--<li>-->
           <!--<div class="card">-->
             <!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
@@ -138,14 +138,14 @@
             <!--<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/Sketch-Template.svg" alt="">
+            <h3><%= 6 ></h3>
+            <p><%= 7 ></p>
+            <a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"><%= 5 ></a>
+          </div>
+        </li>
         <!--<li>-->
           <!--<div class="card">-->
             <!--<img src="~examples/assets/images/Module.svg" alt="">-->
@@ -154,7 +154,7 @@
             <!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"><%= 5 ></a>-->
           <!--</div>-->
         <!--</li>-->
-      <!--</ul>-->
-    <!--</div>-->
+      </ul>
+    </div>
   </div>
 </template>

examples/route.config.js

@@ -83,7 +83,7 @@ const registerRoute = (navConfig) => {
         description: page.description,
         lang
       },
-      name: 'component-' + (page.title || page.name),
+      name: 'component-' + lang + (page.title || page.name),
       component: component.default || component
     };
 

packages/dropdown/src/dropdown.vue

@@ -198,7 +198,7 @@
         if (!this.splitButton) { // 自定义
           this.triggerElm.setAttribute('role', 'button');
           this.triggerElm.setAttribute('tabindex', '0');
-          this.triggerElm.setAttribute('class', this.triggerElm.getAttribute('class') + ' el-dropdown-selfdefine'); // 控制
+          this.triggerElm.setAttribute('class', (this.triggerElm.getAttribute('class') || '') + ' el-dropdown-selfdefine'); // 控制
         }
       },
       initEvent() {

packages/select/src/select.vue

@@ -9,7 +9,7 @@
       @click.stop="toggleMenu"
       ref="tags"
       :style="{ 'max-width': inputWidth - 32 + 'px' }">
-      <div v-if="collapseTags && selected.length">
+      <span v-if="collapseTags && selected.length">
         <el-tag
           :closable="!disabled"
           size="small"
@@ -27,7 +27,7 @@
           disable-transitions>
           <span class="el-select__tags-text">+ {{ selected.length - 1 }}</span>
         </el-tag>
-      </div>
+      </span>
       <transition-group @after-leave="resetInputHeight" v-if="!collapseTags">
         <el-tag
           v-for="item in selected"

packages/theme-chalk/src/common/var.scss

@@ -25,10 +25,10 @@ $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /
 $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
 $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
 
-$--color-success: #5cb87a !default;
+$--color-success: #67c23a !default;
 $--color-warning: #e6a23c !default;
-$--color-danger: #fa5555 !default;
-$--color-info: #878d99 !default;
+$--color-danger: #f56c6c !default;
+$--color-info: #909399 !default;
 
 $--color-success-light: mix($--color-white, $--color-success, 80%) !default;
 $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
@@ -40,10 +40,10 @@ $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;
 $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;
 $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;
 
-$--color-text-primary: #2d2f33 !default;
-$--color-text-regular: #5a5e66 !default;
-$--color-text-secondary: #878d99 !default;
-$--color-text-placeholder: #b4bccc !default;
+$--color-text-primary: #303133 !default;
+$--color-text-regular: #606266 !default;
+$--color-text-secondary: #909399 !default;
+$--color-text-placeholder: #c0c4cc !default;
 
 /* Link
 -------------------------- */
@@ -58,10 +58,10 @@ $--background-color-base: #f5f7fa !default;
 -------------------------- */
 $--border-width-base: 1px !default;
 $--border-style-base: solid !default;
-$--border-color-base: #d8dce5 !default;
-$--border-color-light: #dfe4ed !default;
-$--border-color-lighter: #e6ebf5 !default;
-$--border-color-extra-light: #edf2fc !default;
+$--border-color-base: #dcdfe6 !default;
+$--border-color-light: #e4e7ed !default;
+$--border-color-lighter: #ebeef5 !default;
+$--border-color-extra-light: #f2f6fc !default;
 $--border-color-hover: $--color-text-placeholder !default;
 $--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
 $--border-radius-base: 4px !default;