iov-design 2.15.45 → 2.15.47

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

@@ -280,44 +280,11 @@ $--select-dropdown-border: solid 0.5px $--color-line-2 !default;
 
 /* Alert
 -------------------------- */
-$--alert-padding: 11px 12px !default;
-$--alert-border-radius: 4px !default;
-$--alert-title-font-size: 12px !default;
-$--alert-description-font-size: 12px !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;
-
-$--alert-icon-size: 16px !default;
-$--alert-icon-large-size: 28px !default;
 
 /* MessageBox
 
 /* Message
 -------------------------- */
-$--message-shadow: $--box-shadow-base !default;
-$--message-min-width: 380px !default;
-$--message-background-color: #edf2fc !default;
-$--message-padding: 15px 15px 15px 20px !default;
-/// color||Color|0
-$--message-close-icon-color: $--color-text-placeholder !default;
-/// height||Other|4
-$--message-close-size: 16px !default;
-/// color||Color|0
-$--message-close-hover-color: $--color-text-secondary !default;
-
-/// color||Color|0
-$--message-success-font-color: $--color-success !default;
-/// color||Color|0
-$--message-info-font-color: $--color-info !default;
-/// color||Color|0
-$--message-warning-font-color: $--color-warning !default;
-/// color||Color|0
-$--message-danger-font-color: $--color-danger !default;
 
 /* Notification
 -------------------------- */
@@ -329,7 +296,7 @@ $--notification-shadow: $--box-shadow-light !default;
 /// color||Color|0
 $--notification-border-color: $--border-color-lighter !default;
 $--notification-icon-size: 24px !default;
-$--notification-close-font-size: $--message-close-size !default;
+$--notification-close-font-size: 14px !default;
 $--notification-group-margin-left: 13px !default;
 $--notification-group-margin-right: 8px !default;
 /// fontSize||Font|1

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

@@ -10,13 +10,22 @@
   border-radius: 8px;
   box-sizing: border-box;
   width: 50%;
+  transform: translateY(-50%);
 
   @include when(fullscreen) {
     width: 100%;
-    margin-top: 0;
+    top: 0;
     margin-bottom: 0;
     height: 100%;
     overflow: auto;
+    transform: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .el-dialog__body {
+      flex: 1;
+      max-height: none;
+    }
   }
 
   @include e(wrapper) {
@@ -33,6 +42,10 @@
     padding: $--dialog-padding;
     position: relative;
     border-bottom: 1px solid $--color-line-1;
+    height: 54px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
   }
 
   @include e(headerbtn) {
@@ -79,22 +92,23 @@
   }
 
   @include e(footer) {
-    padding: 16px 24px 20px 0;
+    padding: 16px 24px 20px;
     text-align: right;
     box-sizing: border-box;
     font-size: 0;
+    &.el-dialog__footer--shadow {
+      box-shadow: 0 0 12px 0 rgba(196, 198, 207, 0.21);
+    }
   }
 
-  // 内容居中布局
   @include m(center) {
-    text-align: center;
 
     @include e(body) {
-      text-align: initial;
+      text-align: left;
     }
 
     @include e(footer) {
-      text-align: inherit;
+      text-align: center;
     }
   }
 }

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'iovfont';  /* Project id 4466910 */
-  src: url('//at.alicdn.com/t/c/font_4466910_05nzvw64idz7.woff2?t=1746691225503') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4466910_05nzvw64idz7.woff?t=1746691225503') format('woff'),
-       url('//at.alicdn.com/t/c/font_4466910_05nzvw64idz7.ttf?t=1746691225503') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff2?t=1750820266142') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.woff?t=1750820266142') format('woff'),
+       url('//at.alicdn.com/t/c/font_4466910_8y5kjsv7pqg.ttf?t=1750820266142') format('truetype');
 }
 
 [class^="iov-icon-"], [class*=" iov-icon-"] {

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;
   }
 }