iov-design 2.15.20 → 2.15.22

package/packages/alert/src/main.vue

@@ -13,7 +13,7 @@
         </span>
         <p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
         <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
-        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
+        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'iov-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
       </div>
     </div>
   </transition>
@@ -21,9 +21,9 @@
 
 <script type="text/babel">
   const TYPE_CLASSES_MAP = {
-    'success': 'el-icon-success',
-    'warning': 'el-icon-warning',
-    'error': 'el-icon-error'
+    'success': 'iov-icon-fill-success',
+    'warning': 'iov-icon-fill-warning',
+    'error': 'iov-icon-fill-fail'
   };
   export default {
     name: 'ElAlert',
@@ -79,7 +79,7 @@
       },
 
       iconClass() {
-        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
+        return TYPE_CLASSES_MAP[this.type] || 'iov-icon-fill-explain';
       },
 
       isBigIcon() {

package/packages/input/src/input.vue

@@ -22,6 +22,7 @@
         <slot name="prepend"></slot>
       </div>
       <div class="el-input-group__inner" :class="{
+          'is-disabled': inputDisabled,
           'el-input-group--prefix': $slots.prefixLabel,
           'el-input-group--suffix': $slots.suffixLabel,
           'is-focus': ($slots.suffixLabel || $slots.prefixLabel) && focused

package/packages/select/src/select.vue

@@ -677,14 +677,14 @@
           // 兼容input组件多加了一层el-input-group__inner
           Array.from(inputChildNodes).find(child => {
             if (child && child.classList && child.classList.contains('el-input-group__inner')) {
-              inputChildNodes = child.childNodes;
+              inputChildNodes = child;
             }
           });
-          let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
+          // let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
           const tags = this.$refs.tags;
           const tagsHeight = tags ? Math.round(tags.getBoundingClientRect().height) : 0;
-          const sizeInMap = this.initialInputHeight || 40;
-          input.style.height = this.selected.length === 0
+          const sizeInMap = this.initialInputHeight || 36;
+          inputChildNodes.style.height = this.selected.length === 0
             ? sizeInMap + 'px'
             : Math.max(
               tags ? (tagsHeight + (tagsHeight > sizeInMap ? 6 : 0)) : 0,
@@ -907,11 +907,11 @@
       const reference = this.$refs.reference;
       if (reference && reference.$el) {
         const sizeMap = {
-          medium: 36,
-          small: 32,
-          mini: 28
+          medium: 32,
+          small: 30,
+          mini: 26
         };
-        const input = reference.$el.querySelector('input');
+        const input = reference.$el;
         this.initialInputHeight = input.getBoundingClientRect().height || sizeMap[this.selectSize];
       }
       if (this.remote && this.multiple) {

package/packages/theme-chalk/src/alert.scss

@@ -17,7 +17,10 @@
 
   @include when(light) {
     .el-alert__closebtn {
-      color: $--color-text-placeholder;
+      color: $--color-fill-4;
+      &:hover {
+        color: $--color-fill-6;
+      }
     }
   }
 
@@ -36,74 +39,74 @@
 
   @include m(success) {
     &.is-light {
-      background-color: $--alert-success-color;
-      color: $--color-success;
-
-      .el-alert__description {
-        color: $--color-success;
+      background-color: $--color-success-1;
+      border: 1px solid $--color-success-2;
+      color: $--color-text-6;
+      .el-alert__icon {
+        color: $--color-success-6;
       }
     }
 
     &.is-dark {
-      background-color: $--color-success;
+      background-color: $--color-success-6;
       color: $--color-white;
     }
   }
 
   @include m(info) {
     &.is-light {
-      background-color: $--alert-info-color;
-      color: $--color-info;
+      background-color: $--color-primary-1;
+      border: 1px solid $--color-primary-2;
+      color: $--color-text-6;
+      .el-alert__icon {
+        color: $--color-primary-6;
+      }
     }
 
     &.is-dark {
-      background-color: $--color-info;
+      background-color: $--color-primary-6;
       color: $--color-white;
     }
-
-    .el-alert__description {
-      color: $--color-info;
-    }
   }
 
   @include m(warning) {
     &.is-light {
-      background-color: $--alert-warning-color;
-      color: $--color-warning;
-
-      .el-alert__description {
-        color: $--color-warning;
+      background-color: $--color-warning-1;
+      border: 1px solid $--color-warning-2;
+      color: $--color-text-6;
+      .el-alert__icon {
+        color: $--color-warning-6;
       }
     }
 
     &.is-dark {
-      background-color: $--color-warning;
+      background-color: $--color-warning-6;
       color: $--color-white;
     }
   }
 
   @include m(error) {
     &.is-light {
-      background-color: $--alert-danger-color;
-      color: $--color-danger;
-
-      .el-alert__description {
-        color: $--color-danger;
+      background-color: $--color-danger-1;
+      border: 1px solid $--color-danger-2;
+      color: $--color-text-6;
+      .el-alert__icon {
+        color: $--color-danger-6;
       }
     }
 
     &.is-dark {
-      background-color: $--color-danger;
+      background-color: $--color-danger-6;
       color: $--color-white;
     }
   }
 
   @include e(content) {
     display: table-cell;
-    padding: 0 8px;
   }
 
   @include e(icon) {
+    margin-right: 8px;
     font-size: $--alert-icon-size;
     width: $--alert-icon-size;
     @include when(big) {
@@ -114,15 +117,16 @@
 
   @include e(title) {
     font-size: $--alert-title-font-size;
-    line-height: 18px;
     @include when(bold) {
-      font-weight: bold;
+      font-weight: 500;
     }
   }
 
   & .el-alert__description {
     font-size: $--alert-description-font-size;
     margin: 5px 0 0 0;
+    color: $--color-text-6;
+    font-weight: 400;
   }
 
   @include e(closebtn) {
@@ -130,13 +134,13 @@
     opacity: 1;
     position: absolute;
     top: 12px;
-    right: 15px;
+    right: 12px;
     cursor: pointer;
 
     @include when(customed) {
       font-style: normal;
       font-size: $--alert-close-customed-font-size;
-      top: 9px;
+      top: 11px;
     }
   }
 }

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

@@ -280,26 +280,19 @@ $--select-dropdown-border: solid 0.5px $--color-line-2 !default;
 
 /* Alert
 -------------------------- */
-$--alert-padding: 8px 16px !default;
-/// borderRadius||Border|2
-$--alert-border-radius: $--border-radius-base !default;
-/// fontSize||Font|1
-$--alert-title-font-size: 13px !default;
-/// fontSize||Font|1
+$--alert-padding: 11px 12px !default;
+$--alert-border-radius: 4px !default;
+$--alert-title-font-size: 12px !default;
 $--alert-description-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-font-size: 12px !default;
-/// fontSize||Font|1
-$--alert-close-customed-font-size: 13px !default;
+$--alert-close-font-size: 14px !default;
+$--alert-close-customed-font-size: 12px !default;
 
 $--alert-success-color: $--color-success-lighter !default;
 $--alert-info-color: $--color-info-lighter !default;
 $--alert-warning-color: $--color-warning-lighter !default;
 $--alert-danger-color: $--color-danger-lighter !default;
 
-/// height||Other|4
 $--alert-icon-size: 16px !default;
-/// height||Other|4
 $--alert-icon-large-size: 28px !default;
 
 /* MessageBox

package/packages/theme-chalk/src/input.scss

@@ -241,7 +241,7 @@
     }
     .el-input__prefix,
     .el-input__suffix,
-    // .el-input-group__prefix-label,
+    .el-input-group__prefix-label,
     .el-input-group__suffix-label {
       background-color: $--input-disabled-fill;
     }

package/packages/theme-chalk/src/link.scss

@@ -14,11 +14,6 @@ $typeMap: (
 );
 
 @include b(link) {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
   position: relative;
   text-decoration: none;
   outline: none;

package/packages/theme-chalk/src/radio.scss

@@ -64,12 +64,13 @@
     box-sizing: border-box;
     transition: border-color ease .3s;
     overflow: hidden;
+    background: #fff;
     .el-radio__input {
       float: left;
       font-size: 0;
       &.is-checked {
         & + .el-radio__label {
-          color: $--color-text-6;
+          color: $--color-primary-6;
         }
       }
     }
@@ -97,8 +98,8 @@
 
 
     &.is-disabled {
-      background: $--color-fill-1;
-      border-color: $--color-line-2;
+      background: $--color-primary-1;
+      border-color: $--color-primary-2;
       .el-radio__label {
         color: $--color-text-3;
       }
@@ -121,13 +122,13 @@
         right: -1px;
       }
       &.is-disabled {
+        border-color: $--color-primary-6;
         background: $--color-primary-1;
-        border-color: $--color-primary-2;
-        &:after {
-          opacity: .25;
-        }
+        // &:after {
+        //   opacity: .25;
+        // }
         .el-radio__label {
-          color: $--color-text-3;
+          color: $--color-primary-6;
         }
       }
     }

package/src/index.js

@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.20',
+  version: '2.15.22',
   locale: locale.use,
   i18n: locale.i18n,
   install,