iov-design 2.15.44 → 2.15.46

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

@@ -1,207 +1,207 @@
-@import "mixins/mixins";
-@import "common/var";
-@import "common/popup";
-@import "button";
-@import "input";
-
-@include b(message-box) {
-  display: inline-block;
-  width: 480px;
-  background: #fff;
-  border-radius: 8px;
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-
-  @include e(wrapper) {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    text-align: center;
-
-    &::after {
-      content: "";
-      display: inline-block;
-      height: 100%;
-      width: 0;
-      vertical-align: middle;
-    }
-  }
-
-  @include e(header) {
-    position: relative;
-    padding: 16px 24px;
-    border-bottom: 1px solid $--color-line-1;
-  }
-
-  @include e(title) {
-    padding-left: 0;
-    margin-bottom: 0;
-    font-size: 16px;
-    line-height: 1;
-    color: $--color-text-6;
-    span {
-      font-weight: 500;
-    }
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: 50%;
-    right: 20px;
-    padding: 4px;
-    cursor: pointer;
-    font-size: 0;
-    margin-top: -12px;
-    transition: all ease .3s;
-    border-radius: 4px;
-
-    .el-message-box__close {
-      font-size: 16px;
-      color: $--color-fill-5;
-    }
-
-    &:focus, &:hover {
-      background: $--color-fill-1;
-      .el-message-box__close {
-        color: $--color-fill-6;
-      }
-    }
-
-  }
-
-  @include e(content) {
-    padding: 16px 24px 0;
-    color: $--color-text-6;
-    font-size: 13px;
-    line-height: 20px;
-  }
-
-  @include e(container) {
-    position: relative;
-    overflow: hidden;
-  }
-
-  @include e(input) {
-    padding-top: 4px;
-    & input.invalid {
-      border-color: $--color-danger;
-      &:focus {
-        border-color: $--color-danger;
-      }
-    }
-  }
-
-  @include e(status) {
-    margin-right: 8px;
-    font-size: 24px !important;
-    float: left;
-
-    + .el-message-box__message {
-      padding-top: 2px;
-      overflow: hidden;
-    }
-
-    &.iov-icon-fill-success {
-      color: $--color-success-6;
-    }
-
-    &.iov-icon-fill-explain {
-      color: $--color-primary-6;
-    }
-
-    &.iov-icon-fill-warning {
-      color: $--color-warning-6;
-    }
-
-    &.iov-icon-fill-fail {
-      color: $--color-danger-6;
-    }
-  }
-
-  @include e(message) {
-    margin: 0;
-
-    & p {
-      margin: 0;
-      line-height: 20px;
-    }
-  }
-
-  @include e(errormsg) {
-    color: $--color-danger-6;
-    font-size: 12px;
-    min-height: 18px;
-    margin-top: 2px;
-  }
-
-  @include e(btns) {
-    padding: 16px 24px 20px;
-    text-align: right;
-
-    & button:nth-child(2) {
-      margin-left: 10px;
-    }
-  }
-
-  @include e(btns-reverse) {
-    flex-direction: row-reverse;
-  }
-
-  // centerAlign 布局
-  @include m(title-icon) {
-    @include e(header) {
-      padding: 24px 24px 0;
-      border-bottom: 0 none;
-    }
-    @include e(title) {
-      display: flex;
-      align-items: center;
-    }
-    @include e(status) {
-      float: none;
-    }
-    @include e(content) {
-      padding-top: 8px;
-      color: $--color-text-3;
-    }
-    @include e(message) {
-      padding-left: 32px;
-      &.no-type {
-        padding-left: 0;
-      }
-    }
-  }
-}
-
-.msgbox-fade-enter-active {
-  animation: msgbox-fade-in .3s;
-}
-
-.msgbox-fade-leave-active {
-  animation: msgbox-fade-out .3s;
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes msgbox-fade-out {
-  0% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-  100% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-}
+@import "mixins/mixins";
+@import "common/var";
+@import "common/popup";
+@import "button";
+@import "input";
+
+@include b(message-box) {
+  display: inline-block;
+  width: 480px;
+  background: #fff;
+  border-radius: 8px;
+  text-align: left;
+  overflow: hidden;
+  backface-visibility: hidden;
+
+  @include e(wrapper) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    text-align: center;
+
+    &::after {
+      content: "";
+      display: inline-block;
+      height: 100%;
+      width: 0;
+      vertical-align: middle;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    padding: 16px 24px;
+    border-bottom: 1px solid $--color-line-1;
+  }
+
+  @include e(title) {
+    padding-left: 0;
+    margin-bottom: 0;
+    font-size: 16px;
+    line-height: 1;
+    color: $--color-text-6;
+    span {
+      font-weight: 500;
+    }
+  }
+
+  @include e(headerbtn) {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    padding: 4px;
+    cursor: pointer;
+    font-size: 0;
+    margin-top: -12px;
+    transition: all ease .3s;
+    border-radius: 4px;
+
+    .el-message-box__close {
+      font-size: 16px;
+      color: $--color-fill-5;
+    }
+
+    &:focus, &:hover {
+      background: $--color-fill-1;
+      .el-message-box__close {
+        color: $--color-fill-6;
+      }
+    }
+
+  }
+
+  @include e(content) {
+    padding: 16px 24px 0;
+    color: $--color-text-6;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  @include e(container) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e(input) {
+    padding-top: 4px;
+    & input.invalid {
+      border-color: $--color-danger;
+      &:focus {
+        border-color: $--color-danger;
+      }
+    }
+  }
+
+  @include e(status) {
+    margin-right: 8px;
+    font-size: 24px !important;
+    float: left;
+
+    + .el-message-box__message {
+      padding-top: 2px;
+      overflow: hidden;
+    }
+
+    &.iov-icon-fill-success {
+      color: $--color-success-6;
+    }
+
+    &.iov-icon-fill-explain {
+      color: $--color-primary-6;
+    }
+
+    &.iov-icon-fill-warning {
+      color: $--color-warning-6;
+    }
+
+    &.iov-icon-fill-fail {
+      color: $--color-danger-6;
+    }
+  }
+
+  @include e(message) {
+    margin: 0;
+
+    & p {
+      margin: 0;
+      line-height: 20px;
+    }
+  }
+
+  @include e(errormsg) {
+    color: $--color-danger-6;
+    font-size: 12px;
+    min-height: 18px;
+    margin-top: 2px;
+  }
+
+  @include e(btns) {
+    padding: 16px 24px 20px;
+    text-align: right;
+
+    & button:nth-child(2) {
+      margin-left: 10px;
+    }
+  }
+
+  @include e(btns-reverse) {
+    flex-direction: row-reverse;
+  }
+
+  // centerAlign 布局
+  @include m(title-icon) {
+    @include e(header) {
+      padding: 24px 24px 0;
+      border-bottom: 0 none;
+    }
+    @include e(title) {
+      display: flex;
+      align-items: center;
+    }
+    @include e(status) {
+      float: none;
+    }
+    @include e(content) {
+      padding-top: 8px;
+      color: $--color-text-3;
+    }
+    @include e(message) {
+      padding-left: 32px;
+      &.no-type {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+.msgbox-fade-enter-active {
+  animation: msgbox-fade-in .3s;
+}
+
+.msgbox-fade-leave-active {
+  animation: msgbox-fade-out .3s;
+}
+
+@keyframes msgbox-fade-in {
+  0% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes msgbox-fade-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, -20px, 0);
+    opacity: 0;
+  }
+}

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

@@ -2,22 +2,21 @@
 @import "common/var";
 
 @include b(message) {
-  min-width: $--message-min-width;
+  min-width: 204px;
   box-sizing: border-box;
-  border-radius: $--border-radius-base;
-  border-width: $--border-width-base;
-  border-style: $--border-style-base;
-  border-color: $--border-color-lighter;
+  border-radius: 4px;
+  border: 1px solid $--color-line-2;
   position: fixed;
   left: 50%;
-  top: 20px;
+  top: 46px;
   transform: translateX(-50%);
-  background-color: $--message-background-color;
+  background-color: #fff;
   transition: opacity 0.3s, transform .4s, top 0.4s;
   overflow: hidden;
-  padding: $--message-padding;
+  padding: 13px 16px;
   display: flex;
   align-items: center;
+  box-shadow: 0 4px 18px 0 rgba(73,75,83,0.1);
 
   @include when(center) {
     justify-content: center;
@@ -25,7 +24,7 @@
 
   @include when(closable) {
     .el-message__content {
-      padding-right: 16px;
+      padding-right: 24px;
     }
   }
 
@@ -35,45 +34,37 @@
 
   @include m(info) {
     .el-message__content {
-      color: $--message-info-font-color;
+      color: $--color-text-6;
     }
   }
 
   @include m(success) {
-    background-color: $--color-success-lighter;
-    border-color: $--color-success-light;
-
     .el-message__content {
-      color: $--message-success-font-color;
+      color: $--color-text-6;
     }
   }
 
   @include m(warning) {
-    background-color: $--color-warning-lighter;
-    border-color: $--color-warning-light;
-
     .el-message__content {
-      color: $--message-warning-font-color;
+      color: $--color-text-6;
     }
   }
 
   @include m(error) {
-    background-color: $--color-danger-lighter;
-    border-color: $--color-danger-light;
-
     .el-message__content {
-      color: $--message-danger-font-color;
+      color: $--color-text-6;
     }
   }
 
   @include e(icon) {
-    margin-right: 10px;
+    margin-right: 8px;
+    font-size: 16px;
   }
 
   @include e(content) {
     padding: 0;
-    font-size: 14px;
-    line-height: 1;
+    font-size: 13px;
+    line-height: 16px;
     &:focus {
       outline-width: 0;
     }
@@ -82,34 +73,34 @@
   @include e(closeBtn) {
     position: absolute;
     top: 50%;
-    right: 15px;
+    right: 16px;
     transform: translateY(-50%);
     cursor: pointer;
-    color: $--message-close-icon-color;
-    font-size: $--message-close-size;
+    color: $--color-fill-5;
+    font-size: 14px;
 
     &:focus {
       outline-width: 0;
     }
     &:hover {
-      color: $--message-close-hover-color;
+      color: $--color-fill-6;
     }
   }
 
-  & .el-icon-success {
-    color: $--message-success-font-color;
+  .iov-icon-fill-success {
+    color: $--color-success-6;
   }
 
-  & .el-icon-error {
-    color: $--message-danger-font-color;
+  .iov-icon-fill-explain {
+    color: $--color-primary-6;
   }
 
-  & .el-icon-info {
-    color: $--message-info-font-color;
+  .iov-icon-fill-warning {
+    color: $--color-warning-6;
   }
 
-  & .el-icon-warning {
-    color: $--message-warning-font-color;
+  .iov-icon-fill-fail {
+    color: $--color-danger-6;
   }
 }
 

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

@@ -212,6 +212,7 @@
       padding-left: 16px;
       padding-right: 16px;
       width: 100%;
+      font-weight: 500;
 
       &.highlight {
         color: $--color-primary;