Carbon: new icons

examples/docs/en-US/menu.md

@@ -124,7 +124,7 @@ Vertical NavMenu with sub-menus.
       @close="handleClose">
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-message"></i>
+          <i class="el-icon-location"></i>
           <span>Navigator One</span>
         </template>
         <el-menu-item-group title="Group One">
@@ -161,7 +161,7 @@ Vertical NavMenu with sub-menus.
       active-text-color="#ffd04b">
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-message"></i>
+          <i class="el-icon-location"></i>
           <span>Navigator One</span>
         </template>
         <el-menu-item-group title="Group One">
@@ -216,7 +216,7 @@ Vertical NavMenu could be collapsed.
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <el-submenu index="1">
     <template slot="title">
-      <i class="el-icon-message"></i>
+      <i class="el-icon-location"></i>
       <span slot="title">Navigator One</span>
     </template>
     <el-menu-item-group>

examples/docs/zh-CN/icon.md

@@ -11,12 +11,19 @@
 </script>
 <style>
   .demo-icon .source > i {
-    color: #8492a6;
+    color: #5a5e66;
     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;
   }
@@ -45,19 +52,28 @@
 
     @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: #5a5e66;
+    }
+    
+    .icon-name {
+      display: inline-block;
+      padding: 0 3px;
+      height: 1em;
+      color: #5a5e66;
     }
+    
     &:hover {
       color: rgb(92, 182, 255);
     }
@@ -87,7 +103,7 @@
   <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/zh-CN/menu.md

@@ -125,7 +125,7 @@
       @close="handleClose">
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-message"></i>
+          <i class="el-icon-location"></i>
           <span>导航一</span>
         </template>
         <el-menu-item-group>
@@ -163,7 +163,7 @@
       active-text-color="#ffd04b">
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-message"></i>
+          <i class="el-icon-location"></i>
           <span>导航一</span>
         </template>
         <el-menu-item-group>
@@ -217,7 +217,7 @@
 <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <el-submenu index="1">
     <template slot="title">
-      <i class="el-icon-message"></i>
+      <i class="el-icon-location"></i>
       <span slot="title">导航一</span>
     </template>
     <el-menu-item-group>

examples/icon.json

@@ -1 +1 @@
-["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning_default","delete2","upload2","view","circle-check-plain","circle-cross-plain","information-plain","warning-plain","info","error","success","warning","sort-down","sort-up"]
+["upload","error","success","warning","sort-down","sort-up","arrow-left","circle-plus","circle-plus-outline","arrow-down","arrow-right","arrow-up","back","circle-close","date","circle-close-outline","caret-left","caret-bottom","caret-top","caret-right","close","d-arrow-left","check","delete","d-arrow-right","document","d-caret","edit-outline","download","goods","search","info","message","edit","location","loading","location-outline","menu","minus","bell","moblie-phone","news","more","phone","phone-outline","picture","picture-outline","plus","printer","rank","refresh","question","remove","share","star-on","setting","circle-check","service","sold-out","remove-outline","star-off","circle-check-outline","tickets","sort","zoom-in","time","view","upload2","zoom-out"]

examples/pages/template/component.tpl

@@ -118,7 +118,8 @@
         display: block;
         line-height: 40px;
         text-align: center;
-        font-size: 12px;
+        font-size: 18px;
+        transform: translateY(-2px);
       }
 
       &.hover {

packages/notification/src/main.vue

@@ -31,10 +31,10 @@
 
 <script type="text/babel">
   let typeMap = {
-    success: 'circle-check',
-    info: 'information',
+    success: 'success',
+    info: 'info',
     warning: 'warning',
-    error: 'circle-cross'
+    error: 'error'
   };
 
   export default {

packages/theme-chalk/src/breadcrumb.scss

@@ -12,10 +12,9 @@
     font-weight: bold;
     color: $--color-text-placeholder;
 
-    &[class*=el-icon] {
+    &[class*=icon] {
       margin: 0 6px;
       font-weight: normal;
-      transform: scale(.8);
     }
   }
 

packages/theme-chalk/src/cascader.scss

@@ -19,7 +19,7 @@
 
   .el-icon-arrow-down {
     transition: transform .3s;
-    font-size: 12px;
+    font-size: 14px;
 
     @include when(reverse) {
       transform: rotateZ(180deg);
@@ -131,13 +131,11 @@
     @include m(extensible) {
       &:after {
         font-family: 'element-icons';
-        content: "\e602";
-        font-size: 12px;
-        transform: scale(0.8);
+        content: "\e604";
+        font-size: 14px;
         color: rgb(191, 203, 217);
         position: absolute;
         right: 15px;
-        margin-top: 1px;
       }
     }
 

packages/theme-chalk/src/color-picker.scss

@@ -240,7 +240,7 @@
 
     .el-color-picker__icon,
     .el-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.6);
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
     }
   }
 
@@ -259,7 +259,7 @@
 
     .el-color-picker__icon,
     .el-color-picker__empty {
-      transform: translate3d(-50%, -50%, 0) scale(0.6);
+      transform: translate3d(-50%, -50%, 0) scale(0.8);
     }
   }
 
@@ -317,7 +317,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    transform: translate3d(-50%, -50%, 0) scale(0.8);
+    transform: translate3d(-50%, -50%, 0);
   }
 
   @include e(icon) {
@@ -326,7 +326,7 @@
     width: 100%;
     top: 50%;
     left: 50%;
-    transform: translate3d(-50%, -50%, 0) scale(0.8);
+    transform: translate3d(-50%, -50%, 0);
     color: $--color-white;
     text-align: center;
     font-size: 12px;

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

@@ -209,7 +209,7 @@ $--select-close-hover-color: $--color-text-secondary;
 $--select-input-color: $--color-text-placeholder;
 $--select-multiple-input-color: #666;
 $--select-input-focus-background: $--color-primary;
-$--select-input-font-size: 12px;
+$--select-input-font-size: 14px;
 
 $--select-tag-height: 24px;
 $--select-tag-color: $--color-white;
@@ -274,7 +274,7 @@ $--message-min-width: 380px;
 $--message-padding: 15px 15px 15px 20px;
 $--message-content-color: $--color-text-regular;
 $--message-close-color: $--color-text-placeholder;
-$--message-close-size: 12px;
+$--message-close-size: 14px;
 $--message-close-hover-color: $--color-text-secondary;
 
 $--message-success-color: $--color-success;
@@ -290,7 +290,7 @@ $--notification-raduis: 8px;
 $--notification-shadow: $--box-shadow-light;
 $--notification-border-color: $--border-color-lighter;
 $--notification-icon-size: 24px;
-$--notification-close-font-size: 12px;
+$--notification-close-font-size: $--message-close-size;
 $--notification-group-margin: 13px;
 $--notification-font-size: $--font-size-base;
 $--notification-color: $--color-text-regular;

packages/theme-chalk/src/date-picker/picker.scss

@@ -54,13 +54,14 @@
 
   .el-range-separator {
     display: inline-block;
+    width: 5%;
     height: 100%;
     padding: 0 5px;
     margin: 0;
+    text-align: center;
     line-height: 32px;
-    color: $--color-text-primary;
     font-size: 14px;
-    width: 5%;
+    color: $--color-text-primary;
   }
 
   .el-range__close-icon {

packages/theme-chalk/src/dialog.scss

@@ -45,7 +45,7 @@
     border: none;
     outline: none;
     cursor: pointer;
-    font-size: 12px;
+    font-size: $--message-close-size;
 
     .el-dialog__close {
       color: $--color-info;

packages/theme-chalk/src/icon.scss

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'element-icons';
-  src: url('fonts/element-icons.woff?t=1505459769526') format('woff'), /* chrome, firefox */
-       url('fonts/element-icons.ttf?t=1505459769526') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  src: url('fonts/element-icons.woff?t=1508313898411') format('woff'), /* chrome, firefox */
+       url('fonts/element-icons.ttf?t=1508313898411') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   font-weight: normal;
   font-style: normal
 }
@@ -23,56 +23,144 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.el-icon-arrow-down:before { content: "\e600"; }
-.el-icon-arrow-left:before { content: "\e601"; }
-.el-icon-arrow-right:before { content: "\e602"; }
-.el-icon-arrow-up:before { content: "\e603"; }
-.el-icon-caret-bottom:before { content: "\e604"; }
-.el-icon-caret-left:before { content: "\e605"; }
-.el-icon-caret-right:before { content: "\e606"; }
-.el-icon-caret-top:before { content: "\e607"; }
-.el-icon-check:before { content: "\e608"; }
-.el-icon-circle-check:before { content: "\e609"; }
-.el-icon-circle-close:before { content: "\e60a"; }
-.el-icon-circle-cross:before { content: "\e60b"; }
-.el-icon-close:before { content: "\e60c"; }
 .el-icon-upload:before { content: "\e60d"; }
-.el-icon-d-arrow-left:before { content: "\e60e"; }
-.el-icon-d-arrow-right:before { content: "\e60f"; }
-.el-icon-d-caret:before { content: "\e610"; }
-.el-icon-date:before { content: "\e611"; }
-.el-icon-delete:before { content: "\e612"; }
-.el-icon-document:before { content: "\e613"; }
-.el-icon-edit:before { content: "\e614"; }
-.el-icon-information:before { content: "\e615"; }
-.el-icon-loading:before { content: "\e616"; }
-.el-icon-menu:before { content: "\e617"; }
-.el-icon-message:before { content: "\e618"; }
-.el-icon-minus:before { content: "\e619"; }
-.el-icon-more:before { content: "\e61a"; }
-.el-icon-picture:before { content: "\e61b"; }
-.el-icon-plus:before { content: "\e61c"; }
-.el-icon-search:before { content: "\e61d"; }
-.el-icon-setting:before { content: "\e61e"; }
-.el-icon-share:before { content: "\e61f"; }
-.el-icon-star-off:before { content: "\e620"; }
-.el-icon-star-on:before { content: "\e621"; }
-.el-icon-time:before { content: "\e622"; }
-.el-icon-warning_default:before { content: "\e623"; }
-.el-icon-delete2:before { content: "\e624"; }
-.el-icon-upload2:before { content: "\e627"; }
-.el-icon-view:before { content: "\e626"; }
-.el-icon-circle-check-plain:before { content: "\e625"; }
-.el-icon-circle-cross-plain:before { content: "\e628"; }
-.el-icon-information-plain:before { content: "\e629"; }
-.el-icon-warning-plain:before { content: "\e62a"; }
-.el-icon-info:before { content: "\e62b"; }
+
 .el-icon-error:before { content: "\e62c"; }
+
 .el-icon-success:before { content: "\e62d"; }
+
 .el-icon-warning:before { content: "\e62e"; }
+
 .el-icon-sort-down:before { content: "\e630"; }
+
 .el-icon-sort-up:before { content: "\e631"; }
 
+.el-icon-arrow-left:before { content: "\e600"; }
+
+.el-icon-circle-plus:before { content: "\e601"; }
+
+.el-icon-circle-plus-outline:before { content: "\e602"; }
+
+.el-icon-arrow-down:before { content: "\e603"; }
+
+.el-icon-arrow-right:before { content: "\e604"; }
+
+.el-icon-arrow-up:before { content: "\e605"; }
+
+.el-icon-back:before { content: "\e606"; }
+
+.el-icon-circle-close:before { content: "\e607"; }
+
+.el-icon-date:before { content: "\e608"; }
+
+.el-icon-circle-close-outline:before { content: "\e609"; }
+
+.el-icon-caret-left:before { content: "\e60a"; }
+
+.el-icon-caret-bottom:before { content: "\e60b"; }
+
+.el-icon-caret-top:before { content: "\e60c"; }
+
+.el-icon-caret-right:before { content: "\e60e"; }
+
+.el-icon-close:before { content: "\e60f"; }
+
+.el-icon-d-arrow-left:before { content: "\e610"; }
+
+.el-icon-check:before { content: "\e611"; }
+
+.el-icon-delete:before { content: "\e612"; }
+
+.el-icon-d-arrow-right:before { content: "\e613"; }
+
+.el-icon-document:before { content: "\e614"; }
+
+.el-icon-d-caret:before { content: "\e615"; }
+
+.el-icon-edit-outline:before { content: "\e616"; }
+
+.el-icon-download:before { content: "\e617"; }
+
+.el-icon-goods:before { content: "\e618"; }
+
+.el-icon-search:before { content: "\e619"; }
+
+.el-icon-info:before { content: "\e61a"; }
+
+.el-icon-message:before { content: "\e61b"; }
+
+.el-icon-edit:before { content: "\e61c"; }
+
+.el-icon-location:before { content: "\e61d"; }
+
+.el-icon-loading:before { content: "\e61e"; }
+
+.el-icon-location-outline:before { content: "\e61f"; }
+
+.el-icon-menu:before { content: "\e620"; }
+
+.el-icon-minus:before { content: "\e621"; }
+
+.el-icon-bell:before { content: "\e622"; }
+
+.el-icon-moblie-phone:before { content: "\e624"; }
+
+.el-icon-news:before { content: "\e625"; }
+
+.el-icon-more:before { content: "\e626"; }
+
+.el-icon-phone:before { content: "\e627"; }
+
+.el-icon-phone-outline:before { content: "\e628"; }
+
+.el-icon-picture:before { content: "\e629"; }
+
+.el-icon-picture-outline:before { content: "\e62a"; }
+
+.el-icon-plus:before { content: "\e62b"; }
+
+.el-icon-printer:before { content: "\e62f"; }
+
+.el-icon-rank:before { content: "\e632"; }
+
+.el-icon-refresh:before { content: "\e633"; }
+
+.el-icon-question:before { content: "\e634"; }
+
+.el-icon-remove:before { content: "\e635"; }
+
+.el-icon-share:before { content: "\e636"; }
+
+.el-icon-star-on:before { content: "\e637"; }
+
+.el-icon-setting:before { content: "\e638"; }
+
+.el-icon-circle-check:before { content: "\e639"; }
+
+.el-icon-service:before { content: "\e63a"; }
+
+.el-icon-sold-out:before { content: "\e63b"; }
+
+.el-icon-remove-outline:before { content: "\e63c"; }
+
+.el-icon-star-off:before { content: "\e63d"; }
+
+.el-icon-circle-check-outline:before { content: "\e63e"; }
+
+.el-icon-tickets:before { content: "\e63f"; }
+
+.el-icon-sort:before { content: "\e640"; }
+
+.el-icon-zoom-in:before { content: "\e641"; }
+
+.el-icon-time:before { content: "\e642"; }
+
+.el-icon-view:before { content: "\e643"; }
+
+.el-icon-upload2:before { content: "\e644"; }
+
+.el-icon-zoom-out:before { content: "\e645"; }
+
 .el-icon-loading {
   animation: rotating 1s linear infinite;
 }

packages/theme-chalk/src/message-box.scss

@@ -57,7 +57,7 @@
     border: none;
     outline: none;
     background: transparent;
-    font-size: 12px;
+    font-size: $--message-close-size;
     cursor: pointer;
 
     .el-message-box__close {

packages/theme-chalk/src/notification.scss

@@ -65,19 +65,19 @@
     }
   }
 
-  & .el-icon-circle-check {
+  .el-icon-success {
     color: $--notification-success-color;
   }
 
-  & .el-icon-circle-cross {
+  .el-icon-error {
     color: $--notification-danger-color;
   }
 
-  & .el-icon-information {
+  .el-icon-info {
     color: $--notification-info-color;
   }
 
-  & .el-icon-warning {
+  .el-icon-warning {
     color: $--notification-warning-color;
   }
 }

packages/theme-chalk/src/select.scss

@@ -128,7 +128,7 @@
 
       &::before {
         display: block;
-        transform: scale(.65);
+        transform: translate(0, .5px);
       }
     }
   }

packages/theme-chalk/src/step.scss

@@ -91,7 +91,7 @@
 
     // 组件自身表示状态的图标
     @include when(status) {
-      transform: scale(.65) translateY(1px);
+      transform: translateY(1px);
     }
   }
 
@@ -256,7 +256,7 @@
       }
 
       &.is-status {
-        transform: scale(.5) translateY(1px);
+        transform: scale(.8) translateY(1px);
       }
     }
 

packages/theme-chalk/src/tabs.scss

@@ -105,7 +105,7 @@
       transition: all .3s cubic-bezier(.645,.045,.355,1);
       margin-left: 5px;
       &:before {
-        transform: scale(.7, .7);
+        transform: scale(.9);
         display: inline-block;
       }
 

packages/theme-chalk/src/tag.scss

@@ -20,7 +20,6 @@
     position: relative;
     cursor: pointer;
     font-size: 12px;
-    transform: scale(.75, .75);
     height: 18px;
     width: 18px;
     line-height: 18px;
@@ -31,7 +30,6 @@
 
     &::before {
       display: block;
-      transform: scale(.8);
     }
 
     &:hover {
@@ -142,7 +140,7 @@
 
     .el-icon-close {
       margin-left: -3px;
-      transform: scale(.65);
+      transform: scale(.7);
     }
   }
 }

packages/theme-chalk/src/upload.scss

@@ -149,7 +149,7 @@
       cursor: pointer;
       opacity: .75;
       color: $--color-text-regular;
-      transform: scale(.7);
+      //transform: scale(.7);
 
       &:hover {
         opacity: 1;
@@ -164,7 +164,7 @@
       cursor: pointer;
       opacity: 1;
       color: $--color-primary;
-      transform: translate(15%,0) scale(.7);
+      transform: translate(15%,0);
     }
     
     &:hover {
@@ -313,7 +313,7 @@
       i {
         font-size: 12px;
         margin-top: 11px;
-        transform: rotate(-45deg) scale(0.8);
+        transform: rotate(-45deg);
       }
     }
 
@@ -446,7 +446,7 @@
       i {
         font-size: 12px;
         margin-top: 12px;
-        transform: rotate(-45deg) scale(0.8);
+        transform: rotate(-45deg);
       }
     }
 
@@ -488,7 +488,7 @@
     i {
       font-size: 12px;
       margin-top: 11px;
-      transform: rotate(-45deg) scale(0.8);
+      transform: rotate(-45deg);
       color: #fff;
     }
   }